|
|
@@ -1,8 +1,22 @@
|
|
|
+import DatePicker from '@/components/DatePicker'
|
|
|
+import { dayjsFomrat } from '@/utils/util'
|
|
|
import { DisconnectOutlined } from '@ant-design/icons'
|
|
|
-import { Popconfirm, Table } from 'antd'
|
|
|
+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 { ColumnsType } from 'antd/lib/table'
|
|
|
import React, { useState } from 'react'
|
|
|
+const source = [
|
|
|
+ {
|
|
|
+ id: '123',
|
|
|
+ receDate: new Date(),
|
|
|
+ receAmount: 199999,
|
|
|
+ receWay: '支票',
|
|
|
+ receDesigner: '张三',
|
|
|
+ createTime: new Date(),
|
|
|
+ remark: '备注内容',
|
|
|
+ attacment: 3
|
|
|
+ }
|
|
|
+]
|
|
|
interface iReceivableProps {
|
|
|
id: string
|
|
|
receDate: Date
|
|
|
@@ -13,74 +27,193 @@ interface iReceivableProps {
|
|
|
remark: string
|
|
|
attacment: number
|
|
|
}
|
|
|
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
+ editing: boolean;
|
|
|
+ dataIndex: string;
|
|
|
+ title: any;
|
|
|
+ cellType: 'DatePicker' | 'text';
|
|
|
+ record: iReceivableProps;
|
|
|
+ index: number;
|
|
|
+ children: React.ReactNode;
|
|
|
+}
|
|
|
+
|
|
|
+const EditableCell: React.FC<EditableCellProps> = ({
|
|
|
+ editing,
|
|
|
+ dataIndex,
|
|
|
+ title,
|
|
|
+ cellType,
|
|
|
+ children,
|
|
|
+ record,
|
|
|
+ index,
|
|
|
+ ...restProps
|
|
|
+}) => {
|
|
|
+ console.log(dataIndex, record)
|
|
|
+
|
|
|
+ const cellNode = cellType === 'text' ? <Input value={dataIndex && record[dataIndex]} size="small" allowClear/> : <DatePicker value={dataIndex && record[dataIndex]} size="small" allowClear locale={locale} />
|
|
|
+
|
|
|
+ return (
|
|
|
+ <td {...restProps}>
|
|
|
+ {editing ? (
|
|
|
+ <Form.Item name={dataIndex} style={{ margin: 0 }} rules={[ { required: true, message: `请输入${title}!` } ]}>
|
|
|
+ {cellNode}
|
|
|
+ </Form.Item>
|
|
|
+ ) : (
|
|
|
+ children
|
|
|
+ )}
|
|
|
+ </td>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
const Receivable:React.FC<{}> = () => {
|
|
|
+ const [ form ] = Form.useForm()
|
|
|
+ const [ data, setData ] = useState(source)
|
|
|
const [ visible, setVisible ] = useState(false)
|
|
|
+ const [ editingKey, setEditingKey ] = useState<string>('')
|
|
|
const delConfirm = (key: string) => {
|
|
|
console.log(key)
|
|
|
-
|
|
|
}
|
|
|
- const data = [
|
|
|
- {
|
|
|
- id: '123',
|
|
|
- receDate: new Date(),
|
|
|
- receAmount: 199999,
|
|
|
- receWay: '支票',
|
|
|
- receDesigner: '张三',
|
|
|
- createTime: new Date(),
|
|
|
- remark: '备注内容',
|
|
|
- attacment: 3
|
|
|
+
|
|
|
+ const save = async (key: React.Key) => {
|
|
|
+ try {
|
|
|
+ const row = (await form.validateFields()) as iReceivableProps
|
|
|
+
|
|
|
+ const newData = [ ...data ]
|
|
|
+ const index = newData.findIndex(item => key === item.id)
|
|
|
+ if (index > -1) {
|
|
|
+ const item = newData[index]
|
|
|
+ newData.splice(index, 1, {
|
|
|
+ ...item,
|
|
|
+ ...row
|
|
|
+ })
|
|
|
+ setData(newData)
|
|
|
+ setEditingKey('')
|
|
|
+ } else {
|
|
|
+ newData.push(row)
|
|
|
+ setData(newData)
|
|
|
+ setEditingKey('')
|
|
|
+ }
|
|
|
+ } catch (errInfo) {
|
|
|
+ console.log('Validate Failed:', errInfo)
|
|
|
}
|
|
|
- ]
|
|
|
- const columns: ColumnsType<iReceivableProps> = [
|
|
|
+ }
|
|
|
+
|
|
|
+ const isEditing = (record: iReceivableProps) => record.id === editingKey
|
|
|
+ const columns = [
|
|
|
{
|
|
|
dataIndex: 'sort',
|
|
|
+ width: '5%',
|
|
|
// eslint-disable-next-line react/display-name
|
|
|
- render: (text, record, index) => {
|
|
|
+ render: (_: any, record: any, index: number) => {
|
|
|
return <span>{index + 1}</span>
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: '回款日期',
|
|
|
- dataIndex: 'receDate'
|
|
|
+ dataIndex: 'receDate',
|
|
|
+ editable: true,
|
|
|
+ width: '12%',
|
|
|
+ // eslint-disable-next-line react/display-name
|
|
|
+ render: (text: string) => <span>{dayjsFomrat(text, 'YYYY-MM-DD')}</span>
|
|
|
},
|
|
|
{
|
|
|
title: '回款金额',
|
|
|
- dataIndex: 'receAmount'
|
|
|
+ dataIndex: 'receAmount',
|
|
|
+ editable: true,
|
|
|
+ width: '12%',
|
|
|
+ // eslint-disable-next-line react/display-name
|
|
|
+ render: (text: string) => <span className="pi-text-right pi-width-100P">{text}</span>
|
|
|
},
|
|
|
{
|
|
|
title: '回款方式',
|
|
|
dataIndex: 'receWay',
|
|
|
- align: 'left'
|
|
|
+ editable: true,
|
|
|
+ width: '12%'
|
|
|
},
|
|
|
{
|
|
|
title: '创建人',
|
|
|
- dataIndex: 'receDesigner'
|
|
|
+ dataIndex: 'receDesigner',
|
|
|
+ editable: true,
|
|
|
+ width: '12%'
|
|
|
},
|
|
|
{
|
|
|
title: '创建时间',
|
|
|
- dataIndex: 'createTime'
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ editable: true,
|
|
|
+ width: '12%',
|
|
|
+ // eslint-disable-next-line react/display-name
|
|
|
+ render: (text: any) => <span>{dayjsFomrat(text, 'YYYY-MM-DD')}</span>
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
- dataIndex: 'remark'
|
|
|
+ dataIndex: 'remark',
|
|
|
+ editable: true,
|
|
|
+ width: '12%'
|
|
|
},
|
|
|
{
|
|
|
title: '附件',
|
|
|
dataIndex: 'attacment',
|
|
|
// eslint-disable-next-line react/display-name
|
|
|
- render: (text: number) => <span><DisconnectOutlined />{text}</span>
|
|
|
+ render: (text: number) => <span className="pi-pointer" onClick={() => setVisible(true)}><DisconnectOutlined /> {text}</span>
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
dataIndex: 'opreate',
|
|
|
+ width: '10%',
|
|
|
// eslint-disable-next-line react/display-name
|
|
|
- render: (text: any, record: iReceivableProps) => <div><a href="javascript:;" className="pi-link-blue">编辑</a><Popconfirm title="确认删除?" cancelText="取消" okText="确认" onConfirm={() => delConfirm(record.id)}><a href="javascript:;" className="pi-link-red pi-mg-left-5">删除</a></Popconfirm></div>
|
|
|
+ render: (text: any, record: iReceivableProps) => {
|
|
|
+ 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)}>
|
|
|
+ <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: iReceivableProps) => ({
|
|
|
+ record,
|
|
|
+ cellType: col.dataIndex === 'createTime' || col.dataIndex === 'receDate' ? 'DatePicker' : 'text',
|
|
|
+ dataIndex: col.dataIndex,
|
|
|
+ title: col.title,
|
|
|
+ editing: isEditing(record)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
- <Table size="small" dataSource={data} columns={columns} bordered pagination={false} rowKey={record => record.id}></Table>
|
|
|
- <Modal visible={visible} okText="确认" cancelText="关闭" title="附件"></Modal>
|
|
|
+ <Form form={form} component={false}>
|
|
|
+ <Table
|
|
|
+ components={{ body: { cell: EditableCell } }}
|
|
|
+ dataSource={data}
|
|
|
+ columns={mergedColumns}
|
|
|
+ bordered
|
|
|
+ rowClassName="editable-row"
|
|
|
+ pagination={{ onChange: cancel }}
|
|
|
+ rowKey={record => record.id}>
|
|
|
+ </Table>
|
|
|
+ </Form>
|
|
|
+ <Modal visible={visible} okText="确认" cancelText="关闭" title="附件" onCancel={() => setVisible(false)}></Modal>
|
|
|
</>
|
|
|
)
|
|
|
}
|
lanjianrong