Просмотр исходного кода

feat: 合同回款列表接口接入。

lanjianrong 4 лет назад
Родитель
Сommit
62d916ed40

+ 5 - 1
src/pages/Contract/Content/Income/api.ts

@@ -64,7 +64,7 @@ export async function apiUpdateName(id: string, bidsectionId: string, name: stri
 }
 
 /**
- * 合同增删改
+ * 合同增删改(包括添加回款)
  * @param type - 操作类型
  * @param payload - 载荷
  */
@@ -91,6 +91,10 @@ export async function apiResfulContract(type: string, payload: object) {
       url = '/api/contract/unlock'
       method = 'post'
       break
+    case 'return':
+      url = '/api/contract/return/create'
+      method = 'post'
+      break
     default:
       break
   }

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

@@ -6,11 +6,13 @@ import consts from '@/utils/consts'
 import { dayjsFomrat } from '@/utils/util'
 import { Button, Form, Input, Modal, Select } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
+import { apiGetReturnWay } from '../Tabs/Receivable/api'
 import styles from './index.module.scss'
 const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible, confirmLoading }, onConfirm, onCancel, reload, row }) => {
   const { Option } = Select
   const [ form ] = Form.useForm()
+  const [ options, setOptions ] = useState<string[]>([])
   const modalObj = {
     create: {
       title: '新建合同',
@@ -36,15 +38,29 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
       title: '解锁合同',
       cancelText: '取消',
       okText: '确认解锁'
+    },
+    return: {
+      title: '添加回款',
+      cancelText: '关闭',
+      okText: '确认'
     }
   }
 
+
   useEffect(() => {
     if (visible) {
       form.setFieldsValue({ treeId: row.id, bidsectionId: row.bidsectionId })
       if (type === "update") {
         const { content="", name="", price="", partyA="", partyB="", partyASigner="",partyBSigner="" } = contractStore.contract
         form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner })
+      } else if (type === 'return') {
+        apiGetReturnWay().then(({ code = -1, data = [] }) => {
+          if (code === consts.RET_CODE.SUCCESS) {
+            const options = data.map((item: string) => <Option key={item} value={item}>{item}</Option>)
+            setOptions(options)
+          }
+        })
+        form.setFieldsValue({ contractsId: contractStore.contract.id })
       } else {
         form.setFieldsValue({ id: contractStore.contract.id })
       }
@@ -92,6 +108,9 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
               if (type === 'del') {
                 delete values.warningText
               }
+              if (type === 'return') {
+                values.time = dayjsFomrat(values.time, 'YYYY-MM-DD HH:mm:ss')
+              }
               onConfirm(values, type)
             }).catch(info => {
               console.error('Validate Failed:', info)
@@ -199,6 +218,27 @@ const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible,
             </>
           ) : ''
         }
+        {
+          type === 'return' ?
+          <>
+            <Form.Item name="contractsId" hidden><Input></Input></Form.Item>
+            <Form.Item name="time" label="回款日期" rules={[ { required: true, message: '请选择回款日期' } ]}>
+              <DatePicker allowClear locale={locale} className="pi-width-100P"></DatePicker>
+            </Form.Item>
+            <Form.Item name="price" label="回款金额" rules={[ { required: true, message: '请选择回款金额' } ]}>
+              <Input></Input>
+            </Form.Item>
+            <Form.Item name="way" label="支付方式" rules={[ { required: true, message: '请选择回款方式' } ]}>
+              <Select>
+                {options}
+              </Select>
+            </Form.Item>
+            <Form.Item name="remarks" label="备注">
+                <Input.TextArea maxLength={100}></Input.TextArea >
+            </Form.Item>
+          </>
+          : ''
+        }
       </Form>
     </Modal>
   )

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

@@ -268,6 +268,9 @@ const GCsheet: React.FC<iTableContentPorps> = ({ modalHandler, row, setRow }) =>
   const handleRowClass = (record: iIncomeTree) => {
     return record.id === row.id ? 'ant-table-row-selected' : ''
   }
+  const tabOnClick = (key: string) => {
+    contractStore.changeUpdate(key)
+  }
   return sectionTemplate.isShow ?
   <Modal
     visible={sectionTemplate.isShow}
@@ -351,13 +354,14 @@ const GCsheet: React.FC<iTableContentPorps> = ({ modalHandler, row, setRow }) =>
         type="card"
         size="small"
         defaultActiveKey="1"
+        onTabClick={(key: string) => tabOnClick(key)}
         tabBarExtraContent={{ right:
           <div className="pi-mg-right-5 pi-flex-row">
             {
               contractStore.contract.id && contractStore.contract.status === contractConsts.status.checking ?
               <>
                 <Button type="primary" size="small" onClick={() => modalHandler('update')} className="pi-mg-right-5">编辑合同</Button>
-                <Button type="primary" size="small" className="pi-mg-right-5">添加回款</Button>
+                <Button type="primary" size="small" onClick={() => modalHandler('return')} className="pi-mg-right-5">添加回款</Button>
                 <Button type="primary" size="small">上传文件</Button>
               </>
               : ''

+ 2 - 0
src/pages/Contract/Content/Income/components/Tabs/File/index.tsx

@@ -7,6 +7,8 @@ interface iFileState {
   uploader: string
   uploadTime: Date
 }
+
+
 const File:React.FC<{}> = () => {
   const columns: ColumnsType<iFileState> = [
     {

+ 26 - 2
src/pages/Contract/Content/Income/components/Tabs/Receivable/api.ts

@@ -1,6 +1,30 @@
 import request from '@/utils/common/request'
 
-export async function apiDel(id: string) {
-  const { data } = await request.del('', { id })
+/**
+ * 删除回款
+ * @param id 回款id
+ * @param contractsId 合同id
+ * @param bidsectionId 标段id
+ */
+export async function apiDelReturn(id: string, contractsId: string, bidsectionId: string) {
+  const { data } = await request.del('/api/contract/return/delete', { id, contractsId, bidsectionId })
+  return data
+}
+
+/**
+ * 获取合同回款列表
+ * @param constractsId 合同id
+ * @param bidsectionId 标段id
+ */
+export async function apiGetReturns(contractsId: string, bidsectionId: string) {
+  const { data } = await request.get('/api/contract/return/list', { contractsId, bidsectionId, page: 1 })
+  return data
+}
+
+/**
+ * 获取回款类型
+ */
+export async function apiGetReturnWay() {
+  const { data } = await request.get('/api/contract/return/way')
   return data
 }

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

@@ -1,23 +1,15 @@
 import DatePicker from '@/components/DatePicker'
+import { contractStore } from '@/store/mobx'
+import consts from '@/utils/consts'
 import { dayjsFomrat } 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 Modal from 'antd/lib/modal/Modal'
-import React, { useState } from 'react'
-const source = [
-  {
-    id: '123',
-    receDate: new Date(),
-    receAmount: 199999,
-    receWay: '支票',
-    receDesigner: '张三',
-    createTime: new Date(),
-    remark: '备注内容',
-    attacment: 3
-  }
-]
-interface iReceivableProps {
+import React, { useEffect, useState } from 'react'
+import { apiGetReturns } from './api'
+
+interface iReceivableState {
   id: string
   receDate: Date
   receAmount: number
@@ -32,7 +24,7 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   dataIndex: string;
   title: any;
   cellType: 'DatePicker' | 'text';
-  record: iReceivableProps;
+  record: iReceivableState;
   index: number;
   children: React.ReactNode;
 }
@@ -64,18 +56,30 @@ const EditableCell: React.FC<EditableCellProps> = ({
   )
 }
 
+
 const Receivable:React.FC<{}> = () => {
   const [ form ] = Form.useForm()
-  const [ data, setData ] = useState(source)
-  const [ visible, setVisible ] = useState(false)
+  const [ data, setData ] = useState<Array<iReceivableState>>([])
+  const [ visible, setVisible ] = useState<boolean>(false)
   const [ editingKey, setEditingKey ] = useState<string>('')
   const delConfirm = (key: string) => {
     console.log(key)
   }
 
+  useEffect(() => {
+    if (contractStore.contract.id || contractStore.shouldUpdate && contractStore.shouldUpdate === 'return') {
+      initData()
+    }
+  }, [ contractStore.contract.id, contractStore.shouldUpdate ])
+  const initData = async() => {
+    const { code = -1, data = [] } = await apiGetReturns(contractStore.contract.id, contractStore.contract.bidsectionId)
+      if (code === consts.RET_CODE.SUCCESS) {
+        setData(data)
+      }
+  }
   const save = async (key: React.Key) => {
     try {
-      const row = (await form.validateFields()) as iReceivableProps
+      const row = (await form.validateFields()) as iReceivableState
 
       const newData = [ ...data ]
       const index = newData.findIndex(item => key === item.id)
@@ -97,7 +101,7 @@ const Receivable:React.FC<{}> = () => {
     }
   }
 
-  const isEditing = (record: iReceivableProps) => record.id === editingKey
+  const isEditing = (record: iReceivableState) => record.id === editingKey
   const columns = [
     {
       dataIndex: 'sort',
@@ -109,7 +113,7 @@ const Receivable:React.FC<{}> = () => {
     },
     {
       title: '回款日期',
-      dataIndex: 'receDate',
+      dataIndex: 'time',
       editable: true,
       width: '12%',
       // eslint-disable-next-line react/display-name
@@ -117,7 +121,7 @@ const Receivable:React.FC<{}> = () => {
     },
     {
       title: '回款金额',
-      dataIndex: 'receAmount',
+      dataIndex: 'price',
       editable: true,
       width: '12%',
       // eslint-disable-next-line react/display-name
@@ -125,13 +129,13 @@ const Receivable:React.FC<{}> = () => {
     },
     {
       title: '回款方式',
-      dataIndex: 'receWay',
+      dataIndex: 'way',
       editable: true,
       width: '12%'
     },
     {
       title: '创建人',
-      dataIndex: 'receDesigner',
+      dataIndex: 'createUser',
       editable: true,
       width: '12%'
     },
@@ -145,13 +149,13 @@ const Receivable:React.FC<{}> = () => {
     },
     {
       title: '备注',
-      dataIndex: 'remark',
+      dataIndex: 'remarks',
       editable: true,
       width: '12%'
     },
     {
       title: '附件',
-      dataIndex: 'attacment',
+      dataIndex: 'annexes',
       // eslint-disable-next-line react/display-name
       render: (text: number) => <span className="pi-pointer" onClick={() => setVisible(true)}><DisconnectOutlined /> {text}</span>
     },
@@ -160,7 +164,7 @@ const Receivable:React.FC<{}> = () => {
       dataIndex: 'opreate',
       width: '10%',
       // eslint-disable-next-line react/display-name
-      render: (text: any, record: iReceivableProps) => {
+      render: (text: any, record: iReceivableState) => {
         const editable = isEditing(record)
         return (
         <div>
@@ -190,7 +194,7 @@ const Receivable:React.FC<{}> = () => {
     }
     return {
       ...col,
-      onCell: (record: iReceivableProps) => ({
+      onCell: (record: iReceivableState) => ({
         record,
         cellType: col.dataIndex === 'createTime' || col.dataIndex === 'receDate' ? 'DatePicker' : 'text',
         dataIndex: col.dataIndex,
@@ -209,8 +213,9 @@ const Receivable:React.FC<{}> = () => {
           columns={mergedColumns}
           bordered
           rowClassName="editable-row"
-          pagination={{ onChange: cancel }}
-          rowKey={record => record.id}>
+          pagination={{ onChange: cancel, size:"small", pageSize: 7 }}
+          rowKey={record => record.id}
+          >
         </Table>
       </Form>
       <Modal visible={visible} okText="确认" cancelText="关闭" title="附件" onCancel={() => setVisible(false)}></Modal>

+ 3 - 2
src/pages/Contract/Content/Income/index.tsx

@@ -59,11 +59,12 @@ export default function Income() {
       ...modalObj,
       confirmLoading: true
     })
-    console.log(values, type)
-
     const { code = -1 } = await apiResfulContract(type, values)
     if (code === consts.RET_CODE.SUCCESS) {
       contractStore.resetTree(tenderStore.bid)
+      if (type === 'return') {
+        contractStore.changeUpdate('return')
+      }
     }
     setModalObj({
       ...modalObj,

+ 4 - 0
src/store/mobx/contract/index.ts

@@ -52,7 +52,11 @@ class Contract {
     treeId: "",
     updateTime: ""
   }
+  @observable shouldUpdate: string = ''
 
+  @action changeUpdate(i: string) {
+    this.shouldUpdate = i
+  }
   @action updateTree(tree: iIncomeTree[]) {
     this.tree = tree
   }