index.tsx 6.59 KB
import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import AddOrUpdate from '@/pages/product/procure/components/AddOrUpdate';
import {
  postProcureBillDelete,
  postProcureBillPage,
  postServiceConstProcureBillAuditStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import { ProTable, type ActionType } from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef } from 'react';
import Audit from './components/Audit';

export default () => {
  const actionRef = useRef<ActionType>();
  const columns = [
    {
      title: '单号',
      dataIndex: 'id',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '创建人',
      dataIndex: 'createByName',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '总金额',
      dataIndex: 'totalAmount',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatusText',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '审核备注',
      dataIndex: 'auditNotes',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '备注',
      dataIndex: 'notes',
      ellipsis: true,
      width: 180,
      hideInSearch: true,
    },
    {
      title: '采购单号',
      dataIndex: 'id',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '创建人',
      dataIndex: 'createByNameLike',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '创建时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '审核状态',
      valueType: 'select',
      key: 'auditStatus',
      dataIndex: 'auditStatus',
      filters: true,
      onFilter: true,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstProcureBillAuditStatus();
        return enumToSelect(res.data);
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record) => [
        record.paths?.includes('UPDATE') && (
          <AddOrUpdate
            key="update"
            record={record}
            onfinish={() => {
              actionRef.current?.reload();
            }}
          />
        ),
        record.paths?.includes('UPDATE') && (
          <ButtonConfirm
            key="delete"
            className="p-0"
            title={'确认删除该记录?'}
            text="删除"
            onConfirm={async () => {
              let res = await postProcureBillDelete({
                query: { id: record.id },
              });
              if (res) {
                message.success(res.message);
                actionRef.current?.reload();
              }
            }}
          />
        ),
        record.paths?.includes('AUDIT') && (
          <Audit
            recordId={record.id}
            onClose={() => {
              actionRef.current?.reload();
            }}
          ></Audit>
        ),
      ],
    },
  ];

  return (
    <ProTable
      actionRef={actionRef}
      columns={columns}
      request={async (params) => {
        const res = await postProcureBillPage({
          data: {
            ...params,
          },
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          return {
            data: res?.data?.data,
            total: res?.data?.total || 0,
          };
        }
        return {
          data: [],
          success: false,
        };
      }}
      rowKey="id"
      pagination={{
        showQuickJumper: true,
      }}
      expandable={{
        expandedRowRender: (record) => (
          <ProTable
            columns={[
              {
                title: '商品名称',
                dataIndex: 'productName',
                key: 'productName',
              },
              {
                title: '单位',
                dataIndex: 'productUnitName',
                key: 'productUnitName',
              },
              {
                title: '单价',
                dataIndex: 'productUnitPrice',
                key: 'productUnitPrice',
              },
              { title: '数量', dataIndex: 'number', key: 'number' },
              { title: '小计', dataIndex: 'totalPrice', key: 'totalPrice' },
              {
                title: '附件',
                dataIndex: 'annex',
                key: 'annex',
                render: (_, record) => (
                  <div>
                    {record.annexList?.map((url, index) => {
                      const shortName =
                        url.split('/').pop()?.slice(0, 15) ||
                        `附件 ${index + 1}`;
                      return (
                        <a
                          key={index}
                          href={url}
                          target="_blank"
                          rel="noopener noreferrer"
                          title={url} // 悬停显示完整链接
                          style={{
                            display: 'block',
                            marginBottom: '4px',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            maxWidth: '200px', // 限制显示宽度
                          }}
                        >
                          {shortName.length < url.split('/').pop()?.length
                            ? `${shortName}...`
                            : shortName}
                        </a>
                      );
                    })}
                  </div>
                ),
              },
              { title: '备注', dataIndex: 'notes', key: 'notes' },
            ]}
            headerTitle={false}
            search={false}
            options={false}
            dataSource={record.procureBillDetailList}
            pagination={false}
          />
        ),
      }}
      dateFormatter="string"
      headerTitle="采购管理"
      options={false}
      toolBarRender={() => [
        <AddOrUpdate
          key="add"
          record={undefined}
          onfinish={() => actionRef.current?.reload()}
        />,
      ]}
    />
  );
};