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

import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import SvgIcon from '@/components/SvgIcon'
import { tenderStore } from '@/store/mobx'
import { ContractTree } from '@/types/contract'
import consts from '@/utils/consts'
import { CaretDownOutlined } from '@ant-design/icons'
import { useContractTree, useTableExpand } from '@/utils/common/customHooks'
import { Button, Dropdown, Menu, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useState, useEffect } from 'react'
import { useAliveController } from 'react-activation'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import styles from './index.module.scss'
import { apiContractList } from '@/utils/common/api'
import { handleIntoBidsection } from '@/utils/util'
const List: React.FC<RouteComponentProps> = props => {
  const { clear } = useAliveController()
  const [ loading, setLoading ] = useState<boolean>(false)
  useEffect(() => {
    // 清除所有的缓存页面
    clear()
    getTree()
  }, [])

  const getTree = async () => {
    setLoading(true)
    const { data, code = -1 } = await apiContractList(consts.BIDSECTION_TYPE.CONTRACT)
    if (code === consts.RET_CODE.SUCCESS) {
      setTree(data)
      setLoading(false)
    }
  }

  const [ tree, setTree ] = useContractTree()
  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree)

  const handleLinkClick = (id: string, name: string) => {
    tenderStore.saveTenderInfo({ bidsectionId: id, name })
    const hasPermission = handleIntoBidsection("contract")
    if (hasPermission) {
      props.history.push('/console/contract/content/summary')
    }
  }

  const columns: ColumnsType<ContractTree> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '25%',
      render: (text: string, record: ContractTree) => {
        if (record.isfolder) {
          return (
            <div className="pi-vertical-baseline">
              <SvgIcon type={record.hasFolder ? 'xxh-folder-open' : 'xxh-folder'} />
              <span className="pi-mg-left-2">{text}</span>
            </div>
          )
        } else {
          return (
            <div>
              <span className="expandIcon">{record.isEnd ? '└' : '├'}</span>
              <span className="pi-link-blue" onClick={() => handleLinkClick(record.bidsectionId, record.name)}>
                {text}
              </span>
            </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) => {
    if (key === 'expanded') {
      setRowKeys(true)
    } else {
      setRowKeys(false)
    }
  }
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="expanded">展开所有</Menu.Item>
      <Menu.Item key="collapsed">收起所有</Menu.Item>
    </Menu>
  )

  return (
    <div className="wrap-contaniner hide-menu pi-bg-white">
      <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}
          loading={loading}
          dataSource={tree.children}
          pagination={false}
          rowKey={record => record.id}
          indentSize={20}
          expandable={{ expandedRowKeys, onExpand: setRowKeys }}
          bordered></Table>
      </div>
    </div>
  )
}
export default withRouter(List)