多实例子流程实现

src/views/workflow/design/bpmn/components/member/MemberTable.vue

@@ -46,6 +46,7 @@
   import { computed } from 'vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import ApiSelect from '/@bpmn/components/member/ApiSelect.vue';
+  import NodeAuditPerson from "/@bpmn/components/member/NodeAuditPerson.vue";
   const { t } = useI18n();
   const emits = defineEmits(['update:memberList']);
   const props = withDefaults(
@@ -90,7 +91,8 @@
       { name: t('添加岗位'), component: Posts, show: true },
       { name: t('添加角色'), component: Roles, show: true },
       { name: t('添加人员'), component: SelectUserV2, show: true, componentProps: {buttonShow: true, multiple: true} },
-      { name: t('节点审批人'), component: NodeApprover, show: props.isCommonType ? false : true },
+      { name: t('节点候选人'), component: NodeApprover, show: props.isCommonType ? false : true },
+        { name: t('节点审批人'), component: NodeAuditPerson, show: props.isCommonType ? false : true },
       {
         name: t('上级领导'),
         component: UpperManagement,
@@ -103,12 +105,13 @@
   // 类型
   function getMemberType(val: MemberType) {
     if (val === MemberType.POST) return t('岗位');
-    if (val === MemberType.ROLE) return t('角色');
-    if (val === MemberType.USER) return t('人员');
-    if (val === MemberType.SPECIFY_NODE_APPROVER) return t('指定审批人');
-    if (val === MemberType.SUPERIOR_LEADERS) return t('上级领导');
-    if (val === MemberType.FORM_FIELD) return t('表单字段');
-    if (val === MemberType.API) return t('API审批人');
+    else if (val === MemberType.ROLE) return t('角色');
+    else if (val === MemberType.USER) return t('人员');
+    else if (val === MemberType.SPECIFY_NODE_APPROVER) return t('指定候选人');
+    else if (val === MemberType.AUDIT_PERSON) return t('指定审批人');
+    else if (val === MemberType.SUPERIOR_LEADERS) return t('上级领导');
+    else if (val === MemberType.FORM_FIELD) return t('表单字段');
+    else if (val === MemberType.API) return t('API审批人');
     return val;
   }
   function changeList(list) {

src/views/workflow/design/bpmn/components/member/NodeApprover.vue

@@ -4,7 +4,7 @@
     <ModalPanel
       :visible="visible"
       :width="400"
-      :title="t('指定节点审批人')"
+      :title="t('指定节点候选人')"
       @submit="submit"
       @close="close"
     >

src/views/workflow/design/bpmn/components/member/NodeAuditPerson.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div @click="show"><slot></slot></div>
+    <ModalPanel
+      :visible="visible"
+      :width="400"
+      :title="t('指定节点审批人')"
+      @submit="submit"
+      @close="close"
+    >
+      <div class="title">
+        <NodeHead :node-name="t('节点列表')" />
+      </div>
+      <div class="list-box">
+        <a-checkbox
+          v-for="(item, index) in nodes.list"
+          :key="index"
+          :value="item.id"
+          size="small"
+          v-model:checked="item.checked"
+          >{{ item.name }}</a-checkbox
+        >
+      </div>
+    </ModalPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import { MemberType } from '/@/enums/workflowEnum';
+  import { MemberConfig, NodesConfig } from '/@/model/workflow/memberSetting';
+  import { NodeHead, ModalPanel } from '/@/components/ModalPanel/index';
+  import { InfoId } from '/@/model/workflow/bpmnConfig';
+  import { getNodeList } from '/@bpmn/config/info';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  const emits = defineEmits(['change']);
+  const props = withDefaults(
+    defineProps<{
+      memberList: Array<MemberConfig>;
+    }>(),
+    {
+      memberList: () => {
+        return [];
+      },
+    },
+  );
+  const visible = ref(false);
+  const memberType = MemberType.AUDIT_PERSON;
+  let nodes: { list: Array<NodesConfig> } = reactive({
+    list: [],
+  });
+  function show() {
+    nodes.list = [];
+    let selectIds: Array<InfoId> = [];
+    if (props.memberList.length > 0) {
+      selectIds = props.memberList
+        .filter((ele: MemberConfig) => {
+          if (ele.memberType && ele.memberType === memberType) return ele;
+        })
+        .map((ele: MemberConfig) => {
+          return ele.id;
+        });
+    }
+    getNodeList().map((item) => {
+      nodes.list.push({ id: item.id, name: item.name, checked: selectIds.includes(item.id) });
+    });
+    visible.value = true;
+  }
+  function submit() {
+    let list: Array<MemberConfig> = [];
+    if (props.memberList.length > 0) {
+      list = props.memberList.filter((ele: MemberConfig) => {
+        if (ele.memberType != memberType) return ele;
+      });
+    }
+    nodes.list.forEach((item: NodesConfig) => {
+      if (item.checked) {
+        list.push({
+          memberType: memberType,
+          name: item.name,
+          id: item.id,
+        });
+      }
+    });
+    emits('change', [...list]);
+    close();
+  }
+  function close() {
+    visible.value = false;
+  }
+</script>
+
+<style scoped>
+  .title {
+    display: flex;
+    justify-content: space-between;
+    height: 40px;
+    font-size: 16px;
+    color: #333333;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 10px;
+  }
+
+  .list-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin: 0 20px;
+  }
+
+  :deep(.ant-checkbox-wrapper) {
+    margin-left: 8px;
+    margin-bottom: 10px;
+  }
+
+  :deep(.ant-checkbox-inner) {
+    border-radius: unset;
+  }
+
+  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+    border-radius: unset;
+  }
+</style>