初始版本提交

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

@@ -0,0 +1,190 @@
+<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-tree
+          checkable
+          :tree-data="data.treeData"
+          autoExpandParent
+          defaultExpandAll
+          v-model:checkedKeys="data.checkedKeys"
+        >
+          <template #title="{ title, key }">
+            <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+            <template v-else>{{ title }}</template>
+          </template>
+        </a-tree>
+      </div>
+    </ModalPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import { useBpmnStore } from '/@bpmn/store/bpmn';
+  import { BpmnNodeKey, LevelEnum, MemberType } from '/@/enums/workflowEnum';
+  import { MemberConfig } from '/@/model/workflow/memberSetting';
+  import { ModalPanel } from '/@/components/ModalPanel/index';
+  import { NodeHead } from '/@/components/ModalPanel/index';
+  import { TreeProps } from 'ant-design-vue';
+  import { separator } from '../../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.SUPERIOR_LEADERS;
+  let data: {
+    treeData: TreeProps['treeData'];
+    checkedKeys: string[];
+    expandedNames: Object;
+    selected: Array<MemberConfig>;
+  } = reactive({ treeData: [], checkedKeys: [], expandedNames: {}, selected: [] });
+
+  function show() {
+    data.checkedKeys = [];
+    data.treeData = [];
+    if (props.memberList.length > 0) {
+      data.selected = props.memberList.filter((ele: MemberConfig) => {
+        if (ele.memberType === memberType) return ele;
+      });
+
+      if (data.selected.length > 0) {
+        data.selected.forEach((ele) => {
+          if (ele.leaderConfig?.level)
+            data.checkedKeys.push(ele.leaderConfig.nodeId + separator + ele.leaderConfig.level);
+        });
+      }
+    }
+    const store = useBpmnStore();
+    const { info } = store;
+    for (let item of info.values()) {
+      let showNodeTypes = [BpmnNodeKey.START, BpmnNodeKey.USER];
+      if (showNodeTypes.includes(item.type)) {
+        let name = item.name ? item.name : item.type;
+        data.treeData.push({
+          title: name,
+          key: item.id,
+          children: getLeaveChildren(item.id),
+        });
+        data.expandedNames[item.id] = name;
+      }
+    }
+
+    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;
+      });
+    }
+    for (const leader of data.checkedKeys) {
+      let arr = leader.split(separator);
+      if (arr.length == 2) {
+        let nodeId = arr[0];
+        let level = Number(arr[1]);
+        list.push({
+          memberType: memberType,
+          id: nodeId,
+          name: data.expandedNames[nodeId] + '-' + getLeaveName(level),
+          leaderConfig: { nodeId, level },
+        });
+      }
+    }
+    emits('change', [...list]);
+    close();
+  }
+  function close() {
+    visible.value = false;
+  }
+  function getLeaveName(level: LevelEnum) {
+    switch (level) {
+      case LevelEnum.ONE:
+        return '上一级领导';
+      case LevelEnum.SECOND:
+        return '上二级领导';
+      case LevelEnum.THREE:
+        return '上三级领导';
+      case LevelEnum.FOUR:
+        return '上四级领导';
+      case LevelEnum.FIVE:
+        return '上五级领导';
+      default:
+        break;
+    }
+  }
+  function getLeaveChildren(id: string) {
+    return [
+      {
+        title: getLeaveName(LevelEnum.ONE),
+        key: id + separator + LevelEnum.ONE,
+      },
+      {
+        title: getLeaveName(LevelEnum.SECOND),
+        key: id + separator + LevelEnum.SECOND,
+      },
+      {
+        title: getLeaveName(LevelEnum.THREE),
+        key: id + separator + LevelEnum.THREE,
+      },
+      {
+        title: getLeaveName(LevelEnum.FOUR),
+        key: id + separator + LevelEnum.FOUR,
+      },
+      {
+        title: getLeaveName(LevelEnum.FIVE),
+        key: id + separator + LevelEnum.FIVE,
+      },
+    ];
+  }
+</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;
+    overflow: auto;
+  }
+
+  :deep(.ant-tree-treenode) {
+    margin-left: 8px;
+    margin-bottom: 10px;
+  }
+
+  :deep(.ant-tree-list) {
+    height: 460px;
+  }
+</style>