dd_pc/src/views/common/below/rewardTaskAmend.vue

<template>
  <div>
    <!-- 悬赏任务弹窗 -->
    <el-dialog
      :title="showTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="closeDialog"
      width="600px">
      <div v-loading="forTheTaskLoading">
        <el-form :model="formData" ref="formData" label-width="80px">
          <el-form-item label="任务内容" prop="task_name" :rules="[{ required: true, message: '请填写任务内容', trigger: 'blur' },{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }]">
            <el-input type="textarea" rows="2" v-model="formData.task_name" placeholder="请输入任务内容(限20字)" class="reward_textarea" ></el-input>
          </el-form-item>

          <el-form-item label="任务积分" prop="base_point" :rules="[{ required: true, message: '请填写任务积分', trigger: 'blur' }]">
            <el-input-number v-model="formData.base_point" :min="1" ></el-input-number>
          </el-form-item>

          <!-- <el-form-item label="执行人" v-if="formData.task_cycle == 0" prop="targets" :rules="[{ required: true, message: '请选择执行人', trigger: 'change' }]">
            <el-row>
              <el-col :span="18">
                <el-input auto-complete="off" v-model="executorName" placeholder="请选择执行人"></el-input>
                <div @click="show_approval_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
              </el-col>
            </el-row>
            <EmployeeSelector
              :employee_not_select="approval_not_select"
              :employee_list="employee_list"
              :isChecKedAll="true"
              :can_select_employee="true"
              :can_select_dept="false"
              :multi="true"
              :selected="approval_selected"
              :visible.sync="show_approval_selector"
              @confirm="approval_confirm"/>
          </el-form-item> -->
          <el-form-item label="审批人" prop="reviewer_id" :rules="[{ required: true, message: '请选择审批人', trigger: 'change' }]">
            <el-row>
              <el-col :span="18">
                <el-input auto-complete="off" v-model="reviewerName" placeholder="请选择审批人"></el-input>
                <div @click="show_reviewer_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
              </el-col>
            </el-row>
            <!-- <EmployeeSelector
              :employee_not_select="reviewer_not_select"
              :employee_list="reviewer_employee_list"
              :can_select_employee="true"
              :can_select_dept="false"
              :multi="false"
              :selected="reviewer_selected"
              :visible.sync="show_reviewer_selector"
              @confirm="reviewer_confirm"/> -->
              
						<el-dialog title="选择审批人" width="640px" :visible.sync="show_reviewer_selector" append-to-body :before-close="handleClose">
							<EmployeeSelector
								v-if="show_reviewer_selector"
								ref="members"
                :multi="false"
								:isCreatorSelect="false"
								:employee_list="reviewer_employee_list"
								:can_select_dept="false"
                :use_Administrator_list="true"
								:selected="reviewer_selected"
								@confirm="reviewer_confirm"
							/>
							<span slot="footer" class="dialog-footer">
								<el-button @click="show_reviewer_selector = false">取 消</el-button>
								<el-button type="primary" @click="submitMembers('members')">确 定</el-button>
							</span>
						</el-dialog>

          </el-form-item>

          <el-form-item label="积分类型" prop="pt_id" :rules="[{ required: true, message: '请选择积分类型', trigger: 'blur' }]">
            <el-radio-group v-model="formData.pt_id" >
              <el-radio v-for="(item,index) in point_types" :key="index" v-show="item.code !== 'JX'" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>            
          </el-form-item>

          <el-form-item label="截止日期" prop="expire_time" v-if="formData.task_cycle == 0" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
            <el-date-picker
              v-model="formData.expire_time"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              default-time="18:00"
              >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 1" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
            <el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
              <el-option
                v-for="item in columns1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 2" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
            <el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
              <el-option
                v-for="item in columns2"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 3" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
            <el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
              <el-option
                v-for="item in columns3"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="任务描述" prop="task_remark" :rules="[{ max: 100 ,message: '长度不能超过 100 个字', trigger: 'blur' }]">
            <el-input type="textarea" :rows="5" v-model="formData.task_remark" placeholder="请输入任务内容(限100字)"></el-input>
          </el-form-item>
          <!-- <el-form-item label="重复周期" prop="task_cycle">
            <el-select v-model="formData.task_cycle" placeholder="请选择重复周期">
              <el-option v-for="(item,index) in task_cycle_arr" :key="index" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="谁可以看" prop="dept_ids">
            <!-- <el-row>
              <el-col :span="18">
                <el-input auto-complete="off" v-model="deptVisibleName" placeholder="请选中部门的人可领取"></el-input>
                <div @click="show_employee_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
              </el-col>
            </el-row> -->
            <!-- <EmployeeSelector
              :employee_not_select="dept_not_select"
              :employee_list="dept_employee_list"
              :isChecKedAll="false"
              :can_select_employee="false"
              :can_select_dept="true"
              :multi="true"
              :selected="dept_selected"
              :visible.sync="show_employee_selector"
              @confirm="dept_confirm"/> -->
						
            <el-cascader
              size="medium"
              class="date-picker-width"
              v-model="dept_name" 
              @change="handleChange"
              :options="dept_tree"
              collapse-tags
              :props="{ checkStrictly: true,value:'id',label:'name',multiple: true, children:'_child'}"
              ref="depts"
              clearable
              placeholder="全公司"
            ></el-cascader><span style="color:#b5b7bb;padding-left:10px;">选中的部门可查看或领取任务</span>

          </el-form-item>

          <div style="margin-left: 80px; margin-bottom: 8px;">以天为单位，每逾期一天扣分</div>
          <el-form-item label="逾期扣分" prop="timeout_deduction_point">
            <el-input v-model="formData.timeout_deduction_point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数值"></el-input>
          </el-form-item> 

          <el-form-item>
            <el-button type="primary" @click="sub('formData')">确认修改</el-button>
            <el-button @click="resetForm('formData')">取消</el-button>
          </el-form-item>
          
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import EmployeeSelector from '@/components/EmployeeSelector.vue'
  export default {
    name: 'bonusPoints',
    props:{
      rewardTaskAmendData: {
        type: Object,
      },
      employee_not_select: {
        type: Array,
        default: () => {
          return []
        }
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      showTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dept_name: [],
        dept_tree: [],
        forTheTaskLoading:false,
        formData: {
          id:0,
          task_type: '1',
          pt_id: 2,
          task_name: '',
          task_remark: '',
          base_point: '',
          expire_time: moment().format('YYYY-MM-DD 18:00'),
          task_expire_day: '',
          targets: [],
          reviewer_id: '',
          task_cycle: 0,
          timeout_deduction_point: null,
          dept_ids: null
        },
        point_types: [],
        // 执行者
        // executorName: null,
        // show_approval_selector: false,
        // approval_selected: {dept: [],employee:[]},
        // approval_not_select: [],
        // employee_list: this.$store.getters.user_info.employee_detail.manage_scope,
        // 审批人
        reviewerName: null,
        reviewer_not_select: [],
        reviewer_employee_list: [],
        reviewer_selected: {dept: [],employee:[]},
        show_reviewer_selector: false,

        // 重复周期
        task_cycle_arr: [
          {value:  0, name: '不重复'}, 
          {value:  1, name: '每天重复'}, 
          {value:  2, name: '每周重复'}, 
          {value:  3, name: '每月重复'}
        ],
        // 周期时间
        columns1: [{name:'01:00', value: 1}, {name:'02:00', value: 2}, {name:'03:00', value: 3}, {name:'04:00', value: 4}, {name:'05:00', value: 5}, {name:'06:00', value: 6}, {name:'07:00', value: 7}, {name:'08:00', value: 8}, {name:'09:00', value: 9}, {name:'10:00', value: 10}, {name:'11:00', value: 11}, {name:'12:00', value: 12}, {name:'13:00', value: 13}, {name:'14:00', value: 14}, {name:'15:00', value: 15}, {name:'16:00', value: 16}, {name:'17:00', value: 17}, {name:'18:00', value: 18}, {name:'19:00', value: 19}, {name:'20:00', value: 20}, {name:'21:00', value: 21}, {name:'22:00', value: 22}, {name:'23:00', value: 23}, {name:'24:00', value: 24}],
        columns2: [{name: '周一', value: 1}, {name: '周二', value: 2}, {name: '周三', value: 3}, {name: '周四', value: 4}, {name: '周五', value: 5}, {name: '周六', value: 6}, {name: '周日', value: 7}],
        columns3: [{name:'1号', value: 1},{name:'2号', value: 2},{name:'3号', value: 3},{name:'4号', value: 4},{name:'5号', value: 5},{name:'6号', value: 6},{name:'7号', value: 7},{name:'8号', value: 8},{name:'9号', value: 9},{name:'10号', value: 10},{name:'11号', value: 11},{name:'12号', value: 12},{name:'13号', value: 13},{name:'14号', value: 14},{name:'15号', value: 15},{name:'16号', value: 16},{name:'17号', value: 17},{name:'18号', value: 18},{name:'19号', value: 19},{name:'20号', value: 20},{name:'21号', value: 21},{name:'22号', value: 22},{name:'23号', value: 23},{name:'24号', value: 24},{name:'25号', value: 25},{name:'26号', value: 26},{name:'27号', value: 27},{name:'28号', value: 28},{name:'29号', value: 29},{name:'30号', value: 30},{name:'31号', value: 31}],

        // 部门可见
        deptVisibleName: null,
        dept_not_select: [],
        dept_employee_list: [],
        dept_selected: {dept: [],employee:[]},
        show_employee_selector: false,
        chapterArr:[],

        oneruleId:[],
        echoGather:[],
      }
    },
    components: {EmployeeSelector},
    watch:{
      'formData.task_cycle'(val){
        if (val) {
          this.formData.task_expire_day = 1
        }else{
          this.formData.expire_time = moment().format('YYYY-MM-DD 18:00')
        }
      },
      rewardTaskAmendData(){
        this.formData.id = this.rewardTaskAmendData.id//任务id
        this.formData.pt_id = this.rewardTaskAmendData.pt_id//积分种类id
        this.formData.task_name = this.rewardTaskAmendData.task_name//任务名
        this.formData.task_remark = this.rewardTaskAmendData.task_remark//任务详细描述
        this.formData.base_point = this.rewardTaskAmendData.point_config.base_point//任务参考积分
        this.formData.expire_time = this.rewardTaskAmendData.expire_time//截至时间 
        this.reviewerName = this.rewardTaskAmendData.reviewer_name//审批者id

        this.formData.reviewer_id = this.rewardTaskAmendData.reviewer_id
        this.reviewer_selected.employee = [{id: this.rewardTaskAmendData.reviewer_id ,img_url:this.rewardTaskAmendData.img_url,name: this.rewardTaskAmendData.reviewer_name}]
        
        if(this.rewardTaskAmendData.point_config.timeout_deduction_point != '0'){//逾期扣分/月
          this.formData.timeout_deduction_point = this.rewardTaskAmendData.point_config.timeout_deduction_point
        }else{
          this.formData.timeout_deduction_point = ''
        }
        let department_infoName = ''
        // avatar: "static/images/e66f.jpg"
        // dept_id: 462
        // dept_name: "技术部"
        let deptIDs = []
        this.dept_selected = {dept: [],employee:[]}
        for(let i in this.rewardTaskAmendData.department_info){
          deptIDs.push(this.rewardTaskAmendData.department_info[i].id)
          let department_infoDept = {}
          department_infoDept.dept_id = this.rewardTaskAmendData.department_info[i].id
          department_infoDept.dept_name = this.rewardTaskAmendData.department_info[i].name
          department_infoDept.avatar = "static/images/e66f.jpg"
          this.dept_selected.dept.push(department_infoDept)
          // department_infoName.push(this.rewardTaskAmendData.department_info[i].name)
          department_infoName+=this.rewardTaskAmendData.department_info[i].name+','
        }
        this.deptVisibleName = department_infoName
        this.formData.dept_ids = deptIDs//可见范围
        
        let deptIDdata = deptIDs
        for(let i in deptIDdata){
           this.getTreeDatas(this.dept_tree,deptIDdata[i]);
        }
        this.dept_name = this.echoGather
      }
    },
    mounted() {
      this.point_types = JSON.parse(localStorage.getItem('types'))
		  this.getDepartment();
    },
    methods: {
      // getCascaderObj(val,opt) {
      //   var thisVue=this
      //   return val.map(function (value) {
      //     for (var itm of opt) {
      //       if (itm.id == value) {
      //         // console.log("成功匹配")
      //         thisVue.chapterArr.unshift(itm.id)
      //         // console.log("第二步找父级。。。")
      //         // console.log("parentId:"+itm.parentId)
      //         // thisVue.getCascaderObj([itm.parentId],thisVue.$store.state.selectorMod.contentChas)
      //         return
      //       }else{
      //         if(thisVue.isHasChid(itm)){
      //           thisVue.getCascaderObj(val,itm.childs)
      //         }
      //       }
      //     }
      //     return null;
      //   });
      // },
      handleChange(val){
        let data = []
        for(let i in val){
          data.push(val[i][val[i].length -1])
          // console.log(val[i][val[i].length -1])
        }
        this.formData.dept_ids = data
      },

      submitMembers(name) {
        this.$refs[name].confirm(); //调用组件的confirm（）；
      },
      //关闭
      handleClose(done) {
        done();
      },
      sub(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveFun(formName)
          }
        });
      },
      resetForm(formName){
        this.echoGather = []
        this.$emit('update:dialogVisible', false)
        this.$refs[formName].resetFields();
        this.executorName = ''
        this.reviewerName = ''
        this.dept_name = []
        this.dept_selected = {dept: [],employee:[]}
      },
      // 提交
      saveFun(formName){
        // 没有选择重复任务的时候
        // /api/integral/task/publish
        // 选择重复任务之后
        // /api/integral/schedule/publish/task
        this.forTheTaskLoading = true
        let self = this
        let data = JSON.parse(JSON.stringify(self.formData))
        data.task_remark?'':delete data.task_remark
        data.timeout_deduction_point?'':delete data.timeout_deduction_point
        // if(data.timeout_deduction_point == ""){
        //   data.timeout_deduction_point = null
        // }
        // if(data.task_remark == ""){
        //   data.task_remark = null
        // }
        // if(data.task_cycle == 0){
        //   delete data.task_cycle
        //   delete data.task_expire_day
        //   delete data.targets
        //   data.task_remark?'':delete data.task_remark
        //   data.timeout_deduction_point?'':delete data.timeout_deduction_point
        // }else{
        //   delete data.expire_time
        //   data.task_remark?'':delete data.task_remark
        //   data.timeout_deduction_point?'':delete data.timeout_deduction_point
        // }
        self.$axios('post','/api/integral/task/update',data
        ).then(res => {
          if(res.data.code == 1){
            this.$parent.get_list()
            this.dept_selected = {dept: [],employee:[]}
            self.executorName = ''
            self.reviewerName = ''
            this.dept_name = []
            self.$emit('update:dialogVisible', false)
            self.$refs[formName].resetFields();
            self.$message.success(res.data.msg)
          }else{
            self.$message.error(res.data.msg)
          }
        }).finally(()=>{
          this.echoGather = []
          setTimeout(()=>{
            this.forTheTaskLoading = false
          },300)
        })

      },
      // // 执行者
      // approval_confirm(data){
      //   this.approval_selected = {dept: [],employee:[]}
      //   this.formData.targets = []
      //   this.executorName = ''
      //   if (data.employee !== null && data.employee.length != 0) {
      //     this.approval_selected = data
      //     data.employee.forEach(element => {
			// 			this.formData.targets.push(element.id)
			// 			this.executorName += (element.name+',')
      //     });
      //   }
      // },
      // 执行者 end
      // 审核人
      reviewer_confirm(data){
        this.reviewer_selected = {dept: [],employee:[]}
        this.formData.reviewer_id = ''
        this.reviewerName = ''
        if (data.employee !== null && data.employee.length != 0) {
          this.reviewer_selected = data
          this.formData.reviewer_id = data.employee[0].id
          this.reviewerName = data.employee[0].name
        }
        this.show_reviewer_selector = false
      },
      // 审核人 end
      // 部门可见
      dept_confirm(data){
        this.dept_selected = {dept: [],employee:[]}
        this.formData.dept_ids = []
        this.deptVisibleName = ''
        if (data.dept !== null && data.dept.length != 0) {
          this.dept_selected = data
          data.dept.forEach(element => {
						this.formData.dept_ids.push(element.dept_id)
						this.deptVisibleName += (element.dept_name+',')
          });
        }
      },
      // 部门可见 end
      closeDialog(){
        this.echoGather = []
        this.$emit('update:dialogVisible', false)
      },

      
      //获取部门
      getDepartment() {
        this.$axios('get','/api/department/tree').then(res => {
          this.dept_tree =this.getTreeData(res.data.data.list);
          console.log(this.dept_tree)
          // let aaa = [438550526,442486286,432649335,442348685]
          // for(let i in aaa){
          //   this.getTreeDatas(this.dept_tree,aaa[i]);
          // }
          // console.log(this.$refs.depts.getCheckedKeys().concat(this.$refs.depts.getHalfCheckedKeys()))
          // console.log(this.$refs['depts'])


          //FF是父级ID,FF为1时表示没有父了
          // [{id:100,FF:1,child:[
          //       {id:200,FF:100,child:[
          //         {id:300,FF:200,child:[
          //           {id:400,FF:300},//比如我有id  400 ，求[100,200,300,400] 。或者我有300 。[100,200,300]
          //         ]},
          //       ]},
          //       {id:201,FF:100,child:[
          //         {id:301,FF:201},//比如我有id  301 ，求[100,201,301]
          //       ]},
          //     ]
          //   },
          //   {id:101,FF:1,child:[{id:201,FF:101}]},
          //   {id:102,FF:1,child:[{id:202,FF:102}]},
          //   {id:103,FF:1},//如果我有103，那就得到[103]
          // ]
        });
      },
      
      getTreeDatas(data,item) {
        // debugger
        for (let i in data) {
          if(data[i].id == item){
            if(data[i].parentid == 1){
              this.oneruleId.unshift(data[i].id)
              this.echoGather.push(this.oneruleId)
              this.oneruleId = []
              break
            }else{
              this.oneruleId.unshift(data[i].id)
              this.getTreeDatas(this.dept_tree,data[i].parentid)
            }
          }else{
            if(data[i]._child){
              this.getTreeDatas(data[i]._child,item)
            }
          }
        }
        return
      },

      // 递归判断列表，把最后的children设为undefined
      getTreeData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i]._child.length < 1) {
            // children若为空数组，则将children设为undefined
            data[i]._child = undefined;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i]._child);
          }
        }
        return data;
      },
    }
  }
</script>

<style>
</style>