/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-02-23
|
* @LastEditTime: 2022-03-28 17:16:07
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 功能管理-公共功能
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Table, Input, Row, Button, Popconfirm, Form, Typography, Spin } from 'antd';
|
import { PlusOutlined } from '@ant-design/icons';
|
import './index.less';
|
//渲染表格输入框
|
const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {
|
return (
|
<td {...restProps}>
|
{editing ? (
|
<Form.Item
|
name={dataIndex}
|
style={{
|
margin: 0,
|
}}
|
rules={[
|
{
|
required: true,
|
message: `请输入${title}`,
|
},
|
]}
|
>
|
<Input placeholder={`请输入${title}`} />
|
</Form.Item>
|
) : (
|
children
|
)}
|
</td>
|
);
|
};
|
|
const FunctionMenuViewTable = ({
|
EditTableList,
|
EditTableData,
|
EditTableId,
|
loading,
|
saveTableData = (data) => {},
|
saveContinueTableData = (data, key) => {},
|
removeTableData = (data) => {},
|
cancelTableData = (data, key) => {},
|
}) => {
|
const [form] = Form.useForm();
|
const [data, setData] = useState(EditTableList);
|
const [editingKey, setEditingKey] = useState(EditTableId);
|
|
const isEditing = (record) => record.id === editingKey;
|
|
//编辑
|
const edit = async (record) => {
|
const newData = data.filter((item) => item.id !== record.id);
|
form.setFieldsValue({
|
name: '',
|
tag: '',
|
des: '',
|
...record,
|
});
|
setEditingKey(record.id);
|
};
|
|
//删除
|
const handleDelete = async (id) => {
|
removeTableData(id);
|
};
|
|
//取消
|
const cancel = async (id) => {
|
setEditingKey('');
|
const row = await form.validateFields();
|
if (!row.name && !row.tag && !row.des) {
|
setData(data.filter((item) => id !== item.id));
|
cancelTableData(
|
data.filter((item) => id !== item.id),
|
id
|
);
|
} else {
|
}
|
};
|
|
// 提交
|
const save = async (id) => {
|
const row = await form.validateFields();
|
const index = data.findIndex((item) => id === item.id);
|
const tableData = form.getFieldValue();
|
if (index > -1) {
|
const item = data[index];
|
data.splice(index, 1, { ...item, ...tableData });
|
setData(data);
|
setEditingKey('');
|
|
saveTableData(data);
|
} else {
|
data.push(tableData);
|
setData(data);
|
setEditingKey('');
|
|
saveTableData(data);
|
}
|
};
|
|
// 提交并继续
|
const saveContinue = async (id) => {
|
const key = String(data.length + 1);
|
const index = data.findIndex((item) => id === item.id);
|
const row = await form.validateFields();
|
const tableData = form.getFieldValue();
|
const newData = {
|
id: key,
|
name: '',
|
tag: '',
|
des: '',
|
};
|
form.setFieldsValue({
|
name: '',
|
tag: '',
|
des: '',
|
id: key,
|
});
|
setData([...data, newData]);
|
setEditingKey(key);
|
if (index > -1) {
|
const item = data[index];
|
data.splice(index, 1, { ...item, ...row });
|
setData([...data, newData]);
|
setEditingKey(key);
|
} else {
|
data.push(row);
|
setData([...data, newData]);
|
setEditingKey(key);
|
}
|
saveContinueTableData([...data, newData], key);
|
|
// const key = data.length + 1;
|
// const newData2 = {
|
// id: key,
|
// name: '',
|
// tag: '',
|
// des: '',
|
// };
|
// form.setFieldsValue({
|
// name: '',
|
// tag: '',
|
// des: '',
|
// });
|
// setData([...newData, newData2]);
|
// setEditingKey(key);
|
// if (index > -1) {
|
// const item = newData[index];
|
// newData.splice(index, 1, { ...item, ...row });
|
// setData([...newData, newData2]);
|
// setEditingKey(key);
|
// } else {
|
// newData.push(row);
|
// setData([...newData, newData2]);
|
// setEditingKey(key);
|
// }
|
};
|
|
// 新增
|
const addModal = () => {
|
const key = String(data.length + 1);
|
const newData = {
|
id: key,
|
name: '',
|
tag: '',
|
des: '',
|
};
|
form.setFieldsValue({
|
name: '',
|
tag: '',
|
des: '',
|
id: key,
|
});
|
setData([...data, newData]);
|
setEditingKey(key);
|
};
|
|
const columns = [
|
{
|
title: '功能名称',
|
dataIndex: 'name',
|
width: '25%',
|
editable: true,
|
},
|
{
|
title: '功能标签',
|
dataIndex: 'tag',
|
width: '25%',
|
editable: true,
|
},
|
{
|
title: '功能说明',
|
dataIndex: 'des',
|
width: '25%',
|
editable: true,
|
},
|
{
|
title: '操作',
|
dataIndex: 'operation',
|
render: (_, record) => {
|
const editable = isEditing(record);
|
return editable ? (
|
<span>
|
<Typography.Link onClick={() => save(record.id)} style={{ marginRight: 8 }}>
|
提交
|
</Typography.Link>
|
|
<Typography.Link onClick={() => saveContinue(record.id)} style={{ marginRight: 8 }}>
|
提交并继续
|
</Typography.Link>
|
|
<Popconfirm title="确定取消输入?" onConfirm={() => cancel(record.id)}>
|
<a>取消</a>
|
</Popconfirm>
|
</span>
|
) : (
|
<span>
|
<Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
|
修改
|
</Typography.Link>
|
|
<Popconfirm title="确定删除?" onConfirm={() => handleDelete(record.id)}>
|
<a disabled={editingKey !== ''}>删除</a>
|
</Popconfirm>
|
</span>
|
);
|
},
|
},
|
];
|
const mergedColumns = columns.map((col) => {
|
if (!col.editable) {
|
return col;
|
}
|
|
return {
|
...col,
|
onCell: (record) => ({
|
record,
|
inputType: col.dataIndex === 'age' ? 'number' : 'text',
|
dataIndex: col.dataIndex,
|
title: col.title,
|
editing: isEditing(record),
|
}),
|
};
|
});
|
return (
|
<React.Fragment>
|
<Spin spinning={loading}>
|
<Form form={form} component={false}>
|
<Table
|
className="function-table-left"
|
components={{
|
body: {
|
cell: EditableCell,
|
},
|
}}
|
bordered
|
dataSource={data}
|
columns={mergedColumns}
|
pagination={{
|
onChange: cancel,
|
}}
|
/>
|
</Form>
|
<Row className="function-menu-view-table">
|
<Button style={{ width: '100%' }} type="dashed" onClick={addModal} icon={<PlusOutlined />}>
|
新增
|
</Button>
|
</Row>
|
</Spin>
|
</React.Fragment>
|
);
|
};
|
|
FunctionMenuViewTable.propTypes = {
|
EditTableList: PropTypes.array,
|
EditTableData: PropTypes.object,
|
EditTableId: PropTypes.string,
|
loading: PropTypes.bool,
|
};
|
export default FunctionMenuViewTable;
|
