Merge remote-tracking branch 'origin/master'

fuliqi

2025-01-09 e87846bfc7e467836d958632b15a22a901eb51d2

 src/components/Process/panel/TaskConfPanel.vue

New file
@@ -0,0 +1,550 @@
<template>
  <div>
    <el-form label-width="80px" size="small">
      <el-form-item label="异步">
        <el-switch v-model="bpmnFormData.async" active-text="是" inactive-text="否" @change="updateElementTask('async')"/>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="bpmnFormData.userType" placeholder="用户类型" @change="updateUserType">
          <el-option
            v-for="item in userTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="指定人员" v-if="bpmnFormData.userType === 'assignee'">
        <single-user ref="singleUser" :select-user="delegationUserSelect && delegationUserSelect.length > 0 ? delegationUserSelect[0].userId : null" :show="singleUserShow" @close="closeSingleUser" @submit="getSingleUserSelect" :key="singleUserKey"/>
        <div v-if="expSelect">
          <el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
        </div>
        <div v-else>
          <el-tag class="select-tag" v-for="user in delegationUserSelect" :key="user.userId + 'abc'" type="info" closable @close="removeSingleUser(user)">{{user.nickName}}</el-tag>
        </div>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--指定人员-->
          <el-tooltip class="box-item" effect="dark" content="指定人员" :disabled="typeButDisable" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editSingleUser"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
            <el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="候选人员" v-else-if="bpmnFormData.userType === 'candidateUsers'">
        <mult-user ref="multUser" :select-user="delegationUserSelect" :show="multUserShow" @close="closeMultUser" @submit="getMultUserSelect" :key="multUserKey"/>
        <div v-if="expSelect">
          <el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
        </div>
        <div v-else>
          <el-tag class="select-tag" v-for="user in delegationUserSelect" :key="user.userId + 'qwe'" type="info" closable @close="removeMultUser(user)">{{user.nickName}}</el-tag>
        </div>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选人员-->
          <el-tooltip class="box-item" effect="dark" content="候选人员" :disabled="typeButDisable" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editMultUser"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
            <el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="候选角色" v-else-if="bpmnFormData.userType === 'candidateGroups'">
        <my-role ref="role" :select-values="delegationRoleSelect" :show="roleShow" @close="closeRole" @submit="getRoleSelect" :key="roleKey"/>
        <div v-if="expSelect">
          <el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
        </div>
        <div v-else>
          <el-tag class="select-tag" v-for="role in delegationRoleSelect" :key="role.roleId + 'rty'" type="info" closable @close="removeRole(role)">{{role.roleName}}</el-tag>
        </div>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选角色-->
          <el-tooltip class="box-item" effect="dark" content="候选角色" :disabled="typeButDisable" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable"  @click="editRole"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
            <el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="候选部门" v-else>
        <MyDept ref="dept" :checkeds="delegationDeptSelect" :show="deptShow" @close="closeDept" @submit="getDeptSelect" :key="deptKey"/>
        <div v-if="expSelect">
          <el-tag class="select-tag" :key="expSelect.id + 'kfc'" type="info" closable @close="removeExp">{{expSelect.expression}}</el-tag>
        </div>
        <div v-else>
          <el-tag class="select-tag" v-for="dept in delegationDeptSelect" :key="dept.id + 'zxc'" type="info" closable @close="removeDept(dept)">{{dept.label}}</el-tag>
        </div>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选部门-->
          <el-tooltip class="box-item" effect="dark" content="候选部门" :disabled="typeButDisable" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user" :disabled="typeButDisable" @click="editDept"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" :disabled="expButDisable" placement="bottom">
            <el-button size="mini" type="warning" icon="el-icon-postcard" :disabled="expButDisable" @click="editExp"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>

      <el-form-item label="优先级">
        <el-input v-model="bpmnFormData.priority" @change="updateElementTask('priority')"/>
      </el-form-item>
      <el-form-item label="到期时间">
        <el-input v-model="bpmnFormData.dueDate" @change="updateElementTask('dueDate')"/>
      </el-form-item>
    </el-form>

    <!--选择表达式-->
    <el-dialog
      title="选择表达式"
      :visible.sync="expVisible"
      width="60%"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      @close="closeExp"
    >
      <flow-exp :selectValues="expSelect" @handleSingleExpSelect="getExpSelect"></flow-exp>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="checkExpComplete">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import FlowExp from '@/components/flow/Expression'
import {StrUtil} from '@/utils/StrUtil'
import MyDept from '@/components/flow/Dept/MyDept'
import SingleUser from '@/components/flow/User/SingleUser'
import MultUser from '@/components/flow/User/MultUser'
import MyRole from '@/components/flow/Role/MyRole'


export default {
  name: "TaskConfPanel",
  components: {
    FlowExp,
    MyRole,
    MyDept,
    SingleUser,
    MultUser,
  },
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      typeButDisable: false, // 用户类型选择按钮是否禁用
      expButDisable: false, // 用户类型选择按钮是否禁用
      roleKey: 'role',
      deptKey: 'dept',
      multUserKey: 0,
      singleUserKey: 'single',
      roleShow: false, // 角色组显示
      delegationRoleSelect: [], // 选中角色
      multUserShow: false, // 用户组显示
      singleUserShow: false, // 指定用户显示
      delegationUserSelect: [], // 选中的用户
      deptShow: false, // 部门组显示
      delegationDeptSelect: [], // 选中部门
      expSelect: null,  // 选中表达式
      num: 0, // 用于触发用户选择更新
      expVisible: false,
      isIndeterminate: true,
      checkType: 'single', // 选类
      userType: '',
      userTypeOption: [
        {label: '指定人员', value: 'assignee'},
        {label: '候选人员', value: 'candidateUsers'},
        {label: '候选角色', value: 'candidateGroups'},
        {label: '候选部门', value: 'candidateDeptGroups'},
      ],
      checkAll: false,
      bpmnFormData: {
        userType: "candidateDeptGroups",
        assignee: "",
        candidateUsers: "",
        candidateGroups: "",
        dueDate: "",
        priority: "",
        dataType: "",
        expId: "",
      },
      // 数据回显
      selectData: {
        assignee: null,
        candidateUsers: null,
        candidateGroups: [],  // 角色
        candidateDeptGroups: [], // 部门
        exp: null,
      },
      otherExtensionList:[],
    }
  },

  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetTaskForm();
        }
      },
      immediate: true, // 立即生效
    },
  },
  created() {

  },
  methods: {
    removeExp() {
      this.getExpSelect(null)
    },
    removeDept(dept) {
      let index = this.delegationDeptSelect.indexOf(dept);
      if (index !== -1) {
        this.delegationDeptSelect.splice(index, 1);
      }
      this.getDeptSelect(this.delegationDeptSelect)
    },
    removeRole(role) {
      let index = this.delegationRoleSelect.indexOf(role);
      if (index !== -1) {
        this.delegationRoleSelect.splice(index, 1);
      }
      this.getRoleSelect(this.delegationRoleSelect)
    },
    removeMultUser(user) {
      let index = this.delegationUserSelect.indexOf(user);
      if (index !== -1) {
        this.delegationUserSelect.splice(index, 1);
      }
      this.getMultUserSelect(this.delegationUserSelect)
    },
    removeSingleUser(user) {
      // 因为只能选一个用户，所以删了就没了
      this.getSingleUserSelect(null)
    },
    editDept() {
      this.$nextTick(() => {
        this.deptKey += '1'
        this.$refs.dept.setCheckList(this.delegationDeptSelect)
      })
      this.deptShow = true
    },
    editSingleUser() {
      if (this.delegationUserSelect && this.delegationUserSelect.length > 0) {
        this.singleUserKey += '1'
        this.$nextTick(() => {
          this.$refs.singleUser.setChecked(this.delegationUserSelect[0])
        })
      }
      this.singleUserShow = true
    },
    editRole() {
      if (this.delegationRoleSelect && this.delegationRoleSelect.length > 0) {
        this.roleKey += '1'
        this.$nextTick(() => {
          this.$refs.role.setChecked(this.delegationRoleSelect)
        })
      }
      this.roleShow = true
    },
    editMultUser() {
      if (this.delegationUserSelect && this.delegationUserSelect.length > 0) {
        this.multUserKey += '1'
        this.$nextTick(() => {
          this.$refs.multUser.setChecked(this.delegationUserSelect)
        })
      }
      this.multUserShow = true
    },
    editExp() {
      this.expVisible = true;
    },
    getDeptSelect(deptList) {
      if (deptList && deptList.length > 0) {
        this.deleteFlowAttar();
        this.updateCustomElement('dataType', 'fixed');
        this.updateCustomElement("candidateGroups", deptList.map(item => item.id).join(","));
        this.delegationDeptSelect = deptList
        this.expButDisable = true
      } else {
        this.delegationDeptSelect = []
        this.expButDisable = false
      }
      this.deptShow = false
      this.deptKey += '1'
    },
    getMultUserSelect(userList) {
      if (userList && userList.length > 0) {
        this.deleteFlowAttar();
        this.updateCustomElement('dataType', 'fixed');
        this.updateCustomElement(this.bpmnFormData.userType, userList.map(item => item.userId).join(","));
        this.delegationUserSelect = userList
        this.expButDisable = true
      } else {
        this.delegationUserSelect = []
        this.expButDisable = false
      }
      this.multUserShow = false
      this.multUserKey += 1;
    },
    getRoleSelect(roleList) {
      if (roleList && roleList.length > 0) {
        this.deleteFlowAttar();
        this.updateCustomElement('dataType', 'fixed');
        // userType = candidateGroups
        this.updateCustomElement(this.bpmnFormData.userType, roleList.map(item => item.roleId).join(","));
        this.delegationRoleSelect = roleList
        this.expButDisable = true
      } else {
        this.delegationRoleSelect = []
        this.expButDisable = false
      }
      this.roleShow = false
      this.roleKey += '1'
    },
    getSingleUserSelect(user) {
      if (user) {
        this.deleteFlowAttar();
        this.updateCustomElement('dataType', 'fixed');
        this.updateCustomElement(this.bpmnFormData.userType, user.userId);
        this.delegationUserSelect = [user]
        this.expButDisable = true
      } else {
        this.delegationUserSelect = []
        this.expButDisable = false
        this.deleteFlowAttar();
      }
      this.singleUserShow = false
      this.singleUserKey += '1'
    },
    getExpSelect(selection) {
      console.log(selection, "选中的表达式")
      if (selection) {
        this.expSelect = selection
        this.deleteFlowAttar();
        this.bpmnFormData[this.bpmnFormData.userType] = selection.name;
        this.updateCustomElement('dataType', selection.dataType);
        this.updateCustomElement('expId', selection.id.toString());
        const userType = this.bpmnFormData.userType === "candidateDeptGroups" ? "candidateGroups" : this.bpmnFormData.userType
        this.updateCustomElement(userType, selection.expression);
        this.handleSelectData("exp", selection.id);
        this.typeButDisable = true
      } else {
        this.expSelect = null
        this.typeButDisable = false
        this.deleteFlowAttar();
      }
    },
    closeExp() {
      this.expVisible = false
    },
    closeDept() {
      this.deptShow = false
      this.deptKey += '1'
    },
    closeSingleUser() {
      this.singleUserShow = false
      this.singleUserKey += '1'
    },
    closeRole() {
      this.roleShow = false
      this.roleKey += '1'
    },
    closeMultUser() {
      this.multUserShow = false
      this.multUserKey += 1;
    },

    // 初始化表单
    resetTaskForm() {
      // 初始化设为空值
      this.bpmnFormData = {
        userType: "candidateDeptGroups",
        assignee: "",
        candidateUsers: "",
        candidateGroups: "",
        dueDate: "",
        priority: "",
        dataType: "",
        expId: "",
      }
      this.selectData = {
        assignee: null,
        candidateUsers: null,
        candidateGroups: null,
        exp: null,
      }
      // 流程节点信息上取值
      for (let key in this.bpmnFormData) {
        const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key];
        this.$set(this.bpmnFormData, key, value);
      }
      console.log(this.bpmnFormData, "初始化数据")
      // 人员、角色、部门信息回显
      this.checkValuesEcho(this.bpmnFormData);
    },

    // 更新节点信息
    updateElementTask(key) {
      const taskAttr = Object.create(null);
      taskAttr[key] = this.bpmnFormData[key] || "";
      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
    },

    // 更新自定义流程节点/参数信息
    updateCustomElement(key, value) {
      const taskAttr = Object.create(null);
      taskAttr[key] = value;
      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
    },

    // 更新人员类型
    updateUserType(val) {
      console.log(val, "人员类型")
      // 删除xml中已选择数据类型节点
      this.deleteFlowAttar();
      // 清除已选人员数据
      if (val === "candidateDeptGroups") {
        val = "candidateGroups"
        this.delegationDeptSelect = []  // 部门
      } else if (val === "candidateGroups") {
        this.delegationRoleSelect = []  // 角色
      } else if (val === "assignee" || val === "candidateUsers") {
        this.delegationUserSelect = []   // 指定用户/候选用户
      }
      this.expSelect = null  // 表达式重置为空
      this.selectData = {
        assignee: null,
        candidateUsers: null,
        candidateGroups: null,
        exp: null,
      }
      this.typeButDisable = false
      this.expButDisable = false
      // 写入userType节点信息到xml
      this.updateCustomElement('userType', val);
    },

    // 设计器右侧表单数据回显
    checkValuesEcho(formData) {
      if (formData.expId) {
        this.getExpList(formData.expId);
        this.typeButDisable = true
        this.expButDisable = false
      } else {
        this.typeButDisable = false
        this.expSelect = null
        if ("candidateGroups" === formData.userType || "candidateDeptGroups" === formData.userType) {
          this.getRoleOrDeptReview(formData.candidateGroups)
        } else {
          this.getUserList(formData[formData.userType], formData.userType);
        }
      }
    },

    // 获取表达式信息
    getExpList(expId) {
      this.expSelect = this.modelerStore.expList?.find(item => item.id.toString() === expId);
    },

    // 获取人员信息
    getUserList(val, key) {
      if (StrUtil.isNotBlank(val)) {
        this.expButDisable = true
        this.typeButDisable = false
        if ('assignee' === key) {
          const uList = this.modelerStore.userList.filter(item => item.userId == val);
          this.delegationUserSelect = uList
        } else {
          const newArr = this.modelerStore.userList?.filter(i => val.split(',').includes(i.userId.toString()))
          this.delegationUserSelect = newArr
        }
      } else {
        this.expButDisable = false
        this.delegationUserSelect = []
      }
    },

    // 获取角色信息
    getRoleOrDeptReview(ids) {
      this.delegationDeptSelect = []
      this.delegationRoleSelect = []
      if (StrUtil.isNotBlank(ids)) {
        this.expButDisable = true
        this.typeButDisable = false
        // 根据id筛选出是角色还是部门
        const roleAndDeptIds = ids.split(",");
        const deptIds = roleAndDeptIds.filter(item => item.includes("dept"));
        const roleIds = roleAndDeptIds.filter(item => !item.includes("dept"));

        if (roleIds && roleIds.length > 0) {  // 角色
          const targetRoleList = this.modelerStore.roleList?.filter(i => roleIds.includes(i.roleId.toString()))
          this.delegationRoleSelect = targetRoleList;
          this.bpmnFormData.userType = "candidateGroups"
        }
        if (deptIds && deptIds.length > 0){ // 部门
          const targetDeptList = this.modelerStore.deptList?.filter(i => deptIds.includes(i.id))
          this.delegationDeptSelect = targetDeptList
          this.bpmnFormData.userType = "candidateDeptGroups"
        }
      } else {
        this.expButDisable = false
        this.delegationDeptSelect = []
        this.delegationRoleSelect = []
      }
    },

    // ------ 流程审批人员信息弹出框 start---------


    // 处理人员回显
    handleSelectData(key, value) {
      for (let oldKey in this.selectData) {
        if (key !== oldKey) {
          this.$set(this.selectData, oldKey, null);
        } else {
          this.$set(this.selectData, oldKey, value);
        }
      }
    },

    /*表达式选中赋值*/
    checkExpComplete() {
      this.expVisible = false;
    },

    // 删除节点
    deleteFlowAttar() {
      delete this.modelerStore.element.businessObject[`dataType`]
      delete this.modelerStore.element.businessObject[`expId`]
      delete this.modelerStore.element.businessObject[`assignee`]
      delete this.modelerStore.element.businessObject[`candidateUsers`]
      delete this.modelerStore.element.businessObject[`candidateGroups`]
    },

  }
}
</script>
<style scoped>
.select-tag {
  margin-right: 3px;
}
</style>