dd_jx_pc/src/components/flow/Examine.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;background-color: #F5F9FF;padding:20px;border-radius: 5px;margin-top: 20px;max-width: 1000px;">
      <div class="flex-box-v flex-center-center flex-d-wrap flow" :class="[isActive == index ? 'isActive' : '']" v-for="(item, index) in review" :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="width: 120px;">{{ options[item.manager_level - 1].label }}</div>
          <div class="fontColorB font-flex-word" v-show="item.type == 2" style="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="width: 120px;">被考核人</div>
          <i class="el-icon-error" style="font-size: 18px;color: #C0C4CC;" @click="deleteFlow(index)"></i>
        </div>
        <div class="flow-index">
          <span></span>
          <div class="dian"></div>
          <i class="el-icon-arrow-up jt-top" v-if="isActive == index"></i>
          <div class="add-flow" v-if="review.length == index + 1">
            <i class="el-icon-circle-plus-outline blue" style="cursor: pointer;" v-if="review.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="80px">
            <el-form-item>
			  <div class="form-titem">审批人:</div>
              <el-radio-group v-model="item.type">
                <el-radio :label="1">部门主管（指定一级）
					<el-tooltip class="item" effect="dark" content="指定某一级主管" placement="top-start">
						<i class="fontColorF el-icon-warning"></i>
					</el-tooltip>
				</el-radio>
                <el-radio :label="2">指定成员</el-radio>
                <el-radio :label="3">被考核人
					<el-tooltip class="item" effect="dark" content="被考核对象，即员工本人" placement="top-start">
						<i class="fontColorF el-icon-warning"></i>
					</el-tooltip>
				</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  v-if="item.type!=3">
				<div class="form-titem">审批人多人时:</div>
              <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>
				<div class="form-titem">允许审批人:</div>
              <el-checkbox v-model="item.transfer">转交</el-checkbox>
              <el-checkbox v-model="item.refuse">驳回</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: 'Examine',
  props:{
    data:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      loading: false,

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

      flowIndex: 0,
      enable: 0, //是否启用 1-启用 0-禁用
      unique: 1, //评分人去重 1-是 0-否
      review: [//审批节点
        {
          type: 1, //用户种类 1-主管 2-指定成员 3-被考核人 4-角色
          action: [ //允许审批人动作
            'transfer', //转交
            'refuse' //驳回
          ],
          transfer: true, //转交
          refuse: true, //驳回
          manager_level: 1, //主管级别(只有用户种类为主管有效)
          supervisor_confirm: 1, //找不到确认人时是否由上级主管代替(只有评分人类型为主管时有效) 1-是 0-否
          is_supervisor_confirm: true,
          multi_executor: 3, //审批人多人时选项 1-依次确认 2-任一人审批 3-均需审批(只有用户种类为主管、指定成员、角色时有效)
          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){
       if(val.enable){
         this.recoverData();
       }
    },
    enable(val) {
       if(val==1){
         this.$emit('setIs','',5)
       }else{
         this.$emit('setIs','已禁用',5)
       }
    }
  },
  created() {},
  mounted() {},
  methods: {
    recoverData(){
      let data=this.data;
      let employeeMap=this.$getEmployeeList()
      this.enable=data.enable;
      this.unique=data.unique;
      data.reviewer.forEach(item=>{
        item.is_supervisor_confirm=item.supervisor_confirm==1? true:false;
        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.refuse=item.action.indexOf('refuse')>=0? true:false
      })
      this.review=JSON.parse(JSON.stringify(data.reviewer))
    },
    activeFlow(index) {
      this.isActive = index;
    },
    //删除主管
    deleteFlow(index) {
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if(this.review.length==1){
            this.$message.error('至少保留一个');
            return false
          }
          this.review.splice(index, 1);
          this.isActive = this.review.length - 1;
        })
        .catch(() => {});
    },
    //添加主管
    addFlow() {
      var leth = this.review.length + 1;
      var review ={
          type: 1, //用户种类 1-主管 2-指定成员 3-被考核人 4-角色
          action: [ //允许审批人动作
            'transfer', //转交
            'refuse' //驳回
          ],
          transfer: true, //转交
          refuse: true, //驳回
          manager_level: leth, //主管级别(只有用户种类为主管有效)
          supervisor_confirm: 1, //找不到确认人时是否由上级主管代替(只有评分人类型为主管时有效) 1-是 0-否
          is_supervisor_confirm: true,
          multi_executor: 1, //审批人多人时选项 1-依次确认 2-任一人审批 3-均需审批(只有用户种类为主管、指定成员、角色时有效)
          employee_ids: [], //用户id列表(只有用户种类为指定成员时有效)
          employeeList:[],
          role_name: 'creator' //角色名(只有用户种类为角色时有效)
        };
      this.review.push(review);
    },
    setEmployeeList(item, index) {
      this.flowIndex = index;
      this.selected.employee = item.employeeList;
      this.setAdministrator = true;
    },
    confirmAdministrator(e) {
      this.review[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;
  cursor: pointer;
}
.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: 0px;
  top: -14px;
  display: none;
}
.flow-item:hover {
  /* background-color: #e7f5fe; */
  font-weight: 600;
  font-size: 16px;
}
.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: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  color: #909399;
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
  position: relative;
}
.flow-index span::after{
  width: 10px;
  height: 10px;
  content: " ";
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  background-color: #409eff;
  border-radius: 50%;
  position: absolute;
}
.add-flow {
  position: absolute;
  right: -100px;
  z-index: 2;
  top: 0px;
}
.add-flow i {
  font-size: 26px;
}
.isActive .flow-item {
  /* background-color: #ecf5ff; */
  font-weight: 600;
  font-size: 16px;
  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: 40%;
  left: 71px;
}
.flow-box {
  /* border: 1px dashed #409eff; */
  border-radius: 3px;
  padding: 20px;
  width: 1000px;
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  background-color: rgb(245, 249, 255);;
  z-index: 2;
}
.jt-top {
  position: absolute;
  color: #409eff;
  font-size: 18px;
  font-weight: 600;
  top: 50px;
  left: 50px;
  background-color: #fff;
  z-index: 3;
}
.inputDc {
  position: absolute;
  top: 0;
  width: 250px;
  left: 0;
  bottom: 0;
  z-index: 9;
}
</style>