localhost_oa_front/src/views/materials-inventory/company/index.vue

<template>
  <div v-if="columns?.length">
    <DynamicTable
      row-key="id"
      header-title="公司管理"
      title-tooltip=""
      :data-request="Api.company.companyList"
      :columns="columns"
      bordered
      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 { useFormModal, useModal } from '@/hooks/useModal';
  import { formSchemas } from './formSchemas';
  import { Button } from 'ant-design-vue';
  import AttachmentManage from '@/components/business/attachment-manage/index.vue';
  import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
  import { ref, onMounted, type FunctionalComponent } from 'vue';
  import { useDictStore } from '@/store/modules/dict';
  defineOptions({
    name: 'Company',
  });
  const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: true } });
  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,
        dataIndex: 'files',
        customRender: ({ record }) => <FilesRender {...record} />,
      },
      {
        title: '操作',
        maxWidth: 150,
        width: 150,
        minWidth: 150,
        fixed: 'right',
        dataIndex: 'ACTION',
        hideInSearch: true,
        actions: ({ record }) => [
          {
            icon: 'ant-design:edit-outlined',
            tooltip: '编辑',
            auth: {
              perm: 'app:company:update',
              effect: 'disable',
            },
            onClick: () => openEditModal(record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'red',
            tooltip: '删除此公司',
            auth: 'app:company: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.name}`,
      content: () => {
        return (
          <AttachmentUpload
            bussinessModule="company"
            bussinessRecordId={record.id}
            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.company.companyUpdate({ 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) => {
          if (record.id) {
            await Api.company.companyUpdate({ id: record.id }, values);
          } else {
            await Api.company.companyCreate(values);
          }
          dynamicTableInstance?.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: formSchemas,
      },
    });

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

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

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

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