dd_pc/src789/components/applicationIntegrationPopup.vue

<template>
  <div>
    <!-- 奖扣ab分弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :before-close="closePopup"
      width="600px">
      <div>
        <el-form :model="dialogData" ref="dialogData" label-width="80px" v-loading="loading">          
          <div v-for="(item,index) in dialogData.items" :key="index" @click="itemIndex = index">

            <div style="overflow: hidden;">
              <span style="line-height: 36px;">申请明细({{index+1}})</span>
              <el-button type="text" class="fr" v-show="index > 0 || dialogData.items.length > 1" @click="delItem(index)">删除</el-button>
            </div>

            <el-form-item label="录入对象" :prop="'items.'+ index +'.employeeName'" :rules="[{ required: true, message: '请选择录入对象', trigger: 'change' }]">
              <el-row>
                <el-col :span="18">
                  <el-input auto-complete="off" v-model="item.employeeName" placeholder="请选择录入对象"></el-input>
                  <div @click="item.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="item.employee_not_select"
                :can_select_employee="true"
                :can_select_dept="false"
                :multi="false"
                :selected="item.employee_selected"
                :visible.sync="item.show_employee_selector"
                @confirm="employee_confirm"/>
            </el-form-item>

            <el-form-item label="指定规则">
              <el-switch
                v-model="item.rule_switch"
                @change="switchChange(index,item.rule_switch)"
                active-color="#13ce66">
              </el-switch>
            </el-form-item>

            <el-form-item label="选择规则" v-if="item.rule_switch" :prop="'items.'+ index +'.rule_item_list_value'" :rules="[{ required: true, message: '请选择规则', trigger: 'blur' }]">
              <el-cascader
              v-model="item.rule_item_list_value"
              ref="ruleItem"
              :popper-class="'itemClass'"
              :options="rule_item_list"
              @change="ruleItemChange"
              :show-all-levels="false"
              :props="{ children: 'child', label: 'name', value: 'id'}"
              ></el-cascader>
            </el-form-item>
            <el-form-item v-if="item.rule_switch && item.rule_id">
              <div v-show="item.rule_item_details.range_type == 1">{{get_point_name(item.rule_item_details.pt_id)}}  {{item.rule_item_details.min_point}}</div>
              <div v-show="item.rule_item_details.range_type == 2">{{get_point_name(item.rule_item_details.pt_id)}}  {{item.rule_item_details.min_point}} ~ {{item.rule_item_details.max_point}}</div>
              <div>{{item.rule_item_details.name}}</div>
            </el-form-item>
            
            <el-form-item label="发生时间" :prop="'items.'+ index +'.event_time'" :rules="[{ required: true, message: '请选择时间', trigger: 'blur' }]">
              <el-row>
                <el-col :span="18">
                  <el-date-picker v-model="item.event_time" type="date" placeholder="请选择时间" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
              </el-row>
            </el-form-item>
            
            <el-form-item label="事件内容" :prop="'items.'+ index +'.remark'" :rules="[{ required: true, message: '请输入事件内容', trigger: 'blur' },{ min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }]">
              <el-row>
                <el-col :span="18">
                  <el-input type="textarea" rows="6" placeholder="请输入事件内容" style="width: 100%;" v-model="item.remark"></el-input>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="图片" label-width="100px">

            </el-form-item>
            
            <el-form-item label="审批人" :prop="'items.'+ index +'.approvalName'" :rules="[{ required: true, message: '请选择审批人', trigger: 'blur' }]">
              <el-row>
                <el-col :span="18">
                  <el-input auto-complete="off" v-model="item.approvalName" placeholder="请选择审批人"></el-input>
                  <div v-if="item.approval_selected.length == 0" @click="approval_selected_null" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
                  <div v-else @click="item.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="item.approval_not_select"
                :can_select_employee="true"
                :can_select_dept="false"
                :multi="false"
                :employee_list="item.approval_employee_list"
                :selected="item.approval_selected"
                :visible.sync="item.show_approval_selector"
                @confirm="approval_confirm"/>
            </el-form-item>

          </div>
          <el-form-item style="margin-bottom: 0;">
            <div>如需录入多条，请点击“增加一条”</div>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;">
            <el-button type="primary" plain @click="addItem">+ 增加一条</el-button>
          </el-form-item>
          <el-form-item style="text-align: right; margin-bottom: 0;">
            <el-button  @click="closeDialog('dialogData')">取 消</el-button>
            <el-button :disabled="btn_loading" type="primary" @click="subData('dialogData')">确 认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

        <el-dialog
          :title="'提交结果'"
          :visible.sync="error_list_show"
          :append-to-body='true'
          @close='error_list_SX'
          width="700px">
          <el-table :data="error_list">
            <el-table-column prop="target" label="员工"></el-table-column>
            <el-table-column prop="point" label="积分"></el-table-column>
            <el-table-column prop="status" label="处理状态">
              <template slot-scope="scope">
                <span :style="'color:'+(scope.row.status==0?'#f70000':'#47bf47')">{{scope.row.status==0?'申请失败':'申请成功'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="msg" label="备注信息"></el-table-column>
          </el-table>
        </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import EmployeeSelector from '@/components/EmployeeSelector'
  // import uploadOss from "@/views/upload_oss/upload"

  export default {
    name: 'applicationIntegration',
    // 数据
    model: {
      prop: 'list',
      event: 'value'
    },
    props:{
      title: {
        type: String,
        default: ''
      },
      visible:{
        type: Boolean,
        default: false
      },
      integralType:{
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        error_list:[],//错误信息数组
        error_list_show:false,//错误信息弹窗
        Xtoken: { 'X-Token': this.$getToken() },
        loading: false,
        dialogData:{ 
          items: [{
            rule_switch: true,
            rule_id: '',
            item_id: '',
            remark: '',
            event_time: moment().format('YYYY-MM-DD'),

            // 审批人信息
            reviewer_id: '',
            approvalName: '',
            approval_not_select: [],
            approval_employee_id:0,//当前选中人的直属上级。0表示没有直属上级
            approval_employee_list: [],//当前选中人的 上级
            approval_selected: {dept: [],employee:[]},
            show_approval_selector: false,

            // 录入对象
            employee_id: '',
            employeeName: '',
            employee_not_select: [],
            employee_selected: {dept: [],employee:[]},
            show_employee_selector: false,

            // 附件
            fileList: [],
            files: [],
            // 规则分类 与 规则细则 名称
            rule_list_value: null,
            rule_item_list_value: null,
            rule_item_details: {range_type: ''}
          }]
        },
        // 规则分类
        rule_list: [],
        // 规则细则
        rule_item_list: [],
        flatteningIntegralRules: null,
        user_info: null,
        employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
        point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES')),
        btn_loading: false
      }
    },
    components: {EmployeeSelector},
    watch:{},
    mounted() {
      // this.getRuleItemData()
      // this.user_info = this.$store.getters.user_info
      // this.point_types = JSON.parse(localStorage.getItem('SET_POINT_TYPES'))
      // // 初始化录入对象
      // this.dialogData.items[0].employee_selected.employee = [{id: this.user_info.id ,img_url: this.user_info.img_url,name: this.user_info.name}]
      // this.dialogData.items[0].employee_id = this.user_info.id
      // this.dialogData.items[0].employeeName = this.user_info.name
      // this.initializesReviewer(this.user_info.employee_detail.superior_list,0,true)

    },
    methods: {
      // 附件上传
      beforeUpload(file){
        const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type)
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M   
      },
      onFilePreView(file) {
        window.open(file.response.url,'_blank')
      },
      onFileRemove(file, fileList) {
        this.dialogData.items[this.itemIndex].fileList = fileList
        this.dialogData.items[this.itemIndex].files = []
        fileList.forEach((element,index) => {
          this.dialogData.items[this.itemIndex].files.push(element.url)
        });
      },
      handleFilesSuccess(response, file, fileList) {
        this.dialogData.items[this.itemIndex].fileList = fileList
        this.dialogData.items[this.itemIndex].files = []
        fileList.forEach((element,index) => {
          this.dialogData.items[this.itemIndex].files.push(element.url)
        });
      },

      // 审核人为空
      approval_selected_null(){
        this.$message.error('您没有审批人，请联系管理员');
      },
      // 获取规则信息
      getRuleData(){
        let data = {
          cycle_type: '1'
        }
        this.integralType === 1?data.pt_id = '1':this.integralType === 2?data.pt_id = '2':data.pt_id = '3'
        this.$axios('get','/api/integral/rule/trees',data).then(res => {
					if (res.data.code == 1) {
            const resultData = res.data.data
            this.rule_list = resultData.rule_tree
          }
          this.rule_list = this.getTreeData(this.rule_list)
				}).catch(e => {this.$message.error(e.data.msg)})
      },
      // 获取规则细则
      getRuleItemData(){
        let data = {cycle_type: '1'}
        this.loading = true
        this.$axios('get','/api/integral/rule/trees',data,'v2').then(res => {
					if (res.data.code == 1) {
            const resultData = res.data.data
            this.rule_item_list = resultData.tree
            this.flatteningIntegralRules = this.getItemDetail(this.rule_item_list)
            this.loading = false
          }
				}).catch(e => {this.$message.error(e.data.msg)})
      },
      // 规则细则变化关闭down
      ruleItemChange(value){
        const item = this.dialogData.items[this.itemIndex]
        let ruleItemDetail = null
        this.flatteningIntegralRules.forEach(element => {
          if (element.id == value[value.length - 1]) {
            ruleItemDetail = {...element}
          }
        })
        item.rule_item_details = ruleItemDetail
        item.remark = ruleItemDetail.name
        item.rule_id = ruleItemDetail.pid
        item.item_id = value[value.length - 1]
        this.$refs.ruleItem.dropDownVisible = false; 
      },
      // 规则分类变化关闭dewn
      ruleChange(value){
        this.dialogData.items[this.itemIndex].rule_id = value[value.length - 1]
        this.$refs.rule.dropDownVisible = false;
      },
      // 递归判断列表，把最后的child设为undefined
      getTreeData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].child.length < 1) {
            // child若为空数组，则将child设为undefined
            data[i].child = undefined;
          } else {
            // child若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].child);
          }
        }
        return data;
      },

      getItemDetail(arr) {
        let result = []
        for (const item of arr) {
          var res = JSON.parse(JSON.stringify(item)) // 先克隆一份数据作为第一层级的填充
          delete res['child']
          result.push(res)
          if (item.child instanceof Array && item.child.length > 0) { // 如果当前child为数组并且长度大于0，才可进入getItemDetail()方法
            result = result.concat(this.getItemDetail(item.child))
          }
        }
        return result
      },
      // 加一条
      addItem(){
        this.dialogData.items.push({
          rule_switch: true,
          rule_id: '',
          item_id: '',
          remark: '',
          event_time: moment().format('YYYY-MM-DD'),

          // 审批人信息
          reviewer_id: '',
          approvalName: '',
          approval_not_select: [],
          approval_employee_id:0,//当前选中人的直属上级。0表示没有直属上级
          approval_employee_list: [],
          approval_selected: {dept: [],employee:[]},
          show_approval_selector: false,

          // 录入对象
          employee_id: this.user_info.id,
          employeeName: this.user_info.name,
          employee_not_select: [],
          employee_selected: {dept: [],employee:[{id: this.user_info.id ,img_url: this.user_info.img_url,name: this.user_info.name}]},
          show_employee_selector: false,

          // 附件
          fileList: [],
          files: [],
          // 规则分类 与 规则细则 名称
          rule_list_value: null,
          rule_item_list_value: null,
          rule_item_details: {range_type: ''}
        })
      },
      closeDialog(formName){
        this.$refs[formName].resetFields();
        this.$emit('update:visible', false)
      },
      delItem(index){
        this.$confirm('你确定要删除奖扣明细'+parseInt(index+1)+'吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogData.items.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {});
      },
      subData(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btn_loading = true
            this.save()
          }
        });
      },
      // 提交数据
      save(){
        let data = {items: []}
        this.dialogData.items.forEach(element => {
          data.items.push({rule_id: element.rule_id || 0, employee_id: element.employee_id || 0 ,item_id: element.item_id || 0, remark: element.remark, event_time: element.event_time, pt_id: element.pt_id, reviewer_id: element.reviewer_id || 0, files: element.files})
        });
        this.$axios('post','/api/integral/review/apply',data,'v2').then(res => {
          if(res.data.code == 1){
            this.$refs['dialogData'].resetFields();
            this.$emit('update:visible', false)
            this.$message.success(res.data.msg)
            this.error_list = res.data.data.list
            this.error_list_show = true
            this.dialogData.items[0].employee_id = this.user_info.id
          }else{
            this.$message.error(res.data.msg)
          }
          this.btn_loading = false
        }).catch(e => {this.$message.close()})
      },
      //关闭错误信息时的回调
      error_list_SX(){
        // this.loadBaseData();
        // this.loadEmployeeList()
      },
      // 当switch 改变了
      switchChange(index,value){
        this.itemIndex = index
        const item = this.dialogData.items[this.itemIndex]
        if (!value) {
          item.rule_id = ""
          item.item_id = ""
          item.rule_item_list_value = ""
          item.rule_item_details = {range_type: ''}
        }else{
          item.rule_id = ""
          item.rule_list_value = ""
        }
      },
      // 初始化审核人
      initializesReviewer(list,index,bool){
        const superior = list || this.user_info.employee_detail.superior_list
        const num = index || 0
        const item = this.dialogData.items[num]
        item.approval_employee_list = [...superior]
        if (superior.length !== 0) {
          if(bool){
            item.approval_employee_id = this.user_info.employee_detail.superior_id//直属上级（这里是第一个，默认为当前登录人）
          }
          if(item.approval_employee_id != 0){//判断有无直属上级
            for(let a in item.approval_employee_list){
              if(item.approval_employee_id == item.approval_employee_list[a].id){
                item.approval_employee_list[a].direct_Supervisor = true//一个字段，是直属上级的字段，为true
              }
            }
            for(let i in superior){
                if(item.approval_employee_id == superior[i].id){
                  item.approval_selected.employee = [{id: superior[i].id ,img_url: superior[i].img_url,name: superior[i].name}]
                  item.reviewer_id = superior[i].id
                  item.approvalName = superior[i].name//审批人
                }
            }
          }else{
            // 拿取列表最后一个的数据，没有筛选
            item.approval_selected.employee = [{id: superior[superior.length - 1].id ,img_url: superior[superior.length - 1].img_url,name: superior[superior.length - 1].name}]
            item.reviewer_id = superior[superior.length - 1].id//审批人id
            item.approvalName = superior[superior.length - 1].name//审批人name
          }
          
        }
      },
      // 选择审核人
      approval_confirm(data){
        const item = this.dialogData.items[this.itemIndex]
        item.approvalName = ''
        item.approval_selected.employee = {dept: [],employee:[]}
        item.reviewer_id = ''
        if (data.employee !== null && data.employee.length != 0) {
          item.approvalName = data.employee[0].name
          item.approval_selected.employee = [{name: data.employee[0].name,id:data.employee[0].id,img_url: data.employee[0].img_url}]
          item.reviewer_id = data.employee[0].id
        }
      },
      // 选择对象
      employee_confirm(data){
        const item = this.dialogData.items[this.itemIndex]
        for (const key in this.employee_map) {
          if (this.employee_map.hasOwnProperty(key)) {
            const element = this.employee_map[key];//循环人员列表
            if(element.id == data.employee[0].id){//通过选中的id拿到当前人员信息
              item.approval_employee_id = element.superior_id//选中对象的直属上级id
              this.initializesReviewer(element.superior_list,this.itemIndex)
            }
          }
        }
        item.employeeName = ''
        item.employee_selected.employee = {dept: [],employee:[]}
        item.employee_id = ''
        if (data.employee !== null && data.employee.length != 0) {
          item.employeeName = data.employee[0].name
          item.employee_selected.employee = [{name: data.employee[0].name,id:data.employee[0].id,img_url: data.employee[0].img_url}]
          item.employee_id = data.employee[0].id
        }
      },
      // 获取积分名称
      get_point_name(id){
        let name = ''
        this.point_types.forEach(element => {
          if (element.id == id) {
            name = element.name
          }
        });
        return name
      },

      // 关闭弹窗
      closePopup(){
        this.$emit('update:visible', false)
      }

    }
  }
</script>
<style lang="scss">
  .itemClass .el-cascader-menu .el-cascader-menu__wrap li.el-cascader-node{
    height: auto;
    max-width: 500px;
    .el-cascader-node__label{
      white-space: initial;
      overflow: initial;
      text-overflow: initial;
    }
  }

  // ruleClass
  // itemClass
</style>