management/src/pages/Contract/List/index.tsx

import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import SvgIcon from '@/components/SvgIcon'
import { ContractTree } from '@/types/contract'
import consts from '@/utils/consts'
import { CaretDownOutlined } from '@ant-design/icons'
import { Button, Dropdown, Menu, message, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useActivate } from 'react-activation'
import { RouteComponentProps } from 'react-router'
import { Link } from 'react-router-dom'
import { apiContractList } from './api'
import styles from './index.module.scss'
import './index.scss'
const List: React.FC<RouteComponentProps> = () => {
  const [ tree, setTree ] = useState({
    bidsectionId: '',
    children: [],
    childsTotal: 0,
    contracts: 0,
    contractsIncome: '',
    contractsIncomeProgress: '',
    contractsPaid: '',
    contractsPay: '',
    contractsPayProgress: '',
    contractsReturned: '',
    csrf: '',
    hasFolder: false,
    id: '',
    isBid: false,
    isEnd: false,
    isfolder: 0,
    name: '',
    parentId: '',
    projectId: ''
  })
  const getTree = async () => {
    const { data = {}, code = -1 } = await apiContractList()
    if (code === consts.RET_CODE.SUCCESS) {
      setTree(data)
    }
  }
  const columns:ColumnsType<ContractTree> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '25%',
      render: (text: string, record: ContractTree) => {
        if (record.isfolder) {
          return <div style={{ verticalAlign: "baseline" }}><SvgIcon iconClass="folder" fontSize="12" /><span className="pi-mg-left-2">{text}</span></div>
        } else {
        return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span>
        <Link to={{ pathname: '/console/contract/content/summary', state: { id: record.bidsectionId } }}>{text}</Link>
        </div>
        }
      }
    },
    {
      title: '合同总数',
      dataIndex: 'contracts',
      key: 'contracts',
      width: '12%',
      align: 'right'
    },
    {
      title: '收入合同金额',
      dataIndex: 'contractsIncome',
      key: 'contractsIncome',
      width: '18%',
      align: 'right'
    },
    {
      title: '回款进度',
      dataIndex: 'contractsIncomeProgress',
      key: 'contractsIncomeProgress',
      width: '12%',
      align: 'center'
    },
    {
      title: '支出合同金额',
      dataIndex: 'contractsPay',
      key: 'contractsPay',
      width: '18%',
      align: 'right'
    },
    {
      title: '支付进度',
      dataIndex: 'contractsPayProgress',
      key: 'contractsPayProgress',
      width: '12%',
      align: 'center'
    }
  ]
  const handleMenuClick = ({ key }: any) => {
    message.info(`Click on item ${key}`)
  }
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1">展开所有</Menu.Item>
      <Menu.Item key="2">收起所有</Menu.Item>
    </Menu>
  )

  useActivate(() => {
    getTree()
  })

  useEffect(() => {
    getTree()
  }, [])
  return (
    <div className="list-content">
      <Header>
        <Slot>
          <Dropdown overlay={menu}>
            <Button type="text" size="small" className={styles.textBtn}>展开/收起<CaretDownOutlined /></Button>
          </Dropdown>
        </Slot>
      </Header>
      <div className={styles.tableContent}>
        <Table<ContractTree>
          columns={columns}
          dataSource={tree.children}
          pagination={false}
          rowKey={record => record.id}
          indentSize={20}
          bordered
        >
        </Table>
      </div>
    </div>
  )
}
export default List