|
|
@ -1,8 +1,8 @@ |
|
|
import { PlusOutlined } from "@ant-design/icons"; |
|
|
import { PlusOutlined } from '@ant-design/icons'; |
|
|
import { Button, Divider, Input, Popconfirm, Table, message } from "antd"; |
|
|
import { Button, Divider, Input, Popconfirm, Table, message } from 'antd'; |
|
|
import type { FC } from "react"; |
|
|
import type { FC } from 'react'; |
|
|
import React, { useState } from "react"; |
|
|
import React, { useState } from 'react'; |
|
|
import useStyles from "../style.style"; |
|
|
import useStyles from '../style.style'; |
|
|
type TableFormDateType = { |
|
|
type TableFormDateType = { |
|
|
key: string; |
|
|
key: string; |
|
|
workId?: string; |
|
|
workId?: string; |
|
|
@ -20,16 +20,11 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
const [clickedCancel, setClickedCancel] = useState(false); |
|
|
const [clickedCancel, setClickedCancel] = useState(false); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const [index, setIndex] = useState(0); |
|
|
const [index, setIndex] = useState(0); |
|
|
const [cacheOriginData, setCacheOriginData] = useState<Record<string, any>>( |
|
|
const [cacheOriginData, setCacheOriginData] = useState<Record<string, any>>({}); |
|
|
{} |
|
|
|
|
|
); |
|
|
|
|
|
const [data, setData] = useState(value); |
|
|
const [data, setData] = useState(value); |
|
|
const getRowByKey = (key: string, newData?: TableFormDateType[]) => |
|
|
const getRowByKey = (key: string, newData?: TableFormDateType[]) => |
|
|
(newData || data)?.filter((item) => item.key === key)[0]; |
|
|
(newData || data)?.filter((item) => item.key === key)[0]; |
|
|
const toggleEditable = ( |
|
|
const toggleEditable = (e: React.MouseEvent | React.KeyboardEvent, key: string) => { |
|
|
e: React.MouseEvent | React.KeyboardEvent, |
|
|
|
|
|
key: string |
|
|
|
|
|
) => { |
|
|
|
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
const newData = data?.map((item) => ({ |
|
|
const newData = data?.map((item) => ({ |
|
|
...item, |
|
|
...item, |
|
|
@ -54,9 +49,9 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
})) || []; |
|
|
})) || []; |
|
|
newData.push({ |
|
|
newData.push({ |
|
|
key: `NEW_TEMP_ID_${index}`, |
|
|
key: `NEW_TEMP_ID_${index}`, |
|
|
workId: "", |
|
|
workId: '', |
|
|
name: "", |
|
|
name: '', |
|
|
department: "", |
|
|
department: '', |
|
|
editable: true, |
|
|
editable: true, |
|
|
isNew: true, |
|
|
isNew: true, |
|
|
}); |
|
|
}); |
|
|
@ -64,9 +59,7 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
setData(newData); |
|
|
setData(newData); |
|
|
}; |
|
|
}; |
|
|
const remove = (key: string) => { |
|
|
const remove = (key: string) => { |
|
|
const newData = data?.filter( |
|
|
const newData = data?.filter((item) => item.key !== key) as TableFormDateType[]; |
|
|
(item) => item.key !== key |
|
|
|
|
|
) as TableFormDateType[]; |
|
|
|
|
|
setData(newData); |
|
|
setData(newData); |
|
|
if (onChange) { |
|
|
if (onChange) { |
|
|
onChange(newData); |
|
|
onChange(newData); |
|
|
@ -75,12 +68,12 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
const handleFieldChange = ( |
|
|
const handleFieldChange = ( |
|
|
e: React.ChangeEvent<HTMLInputElement>, |
|
|
e: React.ChangeEvent<HTMLInputElement>, |
|
|
fieldName: keyof TableFormDateType, |
|
|
fieldName: keyof TableFormDateType, |
|
|
key: string |
|
|
key: string, |
|
|
) => { |
|
|
) => { |
|
|
const newData = [...(data as TableFormDateType[])]; |
|
|
const newData = [...(data as TableFormDateType[])]; |
|
|
const target = getRowByKey(key, newData); |
|
|
const target = getRowByKey(key, newData); |
|
|
if (target && target[fieldName]) { |
|
|
if (target && target[fieldName]) { |
|
|
target[fieldName as "key"] = e.target.value; |
|
|
target[fieldName as 'key'] = e.target.value; |
|
|
setData(newData); |
|
|
setData(newData); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
@ -94,7 +87,7 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
} |
|
|
} |
|
|
const target = getRowByKey(key) || ({} as any); |
|
|
const target = getRowByKey(key) || ({} as any); |
|
|
if (!target.workId || !target.name || !target.department) { |
|
|
if (!target.workId || !target.name || !target.department) { |
|
|
message.error("请填写完整成员信息。"); |
|
|
message.error('请填写完整成员信息。'); |
|
|
(e.target as HTMLInputElement).focus(); |
|
|
(e.target as HTMLInputElement).focus(); |
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
return; |
|
|
return; |
|
|
@ -108,7 +101,7 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
}, 500); |
|
|
}, 500); |
|
|
}; |
|
|
}; |
|
|
const handleKeyPress = (e: React.KeyboardEvent, key: string) => { |
|
|
const handleKeyPress = (e: React.KeyboardEvent, key: string) => { |
|
|
if (e.key === "Enter") { |
|
|
if (e.key === 'Enter') { |
|
|
saveRow(e, key); |
|
|
saveRow(e, key); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
@ -138,17 +131,17 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
}; |
|
|
}; |
|
|
const columns = [ |
|
|
const columns = [ |
|
|
{ |
|
|
{ |
|
|
title: "成员姓名", |
|
|
title: '成员姓名', |
|
|
dataIndex: "name", |
|
|
dataIndex: 'name', |
|
|
key: "name", |
|
|
key: 'name', |
|
|
width: "20%", |
|
|
width: '20%', |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
if (record.editable) { |
|
|
if (record.editable) { |
|
|
return ( |
|
|
return ( |
|
|
<Input |
|
|
<Input |
|
|
value={text} |
|
|
value={text} |
|
|
autoFocus |
|
|
autoFocus |
|
|
onChange={(e) => handleFieldChange(e, "name", record.key)} |
|
|
onChange={(e) => handleFieldChange(e, 'name', record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
placeholder="成员姓名" |
|
|
placeholder="成员姓名" |
|
|
/> |
|
|
/> |
|
|
@ -158,16 +151,16 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "工号", |
|
|
title: '工号', |
|
|
dataIndex: "workId", |
|
|
dataIndex: 'workId', |
|
|
key: "workId", |
|
|
key: 'workId', |
|
|
width: "20%", |
|
|
width: '20%', |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
if (record.editable) { |
|
|
if (record.editable) { |
|
|
return ( |
|
|
return ( |
|
|
<Input |
|
|
<Input |
|
|
value={text} |
|
|
value={text} |
|
|
onChange={(e) => handleFieldChange(e, "workId", record.key)} |
|
|
onChange={(e) => handleFieldChange(e, 'workId', record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
placeholder="工号" |
|
|
placeholder="工号" |
|
|
/> |
|
|
/> |
|
|
@ -177,16 +170,16 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "所属部门", |
|
|
title: '所属部门', |
|
|
dataIndex: "department", |
|
|
dataIndex: 'department', |
|
|
key: "department", |
|
|
key: 'department', |
|
|
width: "40%", |
|
|
width: '40%', |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
if (record.editable) { |
|
|
if (record.editable) { |
|
|
return ( |
|
|
return ( |
|
|
<Input |
|
|
<Input |
|
|
value={text} |
|
|
value={text} |
|
|
onChange={(e) => handleFieldChange(e, "department", record.key)} |
|
|
onChange={(e) => handleFieldChange(e, 'department', record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
|
placeholder="所属部门" |
|
|
placeholder="所属部门" |
|
|
/> |
|
|
/> |
|
|
@ -196,8 +189,8 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: "操作", |
|
|
title: '操作', |
|
|
key: "action", |
|
|
key: 'action', |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
render: (text: string, record: TableFormDateType) => { |
|
|
if (!!record.editable && loading) { |
|
|
if (!!record.editable && loading) { |
|
|
return null; |
|
|
return null; |
|
|
@ -208,10 +201,7 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
<span> |
|
|
<span> |
|
|
<a onClick={(e) => saveRow(e, record.key)}>添加</a> |
|
|
<a onClick={(e) => saveRow(e, record.key)}>添加</a> |
|
|
<Divider type="vertical" /> |
|
|
<Divider type="vertical" /> |
|
|
<Popconfirm |
|
|
<Popconfirm title="是否要删除此行？" onConfirm={() => remove(record.key)}> |
|
|
title="是否要删除此行？" |
|
|
|
|
|
onConfirm={() => remove(record.key)} |
|
|
|
|
|
> |
|
|
|
|
|
<a>删除</a> |
|
|
<a>删除</a> |
|
|
</Popconfirm> |
|
|
</Popconfirm> |
|
|
</span> |
|
|
</span> |
|
|
@ -229,10 +219,7 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
<span> |
|
|
<span> |
|
|
<a onClick={(e) => toggleEditable(e, record.key)}>编辑</a> |
|
|
<a onClick={(e) => toggleEditable(e, record.key)}>编辑</a> |
|
|
<Divider type="vertical" /> |
|
|
<Divider type="vertical" /> |
|
|
<Popconfirm |
|
|
<Popconfirm title="是否要删除此行？" onConfirm={() => remove(record.key)}> |
|
|
title="是否要删除此行？" |
|
|
|
|
|
onConfirm={() => remove(record.key)} |
|
|
|
|
|
> |
|
|
|
|
|
<a>删除</a> |
|
|
<a>删除</a> |
|
|
</Popconfirm> |
|
|
</Popconfirm> |
|
|
</span> |
|
|
</span> |
|
|
@ -247,11 +234,11 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
|
columns={columns} |
|
|
columns={columns} |
|
|
dataSource={data} |
|
|
dataSource={data} |
|
|
pagination={false} |
|
|
pagination={false} |
|
|
rowClassName={(record) => (record.editable ? styles.editable : "")} |
|
|
rowClassName={(record) => (record.editable ? styles.editable : '')} |
|
|
/> |
|
|
/> |
|
|
<Button |
|
|
<Button |
|
|
style={{ |
|
|
style={{ |
|
|
width: "100%", |
|
|
width: '100%', |
|
|
marginTop: 16, |
|
|
marginTop: 16, |
|
|
marginBottom: 8, |
|
|
marginBottom: 8, |
|
|
}} |
|
|
}} |
|
|
|
期贤
3 years ago