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

<template>
  <div class="list-box">
    <div class="opr-box">
      <div class="header-box"><NodeHead :nodeName="t('人员列表')" /></div>
      <div class="button-box">
        <div v-for="(item, index) in allComponentList" :key="index">
          <component
            v-if="item.show"
            :is="item.component"
            :memberList="props.memberList"
            v-bind="item.componentProps"
            @change="changeList"
          >
            <a-button type="primary">{{ item.name }}</a-button>
          </component>
        </div>
      </div>
    </div>

    <a-table :dataSource="props.memberList" :columns="configColumns" :pagination="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'memberType'">
          {{ getMemberType(record.memberType) }}
        </template>
        <template v-if="column.key === 'operation'">
          <Icon icon="ant-design:delete-outlined" class="delete-icon" @click="deleteItem(index)" />
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';
  import Icon from '/@/components/Icon/index';
  import Posts from '/@bpmn/components/member/Posts.vue';
  import Roles from '/@bpmn/components/member/Roles.vue';
  // import Users from '/@bpmn/components/member/Users.vue';
  
  import SelectUserV2 from './SelectUserV2.vue';
  import NodeApprover from '/@bpmn/components/member/NodeApprover.vue';
  import UpperManagement from '/@bpmn/components/member/UpperManagement.vue';
  import FormFields from '/@bpmn/components/member/FormFields.vue';
  import { MemberType } from '/@/enums/workflowEnum';
  import { MemberConfig } from '/@/model/workflow/memberSetting';
  import { computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import ApiSelect from '/@bpmn/components/member/ApiSelect.vue';
  const { t } = useI18n();
  const emits = defineEmits(['update:memberList']);
  const props = withDefaults(
    defineProps<{
      isCommonType: Boolean;
      isUpper?: Boolean;
      isApiApprover?: Boolean;
      memberList: Array<MemberConfig>;
    }>(),
    {
      isCommonType: () => false,
      isUpper: () => false,
      isApiApprover: () => false,
      memberList: () => {
        return [];
      },
    },
  );
  const configColumns = [
    {
      title: t('类型'),
      dataIndex: 'memberType',
      key: 'memberType',
      align: 'center',
    },
    {
      title: t('名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
    },
  ];

  const allComponentList = computed(() => {
    return [
      { 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: UpperManagement,
        show: props.isCommonType ? false : props.isUpper ? false : true,
      },
      { name: t('表单字段'), component: FormFields, show: props.isCommonType ? false : true },
      { name: t('API审批人'), component: ApiSelect, show: props.isApiApprover ? true : false },
    ];
  });
  // 类型
  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审批人');
    return val;
  }
  function changeList(list) {
    emits('update:memberList', list);
  }
  function deleteItem(index: number) {
    let list = props.memberList;
    list.splice(index, 1);
    emits('update:memberList', list);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .opr-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;

      .header-box {
        flex-basis: 220px;
        align-items: flex-start;
        margin-bottom: -10px;
      }
    }

    .button-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      :deep(button) {
        margin: 4px;
        width: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .delete-icon {
    color: @clear-color;
  }
</style>