瀏覽代碼

style: 格式化金额逻辑优化、合同页固定表头

lanjianrong 4 年之前
父節點
當前提交
5eecf65d70

+ 1 - 3
src/pages/Contract/Content/Income/components/Modal/index.tsx

@@ -52,7 +52,7 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
       form.setFieldsValue({ treeId: row.id, bidsectionId: row.bidsectionId })
       if (type === 'update') {
         const { content = '', name = '', price = '', partyA = '', partyB = '', partyASigner = '', partyBSigner = '', signerTime = '', remarks = '' } = contractReturnStore.contract
-        form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner, signerTime: dayjs(signerTime), remarks })
+        form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner, signerTime: signerTime ? dayjs(signerTime) : '', remarks })
       } else if (type === 'return') {
         apiGetReturnWay().then(({ code = -1, data = [] }) => {
           if (code === consts.RET_CODE.SUCCESS) {
@@ -78,8 +78,6 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
   // 处理添加回款的金额不应该超出最大值
   const handleReturnPrice = (e: ChangeEvent<HTMLInputElement>) => {
     const maxPrice = parseFloat(contractReturnStore.contract.price) - parseFloat(contractReturnStore.contract.returned)
-    console.log(maxPrice)
-
     if (parseFloat(e.target.value) > maxPrice) {
       form.setFieldsValue({ price: maxPrice })
     }

+ 11 - 5
src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -160,6 +160,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     {
       title: '项目名称',
       dataIndex: 'name',
+      width: '30%',
       render: (text: any, record: iIncomeTree) => {
         if (record.isEdit || record.isNew) {
           const type = record.isEdit ? 'edit' : 'create'
@@ -179,31 +180,36 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     },
     {
       title: '合同名称',
-      dataIndex: 'contractName'
+      dataIndex: 'contractName',
+      width: '15%'
     },
     {
       title: '合同编号',
-      dataIndex: 'contractCode'
+      dataIndex: 'contractCode',
+      width: '10%'
     },
     {
       title: '合同金额',
       dataIndex: 'contractPrice',
       align: 'right',
+      width: '10%',
       // eslint-disable-next-line react/display-name
-      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : null
     },
     {
       title: '回款金额',
       dataIndex: 'contractReturned',
       align: 'right',
+      width: '10%',
       // eslint-disable-next-line react/display-name
-      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : null
     },
     {
       title: '状态',
       dataIndex: 'contractStatus',
+      width: '10%',
       // eslint-disable-next-line react/display-name
-      render: (_: any, record: iIncomeTree) => record.contractCode ? <span className={contractConsts[record.contractStatus].className}>{contractConsts[record.contractStatus].text}</span> : ''
+      render: (_: any, record: iIncomeTree) => record.contractCode ? <span className={contractConsts[record.contractStatus].className}>{contractConsts[record.contractStatus].text}</span> : null
     }
 
   ]

+ 6 - 6
src/pages/Contract/Content/Income/components/Tabs/Detail/index.tsx

@@ -6,7 +6,7 @@ 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(1))
+    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 }
@@ -17,14 +17,14 @@ export default function Detail(props: iContractState) {
         <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>{props.price}</td><th>创建时间</th><td>{props.createTime}</td></tr>
-        <tr><th>回款金额</th><td>{formatMoney(parseFloat(props.returned))}</td><th>未回款金额</th><td>{formatMoney(progress.unReturnedMoney)}</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(parseFloat(props.returned))}`}>
-              <div className={[ styles.progressBar, 'pi-bg-success' ].join(' ')} style={{ width: progress.returned }}>{progress.returned}</div>
+            <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 }}>{progress.unReturned}</div>
+              <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>

+ 1 - 1
src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -135,7 +135,7 @@ const Receivable: React.FC<{}> = () => {
       editable: true,
       width: '12%',
       // eslint-disable-next-line react/display-name
-      render: (text: string) => <span className="pi-text-right pi-width-100P">{formatMoney(parseFloat(text))}</span>
+      render: (text: string) => <span className="pi-text-right pi-width-100P">{formatMoney(text)}</span>
     },
     {
       title: '回款方式',

+ 9 - 3
src/pages/Contract/Content/Spending/components/TableContent/index.tsx

@@ -159,6 +159,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     {
       title: '项目名称',
       dataIndex: 'name',
+      width: '30%',
       render: (text: any, record: iIncomeTree) => {
         if (record.isEdit || record.isNew) {
           const type = record.isEdit ? 'edit' : 'create'
@@ -178,16 +179,19 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     },
     {
       title: '合同名称',
-      dataIndex: 'contractName'
+      dataIndex: 'contractName',
+      width: '15%'
     },
     {
       title: '合同编号',
-      dataIndex: 'contractCode'
+      dataIndex: 'contractCode',
+      width: '10%'
     },
     {
       title: '合同金额',
       dataIndex: 'contractPrice',
       align: 'right',
+      width: '10%',
       // eslint-disable-next-line react/display-name
       render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
@@ -195,12 +199,14 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       title: '支出金额',
       dataIndex: 'contractPaid',
       align: 'right',
+      width: '10%',
       // eslint-disable-next-line react/display-name
-      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
+      render: (text: string, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
     {
       title: '状态',
       dataIndex: 'contractStatus',
+      width: '10%',
       // eslint-disable-next-line react/display-name
       render: (_: any, record: iIncomeTree) => record.contractCode ? <span className={contractConsts[record.contractStatus].className}>{contractConsts[record.contractStatus].text}</span> : ''
     }

+ 2 - 2
src/pages/Contract/Content/Spending/components/Tabs/Detail/index.tsx

@@ -18,9 +18,9 @@ export default function Detail(props: iContractState) {
         <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>{props.price}</td><th>创建时间</th><td>{props.createTime}</td></tr>
-        <tr><th>支付金额</th><td>{formatMoney(parseFloat(props.returned))}</td><th>未支付金额</th><td>{formatMoney(progress.unReturnedMoney)}</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(parseFloat(props.returned))}`}>
+            <Tooltip title={`已支付:¥ ${formatMoney(props.returned)}`}>
               <div className={[ styles.progressBar, 'pi-bg-success' ].join(' ')} style={{ width: progress.returned }}>{progress.returned}</div>
             </Tooltip>
             <Tooltip title={`未支付:¥ ${formatMoney(progress.unReturnedMoney)}`}>

+ 5 - 5
src/pages/Management/Info/index.tsx

@@ -11,7 +11,7 @@ interface iProjectInfo {
   code: string;
   createTime: number;
   mobile: string;
-  name: string;
+  userAccount: string;
 }
 export default function Info() {
   const [ form ] = Form.useForm()
@@ -21,7 +21,7 @@ const [ loading, setLoading ] = useState<boolean>(false)
     code: "",
     createTime: 0,
     mobile: "",
-    name: ""
+    userAccount: ""
   })
   useEffect(() => {
     initData()
@@ -30,13 +30,13 @@ const [ loading, setLoading ] = useState<boolean>(false)
     form.setFieldsValue(
       { ...projectInfo,
         createTime: dayjsFormat(projectInfo.createTime, "YYYY-MM-DD"),
-        mobile: projectInfo.mobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") +  `  (${projectInfo.name})`
+        mobile: projectInfo.mobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") +  `  (${projectInfo.userAccount})`
       })
   }, [ projectInfo ])
   const initData = async () => {
-    const { code = -1, data = {} } = await apiProjectInfo()
+    const { code = -1, data: { account, project } = { account: {}, project: {} } } = await apiProjectInfo()
     if (code === consts.RET_CODE.SUCCESS) {
-      setProjectInfo(data)
+      setProjectInfo({ ...projectInfo, projectName: project.name, code: project.code, createTime: project.createTime, mobile: account.mobile, userAccount: account.name })
     }
   }
   const saveProjectName = async () => {

+ 3 - 3
src/pages/Quality/Content/List/modal.tsx

@@ -57,10 +57,10 @@ const QualityCreateForm: React.FC<iQualityCreateFormProps> = ({
           <Input />
         </Form.Item>
         {/* <span className={[ styles.position, "pi-link-blue" ].join(" ")}>部位设置</span> */}
-        <Form.Item name="position" label="部位" rules={[ { required: true, message: '请选择' } ]}>
+        {/* <Form.Item name="position" label="部位" rules={[ { required: true, message: '请选择' } ]}> */}
           {/* <span className={[ styles.position, "pi-link-blue" ].join(" ")}>部位设置</span> */}
-          <Input />
-        </Form.Item>
+          {/* <Input /> */}
+        {/* </Form.Item> */}
         <Form.Item name="code" label="安全编号" rules={[ { required: true, message: '请输入/生成安全编号' } ]}>
           <Input addonAfter={<span className="pi-pd-lr-11"onClick={() => autoCode()}>自动编号</span>}/>
         </Form.Item>

+ 13 - 3
src/utils/util.ts

@@ -87,7 +87,7 @@ const combinationPath = (parentPath: string | undefined, pathOfTargetConfig: str
  * @param format - 格式
  */
 const dayjsFormat = (date: dayjs.ConfigType, format: string = 'YYYY-MM-DD HH:mm:ss') => {
-  if (date === "0001-01-01 00:00:00") return ''
+  if (date === "0001-01-01 00:00:00" || !date) return ''
   return dayjs(date).format(format)
 }
 
@@ -204,9 +204,19 @@ const formatDate = (d: string) => {
 }
 
 // 数字千分位
-const formatMoney = (num: number | undefined) => {
+const formatMoney = (num: string | number | undefined) => {
   if (!num) return '0.00'
-  return (Math.round(num) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+  if (typeof num === 'number' && isNaN(num)) {
+    return '0.00'
+  }
+  let newNum = ''
+  if (typeof num === 'string') {
+    newNum = parseFloat(num).toFixed(2)
+  } else {
+    // number类型
+    newNum = num.toFixed(2)
+  }
+  return newNum.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
 }
 
 // 控制是否有权限进入标段