localhost_oa_front/src/views/meterials-inventory/in-out/index.vue

<template>
  <div v-if="columns?.length">
    <DynamicTable
      row-key="id"
      header-title="原材料盘点"
      title-tooltip=""
      :data-request="Api.materialsInOut.materialsInOutList"
      :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 { onMounted, ref, type FunctionalComponent } from 'vue';
  import { useFormModal, useModal } from '@/hooks/useModal';
  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: 'MaterialsInOut',
  });
  const [DynamicTable, dynamicTableInstance] = useTable();
  const [showModal] = useFormModal();
  const [fnModal] = useModal();
  const isUploadPopupVisiable = ref(false);

  let columns = ref<TableColumnItem[]>();
  onMounted(() => {
    columns.value = [
      ...baseColumns,
      {
        title: '附件',
        width: 50,
        maxWidth: 50,
        hideInSearch: true,
        fixed: 'right',
        dataIndex: 'files',
        customRender: ({ record }) => <FilesRender {...record} />,
      },
      {
        title: '操作',
        maxWidth: 150,
        width: 150,
        minWidth: 150,
        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: TableListItem) => {
    // 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: TableListItem) => {
    const [fnModal] = useModal();
    return (
      <Button
        type="link"
        onClick={() => {
          openFilesManageModal(fnModal, contract);
        }}
      >
        {contract.files?.length || 0}
      </Button>
    );
  };

  const openFilesManageModal = (fnModal, contract: TableListItem) => {
    // 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>