gdy_qywx_pc/src/views/common/rewardTask.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 v-show="reviewerName=='' || reviewerName== null" 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>
                <div v-if="reviewerName!='' && reviewerName!= null"  @click="show_reviewer_selector = true" class="zindexName">
                    <WWOpenData type="userName" :openid="reviewerName"></WWOpenData>
                </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"/> -->
            <EmployeeSelector
              :isChecKedAll="false"
              :multi="false"
              :is_manager_only="true"
              :selected="reviewer_selected"
              :visible.sync="show_reviewer_selector"
              :is_filtration_creator="false"
              @confirm="reviewer_confirm"/>
          </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 v-show="deptVisibleNames.length==0" auto-complete="off" v-model="deptVisibleName" placeholder="请选中部门的人可领取"></el-input>
                <div @click="show_dept_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
                <div v-if="deptVisibleNames.length>0"  @click="show_dept_selector = true" class="zindexName">
                  <span v-for="(item,index) in deptVisibleNames" :key="index">
                    <WWOpenData type="departmentName" :openid="item.dept_name"></WWOpenData><span v-if="(deptVisibleNames.length-index)>1">,</span>
                  </span>
                </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_dept_selector"
              @confirm="dept_confirm"/> -->
            <EmployeeSelector
              :isChecKedAll="false"
              :multi="true"
              :can_select_employee="false"
              :can_select_dept="true"
              :selected="dept_selected"
              :visible.sync="show_dept_selector"
              @confirm="dept_confirm"/>
          </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 '@/views/common/EmployeeSelector'
  export default {
    name: 'bonusPoints',
    props:{
      employee_not_select: {
        type: Array,
        default: () => {
          return []
        }
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      showTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        forTheTaskLoading:false,
        formData: {
          task_type: '1',
          pt_id: 3,
          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,
        deptVisibleNames: [],
        dept_not_select: [],
        dept_employee_list: [],
        dept_selected: {dept: [],employee:[]},
        show_dept_selector: false,
      }
    },
    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')
        }
      }
    },
    mounted() {
      this.point_types = JSON.parse(localStorage.getItem('SET_POINT_TYPES'))
    },
    methods: {
      sub(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveFun(formName)
          }
        });
      },
      resetForm(formName){
        this.$emit('update:dialogVisible', false)
        this.$refs[formName].resetFields();
        this.executorName = ''
        this.reviewerName = ''
      },
      // 提交
      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))
        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.$http('post',self.formData.task_cycle == 0?'/api/integral/task/publish':'/api/integral/schedule/publish/task',data
        ).then(res => {
          if(res.data.code == 1){
            this.$parent.get_list()
            self.$emit('update:dialogVisible', false)
            self.$refs[formName].resetFields();
            self.$message.success(res.data.msg)
            self.executorName = ''
            self.reviewerName = ''
            this.reviewer_selected = {dept: [],employee:[]}
            this.dept_selected = {dept: [],employee:[]}
            this.deptVisibleName = ''
            this.deptVisibleNames = []
          }else{
            self.$message.error(res.data.msg)
          }
          setTimeout(()=>{
            this.forTheTaskLoading = false
          },300)
        }).catch(e => {
          self.$message.close()
          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
        }
      },
      // 审核人 end
      // 部门可见
      dept_confirm(data){
        this.dept_selected = {dept: [],employee:[]}
        this.formData.dept_ids = []
        this.deptVisibleNames = []
        this.deptVisibleName = ''
        if (data.dept !== null && data.dept.length != 0) {
          this.dept_selected = data
          this.deptVisibleNames = data.dept
          data.dept.forEach(element => {
						this.formData.dept_ids.push(element.dept_id)
						this.deptVisibleName += (element.dept_name+',')
          });
        }
      },
      // 部门可见 end
      closeDialog(){
        this.resetForm('formData')
        // this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
<style lang="scss">
  .zindexName{
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     z-index: 9;
     border:1px solid rgb(224, 224, 224);
     width:360px;
     border-radius:3px;
     padding-left:15px;
     overflow: hidden;
  }
</style>