financial_audit_console/src/pages/Business/Inventory/index.tsx

import useModal from '@/components/Modal'
import { PageContainer } from '@ant-design/pro-layout'
import { Button } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useRowScript } from './hooks/useRowScript'
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DeleteOutlined,
  EditOutlined,
  FileAddOutlined,
  FolderAddOutlined,
  SelectOutlined,
  FolderOpenFilled,
  FileTextOutlined
} from '@ant-design/icons'
import LeftMenu from '../RuleCode/components/LeftMenu'
import ProTable from '@ant-design/pro-table'
import { useEffect, useState } from 'react'
import styles from './index.less'

export enum TemplateMode {
  PAPER = 'paper',
  UPLOAD = 'upload',
  NIL = 'nil'
}
const Inventory = () => {
  const [modal, ModalDOM] = useModal()
  const [activeKey, setActivekey] = useState<Nullable<string>>(null)
  const {
    query,
    loading,
    record,
    list = [],
    rowClick,
    move,
    addFolder,
    addFile,
    editFolder,
    deleteFolderOrFile,
    moveWithOperation
  } = useRowScript(modal, activeKey)

  useEffect(() => {
    if (activeKey) {
      query()
    }
  }, [activeKey])

  const columns: ColumnsType<API.ProfileTemplateItem> = [
    {
      title: '目录文件名称',
      dataIndex: 'name',
      width: '50%',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: (text, record) => (
        <div className="ml-2">
          {record.folder ? <FolderOpenFilled /> : <FileTextOutlined />}
          <span className="ml-2">{text}</span>
        </div>
      )
    },
    {
      title: '状态',
      dataIndex: 'enable',
      align: 'center',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: (text, record) => {
        if (record.folder) return null
        return text ? <span className="text-green">启用</span> : <span className="text-red">停用</span>
      }
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      align: 'center',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: (text, record) => {
        if (record.folder) return null
        return text ? '是' : '否'
      }
    },
    {
      title: '资料提供方式',
      dataIndex: 'mode',
      align: 'center',
      render: (mode: TemplateMode, record) => {
        if (record.folder) return null
        return (
          <div className={styles.modeBox}>
            {mode.includes(TemplateMode.PAPER) ? (
              <span className="border border-hex-91d5ff text-blue bg-hex-e6f7ff rounded-1 px-1 text-sm">
                纸质
              </span>
            ) : null}
            {mode.includes(TemplateMode.UPLOAD) ? (
              <span className="border border-hex-9fede5 text-hex-13c2c2 bg-hex-e6fffb rounded-1 px-1 text-sm">
                上传
              </span>
            ) : null}
          </div>
        )
      }
    }
  ]

  const handleMenuOnChange = (key: string) => {
    setActivekey(key)
  }
  return (
    <PageContainer title={false}>
      <div className="h-full w-full flex flex-row">
        <LeftMenu title="业务列表" onChange={key => handleMenuOnChange(key)} />
        <div className="bg-white ml-8 rounded-20px" style={{ width: 'calc(100% - 248px)' }}>
          <ProTable
            scroll={{ y: document.body.clientHeight - 259 }}
            search={false}
            rowKey="ID"
            headerTitle={
              <div className="flex flex-nowrap justify-start items-center">
                <div className="children:mx-1 px-1 py-2 ">
                  <Button
                    icon={<FolderAddOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={() => addFolder()}>
                    新建目录
                  </Button>
                  <Button
                    icon={<FileAddOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={() => addFile('add')}>
                    新建文件
                  </Button>
                  <Button
                    icon={<EditOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={() => {
                      record?.folder && editFolder()
                      !record?.folder && addFile('update')
                    }}
                    disabled={!record}>
                    编辑
                  </Button>
                  <Button
                    icon={<DeleteOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={deleteFolderOrFile}
                    disabled={!record}>
                    删除
                  </Button>
                  <Button
                    icon={<ArrowUpOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record?.moveable || record?.position === 'top'}
                    onClick={() => moveWithOperation('up')}>
                    上移
                  </Button>
                  <Button
                    icon={<ArrowDownOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record?.moveable || record?.position === 'bottom'}
                    onClick={() => moveWithOperation('down')}>
                    下移
                  </Button>
                  <Button
                    icon={<SelectOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record}
                    onClick={move}>
                    移动至
                  </Button>
                </div>
              </div>
            }
            loading={loading}
            columns={columns}
            dataSource={list}
            pagination={false}
            size="small"
            bordered
            expandable={{ defaultExpandAllRows: true }}
            onRow={record => ({
              onClick: () => rowClick(record)
            })}
            rowClassName={row => (row.ID === record?.ID ? 'ant-table-row-selected' : '')}
          />
        </div>
      </div>
      {ModalDOM}
    </PageContainer>
  )
}
export default Inventory