management/src/pages/Contract/Content/Income/components/Tabs/Detail/index.tsx

import { iContractState } from '@/types/contract'
import { contractConsts } from '@/utils/common/constStatus'
import { dayjsFormat, formatMoney } from '@/utils/util'
import { Tooltip } from 'antd'
import React, { useMemo } from 'react'
import styles from './index.module.scss'
export default function Detail(props: iContractState) {
  const progress = useMemo(() => {
    const i = parseFloat((parseFloat(props.returned) / parseFloat(props.price)).toFixed(2))
    const j: number = 1 - i
    const k: number = parseFloat(props.price) - parseFloat(props.returned)
    return { returned: isNaN(i) ? '0%' : i * 100 + '%', unReturned: isNaN(j) ? '100%' : j * 100 + '%', unReturnedMoney: k }
  }, [ props.id ])
  return props.id ? (
    <div className={styles.detailTab}>
      <table className={styles.detailTable}>
        <tbody>
        <tr><th style={{ width: '10%' }}>项目内容</th><td style={{ width: '40%' }}>{props.content}</td><th style={{ width: '10%' }}>合同名称</th><td style={{ width: '40%' }}>{props.name}</td></tr>
        <tr><th>合同编号</th><td>{props.code}</td><th>状态</th><td><span className={contractConsts[props.status].className}>{contractConsts[props.status].text}</span></td></tr>
        <tr><th>合同金额</th><td>{formatMoney(props.price)}</td><th>创建时间</th><td>{props.createTime}</td></tr>
        <tr><th>回款金额</th><td>{formatMoney(props.returned)}</td><th>未回款金额</th><td>{formatMoney(progress.unReturnedMoney)}</td></tr>
          <tr><th>回款进度</th><td className={styles.progressContainer} colSpan={3}><div className={styles.progressContent}>
            <Tooltip title={`已支付：￥ ${formatMoney(props.returned)}`}>
              <div className={[ styles.progressBar, 'pi-bg-success' ].join(' ')} style={{ width: progress.returned }}>{formatMoney(props.returned)}</div>
            </Tooltip>
            <Tooltip title={`未支付：￥ ${formatMoney(progress.unReturnedMoney)}`}>
              <div className={[ styles.progressBar, 'pi-bg-gray' ].join(' ')} style={{ width: progress.unReturned }}>{formatMoney(progress.unReturned)}</div>
            </Tooltip>
          </div></td></tr>
        <tr><th>甲方</th><td>{props.partyA}</td><th>甲方签约人</th><td>{props.partyASigner}</td></tr>
        <tr><th>乙方</th><td>{props.partyB}</td><th>乙方签约人</th><td>{props.partyBSigner}</td></tr>
        <tr><th>签约日期</th><td colSpan={3}>{dayjsFormat(props.signerTime, 'YYYY-MM-DD')}</td></tr>
        <tr><th>备注</th><td colSpan={3}>{props.remarks}</td></tr>
        </tbody>
      </table>
    </div>
  ) : null
}