geg-gas-web/src/views/workflow/design/bpmn/components/member/UpperManagement.vue

<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>