gdy_pc_8/src/newPerformance/components/PerResultInputSelectorOnly.vue

<template>
  <el-dialog
    :visible.sync="innerVisible"
    @close="handleClose"
    @open="initData"
    @closed="dataReset"
    append-to-body
    :close-on-click-modal="false"
    center
    title="结果录入节点配置"
    width="600px"
  >
    <el-form v-if="currentNode" label-width="200">
      <el-form-item label="启用">
        <el-switch
          v-model="currentNode.enable"
        />
      </el-form-item>

      <el-form-item label="录入人">
        <el-radio-group
          v-model="currentNode.assigneeType"
          :disabled="!currentNode.enable"
          @change="onAssigneeTypeChange"
        >
          <el-radio-button label="leader">组织管理员</el-radio-button>
          <el-radio-button label="user">指定人员</el-radio-button>
          <el-radio-button label="self">被考核人</el-radio-button>
          <el-radio-button label="post">岗位</el-radio-button>
          <el-radio-button label="deptLeader">部门负责人</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="">
        <template v-if="currentNode.assigneeType === 'leader'">
          <el-select
            v-model="currentNode.leaderLevel"
            placeholder="请选择管理员"
            :disabled="!currentNode.enable"
            filterable
            style="width: 300px;"
            key="leader"
            @change="onOrgManagerChange"
          >
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="width: 300px;"
            />
          </el-select>
        </template>
        <template v-if="currentNode.assigneeType === 'user'">
          <el-select
            v-model="userSelected"
            placeholder="请选择指定人员"
            multiple
            :disabled="!currentNode.enable"
            filterable
            style="width: 300px;"
            key="user"
            @change="onUserChange"
          >
            <el-option
              v-for="item in employees"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              style="width: 300px;"
            />
          </el-select>
        </template>
        <template v-if="currentNode.assigneeType === 'post'">
          <el-select
            v-model="postSelected"
            placeholder="请选择岗位"
            multiple
            :disabled="!currentNode.enable"
            filterable
            style="width: 300px;"
            key="post"
            @change="onPostChange"
          >
            <el-option
              v-for="item in postList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              style="width: 300px;"
            />
          </el-select>
        </template>
        <template v-if="currentNode.assigneeType === 'deptLeader'">
          <el-select
            v-model="deptSelected"
            placeholder="请选择部门"
            multiple
            :disabled="!currentNode.enable"
            filterable
            style="width: 300px;"
            key="deptLeader"
            @change="onDeptChange"
          >
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              style="width: 300px;"
            />
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="多人时">
        <el-radio-group
          v-model="currentNode.multipleType"
          :disabled="!currentNode.enable"
        >
          <el-radio-button label="or">任一人确认(或签)</el-radio-button>
          <el-radio-button label="parallel">按顺序确认(会签)</el-radio-button>
          <el-radio-button label="sequence">同时确认(会签)</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="允许">
        <el-checkbox-group
          v-model="currentNode.allows"
          :disabled="!currentNode.enable"
        >
          <el-checkbox-button label="transfer">转交</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="end">
        <el-col align="end">
          <el-button
            type="primary"
            @click="onConfirm"
          >
            确认
          </el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>


<script>
import Template from "../../examine/components/Template.vue";

export default {
  name: "PerResultInputSelectorOnly",
  components: {Template},
  props: {
    showVisible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      userInfo: this.$userInfo(),
      currentNode: null,
      innerVisible: this.showVisible,
      loading:false,
      employees:[],
      postList:[],
      deptList:[],
      userSelected:[],
      postSelected:[],
      deptSelected:[],
      assigneeMap:{
        leader:'组织管理员',
        user:'指定人员',
        self:'被考核人',
        post:'岗位',
        deptLeader:'部门负责人',
      },
      levelOptions: [
        {
          value: 1,
          label: '直接管理员'
        },
        {
          value: 2,
          label: '二级管理员'
        },
        {
          value: 3,
          label: '三级管理员'
        },
        {
          value: 4,
          label: '四级管理员'
        },
        {
          value: 5,
          label: '五级管理员'
        },
        {
          value: 6,
          label: '六级管理员'
        }
      ]
    }
  },
  computed:{
    employeeMap(){
      const map = {};
      this.employees.forEach(e => {
        if (!map[e.id]) map[e.id] = e.name;
      });
      return map;
    },
    postMap(){
      const map = {};
      this.postList.forEach(e => {
        if (!map[e.id]) map[e.id] = e.name;
      });
      return map;
    },
    deptMap(){
      const map = {};
      this.deptList.forEach(e => {
        if (!map[e.id]) map[e.id] = e.name;
      });
      return map;
    },
  },
  watch:{
    showVisible(val){
      this.innerVisible = val;
    },
  },
  methods: {
    idGeneral(){
      return Date.now() + Math.floor(Math.random() * 10000);
    },
    defaultNode(){
      const node = JSON.parse("{\"id\":\"RI_1907236768800382977\",\"type\":\"resultInput\",\"enable\":true,\"assigneeType\":\"self\",\"leaderLevel\":1,\"assigneeIds\":[],\"multipleType\":\"or\",\"allows\":[\"transfer\"],\"weight\":0,\"children\":[]}");
      node.id = "RI_" + this.idGeneral();
      return node;
    },
    matchErrMsg(err){
      return err.toString().replace(/[(Error: )]/g,'');
    },
    handleClose(){
      this.$emit('update:showVisible',false);
    },
    dataReset(){
      this.currentNode = null;
      this.userSelected = [];
      this.postSelected = [];
      this.deptSelected = [];
    },
    initData(){
      if (this.loading) return;
      this.dataReset();
      this.loading = true;

      let result = true;
      Promise.all([
        this.$axiosUser('get', '/api/pro/employee/index', {page:0,page_size:10,status:1}, 'v2'),
        this.$axiosUser('get','/org/post'),
        this.$axiosUser('get', `/org/departments/${this.userInfo.site_id}`)
      ])
        .then(([employeeRes,postRes,deptRes]) => {
          if (employeeRes.data.code !== 1) throw new Error(employeeRes.data.msg);
          if (postRes.data.code !== 1) throw new Error(postRes.data.message);
          if (deptRes.data.code !== 1) throw new Error(deptRes.data.message);

          this.employees = employeeRes.data.data.list
            .filter(e => e.account_id && e.account_id > 0)
            .map(e => {
              return {
                id:e.id,
                name:e.name,
              }
            });

          this.postList = postRes.data.data.map(item => {
            return {
              id: item.id,
              name: item.name,
            }
          });

          this.deptList = deptRes.data.data.list.map(item => {
            return {
              id: item.id,
              name: item.name,
            }
          });

          this.currentNode = this.defaultNode();

          switch (this.currentNode.assigneeType){
            case 'user':
              this.userSelected = this.currentNode.assigneeIds;
              break;
            case 'post':
              this.postSelected = this.currentNode.assigneeIds;
              break;
            case 'deptLeader':
              this.deptSelected = this.currentNode.assigneeIds;
              break;
          }
        })
        .catch(err => {
          this.$message.error(this.matchErrMsg(err));
          result = false;
        })
        .finally(() => {
          this.loading = false;
          if (!result) this.handleClose();
        })
    },
    onAssigneeTypeChange(v){
      this.currentNode.assigneeIds = [];
      this.currentNode.leaderLevel = 1;
      this.userSelected = [];
      this.postSelected = [];
      this.deptSelected = [];
    },
    onOrgManagerChange(v){
      this.currentNode.assigneeIds = [];
      this.currentNode.leaderLevel = v;
      this.userSelected = [];
      this.postSelected = [];
      this.deptSelected = [];
    },
    onUserChange(v){
      this.currentNode.assigneeIds = [...v];
      this.currentNode.leaderLevel = 1;
      this.userSelected = v;
      this.postSelected = [];
      this.deptSelected = [];
    },
    onPostChange(v){
      this.currentNode.assigneeIds = [...v];
      this.currentNode.leaderLevel = 1;
      this.userSelected = [];
      this.postSelected = v;
      this.deptSelected = [];
    },
    onDeptChange(v){
      this.currentNode.assigneeIds = [...v];
      this.currentNode.leaderLevel = 1;
      this.userSelected = [];
      this.postSelected = [];
      this.deptSelected = v;
    },
    onConfirm(){
      this.$emit('confirm',this.currentNode);
      this.handleClose();
    },
  }
}
</script>

<style scoped lang="scss">
.handler-list {
  width: 500px;
  margin: 0 auto 16px auto;
  border-radius: 6px;
  border: 1px solid #d7dae2;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  .el-tag {
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
}

</style>