refactor: 剔除mobx多余的contractPaid

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

@@ -103,7 +103,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
   const handleUpdateContractName = async (payload: object) => {
     const { code = -1 } = await apiUpdateContractName(payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      contractReturnStore.resetTree(tenderStore.tender.bidsectionId)
+      contractReturnStore.resetTree(type, tenderStore.tender.bidsectionId)
     }
   }
 

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

@@ -72,7 +72,7 @@ const Income: React.FC<RouteComponentProps> = (props) => {
     if (code === consts.RET_CODE.SUCCESS) {
 
       contractReturnStore.updateContract(contract)
-      contractReturnStore.resetTree(tenderStore.bid)
+      contractReturnStore.resetTree(ContractType.INCOME, tenderStore.bid)
       if (type === 'return') {
         contractReturnStore.changeUpdate('2')
       }
@@ -94,7 +94,7 @@ const Income: React.FC<RouteComponentProps> = (props) => {
   const treeResfulApiHandler = async (type: string, payload: any) => {
     const { code = -1, section = {} } = await apiResfulContractTree(type, payload, consts.CONTRACT_TREE.RETURN)
     if (code === consts.RET_CODE.SUCCESS) {
-      contractReturnStore.resetTree(tenderStore.bid)
+      contractReturnStore.resetTree(ContractType.INCOME, tenderStore.bid)
       if (type !== 'add' && type !== 'del') {
         setRow({ ...row, ...section })
       }

src/pages/Contract/Content/Spending/components/Tabs/Detail/index.module.scss

@@ -1,41 +0,0 @@
-.detailTab {
-  flex: 0 0 66.666667%;
-  max-width: 66.666667%;
-  padding: 0 15px;
-  .detailTable {
-    margin-bottom: 1rem;
-    color: #212529;
-    border: 1px solid #dee2e6;
-    & > tbody tr th {
-      font-weight: normal;
-      color: #000000;
-      background: #e9ecef;
-      border: 1px solid #dee2e6;
-    }
-    & > tbody tr th,
-    & > tbody tr td {
-      padding: 0.3rem;
-      border: 1px solid #dee2e6;
-    }
-    .progressContainer {
-      padding: 0.3rem;
-      .progressContent {
-        display: flex;
-        height: 1rem;
-        overflow: hidden;
-        font-size: 0.75rem;
-        background-color: #e9ecef;
-        border-radius: 0.25rem;
-        .progressBar {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          color: #ffffff;
-          text-align: center;
-          white-space: nowrap;
-          transition: width 0.6s ease;
-        }
-      }
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-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(1))
-    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 ])
-  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>{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 }}>{progress.returned}</div>
-            </Tooltip>
-            <Tooltip title={`未支付：￥ ${formatMoney(progress.unReturnedMoney)}`}>
-              <div className={[ styles.progressBar, 'pi-bg-gray' ].join(' ')} style={{ width: progress.unReturned }}>{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
-}

src/pages/Contract/Content/Spending/components/Tabs/File/index.tsx

@@ -1,106 +0,0 @@
-import { contractPaidStore } from '@/store/mobx'
-import { apiDelFile, apiGetFileList } from '@/utils/common/api'
-import consts from '@/utils/consts'
-import { dayjsFormat } from '@/utils/util'
-import { Popconfirm } from 'antd'
-import Table, { ColumnsType } from 'antd/lib/table'
-import { observer } from 'mobx-react'
-import React, { useEffect, useState } from 'react'
-
-interface iFileState {
-  id: string
-  filename: string
-  filepath: string
-  accountName: string
-  createTime: string
-}
-
-const File: React.FC<{}> = () => {
-  const [ data, setData ] = useState<Array<iFileState>>([])
-  const [ total, setTotal ] = useState<number>(0)
-  const [ id, setId ] = useState<string>('')
-  useEffect(() => {
-    if (contractPaidStore.contract.id) {
-      if (contractPaidStore.contract.id !== id) {
-        setId(contractPaidStore.contract.id)
-        initData()
-      } else if (contractPaidStore.shouldUpdate && contractPaidStore.shouldUpdate === '3') {
-        initData()
-      }
-      contractPaidStore.shouldUpdate && (contractPaidStore.changeUpdate(''))
-    }
-  }, [ contractPaidStore.contract.id, contractPaidStore.shouldUpdate ])
-  const initData = async (pageNo: number = 1, pageSize: number = 7) => {
-    const { code = -1, data = [], total = 0 } = await apiGetFileList(consts.DATA_TYPE.CONTRACT_PAID, contractPaidStore.contract.id, pageNo, pageSize)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setData(data)
-      setTotal(total)
-    }
-  }
-  const deleteFile = async (id: string) => {
-    const { code = -1 } = await apiDelFile(id)
-    if (code === consts.RET_CODE.SUCCESS) {
-      const newData = data.filter((file: iFileState) => file.id !== id)
-      setData(newData)
-    }
-  }
-  const columns: ColumnsType<iFileState> = [
-    {
-      dataIndex: 'sort',
-      // eslint-disable-next-line react/display-name
-      render: (_: any, record: iFileState, idx: number) => <span>{idx + 1}</span>,
-      width: 5
-    },
-    {
-      title: '名称',
-      dataIndex: 'filename',
-      // eslint-disable-next-line react/display-name
-      render: (text: string, record: iFileState) => <a href={consts.OSS_PATH.REVIEW + record.filepath} target="_blank" rel="noopener noreferrer">{text}</a>,
-      width: 50
-    },
-    {
-      title: '上传者',
-      dataIndex: 'accountName',
-      width: 10
-    },
-    {
-      title: '上传时间',
-      dataIndex: 'createTime',
-      // eslint-disable-next-line react/display-name
-      render: (time: string) => <span>{dayjsFormat(time, 'YYYY-MM-DD')}</span>,
-      width: 20
-    },
-    {
-      title: '操作',
-      dataIndex: 'opreate',
-      // eslint-disable-next-line react/display-name
-      render: (_: string, record: iFileState) => {
-        return <div>
-          <a className="pi-mg-right-5" download href={consts.OSS_PATH.DOWNLOAD + record.filepath}>下载</a>
-          <Popconfirm title="确认删除?" cancelText="取消" okText="确认" okButtonProps={{ danger: true }} onConfirm={() => deleteFile(record.id)}>
-            <span className="pi-link-red pi-mg-left-5">删除</span>
-          </Popconfirm>
-          {/* <span className="pi-link-red" onClick={() => deleteFile(record.id)}>删除</span> */}
-        </div>
-      },
-      width: 15
-    }
-  ]
-  return (
-    <Table
-      dataSource={data}
-      columns={columns}
-      bordered
-      rowKey={record => record.id}
-      pagination={{
-        hideOnSinglePage: true,
-        size: "small",
-        pageSize: 7,
-        onChange: (page, pageSize) => initData(page, pageSize),
-        total
-      }}
-    />
-  )
-}
-
-export default observer(File)

src/pages/Contract/Content/Spending/components/Tabs/Receivable/api.ts

@@ -1,39 +0,0 @@
-import request from '@/utils/common/request'
-
-/**
- * 删除回款
- * @param id 回款id
- * @param contractsId 合同id
- * @param bidsectionId 标段id
- */
-export async function apiDelPaid(id: string, contractsId: string, bidsectionId: string) {
-  const { data } = await request.del('/api/contract/paid/delete', { id, contractsId, bidsectionId })
-  return data
-}
-
-/**
- * 获取合同回款列表
- * @param constractsId 合同id
- * @param bidsectionId 标段id
- */
-export async function apiGetPaids(contractsId: string, bidsectionId: string) {
-  const { data } = await request.get('/api/contract/paid/list', { contractsId, bidsectionId, page: 1 })
-  return data
-}
-
-/**
- * 获取回款类型
- */
-export async function apiGetPaidWay() {
-  const { data } = await request.get('/api/contract/paid/way')
-  return data
-}
-
-/**
- * 更新回款内容
- * @param payload 载荷
- */
-export async function apiUpdatePaid(payload: object) {
-  const { data } = await request.post('/api/contract/paid/update', payload)
-  return data
-}

src/pages/Contract/Content/Spending/components/Tabs/Receivable/index.tsx

@@ -1,238 +0,0 @@
-import DatePicker from '@/components/DatePicker'
-import FileModal from '@/components/FileModal'
-import { contractPaidStore } from '@/store/mobx'
-import { iReceivableState, iEditableCellProps } from '@/types/contract'
-import { iFileModal } from '@/types/file'
-import consts from '@/utils/consts'
-import { dayjsFormat, formatMoney } from '@/utils/util'
-import { DisconnectOutlined } from '@ant-design/icons'
-import { Form, Input, Popconfirm, Table } from 'antd'
-import locale from 'antd/es/date-picker/locale/zh_CN'
-import dayjs from 'dayjs'
-import { observer } from 'mobx-react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { apiDelPaid, apiGetPaids, apiUpdatePaid } from './api'
-
-const EditableCell: React.FC<iEditableCellProps> = ({
-  editing,
-  dataIndex,
-  title,
-  cellType,
-  children,
-  record,
-  index,
-  ...restProps
-}) => {
-  // console.log(dataIndex, record)
-
-  const cellNode = cellType === 'text' ? <Input size="small" allowClear /> : <DatePicker size="small" allowClear locale={locale} />
-
-  const isDate = useMemo(() => {
-    return dataIndex === 'createTime' || dataIndex === 'time'
-  }, [ dataIndex ])
-  return (
-    <td {...restProps}>
-      {editing ? (
-        <Form.Item name={dataIndex} initialValue={isDate ? dayjs(record[dataIndex]) : record[dataIndex]} style={{ margin: 0 }} rules={[ dataIndex === 'remarks' ? {} : { required: true, message: `请输入${title}!` } ]}>
-          {cellNode}
-        </Form.Item>
-      ) : (
-          children
-        )}
-    </td>
-  )
-}
-
-interface ReceivableProps {
-  updateTreeAndContract: () => Promise<void>
-}
-const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract }) => {
-  const [ form ] = Form.useForm()
-  const [ data, setData ] = useState<Array<iReceivableState>>([])
-  const [ id, setId ] = useState<string>('')
-  const [ fileModal, setFileModal ] = useState<iFileModal>({
-    visible: false,
-    dataType: consts.DATA_TYPE.PAID,
-    dataId: ''
-  })
-  const [ editingKey, setEditingKey ] = useState<string>('')
-
-  const delConfirm = async (id: string, contractsId: string, bidsectionId: string) => {
-    const { code = -1 } = await apiDelPaid(id, contractsId, bidsectionId)
-    if (code === consts.RET_CODE.SUCCESS) {
-      const newData = data.filter(item => item.id !== id)
-      setData(newData)
-      updateTreeAndContract()
-    }
-  }
-
-  useEffect(() => {
-    if (contractPaidStore.contract.id) {
-      if (contractPaidStore.contract.id !== id) {
-        setId(contractPaidStore.contract.id)
-        initData()
-      } else if (contractPaidStore.shouldUpdate && contractPaidStore.shouldUpdate === '2') {
-        initData()
-      }
-      contractPaidStore.shouldUpdate && (contractPaidStore.changeUpdate(''))
-    }
-  }, [ contractPaidStore.contract.id, contractPaidStore.shouldUpdate ])
-  const initData = async () => {
-    const { code = -1, data = [] } = await apiGetPaids(contractPaidStore.contract.id, contractPaidStore.contract.bidsectionId)
-    if (code === consts.RET_CODE.SUCCESS) {
-      setData(data)
-    }
-  }
-  const save = async (key: React.Key) => {
-    try {
-      const row = (await form.validateFields()) as iReceivableState
-
-      const newData = [ ...data ]
-      const index = newData.findIndex(item => key === item.id)
-      if (index > -1) {
-        const item = newData[index]
-        const payload = { ...row, time: dayjsFormat(row.time, 'YYYY-MM-DD'), createTime: dayjsFormat(row.createTime, 'YYYY-MM-DD'), id: item.id, bidsectionId: item.bidsectionId, contractsId: item.contractsId }
-        const { code = -1 } = await apiUpdatePaid(payload)
-        if (code === consts.RET_CODE.SUCCESS) {
-          newData.splice(index, 1, {
-            ...item,
-            ...row
-          })
-          setData(newData)
-          updateTreeAndContract()
-        }
-      }
-      setEditingKey('')
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo)
-    }
-  }
-
-  const isEditing = (record: iReceivableState) => record.id === editingKey
-  const columns = [
-    {
-      dataIndex: 'sort',
-      width: '5%',
-      // eslint-disable-next-line react/display-name
-      render: (_: any, record: any, index: number) => {
-        return <span>{index + 1}</span>
-      }
-    },
-    {
-      title: '支付日期',
-      dataIndex: 'time',
-      editable: true,
-      width: '12%',
-      // eslint-disable-next-line react/display-name
-      render: (text: string) => <span>{dayjsFormat(text, 'YYYY-MM-DD')}</span>
-    },
-    {
-      title: '支付金额',
-      dataIndex: 'price',
-      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>
-    },
-    {
-      title: '支付方式',
-      dataIndex: 'way',
-      editable: true,
-      width: '12%'
-    },
-    {
-      title: '创建人',
-      dataIndex: 'createUser',
-      editable: false,
-      width: '12%'
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      editable: true,
-      width: '12%',
-      // eslint-disable-next-line react/display-name
-      render: (text: any) => <span>{dayjsFormat(text, 'YYYY-MM-DD')}</span>
-    },
-    {
-      title: '备注',
-      dataIndex: 'remarks',
-      editable: true,
-      width: '12%'
-    },
-    {
-      title: '附件',
-      dataIndex: 'fileCounts',
-      // eslint-disable-next-line react/display-name
-      render: (text: number, record: iReceivableState) => <span className="pi-pointer" onClick={() => setFileModal({ ...fileModal, dataId: record.id, visible: true })}><DisconnectOutlined /> {text}</span>
-    },
-    {
-      title: '操作',
-      dataIndex: 'opreate',
-      width: '10%',
-      // eslint-disable-next-line react/display-name
-      render: (text: any, record: iReceivableState) => {
-        const editable = isEditing(record)
-        return (
-          <div>
-            {
-              editable ?
-                (<><span className="pi-link-blue pi-mg-right-5" onClick={() => save(record.id)}>保存</span><span className="pi-link-blue" onClick={() => setEditingKey('')}>取消</span></>)
-                :
-                <span className="pi-link-blue" onClick={() => setEditingKey(record.id)}>编辑</span>
-            }
-            <Popconfirm title="确认删除?" cancelText="取消" okText="确认" onConfirm={() => delConfirm(record.id, record.contractsId, record.bidsectionId)}>
-              <span className="pi-link-red pi-mg-left-5">删除</span>
-            </Popconfirm>
-          </div>
-        )
-      }
-    }
-  ]
-
-  const cancel = () => {
-    setEditingKey('')
-  }
-
-
-  const mergedColumns = columns.map(col => {
-    if (!col.editable) {
-      return col
-    }
-    return {
-      ...col,
-      onCell: (record: iReceivableState) => ({
-        record,
-        cellType: col.dataIndex === 'createTime' || col.dataIndex === 'time' ? 'DatePicker' : 'text',
-        dataIndex: col.dataIndex,
-        title: col.title,
-        editing: isEditing(record)
-      })
-    }
-  })
-
-  return (
-    <>
-      <Form form={form} component={false}>
-        <Table
-          components={{ body: { cell: EditableCell } }}
-          dataSource={data}
-          columns={mergedColumns}
-          bordered
-          rowClassName="editable-row"
-          pagination={{ onChange: cancel, size: "small", pageSize: 7 }}
-          rowKey={record => record.id}
-        />
-      </Form>
-      <FileModal
-        visible={fileModal.visible}
-        dataType={fileModal.dataType}
-        dataId={fileModal.dataId}
-        onCancel={() => setFileModal({ ...fileModal, visible: false })}
-        showUpload={true}
-        uploadCallBack={() => initData()}
-      />
-    </>
-  )
-}
-export default observer(Receivable)

src/pages/Contract/Content/Spending/index.tsx

@@ -69,7 +69,7 @@ const Expenditure: React.FC<RouteComponentProps> = ({ history }) => {
     const { code = -1, contract = {} } = await apiResfulContract(type, values)
     if (code === consts.RET_CODE.SUCCESS) {
       contractReturnStore.updateContract(contract)
-      contractReturnStore.resetTree(tenderStore.bid)
+      contractReturnStore.resetTree(ContractType.EXPENDITURE, tenderStore.bid)
       if (type === 'paid') {
         contractReturnStore.changeUpdate('2')
       }
@@ -91,7 +91,7 @@ const Expenditure: React.FC<RouteComponentProps> = ({ history }) => {
   const treeResfulApiHandler = async (type: string, payload: any) => {
     const { code = -1, section = {} } = await apiResfulContractTree(type, payload, consts.CONTRACT_TREE.PAID)
     if (code === consts.RET_CODE.SUCCESS) {
-      contractReturnStore.resetTree(tenderStore.bid)
+      contractReturnStore.resetTree(ContractType.EXPENDITURE, tenderStore.bid)
       if (type !== 'add' && type !== 'del') {
         setRow({ ...row, ...section })
       }

src/store/mobx/contractPaid/index.ts

@@ -1,70 +0,0 @@
-import { apiContractTree } from "@/pages/Contract/Content/Income/components/Modal/api"
-import { iContractState, ContractTree } from "@/types/contract"
-import consts from "@/utils/consts"
-import { action, computed, observable } from "mobx"
-import { ContractType } from "../contractReturn"
-
-class Contract {
-
-  @observable tree: ContractTree[] = []
-  @observable contract: iContractState = {
-    bidsectionId: "",
-    code: "",
-    content: "",
-    contractsType: 0,
-    createTime: "",
-    id: "",
-    name: "",
-    paid: "0.00",
-    partyA: "",
-    partyASigner: "",
-    partyB: "",
-    partyBSigner: "",
-    price: "0.00",
-    projectId: "",
-    remarks: "",
-    returned: "0.00",
-    signerTime: "",
-    status: 0,
-    treeId: "",
-    updateTime: ""
-  }
-  @observable shouldUpdate: string = ''
-
-  @action changeUpdate(i: string) {
-    this.shouldUpdate = i
-
-  }
-  @action updateTree(tree: ContractTree[]) {
-    this.tree = tree
-  }
-
-  @action resetTree(id: string) {
-    apiContractTree(ContractType.EXPENDITURE, id).then(({ code = -1, sectionTree = {} }) => {
-      if (code === consts.RET_CODE.SUCCESS && Object.keys(sectionTree).length) {
-        this.tree = sectionTree.children
-      }
-    })
-  }
-
-  @action updateContract(data: iContractState) {
-    this.contract = data
-  }
-
-  // 增加行
-  // @action addRowTree(id: string) {
-  //   const newTree = lookupNode(id, this.tree)
-  //   this.tree = newTree
-  // }
-
-  // 行点击
-  // @action rowChange(id: string) {
-  //   const newTree = nodeCheck(id, this.tree)
-  //   this.tree = newTree
-  // }
-  @computed get showTable() {
-    return this.tree && this.tree.length > 1
-  }
-}
-
-export default new Contract()

src/store/mobx/contractReturn/index.ts

@@ -29,6 +29,8 @@ export enum ContractType {
   INCOME = 'income',
   EXPENDITURE = 'expenditure'
 }
+
+
 class Contract {
   @observable tree: ContractTree[] = []
   @observable contract: iContractState = initData
@@ -41,8 +43,8 @@ class Contract {
     this.tree = tree
   }
 
-  @action resetTree(id: string) {
-    apiContractTree(ContractType.INCOME, id).then(({ code = -1, sectionTree = {} }) => {
+  @action resetTree(type: 'income' | 'expenditure', id: string) {
+    apiContractTree(type, id).then(({ code = -1, sectionTree = {} }) => {
       if (code === consts.RET_CODE.SUCCESS && Object.keys(sectionTree).length) {
         this.tree = sectionTree.children
       }

src/store/mobx/index.ts

@@ -1,5 +1,4 @@
 import contractReturnStore from './contractReturn'
-import contractPaidStore from './contractPaid'
 import frameStore from './frame'
 import tenderStore from './tender'
 import userStore from './user'
@@ -7,7 +6,6 @@ export {
   userStore,
   frameStore,
   tenderStore,
-  contractReturnStore,
-  contractPaidStore
+  contractReturnStore
 }