pay-company/src/pages/contract/contract_borrows/index.tsx

import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ContractArchiveBorrowStatusEnum } from '@/gen/Enums';
import EmployeeShow from '@/pages/company/employees/modals/EmployeeShow';
import CodeInfo from '@/pages/contract/contract_archives/modals/Show';
import { ProTable } from '@ant-design/pro-components';
import Create from './modals/Create';
import Show from './modals/Show';
import Update from './modals/Update';
import Read from './read/modals/Read';

export default function Index({ title = '合同档案借用' }) {
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="contract_borrows"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        request={async (params, sort) =>
          MyProTableProps.request(
            params,
            sort,
            Apis.Contract.ContractArchiveBorrows.List,
          )
        }
        headerTitle="合同借用列表"
        toolBarRender={(action) => [
          <MyToolBarActions
            key="toolbar"
            actions={{
              add: (
                <Create key="Create" reload={action?.reload} title={title} />
              ),
              read: (
                <Read key="Read" reload={action?.reload} title="合同借阅" />
              ),
            }}
          />,
        ]}
        columns={[
          MyColumns.ID({
            search: false,
          }),
          MyColumns.EnumTag({
            title: '借用状态',
            dataIndex: 'borrow_status',
            valueEnum: ContractArchiveBorrowStatusEnum,
          }),
          // MyColumns.EnumTag({
          //   title: '归还状态',
          //   dataIndex: 'return_status',
          //   valueEnum: ContractArchiveFileReturnStatusEnum,
          // }),
          {
            title: '档案编号',
            dataIndex: ['contract_archive', 'code'],
            render: (_, item: any) => (
              <CodeInfo
                item={{ ...item, type: 'link', id: item?.contract_archives_id }}
                title={item?.contract_archive?.code}
              />
            ),
          },
          {
            title: '借用信息',
            search: false,
            render: (_, item: any) => {
              if (!item?.contract_archive_borrow_files) {
                return '-';
              }
              return (
                <div>
                  {item.contract_archive_borrow_files.map(
                    (res: any, index: number) => (
                      <div key={index} style={{ marginBottom: 4 }}>
                        文件: {res?.contract_archive_file?.name}，借用:
                        {res?.contract_archive_file?.borrow_number}，遗失:
                        {res?.contract_archive_file?.lost_number}，损坏:
                        {
                          res?.contract_archive_file?.contract_archive_file
                            ?.lost_number
                        }
                        ，损坏: {res?.contract_archive_file?.damaged_number}
                      </div>
                    ),
                  )}
                </div>
              );
            },
          },
          {
            title: '借用人',
            dataIndex: 'borrower_name',
            search: false,
            render: (_, item: any) => (
              <EmployeeShow
                item={{ ...item, type: 'link', id: item?.borrower_id }}
                title={item?.borrower_name}
              />
            ),
          },

          {
            title: '借用日期',
            dataIndex: 'borrow_date',
            search: false,
          },
          {
            title: '应归还日期',
            dataIndex: 'expected_return_date',
            search: false,
          },
          MyColumns.Boolean({
            title: '需要归还',
            dataIndex: 'is_need_return',
            search: false,
          }),
          {
            title: '登记人',
            dataIndex: ['registrar', 'name'],
            search: false,
            render: (_, item: any) => (
              <EmployeeShow
                item={{ ...item, type: 'link', id: item?.operator_id }}
                title={item?.operator_name}
              />
            ),
          },
          // MyColumns.CreatedAt(),
          MyColumns.UpdatedAt(),
          MyColumns.Option({
            width: 100,
            render: (_, item: any, _index, action) => (
              <MyTableActions
                actions={{
                  show: (
                    <Show item={item} reload={action?.reload} title={title} />
                  ),
                  record: (
                    <MyButtons.Default
                      title="登记"
                      type="primary"
                      disabled={item?.borrow_status !== 'Approved'}
                      isConfirm={true}
                      description={`是否确认借用人已领取？`}
                      onConfirm={() =>
                        Apis.Contract.ContractArchiveBorrows.Borrow({
                          id: item.id,
                        }).then(() => action?.reload())
                      }
                    />
                  ),
                  update: (
                    <Update item={item} reload={action?.reload} title={title} />
                  ),
                }}
              />
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}