feat: 更改支出合同部分文案

src/pages/Contract/Content/Income/components/Modal/index.tsx

@@ -2,6 +2,7 @@ import Authorization from '@/components/Authorization'
 import DatePicker from '@/components/DatePicker'
 import MoneyInput from '@/components/MoneyInput'
 import { contractStore, tenderStore } from '@/store/mobx'
+import { ContractType } from '@/store/mobx/contract'
 import { iModalCommonProps } from '@/types/contract'
 import { apiContractSection } from '@/utils/common/api'
 import { contractTreeBaseId } from '@/utils/common/constStatus'
@@ -74,15 +75,15 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
       cancelText: '取消',
       okText: '确认解锁'
     },
-    return: {
-      title: contractType === 'income' ? '添加回款' : '添加支出',
+    add: {
+      title: contractType === ContractType.INCOME ? '添加回款' : '添加支付',
       cancelText: '关闭',
       okText: '确认'
     }
   }
 
   const initTreeSection = async () => {
-    const { code = -1, sectionTree: data = {} } = await apiContractSection(tenderStore.bid, contractType === 'income' ? consts.CONTRACT_TREE.RETURN : consts.CONTRACT_TREE.PAID)
+    const { code = -1, sectionTree: data = {} } = await apiContractSection(tenderStore.bid, contractType === ContractType.INCOME ? consts.CONTRACT_TREE.RETURN : consts.CONTRACT_TREE.PAID)
     if (code === consts.RET_CODE.SUCCESS) {
       setContractSection(data.children)
     }
@@ -99,7 +100,7 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
       if (type === 'update') {
         const { content = '', name = '', price = '', partyA = '', partyB = '', partyASigner = '', partyBSigner = '', signerTime = '', remarks = '' } = contractStore.contract
         form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner, signerTime: signerTime ? dayjs(signerTime) : '', remarks })
-      } else if (type === 'return') {
+      } else if (type === 'add') {
         apiGetReturnWay().then(({ code = -1, data = [] }) => {
           if (code === consts.RET_CODE.SUCCESS) {
             const options = data.map((item: string) => (
@@ -117,7 +118,7 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
     }
   }, [ visible ])
   const autoCode = async () => {
-    const ruleArr = await handleAutoCode(tenderStore.tender.bidsectionId, contractType === 'income' ? 'contractReturnRule' : 'contractPaidRule')
+    const ruleArr = await handleAutoCode(tenderStore.tender.bidsectionId, contractType === ContractType.INCOME ? 'contractReturnRule' : 'contractPaidRule')
     form.setFieldsValue({ code: ruleArr.join('-') })
   }
 
@@ -170,7 +171,7 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
                   if (type === 'del') {
                     delete values.warningText
                   }
-                  if (type === 'return') {
+                  if (type === 'add') {
                     values.time = dayjsFormat(values.time, 'YYYY-MM-DD HH:mm:ss')
                   }
                   onConfirm(values, type)
@@ -299,15 +300,15 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
         ) : (
           ''
         )}
-        {type === 'return' ? (
+        {type === 'add' ? (
           <>
             <Form.Item name="contractsId" hidden>
               <Input />
             </Form.Item>
-            <Form.Item name="time" label="回款日期" rules={[ { required: true, message: '请选择回款日期' } ]}>
+            <Form.Item name="time" label={`${contractType === ContractType.INCOME ? '回款' : '支付'}日期`} rules={[ { required: true, message: '请选择回款日期' } ]}>
               <DatePicker allowClear locale={locale} className="pi-width-100P" />
             </Form.Item>
-            <Form.Item label="回款金额" >
+            <Form.Item label={`${contractType === ContractType.INCOME ? '回款' : '支付'}金额`} >
               {/* <Input onChange={handleReturnPrice}/> */}
               <MoneyInput size="small" maxPrice={handleMaxPrice()} setValue={(val: string | null) => form.setFieldsValue({ price: val })}/>
             </Form.Item>

src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -2,6 +2,7 @@ import Authorization from '@/components/Authorization'
 import { ZhSubmitButton } from '@/components/Button'
 import OssUploadModal from '@/components/OssUpload'
 import {  contractStore, tenderStore } from '@/store/mobx'
+import { ContractType } from '@/store/mobx/contract'
 import { ContractTree, iShowTemplateState, iTemplateState } from '@/types/contract'
 import { iFile } from '@/types/file'
 import { apiSaveFileInfo } from '@/utils/common/api'
@@ -375,7 +376,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
                 {
                   contractStore.contract.id && contractStore.contract.status === contractConsts.status.checking ?
                     <>
-                      <Button type="primary" size="small" onClick={() => changeModalType('return')} >添加回款</Button>
+                      <Button type="primary" size="small" onClick={() => changeModalType('add')} >{type === ContractType.INCOME ? '添加回款' : '添加支付'}</Button>
                     </>
                     : null
                 }
@@ -402,9 +403,9 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
               </div>
           }}>
           <TabPane key="1" tab="合同详情">
-            <Detail {...contractStore.contract} />
+            <Detail contract={{ ...contractStore.contract }} type={type} />
           </TabPane>
-          <TabPane key="2" tab="合同回款">
+          <TabPane key="2" tab={type === ContractType.INCOME ? '合同回款' : '合同支付'}>
             <Receivable updateTreeAndContract={initData} type={type}/>
           </TabPane>
           <TabPane key="3" tab="合同文件" >

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

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