import React, { useState, useEffect } from 'react'; import { Table, Tooltip, Spin, Modal, Form, Input, Space, Button, Popconfirm, notification, message, } from 'antd'; import { get, CITY_SERVICE, PUBLISH_SERVICE } from '@/services'; import { GetKeyValue, EditKeyValue, DeleteKeyValue, AddKeyValue } from '@/services/dataCenter/api'; import { EditTwoTone, DeleteOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons'; import styles from './AppDic.less'; const AppDic = () => { const [loading, setLoading] = useState(false); const [addVisible, setAddVisible] = useState(false); const [editVisible, setEditVisible] = useState(false); const [data, setData] = useState([]); // 表数据 const [select, setSelect] = useState({}); // 当前选中条目,修改/删除时设置 const [addForm] = Form.useForm(); const [editForm] = Form.useForm(); const columns = [ { title: '名称', dataIndex: 'Label', key: 'Label', }, { title: '键名', dataIndex: 'Key', key: 'Key', }, { title: '值', dataIndex: 'Value', key: 'Value', }, { title: '描述', dataIndex: 'Description', key: 'Description', render: record => { if (!record) { return '-'; } return record; }, }, { title: '操作', key: 'action', width: 100, align: 'center', render: record => ( <Space> <Tooltip title="编辑"> <EditTwoTone onClick={() => { setSelect(record); setEditVisible(true); editForm.setFieldsValue({ label: record.Label, key: record.Key, value: record.Value, description: record.Description, }); }} style={{ fontSize: '16px' }} /> </Tooltip> <Popconfirm title="是否删除该数据?" okText="确认" cancelText="取消" onConfirm={submitDelete} > <Tooltip title="删除"> <DeleteOutlined onClick={() => { setSelect(record); }} style={{ fontSize: '16px', margin: '0px 10px', color: '#e86060', }} /> </Tooltip> </Popconfirm> </Space> ), }, ]; useEffect(() => { getData('-1'); }, []); const getData = () => { setLoading(true); // get(`${CITY_SERVICE}/OMS.svc/M_GetKeyValue`, { // _version: 9999, // _dc: new Date().getTime(), // }) // .then(res => { // if (res) { // if (res.length > 0) { // res.map(item => { // item.key = item.id; // return item; // }); // } // setData(res); // } else { // notification.error({ // message: '获取失败', // description: res.message, // }); // } // setLoading(false); // }) // .catch(err => { // setLoading(false); // message.error(err); // }); GetKeyValue({}).then(resnew => { if (resnew.code === 0) { let res = resnew.data; if (res.length > 0) { res.map(item => { item.key = item.id; return item; }); } setData(res); } else { notification.error({ message: '获取失败', // eslint-disable-next-line no-undef description: res.msg, }); } setLoading(false); }); }; // 提交-添加 const submitAdd = () => { const label = addForm.getFieldValue('label'); const key = addForm.getFieldValue('key'); const value = addForm.getFieldValue('value'); const description = addForm.getFieldValue('description'); if (label && key && value) { // get(`${CITY_SERVICE}/OMS.svc/M_AddKeyValue`, { // _version: 9999, // _dc: new Date().getTime(), // label, // key, // value, // desc: description, // }) // .then(res => { // if (res.success) { // setAddVisible(false); // getData(); // notification.success({ // message: '提交成功', // }); // } else { // notification.error({ // message: '提交失败', // description: res.message, // }); // } // }) // .catch(err => { // message.error(err); // }); AddKeyValue({ label, key, value, desc: description, }).then(res => { if (res.code === 0) { setAddVisible(false); getData(); notification.success({ message: '提交成功', }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }); } else { notification.error({ message: '提交失败', description: '名称/键名/值不能为空', }); } }; // 提交-重置 const submitReset = () => { get(`${PUBLISH_SERVICE}/DataManger/ResetKeyValue`, {}) .then(res => { if (res.code === 0) { getData(); notification.success({ message: '重置成功', }); } else { notification.error({ message: '重置失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; // 提交-编辑 const submitEdit = () => { const label = editForm.getFieldValue('label'); const key = editForm.getFieldValue('key'); const value = editForm.getFieldValue('value'); const description = editForm.getFieldValue('description'); if (label && key && value) { // get(`${CITY_SERVICE}/OMS.svc/M_EditKeyValue`, { // _version: 9999, // _dc: new Date().getTime(), // id: select.id, // label, // key, // value, // desc: description, // }) // .then(res => { // if (res.success) { // setEditVisible(false); // getData(); // notification.success({ // message: '提交成功', // }); // } else { // notification.error({ // message: '提交失败', // description: res.message, // }); // } // }) // .catch(err => { // message.error(err); // }); EditKeyValue({ id: select.id, label, key, value, desc: description, }).then(res => { if (res.code === 0) { setEditVisible(false); getData(); notification.success({ message: '提交成功', }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }); } else { notification.error({ message: '提交失败', description: '名称/键名/值不能为空', }); } }; const submitDelete = () => { // get(`${CITY_SERVICE}/OMS.svc/M_DeleteKeyValue`, { // _version: 9999, // _dc: new Date().getTime(), // key: select.Key, // }) // .then(res => { // if (res.success) { // getData(select.parentID); // notification.success({ // message: '删除成功', // }); // } else { // notification.error({ // message: '删除失败', // description: res.message, // }); // } // }) // .catch(err => { // message.error(err); // }); DeleteKeyValue({ key: select.Key, }).then(res => { if (res.code === 0) { getData(select.parentID); notification.success({ message: '删除成功', }); } else { notification.error({ message: '删除失败', description: res.msg, }); } }); }; const pagination = { showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, pageSizeOptions: [10, 20, 50, 100], defaultPageSize: 20, showQuickJumper: true, showSizeChanger: true, }; return ( <div className={styles.AppDic}> <Spin spinning={loading} tip="loading..."> <div style={{ marginBottom: '10px', fontSize: '16px', height: 'calc(100vh-200px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', }} > <span>数据字典</span> <div> <Tooltip title="添加"> <PlusSquareOutlined onClick={() => { setAddVisible(true); addForm.resetFields(); }} style={{ color: '#1890FF', fontSize: '20px', marginRight: '22px', }} /> </Tooltip> <Popconfirm title="是否重置默认配置?" okText="确认" cancelText="取消" onConfirm={submitReset} > <Tooltip title="还原"> <SyncOutlined style={{ color: '#1890FF', fontSize: '20px', marginRight: '30px', }} /> </Tooltip> </Popconfirm> </div> </div> <Table size="small" bordered columns={columns} dataSource={data} scroll={{ x: 'max-content' }} pagination={pagination} /> </Spin> {/* 添加 */} <Modal title="添加数据字典" visible={addVisible} onOk={submitAdd} onCancel={() => { setAddVisible(false); }} okText="确认" cancelText="取消" > <Form form={addForm} labelCol={{ span: 3 }}> <Form.Item name="label" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" /> </Form.Item> <Form.Item name="key" label="键名" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入键名" /> </Form.Item> <Form.Item name="value" label="值" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入值" /> </Form.Item> <Form.Item name="description" label="描述"> <Input placeholder="请输入相关描述" /> </Form.Item> </Form> </Modal> {/* 修改 */} <Modal title="修改数据字典" visible={editVisible} onOk={submitEdit} onCancel={() => { setEditVisible(false); }} okText="确认" cancelText="取消" > <Form form={editForm} labelCol={{ span: 3 }}> <Form.Item name="label" label="名称" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入名称" /> </Form.Item> <Form.Item name="key" label="键名"> <Input placeholder="请输入键名" /> </Form.Item> <Form.Item name="value" label="值" rules={[{ required: true, message: '不能为空' }]}> <Input placeholder="请输入值" /> </Form.Item> <Form.Item name="description" label="描述"> <Input placeholder="请输入相关描述" /> </Form.Item> </Form> </Modal> </div> ); }; export default AppDic;