oa_front/src/views/contract/index.vue

<template>
  <div v-if="columns?.length">
    <DynamicTable
      row-key="id"
      header-title="合同管理"
      title-tooltip=""
      :data-request="Api.contract.contractList"
      :columns="columns"
      bordered
      :scroll="{ x: 1920 }"
      size="small"
    >
      <template #toolbar>
        <a-button
          type="primary"
          :disabled="!$auth('system:role:create')"
          @click="openEditModal({})"
        >
          新增
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script setup lang="tsx">
  import { useTable } from '@/components/core/dynamic-table';
  import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
  import Api from '@/api/';
  import { useDictStore } from '@/store/modules/dict';
  import { onMounted, ref, type FunctionalComponent } from 'vue';
  import { DictEnum } from '@/enums/dictEnum';
  import { useFormModal, useModal } from '@/hooks/useModal';
  import { contractSchemas } from './formSchemas';
  import { formatToDate } from '@/utils/dateUtil';
  import { Button } from 'ant-design-vue';
  import AttachmentManage from '@/components/business/attachment-manage/index.vue';
  import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
  defineOptions({
    name: 'Contract',
  });
  const [DynamicTable, dynamicTableInstance] = useTable();
  const [showModal] = useFormModal();
  const [fnModal] = useModal();
  const { getDictItemsByCode } = useDictStore();
  const contractTypes = ref<API.DictItemEntity[]>([]);

  const getContractTypes = async () => {
    contractTypes.value = await getDictItemsByCode(DictEnum.ContractType);
  };
  const isUploadPopupVisiable = ref(false);

  // contractList;
  let columns = ref<TableColumnItem[]>();
  onMounted(() => {
    getContractTypes().then((res) => {
      columns.value = [
        ...baseColumns({
          dynamicTableInstance,
          contractTypes: contractTypes.value,
        }),
        {
          title: '附件',
          width: 50,
          maxWidth: 50,
          hideInSearch: true,
          fixed: 'right',
          dataIndex: 'files',
          customRender: ({ record }) => <FilesRender {...record} />,
        },
        {
          title: '操作',
          maxWidth: 80,
          width: 80,
          minWidth: 80,
          dataIndex: 'ACTION',
          hideInSearch: true,
          fixed: 'right',
          actions: ({ record }) => [
            {
              icon: 'ant-design:edit-outlined',
              tooltip: '编辑',
              auth: {
                perm: 'app:contract:update',
                effect: 'disable',
              },
              onClick: () => openEditModal(record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'red',
              tooltip: '删除此合同',
              auth: 'app:contract:delete',
              popConfirm: {
                title: '你确定要删除吗？',
                placement: 'left',
                onConfirm: () => delRowConfirm(record.id),
              },
            },
            {
              icon: 'ant-design:cloud-upload-outlined',
              tooltip: '上传附件',
              onClick: () => openAttachmentUploadModal(record),
            },
          ],
        },
      ];
    });
  });

  const openAttachmentUploadModal = async (record: API.ContractEntity) => {
    isUploadPopupVisiable.value = true;
    fnModal.show({
      width: 800,
      title: `合同编号: ${record.contractNumber}`,
      content: () => {
        return (
          <AttachmentUpload
            onClose={handleUploadClose}
            afterUploadCallback={(files) => {
              afterUploadCallback(files, record.id);
            }}
          ></AttachmentUpload>
        );
      },
      destroyOnClose: true,
      open: isUploadPopupVisiable.value,
      footer: null,
    });
  };
  const handleUploadClose = (hasSuccess: boolean) => {
    fnModal.hide();
    isUploadPopupVisiable.value = false;
  };
  const afterUploadCallback = async (
    files: { filename: { path: string; id: number } }[],
    id: number,
  ) => {
    await Api.contract.contractUpdate({ id }, { fileIds: files.map((item) => item.filename.id) });
    dynamicTableInstance?.reload();
  };

  /**
   * @description 打开新增/编辑弹窗
   */
  const openEditModal = async (record: Partial<TableListItem>) => {
    const [formRef] = await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}合同`,
        width: '50%',
        onFinish: async (values) => {
          const params = {
            ...values,
            signingDate: formatToDate(values.signingDate),
            deliveryDeadline: formatToDate(values.deliveryDeadline),
          };
          if (record.id) {
            await Api.contract.contractUpdate({ id: record.id }, params);
          } else {
            await Api.contract.contractCreate(params);
          }
          dynamicTableInstance?.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: contractSchemas(contractTypes.value),
      },
    });

    // 如果是编辑的话，需要获取角色详情
    if (record.id) {
      const info = await Api.contract.contractInfo({ id: record.id });
      formRef?.setFieldsValue({
        ...info,
      });
    }
  };
  const delRowConfirm = async (record) => {
    await Api.contract.contractDelete({ id: record });
    dynamicTableInstance?.reload();
  };

  const FilesRender: FunctionalComponent<TableListItem> = (contract: API.ContractEntity) => {
    const [fnModal] = useModal();
    return (
      <Button
        type="link"
        onClick={() => {
          openFilesManageModal(fnModal, contract);
        }}
      >
        {contract.files?.length || 0}
      </Button>
    );
  };

  const openFilesManageModal = (fnModal, contract: API.ContractEntity) => {
    const fileIds = contract.files?.map((item) => item.id) || [];
    fnModal.show({
      width: 1200,
      title: `附件管理`,
      content: () => {
        return (
          <AttachmentManage
            fileIds={fileIds}
            onDelete={(unlinkIds) => unlinkAttachments(contract.id, unlinkIds)}
          ></AttachmentManage>
        );
      },
      destroyOnClose: true,
      footer: null,
    });
  };
  const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
    await Api.contract.unlinkAttachments({ id }, { fileIds: unlinkIds });
    dynamicTableInstance?.reload();
  };
</script>

<style lang="less" scoped></style>