zxl
2025-03-03 c78889e71d16d26c03ff59746db47c6d4d2b98e0
src/components/Process/panel/taskPanel.vue
@@ -5,7 +5,7 @@
        <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-select v-model="bpmnFormData.userType" placeholder="用户类型" @change="updateUserType">
          <el-option
            v-for="item in userTypeOption"
            :key="item.value"
@@ -43,12 +43,26 @@
        </el-button-group>
      </el-form-item>
      <el-form-item label="候选角色" v-else>
      <el-form-item label="候选角色" v-else-if="bpmnFormData.userType === 'candidateGroups'">
        <el-input-tag v-model="bpmnFormData.candidateGroups" :value="bpmnFormData.candidateGroups"/>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选角色-->
          <el-tooltip class="box-item" effect="dark" content="候选角色" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user"  @click="multipleRoleCheck"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
            <el-button size="mini" type="warning" icon="el-icon-postcard" @click="singleExpCheck"/>
          </el-tooltip>
        </el-button-group>
      </el-form-item>
      <el-form-item label="候选部门" v-else>
        <el-input-tag v-model="bpmnFormData.candidateGroups" :value="bpmnFormData.candidateGroups"/>
        <el-button-group class="ml-4" style="margin-top: 4px">
          <!--候选部门-->
          <el-tooltip class="box-item" effect="dark" content="候选部门" placement="bottom">
            <el-button size="mini" type="primary" icon="el-icon-user"  @click="deptVisible = true"/>
          </el-tooltip>
          <!--选择表达式-->
          <el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
@@ -73,7 +87,7 @@
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-user v-if="userVisible" :checkType="checkType" :selectValues="selectData.assignee || selectData.candidateUsers" @handleUserSelect="userSelect"></flow-user>
      <flow-user v-show="userVisible" ref="user" :checkType="checkType" :num="num" :selectValues="selectData.assignee || selectData.candidateUsers" @handleUserSelect="userSelect"></flow-user>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="userVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="checkUserComplete">确 定</el-button>
@@ -95,6 +109,9 @@
      </div>
    </el-dialog>
    <!--  选择部门  -->
    <flow-dept  ref="dept" :checkeds="selectData.candidateGroups" :show="deptVisible" @close="closeDept" @submit="submitDept"/>
    <!--选择表达式-->
    <el-dialog
      title="选择表达式"
@@ -103,7 +120,7 @@
      :close-on-press-escape="false"
      :show-close="false"
    >
      <flow-exp v-if="expVisible" :selectValues="selectData.exp" @handleSingleExpSelect="expSelect"></flow-exp>
      <flow-exp :selectValues="selectData.exp" @handleSingleExpSelect="expSelect"></flow-exp>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="expVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="checkExpComplete">确 定</el-button>
@@ -119,7 +136,10 @@
import FlowRole from '@/components/flow/Role'
import FlowExp from '@/components/flow/Expression'
import ElInputTag from '@/components/flow/ElInputTag'
import FlowDept from '@/components/flow/Dept'
import {StrUtil} from '@/utils/StrUtil'
export default {
  name: "TaskPanel",
@@ -127,7 +147,8 @@
    FlowUser,
    FlowRole,
    FlowExp,
    ElInputTag
    ElInputTag,
    FlowDept
  },
  /** 组件传值  */
  props : {
@@ -138,20 +159,23 @@
  },
  data() {
    return {
      num: 0, // 用于触发用户选择更新
      userVisible: false,
      roleVisible: false,
      expVisible: false,
      deptVisible: false,
      isIndeterminate: true,
      checkType: 'single', // 选类
      userType: '',
      userTypeOption: [
        {label: '指定人员', value: 'assignee'},
        {label: '候选人员', value: 'candidateUsers'},
        {label: '候选角色', value: 'candidateGroups'}
        {label: '候选角色', value: 'candidateGroups'},
        {label: '候选部门', value: 'candidateDeptGroups'},
      ],
      checkAll: false,
      bpmnFormData: {
        userType: "",
        userType: "candidateDeptGroups",
        assignee: "",
        candidateUsers: "",
        candidateGroups: "",
@@ -164,7 +188,8 @@
      selectData: {
        assignee: null,
        candidateUsers: null,
        candidateGroups: null,
        candidateGroups: [],  // 角色
        candidateDeptGroups: [], // 部门
        exp: null,
      },
      otherExtensionList:[],
@@ -186,11 +211,16 @@
  },
  methods: {
    closeDept() {
      this.deptVisible = false
      this.selectData.candidateGroups = null
    },
    // 初始化表单
    resetTaskForm() {
      // 初始化设为空值
      this.bpmnFormData = {
        userType: "",
        userType: "candidateDeptGroups",
        assignee: "",
        candidateUsers: "",
        candidateGroups: "",
@@ -210,7 +240,7 @@
        const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key];
        this.$set(this.bpmnFormData, key, value);
      }
      // 人员信息回显
      // 人员、角色、部门信息回显
      this.checkValuesEcho(this.bpmnFormData);
    },
@@ -230,11 +260,15 @@
    // 更新人员类型
    updateUserType(val) {
      console.log("worinim", val)
      // 删除xml中已选择数据类型节点
      this.deleteFlowAttar();
      delete this.modelerStore.element.businessObject[`userType`]
      // 清除已选人员数据
      this.bpmnFormData[val] = null;
      if (val === "candidateDeptGroups") {
        this.bpmnFormData["candidateGroups"] = null;
      } else {
        this.bpmnFormData[val] = null;
      }
      this.selectData = {
        assignee: null,
        candidateUsers: null,
@@ -250,8 +284,9 @@
      if (StrUtil.isNotBlank(formData.expId)) {
        this.getExpList(formData.expId, formData.userType);
      } else {
        if ("candidateGroups" === formData.userType) {
          this.getRoleList(formData[formData.userType], formData.userType);
        console.log("我去", formData.userType)
        if ("candidateGroups" === formData.userType || "candidateDeptGroups" === formData.userType) {
          this.getRoleList(formData["candidateGroups"], "candidateGroups");
        } else {
          this.getUserList(formData[formData.userType], formData.userType);
        }
@@ -269,26 +304,57 @@
    // 获取人员信息
    getUserList(val, key) {
      if (StrUtil.isNotBlank(val)) {
        const newArr = this.modelerStore.userList?.filter(i => val.split(',').includes(i.userId.toString()))
        this.bpmnFormData[key] = newArr.map(item => item.nickName).join(',');
        if ('assignee' === key) {
          this.selectData[key] = newArr.find(item => item.userId.toString() === val).userId;
          console.log("这里开始报错,", this.modelerStore.userList)
          const uList = this.modelerStore.userList.filter(item => item.userId == val);
          this.bpmnFormData[key] = uList && uList.length > 0 ? uList[0].nickName : "人员不存在";
          this.selectData[key] = val;
        } else {
          const newArr = this.modelerStore.userList?.filter(i => val.split(',').includes(i.userId.toString()))
          console.log("指定人员", newArr)
          this.bpmnFormData[key] = newArr.map(item => item.nickName).join(',');
          this.selectData[key] = newArr.map(item => item.userId);
        }
        // if (this.$refs.user) {
        //   this.$refs.user.setChecked(this.selectData[key])
        // }
      }
    },
    // 获取角色信息
    getRoleList(val, key) {
      if (StrUtil.isNotBlank(val)) {
        const newArr = this.modelerStore.roleList?.filter(i => val.split(',').includes(i.roleId.toString()))
        this.bpmnFormData[key] = newArr.map(item => item.roleName).join(',');
        if ('assignee' === key) {
          this.selectData[key] = newArr.find(item => item.roleId.toString() === val).roleId;
        // 根据id筛选出是角色还是部门
        const roleAndDeptIds = val.split(",");
        const deptIds = roleAndDeptIds.filter(item => item.includes("dept") || item === '${data_launch}');
        const roleIds = roleAndDeptIds.filter(item => !item.includes("dept"));
        // 谁有值就是谁
        if (roleIds && roleIds.length > 0) {
          const newArr = this.modelerStore.roleList?.filter(i => roleIds.includes(i.roleId.toString()))
          this.bpmnFormData[key] = newArr.map(item => item.roleName).join(',');
          if ('assignee' === key) {
            console.log("不会吧?")
            this.selectData[key] = newArr.find(item => item.roleId.toString() === val).roleId;
          } else {
            this.selectData[key] = newArr.map(item => item.roleId);
          }
        } else {
          this.selectData[key] = newArr.map(item => item.roleId);
          console.log(deptIds, "部门IDs")
          const newArr = this.modelerStore.deptList?.filter(i => deptIds.includes(i.id))
          this.bpmnFormData[key] = newArr.map(item => item.label).join(',');
          if ('assignee' === key) {
            console.log("不会吧???")
            this.selectData[key] = newArr.find(item => item.id === val).id;
          } else {
            this.selectData[key] = newArr.map(item => item.id);
          }
          // this.$refs.dept.setCheckList(this.selectData[key])
        }
      }
    },
@@ -296,12 +362,19 @@
    /*单选人员*/
    singleUserCheck() {
      this.num+=1
      this.userVisible = true;
      this.checkType = "single";
      // this.$nextTick(() => {
      //   console.log(typeof this.selectData.assignee, "类型")
      //   this.$refs.user.setChecked(this.selectData.assignee);
      // });
    },
    /*多选人员*/
    multipleUserCheck() {
      this.num = this.num + 1
      this.userVisible = true;
      this.checkType = "multiple";
    },
@@ -339,7 +412,7 @@
      if (selection) {
        this.deleteFlowAttar();
        this.updateCustomElement('dataType', 'fixed');
        if (selection instanceof Array) {
        if (this.checkType === 'multiple') {
          const userIds = selection.map(item => item.userId);
          const nickName = selection.map(item => item.nickName);
          // userType = candidateUsers
@@ -347,6 +420,7 @@
          this.updateCustomElement(this.bpmnFormData.userType, userIds.join(','));
          this.handleSelectData(this.bpmnFormData.userType, userIds);
        } else {
          console.log(selection, "返回值")
          // userType = assignee
          this.bpmnFormData[this.bpmnFormData.userType] = selection.nickName;
          this.updateCustomElement(this.bpmnFormData.userType, selection.userId);
@@ -367,6 +441,22 @@
      }
    },
    // 部门选中数据
    submitDept(checkList, names) {
      this.deptVisible = false
      if (checkList && names) {
        this.deleteFlowAttar();
        this.bpmnFormData["candidateGroups"] = names;
        this.updateCustomElement('dataType', 'fixed');
        // userType = candidateGroups
        // 这里只能写死为:candidateGroups,因为flowable用户组的关键字就是它
        // this.updateCustomElement("candidateGroups", null); // 先清空再赋值,因为是一次性提交的部门数据,所以需要去重,直接赋值为null
        this.updateCustomElement("candidateGroups", checkList);
        this.handleSelectData("candidateGroups", checkList);
        console.log(checkList, "部门值")
      }
    },
    // 处理人员回显
    handleSelectData(key, value) {
      for (let oldKey in this.selectData) {
@@ -381,7 +471,7 @@
    /*用户选中赋值*/
    checkUserComplete() {
      this.userVisible = false;
      this.checkType = "";
      this.checkType = "single";
    },
    /*候选角色选中赋值*/