|
@@ -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>
|