localhost_oa_front/src/views/materials-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('materials_inventory:history_in_out:create')"
          @click="openEditModal({})"
        >
          新增
        </a-button>
        <a-button
          type="primary"
          :disabled="!$auth('materials_inventory:history_in_out:export')"
          @click="exportMI()"
        >
          导出原材料盘点表
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script setup lang="tsx">
  import { useTable } from '@/components/core/dynamic-table';
  import {
    baseColumns,
    type TableColumnItem,
    type TableListItem,
    type TableQueryItem,
  } from './columns';
  import Api from '@/api/';
  import { onMounted, ref, type FunctionalComponent, unref } from 'vue';
  import { useFormModal, useModal } from '@/hooks/useModal';
  import { Button, message } from 'ant-design-vue';
  import { formSchemas } from './formSchemas';
  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: 40,
        maxWidth: 40,
        hideInSearch: true,
        fixed: 'right',
        dataIndex: 'files',
        customRender: ({ record }) => <FilesRender {...record} />,
      },
      {
        title: '操作',
        maxWidth: 80,
        width: 80,
        dataIndex: 'ACTION',
        hideInSearch: true,
        fixed: 'right',
        actions: ({ record }) => [
          {
            icon: 'ant-design:edit-outlined',
            tooltip: '编辑',
            auth: {
              perm: 'materials_inventory:history_in_out:update',
              effect: 'disable',
            },
            onClick: () => openEditModal(record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'red',
            tooltip: '删除此记录',
            auth: 'materials_inventory:history_in_out:delete',
            popConfirm: {
              title: '你确定要删除吗？',
              placement: 'left',
              onConfirm: () => delRowConfirm(record.id),
            },
          },
          {
            icon: 'ant-design:cloud-upload-outlined',
            tooltip: '上传附件',
            onClick: () => openAttachmentUploadModal(record),
          },
        ],
      },
    ];
  });
  const exportMI = async () => {
    const { time } = unref<TableQueryItem>(
      dynamicTableInstance?.queryFormRef?.formModel as TableQueryItem,
    );
    if (!time) {
      message.warn('请先在查询区选择导出月份时间');
    }
    console.log('exportMI');
  };
  const openAttachmentUploadModal = async (record: TableListItem) => {
    isUploadPopupVisiable.value = true;
    fnModal.show({
      width: 800,
      title: `上传附件: ${record.id}`,
      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.materialsInOut.materialsInOutUpdate(
      { 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.materialsInOut.materialsInOutUpdate(
              { id: record.id },
              params as API.MaterialsInOutUpdateDto,
            );
          } else {
            await Api.materialsInOut.materialsInOutCreate(params as API.MaterialsInOutDto);
          }
          dynamicTableInstance?.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: formSchemas(!!record.id),
      },
    });
    // 如果是编辑的话，需要获取详情
    if (record.id) {
      const info = await Api.materialsInOut.materialsInOutInfo({ id: record.id });
      formRef?.setFieldsValue({
        ...info,
      });
    }
  };
  const delRowConfirm = async (record) => {
    await Api.materialsInOut.materialsInOutDelete({ id: record });
    dynamicTableInstance?.reload();
  };

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

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

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