dd_jx_pc/src/components/flow/Affirm - 副本.vue

<template>
  <div class="all">
    <div class="flex-box-ce" style="margin-left: 10px;margin-top: 30px;">
      <span>目标确认：</span>
      <el-switch v-model="enable" :active-value="1" :inactive-value="0"></el-switch>
    </div>
	
    <div class="flex-box-ce" v-show="enable == 1" style="position: relative;">
      <div class="flex-box-v flex-center-center flex-d-wrap flow" :class="[isActive == index ? 'isActive' : '']" v-for="(item, index) in confirmor" :key="index">
        <div @click="activeFlow(index)" class="flex-box-v flex-center-center  flow-item">
          <div class="fontColorB font-flex-word" v-show="item.type == 1" style="font-size: 13px;width: 120px;">{{ options[item.manager_level - 1].label }}</div>
          <div class="fontColorB font-flex-word" v-show="item.type == 2" style="font-size: 13px;width: 120px;">
            <span v-if="item.employeeList.length > 0">{{ item.employeeList[0].name }}等({{ item.employeeList.length }})人</span>
            <span v-else>未指定人员</span>
          </div>
          <div class="fontColorB font-flex-word" v-show="item.type == 3" style="font-size: 13px;width: 120px;">被考核人</div>
          <i class="el-icon-error" style="font-size: 18px;color: #C0C4CC;" @click="deleteFlow(index)"></i>
        </div>
        <div class="flow-index">
          <span>{{ index + 1 }}</span>
          <div class="dian"></div>
          <i class="el-icon-arrow-up jt-top" v-if="isActive == index"></i>
          <div class="add-flow" v-if="confirmor.length == index + 1">
            <i class="el-icon-circle-plus-outline blue" style="cursor: pointer;" v-if="confirmor.length != 6" @click="addFlow()"></i>
            <i class="el-icon-video-pause fontColorF" v-else></i>
          </div>
        </div>
        <div class="flow-box" v-show="isActive == index">
          <el-form label-width="120px">
            <el-form-item label="确认人:">
              <el-radio-group v-model="item.type">
                <el-radio :label="1">部门主管（指定一级）</el-radio>
                <el-radio :label="2">指定成员</el-radio>
                <el-radio :label="3">被考核人</el-radio>
              </el-radio-group>
              <div class="flex-box-ce" style="margin-top: 10px;" v-show="item.type == 1">
                <span>被考核人的</span>
                <el-select v-model="item.manager_level" placeholder="请选择级别"  style="margin: 0 10px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-tooltip class="item" effect="dark" content="找不到确认人时，由上级管理员替代" placement="top-start">
                  <i class="fontColorF el-icon-warning"></i>
                </el-tooltip>
              </div>
              <div class="border flex-box-ce" style="position: relative;" v-show="item.type == 2">
                <div class="fontColorF flex-1" v-if="item.employeeList.length == 0">请选择指定人员</div>
                <div v-else style="width: 180px;" class="font-flex-word">
                  <span v-for="(j, index2) in item.employeeList" :key="index2">
                    <i v-if="index2 != 0">,</i>
                    {{ j.name }}
                  </span>
                </div>
                <span v-if="item.employeeList.length > 0" class="blue">{{ item.employeeList.length }}人</span>
                <i class="el-icon-arrow-down icon-right" v-else></i>
                <div @click="setEmployeeList(item, index)" class="inputDc"></div>
              </div>
            </el-form-item>
            <el-form-item label="确认人多人时:" v-if="item.type != 3">
              <el-radio-group v-model="item.multi_executor">
                <el-radio :label="1">依次确认</el-radio>
                <el-radio :label="2">任一人确认</el-radio>
                <el-radio :label="3">均需确认</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="允许确认人:">
              <el-checkbox v-model="item.index">修改指标</el-checkbox>
              <el-checkbox v-model="item.transfer">转交</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 选择子管理员 -->
    <EmployeeSelector :selected="selected" :is_filtration_creator="false" :visible.sync="setAdministrator" @confirm="confirmAdministrator" />
  </div>
</template>
<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import BrawerBox from '@/components/public/BrawerBox';
export default {
  components: { EmployeeSelector, BrawerBox },
  name: 'Affirm',
  props: {
    data: {
      type: Object,
      default:()=>{
		  return {}
	  }
    }
  },
  data() {
    return {
      loading: false,

      isActive: '0',
      selected: { employee: [], dept: [] }, //执行者列表
      setAdministrator: false,

      flowIndex: 0,
      enable: 0, //是否启用 1-启用 0-禁用
      unique: 1, //评分人去重 1-是 0-否
      confirmor: [
        //确认人员列表
        {
          type: 1, //确认人类型 1-主管 2-指定成员 3-被考核人 4-角色
          manager_level: 1, //主管级别
          supervisor_confirm: 1, //找不到确认人,有上级主管代替 1-是 0-否
          multi_executor: 1, //确认人多人时处理方式 1-依次确认 2-任一人确认 3-均需确认
          action: [//允许确认人动作
            'index', //修改指标
            'transfer' //转交
          ],
          index:true,
          transfer:true,
          employee_ids: [], //指定成员用户id列表(类型为指定成员时)
          employeeList:[],
          role_name: 'creator' //角色名称(类型为指定角色时)
        }
      ],
      options: [
        {
          value: 1,
          label: '直属部门主管'
        },
        {
          value: 2,
          label: '二级部门主管'
        },
        {
          value: 3,
          label: '三级部门主管'
        },
        {
          value: 4,
          label: '四级部门主管'
        },
        {
          value: 5,
          label: '五级部门主管'
        },
        {
          value: 6,
          label: '六级部门主管'
        }
      ]
    };
  },
  watch: {
    data(val) {
      this.enable = val.enable;
      if (val.enable) {
        this.recoverData();
      }
    },
    enable(val) {
      if (val == 1) {
        this.$emit('setIs', '',7);
      } else {
        this.$emit('setIs', '已禁用',7);
      }
    }
  },
  methods: {
    recoverData() {
      let data = this.data;
      let employeeMap = this.$getEmployeeList();
      data.confirmor.forEach(item => {
        item.manager_level = item.manager_level == 0 ? 1 : item.manager_level;
        item.employeeList = item.employee_ids.map(item => {
          return employeeMap[item];
        });
        item.transfer = item.action.indexOf('transfer') >= 0 ? true : false;
        item.index = item.action.indexOf('index') >= 0 ? true : false;
      });
      this.confirmor = JSON.parse(JSON.stringify(data.confirmor));
    },
    activeFlow(index) {
      this.isActive = index;
    },
    //删除主管
    deleteFlow(index) {
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          if (this.confirmor.length == 1) {
            this.$message.error('至少保留一个');
            return false;
          }
          this.confirmor.splice(index, 1);
          this.isActive = this.confirmor.length - 1;
      }).catch(() => {});
    },
    //添加主管
    addFlow() {
      var leth = this.confirmor.length + 1;
      var confirmor = {
          type: 1, //确认人类型 1-主管 2-指定成员 3-被考核人 4-角色
          manager_level: 1, //主管级别
          supervisor_confirm: 1, //找不到确认人,有上级主管代替 1-是 0-否
          multi_executor: 1, //确认人多人时处理方式 1-依次确认 2-任一人确认 3-均需确认
          action: [//允许确认人动作
            'index', //修改指标
            'transfer' //转交
          ],
          index:true,
          transfer:true,
          employee_ids: [], //指定成员用户id列表(类型为指定成员时)
          employeeList:[],
          role_name: 'creator' //角色名称(类型为指定角色时)
      };
      this.confirmor.push(confirmor);
    },
    setEmployeeList(item, index) {
      this.flowIndex = index;
      this.selected.employee = item.employeeList;
      this.setAdministrator = true;
    },
    confirmAdministrator(e) {
      this.confirmor[this.flowIndex].employeeList = e.employee.length > 0 ? e.employee : [];
    },
    submitForm() {}
  }
};
</script>

<style scoped="scoped">
.border {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: auto;
  outline: 0;
  padding: 0 15px;
  width: 250px;
  position: relative;
}
.all {
  font-size: 14px;
}
.nweTitle {
  margin: 30px 0;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}
.flow {
  margin-right: 30px;
}
.flow-item {
  border-radius: 3px;
  width: 120px;
  height: 50px;
  position: relative;
  margin-top: 30px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #f4f6f9;
}
.flow-item .el-icon-error {
  position: absolute;
  right: 3px;
  top: 3px;
  display: none;
}
.flow-item:hover {
  background-color: #e7f5fe;
}
.flow-item:hover .el-icon-error {
  display: block !important;
}
.flow-item .el-icon-error:hover {
  color: #f56c6c !important;
}
.flow-item .fontColorT {
  margin-top: 10px;
}
.flow-index {
  width: 120px;
  text-align: center;
  position: relative;
  margin-top: 10px;
}
.flow-index span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #909399;
  color: #909399;
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
}
.add-flow {
  position: absolute;
  right: -100px;
  z-index: 2;
  top: 0px;
}
.add-flow i {
  font-size: 26px;
}
.isActive .flow-item {
  background-color: #ecf5ff;
  color: #409eff !important;
}
.isActive .flow-item .fontColorB,
.isActive .fontColorT {
  color: #409eff !important;
}
.isActive .flow-index span {
  border: 1px solid #409eff !important;
  color: #409eff !important;
}
.isActive .el-icon-error {
  display: block;
}
.dian {
  position: absolute;
  height: 1px;
  border-top: 1px dashed #ccc;
  width: 127px;
  top: 50%;
  left: 71px;
}
.flow-box {
  border: 1px dashed #409eff;
  border-radius: 3px;
  padding: 20px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 140px;
  background-color: #ecf5ff;
  z-index: 2;
}
.jt-top {
  position: absolute;
  color: #409eff;
  font-size: 18px;
  font-weight: 600;
  top: 160%;
  left: 50px;
  background-color: #fff;
  z-index: 3;
}
.inputDc {
  position: absolute;
  top: 0;
  width: 250px;
  left: 0;
  bottom: 0;
  z-index: 9;
}
</style>