Commit a5cad1b7 authored by 皮倩雯's avatar 皮倩雯

优化数据字典搜索功能,界面修改

parent bc4bedf3
Pipeline #36755 skipped with stages
import React, { useState, useEffect } from 'react';
import {
Table,
Tooltip,
Spin,
Modal,
Form,
Input,
Space,
Button,
Popconfirm,
notification,
message,
} from 'antd';
import { get, CITY_SERVICE } from '@/services';
import {
GetKeyValue,
EditKeyValue,
DeleteKeyValue,
AddKeyValue,
} from '@/services/dataCenter/api';
import { EditTwoTone, DeleteOutlined } 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,
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}
>
<DeleteOutlined
onClick={() => {
setSelect(record);
}}
style={{
fontSize: '16px',
margin: '0px 10px',
color: '#e86060',
}}
/>
</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: '获取失败',
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(`${CITY_SERVICE}/OMS.svc/M_ResetKeyValue`, {
_version: 9999,
_dc: new Date().getTime(),
})
.then(res => {
if (res.success) {
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) {
setAddVisible(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,
});
}
});
};
return (
<div className={styles.AppDic}>
<Spin spinning={loading} tip="loading...">
<div
style={{
marginBottom: '10px',
fontSize: '16px',
height: 'calc(100vh-200px)',
}}
>
<span style={{ padding: '0 10px' }}>数据字典</span>
<Button
style={{ marginLeft: '10px' }}
type="primary"
size="small"
onClick={() => {
setAddVisible(true);
addForm.resetFields();
}}
>
添加
</Button>
<Popconfirm
title="是否重置默认配置?"
okText="确认"
cancelText="取消"
onConfirm={submitReset}
>
<Button size="small" danger style={{ marginLeft: '10px' }}>
重置
</Button>
</Popconfirm>
</div>
<Table
size="small"
bordered
columns={columns}
dataSource={data}
scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</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;
.AppDic{
overflow: auto;
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-pagination{
z-index: 999;
background: white;
margin: 2px 0px;
padding:6px 10px;
}
.ant-table-tbody{
.clickRowStyle{
background: #cfe7fd;
}
.clickRowStyle:hover>td{
background: #aed8fa;
}
}
.ant-card-body{
padding: 10px !important;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-content{
height:calc(100vh - 258px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding:8px;
padding-right: 20px;
}
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import {
Table,
Tooltip,
Spin,
Modal,
Form,
Input,
Space,
Button,
Popconfirm,
notification,
message,
Row,
Col,
} from 'antd';
import { EditTwoTone, DeleteOutlined } from '@ant-design/icons';
import { get, CITY_SERVICE } from '@/services';
import {
GetDataDictionaryList,
EditDataDictionary,
AddDataDictionary,
DeleteDataDictionary,
} from '@/services/dataCenter/api';
import styles from './WebDic.less';
const { Search } = Input;
const WebDic = () => {
const [loading, setLoading] = useState(false);
const [level, setLevel] = useState(0); // 设置级别,一级1,二级2,添加条目时使用
const [addVisible, setAddVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [data, setData] = useState([]); // 一级条目数据
const [subData, setSubData] = useState([]); // 二级条目数据
const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置
const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置
const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID,添加二级条目时使用
const [first, setFirst] = useState(true); // 是否第一次加载
const [addForm] = Form.useForm();
const [editForm] = Form.useForm();
const columns = [
{
title: '名称',
dataIndex: 'nodeName',
key: 'nodeName',
width: 220,
},
{
title: '值',
dataIndex: 'nodeValue',
key: 'nodeValue',
render: record => {
if (!record) {
return '-';
}
return record;
},
},
{
title: '操作',
key: 'action',
width: 100,
render: record => (
<Space>
<Tooltip title="编辑">
<EditTwoTone
onClick={() => {
setSelect(record);
if (record.parentID === '-1') {
setSelectColor(record);
}
setEditVisible(true);
editForm.setFieldsValue({
nodeName1: record.nodeName,
nodeValue: record.nodeValue,
});
}}
style={{ fontSize: '16px' }}
/>
</Tooltip>
<div onClick={e => e.stopPropagation()}>
<Popconfirm
title="是否删除该数据?"
okText="确认"
cancelText="取消"
onConfirm={submitDelete}
>
<DeleteOutlined
onClick={() => {
setSelect(record);
if (record.parentID === '-1') {
setSelectColor(record);
}
}}
style={{
fontSize: '16px',
margin: '0px 10px',
color: '#e86060',
}}
/>
</Popconfirm>
</div>
</Space>
),
},
];
useEffect(() => {
getData('-1');
}, []);
// 根据父节点nodeID(即parentID)获取数据,一级条目parentID = -1
const getData = value => {
setLoading(true);
// get(`${CITY_SERVICE}/OMS.svc/D_GetDataDictionaryList`, {
// _version: 9999,
// _dc: new Date().getTime(),
// nodeID: value,
// key: '',
// })
// .then(res => {
// if (res) {
// if (res.length > 0) {
// res.map(item => {
// item.key = item.nodeID;
// return item;
// });
// }
// // value为 -1 时获取一级条目数据,否则获取二级条目数据
// if (value === '-1') {
// setData(res); // 设置一级条目数据
// if (first) {
// setSelect(res[0]); // 默认当前选中一级条目第一条
// setSelectColor(res[0]);
// setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
// setFirst(false);
// // 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
// if (res[0] && res[0].parentID === '-1') {
// getData(res[0].nodeID);
// }
// }
// } else if (value) {
// setSubData(res); // 设置二级条目,res为空[]时也要设置
// }
// } else {
// notification.error({
// message: '获取失败',
// description: res.message,
// });
// }
// setLoading(false);
// })
// .catch(err => {
// setLoading(false);
// message.error(err);
// });
GetDataDictionaryList({ nodeID: value }).then(resnew => {
if (resnew.code == 0) {
let res = resnew.data;
if (res.length > 0) {
res.map(item => {
item.key = item.nodeID;
return item;
});
}
// value为 -1 时获取一级条目数据,否则获取二级条目数据
if (value === '-1') {
setData(res); // 设置一级条目数据
if (first) {
setSelect(res[0]); // 默认当前选中一级条目第一条
setSelectColor(res[0]);
setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
setFirst(false);
// 获取二级条目数据,默认一级条目第一条,递归一次(条件parentID === '-1')
if (res[0] && res[0].parentID === '-1') {
getData(res[0].nodeID);
}
}
} else if (value) {
setSubData(res); // 设置二级条目,res为空[]时也要设置
}
setLoading(false);
} else {
setLoading(false);
notification.error({
message: '获取失败',
description: resnew.msg,
});
}
});
};
const setRowClassName = record =>
record.nodeID === selectColor.nodeID ? styles.clickRowStyle : '';
// 提交-添加
const submitAdd = value => {
const nodeName1 = addForm.getFieldValue('nodeName1');
const nodeValue = addForm.getFieldValue('nodeValue');
// if (nodeName1) {
// get(`${CITY_SERVICE}/OMS.svc/D_AddDataDictionary`, {
// _version: 9999,
// _dc: new Date().getTime(),
// nodeID: value,
// nodeName: nodeName1,
// nodeValue,
// })
// .then(res => {
// if (res.success) {
// setAddVisible(false);
// if (level === 1) {
// getData('-1');
// getData(res.message); // res.message为添加成功返回的一级条目ID
// // 设置添加二级条目的父级ID及父级ID选中状态
// setSelect({ nodeID: res.message, parentID: '-1' });
// setSelectID(res.message);
// setSelectColor({ nodeID: res.message });
// } else {
// getData(value);
// }
// notification.success({
// message: '提交成功',
// });
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// message.error(err);
// });
// } else {
// notification.error({
// message: '提交失败',
// description: '名称不能为空',
// });
// }
AddDataDictionary({
nodeID: value,
nodeName: nodeName1,
nodeValue,
}).then(res => {
if (res.code == 0) {
setAddVisible(false);
if (level === 1) {
getData('-1');
getData(res.msg); // res.message为添加成功返回的一级条目ID
// 设置添加二级条目的父级ID及父级ID选中状态
setSelect({ nodeID: res.msg, parentID: '-1' });
setSelectID(res.msg);
setSelectColor({ nodeID: res.msg });
} else {
getData(value);
}
notification.success({
message: '提交成功',
});
} else {
notification.error({
message: '提交失败',
description: res.msg,
});
}
});
};
// 提交-修改
const submitEdit = () => {
const nodeName1 = editForm.getFieldValue('nodeName1');
const nodeValue = editForm.getFieldValue('nodeValue');
if (nodeName1) {
// get(`${CITY_SERVICE}/OMS.svc/D_EditDataDictionary`, {
// _version: 9999,
// _dc: new Date().getTime(),
// nodeID: select.nodeID,
// nodeName: nodeName1,
// nodeValue,
// })
// .then(res => {
// if (res.success) {
// setEditVisible(false);
// getData(select.parentID);
// notification.success({
// message: '提交成功',
// });
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// message.error(err);
// });
EditDataDictionary({
nodeID: select.nodeID,
nodeName: nodeName1,
nodeValue,
}).then(res => {
if (res.code == 0) {
setEditVisible(false);
getData(select.parentID);
notification.success({
message: '提交成功',
});
} else {
notification.error({
message: '提交失败',
description: res.msg,
});
}
});
} else {
notification.error({
message: '提交失败',
description: '名称不能为空',
});
}
};
// 提交-删除
const submitDelete = () => {
DeleteDataDictionary({
nodeID: select.nodeID,
})
.then(res => {
if (res.code === 0) {
getData(select.parentID);
if (select.parentID === '-1') {
setSubData([]);
}
notification.success({
message: '删除成功',
});
} else {
notification.error({
message: '删除失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
};
const setItem = value => {
setLevel(value);
setAddVisible(true);
addForm.resetFields();
// addForm.setFieldsValue({ nodeName1: '', nodeValue: '' });
};
const pagenation = {
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: '20',
showQuickJumper: true,
showSizeChanger: true,
};
const onSearch = key => {};
return (
<div className={styles.WebDic}>
<Spin spinning={loading} tip="loading...">
<Row style={{ background: 'white' }}>
<Col span={12} className={styles.left}>
<div style={{ marginBottom: '10px', fontSize: '16px' }}>
<span style={{ padding: '0 10px' }}>一级条目</span>
<Button type="primary" size="small" onClick={() => setItem(1)}>
添加
</Button>
<Search
style={{ width: '300px', marginLeft: '10px' }}
onSearch={onSearch}
/>
</div>
{/* 一级条目 表格 */}
<Table
size="small"
bordered
columns={columns}
dataSource={data}
scroll={{ x: 'max-content' }}
rowClassName={setRowClassName}
onRow={record => ({
onClick: () => {
getData(record.nodeID);
setSelect(record);
setSelectColor(record);
setSelectID(record.nodeID);
},
})}
pagination={pagenation}
/>
</Col>
<Col span={12}>
<div style={{ marginBottom: '10px', fontSize: '16px' }}>
<span style={{ padding: '0 10px' }}>二级条目</span>
<Button type="primary" size="small" onClick={() => setItem(2)}>
添加
</Button>
</div>
{/* 二级条目 表格 */}
<Table
size="small"
bordered
columns={columns}
dataSource={subData}
scroll={{ x: 'max-content' }}
pagination={pagenation}
/>
</Col>
</Row>
</Spin>
{/* 添加 */}
<Modal
title={level === 1 ? '添加一级条目' : '添加二级条目'}
visible={addVisible}
onOk={() => {
if (level === 1) {
submitAdd('-1');
} else {
submitAdd(selectID);
}
}}
onCancel={() => {
setAddVisible(false);
}}
okText="确认"
cancelText="取消"
>
<Form form={addForm} labelCol={{ span: 3 }}>
<Form.Item
name="nodeName1"
label="名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入名称" />
</Form.Item>
<Form.Item name="nodeValue" label="值">
<Input placeholder="请输入值" />
</Form.Item>
</Form>
</Modal>
{/* 修改 */}
<Modal
title={select.parentID === '-1' ? '修改一级条目' : '修改二级条目'}
visible={editVisible}
onOk={submitEdit}
onCancel={() => {
setEditVisible(false);
}}
okText="确认"
cancelText="取消"
>
<Form form={editForm} labelCol={{ span: 3 }}>
<Form.Item
name="nodeName1"
label="名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入名称" />
</Form.Item>
<Form.Item name="nodeValue" label="值">
<Input placeholder="请输入值" />
</Form.Item>
</Form>
</Modal>
</div>
);
};
export default WebDic;
.WebDic{
overflow: auto;
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-pagination{
z-index: 999;
background: white;
margin: 2px 0px;
padding:6px 10px;
}
.ant-table-tbody{
.clickRowStyle{
background: #cfe7fd;
}
.clickRowStyle:hover>td{
background: #aed8fa;
}
}
.ant-card-body{
padding: 10px !important;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-content{
height:calc(100vh - 268px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.left{
.ant-pagination{
border-right: 1px solid #f0eded;
}
}
.ant-table-pagination{
padding-top: 16px;
background: white;
padding-right: 20px;
}
}
\ No newline at end of file
import React from 'react';
import { Tabs, Card } from 'antd';
/*
* @Description:
* @Author: leizhe
* @Date: 2021-05-27 16:31:05
* @LastEditTime: 2021-10-28 13:57:57
* @LastEditors: leizhe
*/
import React, { useState, useEffect } from 'react';
import {
Table,
Tooltip,
Spin,
Modal,
Form,
Input,
Space,
Popconfirm,
notification,
message,
Button,
Upload,
Search,
} from 'antd';
import PageContainer from '@/components/BasePageContainer';
import WebDic from './WebDic';
import AppDic from './AppDic';
// import VersionPublish from './VersionPublish';
import {
EditTwoTone,
RollbackOutlined,
DeleteOutlined,
} from '@ant-design/icons';
import {
SearchDataDictionaryList,
EditDataDictionary,
DeleteDataDictionary
} from '@/services/dataCenter/api';
import styles from './index.less';
import { useHistory } from 'react-router-dom';
const dictionary = () => {
const { TabPane } = Tabs;
const [searchData, setSearchData] = useState([]); // 搜索框表格数据
const [treeLoading, setTreeLoading] = useState(false);
const [searchWord, setSearchWord] = useState(''); // 关键字
const [editVisible, setEditVisible] = useState(false);//编辑二级条目
const [editVisible1, setEditVisible1] = useState(false);//编辑一级条目
const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置
const history = useHistory();
const [editForm] = Form.useForm();
const { Search } = Input;
const columns2 = [
{
title: () => <span className={styles.font}>名称</span>,
dataIndex: 'nodeName',
key: 'nodeName',
width: '45%',
},
{
title: () => <span className={styles.font}></span>,
dataIndex: 'nodeValue',
key: 'nodeValue',
render: record => {
if (!record) {
return '-';
}
return record;
},
},
{
title: () => <span className={styles.font}>操作</span>,
key: 'action',
width: 100,
align: 'center',
render: record => (
<Space>
<Tooltip title="编辑">
<EditTwoTone
onClick={() => {
setSelect(record);
if (record.parentID === '-1' || record.parentID === null) {
setEditVisible1(true);
} else {
setEditVisible(true);
}
editForm.setFieldsValue({
nodeName: record.nodeName,
nodeValue: record.nodeValue,
});
}}
style={{ fontSize: '16px' }}
/>
</Tooltip>
<div onClick={e => e.stopPropagation()}>
<Tooltip title="删除">
<Popconfirm
title="是否确认删除该数据?"
okText="确认"
cancelText="取消"
onConfirm={submitDelete}
placement="left"
>
<DeleteOutlined
onClick={() => {
setSelect(record);
}
}
style={{
fontSize: '16px',
margin: '0px 10px',
color: '#e86060',
}}
/>
</Popconfirm>
</Tooltip>
</div>
</Space>
),
},
];
//修改
const submitEdit = () => {
const nodeName = editForm.getFieldValue('nodeName');
const nodeValue = editForm.getFieldValue('nodeValue');
if (nodeName) {
EditDataDictionary({
nodeID: select.nodeID,
nodeName: nodeName,
nodeValue: nodeValue
}).then(res => {
if (res.code === 0) {
setEditVisible(false);
sumbitSearch()
// getData(select.parentID === '-1' ? null : select.parentID);
notification.success({
message: '提交成功',
});
// if (flag1 === 1) {
// sumbitSearch()
// }
} else {
notification.error({
message: '提交失败',
description: res.msg,
});
}
});
} else {
notification.error({
message: '提交失败',
description: '名称不能为空',
});
}
}
const submitEdit1 = () => {
const nodeName = editForm.getFieldValue('nodeName');
if (nodeName) {
EditDataDictionary({
nodeID: select.nodeID,
nodeName: nodeName,
nodeValue: 'null'
}).then(res => {
if (res.code === 0) {
setEditVisible1(false);
sumbitSearch()
// getData(select.parentID === '-1' ? null : select.parentID);
notification.success({
message: '提交成功',
});
// if (flag1 === 1) {
// sumbitSearch()
// }
} else {
notification.error({
message: '提交失败',
description: res.msg,
});
}
});
} else {
notification.error({
message: '提交失败',
description: '名称不能为空',
});
}
}
const sumbitSearch = () => {
SearchDataDictionaryList({ key: searchWord }).then(res => {
if (res.code === 0) {
setSearchData(res.data);
}
// else {
// notification.error({
// message: '提交失败',
// description: res.message,
// })
// }
});
};
const submitDelete = () => {
console.log(select)
DeleteDataDictionary({
nodeID: select.nodeID,
}).then(res => {
if (res.code === 0) {
// if (flag1 === 1) {
// sumbitSearch()
// }
sumbitSearch()
notification.success({
message: '删除成功',
});
} else {
notification.error({
message: '删除失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
})
}
// 获取搜索框的值
const handleSearch = e => {
setSearchWord(e.target.value);
};
const pagenation = {
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: '20',
showQuickJumper: true,
showSizeChanger: true,
};
const back = () => {
history.push({
pathname: '/dataCenter/dictionary1'
});
};
return (
<PageContainer>
<Card>
<Tabs defaultActiveKey="1" type="card">
<TabPane tab="通用数据字典" key="1">
<WebDic />
</TabPane>
<TabPane tab="App数据字典" key="2" type="card">
<AppDic />
</TabPane>
</Tabs>
</Card>
<PageContainer className={styles.dictionaryContainer}>
<div className={styles.containerBox}>
<div className={styles.config}>
<div className={styles.title}>
<Search
style={{ width: 500, marginBottom: 25 }}
placeholder="输入关键字"
onSearch={sumbitSearch}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
</div>
<div className={styles.btn}>
<Button type="primary" icon={<RollbackOutlined />} onClick={() => back()}>
返回
</Button>
</div>
</div>
<Table
size='small'
bordered
key=""
columns={columns2}
dataSource={searchData}
scroll={{ y: 'calc(100vh - 280px)' }}
pagination={pagenation}
onRow={record => ({
onClick: () => {
setSelect(record);
},
})}
/>
</div>
{/*修改一级条目 */}
<Modal
title={'修改一级条目'}
visible={editVisible1}
onOk={submitEdit1}
onCancel={() => {
setEditVisible1(false);
}}
okText="确认"
cancelText="取消"
>
<Form form={editForm} labelCol={{ span: 3 }}>
<Form.Item
name="nodeName"
label="名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入名称" style={{ width: '90%' }} />
</Form.Item>
</Form>
</Modal>
{/*修改二级条目 */}
<Modal
title={'修改二级条目'}
visible={editVisible}
onOk={submitEdit}
onCancel={() => {
setEditVisible(false);
}}
okText="确认"
cancelText="取消"
>
<Form form={editForm} labelCol={{ span: 3 }}>
<Form.Item
name="nodeName"
label="名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入名称" style={{ width: '90%' }} />
</Form.Item>
<Form.Item name="nodeValue" label="值">
<Input placeholder="请输入值" style={{ width: '90%' }} />
</Form.Item>
</Form>
</Modal>
</PageContainer>
);
};
......
.dictionaryContainer{
.font {
font-weight: bold;
}
.containerBox {
width: 100vm;
height: calc(100vh - 70px) ;
background: #ffffff;
.ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
margin-left: 0;
}
.ant-table.ant-table-bordered > .ant-table-container{
border: none;
}
.clickRowStyle{
background: #cfe7fd;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
}
.config{
display: flex;
padding: 1rem 0 0.5rem 0.5rem;
justify-content: space-between;
width: calc(100% - 10px);
.title{
font-size: 18px;
color: rgba(0, 114, 255, 1);
font-weight: bold;
}
.btn{
display: flex;
justify-content: flex-end;
width: 20rem;
}
.ant-btn{
display: flex;
align-items: center;
margin-left: 20px;
}
}
}
\ No newline at end of file
......@@ -354,9 +354,12 @@ const AppDic = () => {
height: 'calc(100vh-200px)',
display: 'flex',
alignItems: 'center',
justifyContent:'space-between'
}}
>
<span>数据字典</span>
<div>
<Tooltip title="添加">
<PlusSquareOutlined
onClick={() => {
......@@ -367,7 +370,7 @@ const AppDic = () => {
color: '#1890FF',
fontSize: '20px',
marginRight: '22px',
marginLeft: '90%',
}}
/>
</Tooltip>
......@@ -383,14 +386,14 @@ const AppDic = () => {
style={{
color: '#1890FF',
fontSize: '20px',
verticalAlign: 'text-bottom',
marginRight: '30px',
float: 'right',
}}
/>
</Tooltip>
</Popconfirm>
</div>
</div>
<Table
size="small"
bordered
......
......@@ -19,6 +19,7 @@ import { EditTwoTone, DeleteOutlined, CloudSyncOutlined, SearchOutlined, PlusSqu
import { GetDataDictionaryList, EditDataDictionary, AddDataDictionary, DeleteDataDictionary, AddDataDictionaryList, SearchDataDictionaryList, ExportDataDictionary, ImportDataDictionary } from '@/services/dataCenter/api'
import styles from './WebDic.less';
import { useHistory } from 'react-router-dom';
import map from '@/pages/user/login/components/Login/map';
import { Link } from 'react-router-dom';
import { GetMetaData } from '@/services/platform/gis';
......@@ -48,6 +49,7 @@ const WebDic = () => {
const [flag, setFlag] = useState(0);
const [flag1, setFlag1] = useState(0);//搜索框数据是否刷新
const [isloading, setIsloading] = useState(false)
const history = useHistory();
const [InPutVisible, setInPutVisible] = useState(false);
......@@ -348,9 +350,14 @@ const WebDic = () => {
setIsloading(data)
}
}
// const onSearch = () => {
// setSearchVisible(true)
// setFlag1(1)
// }
const onSearch = () => {
setSearchVisible(true)
setFlag1(1)
history.push({
pathname: '/dataCenter/dictionary'
});
}
//搜索
const sumbitSearch = () => {
......
......@@ -2,7 +2,7 @@
* @Description:
* @Author: leizhe
* @Date: 2021-07-13 16:32:28
* @LastEditTime: 2021-07-13 18:02:49
* @LastEditTime: 2021-10-26 16:38:27
* @LastEditors: leizhe
*/
import React from 'react';
......
/*
* @Description:
* @Author: leizhe
* @Date: 2021-10-26 14:27:34
* @LastEditTime: 2021-10-26 15:16:07
* @LastEditors: leizhe
*/
import React, { useState, useEffect } from 'react';
import {
Table,
Tooltip,
Spin,
Modal,
Form,
Input,
Space,
Popconfirm,
notification,
message,
Row,
Col,
Button,
Upload,
} from 'antd';
import {
EditTwoTone,
DeleteOutlined,
CloudSyncOutlined,
SearchOutlined,
PlusSquareFilled,
MinusCircleOutlined,
PlusOutlined,
LogoutOutlined,
DownloadOutlined,
UploadOutlined,
} from '@ant-design/icons';
import styles from './search.less';
import {
GetDataDictionaryList,
EditDataDictionary,
AddDataDictionary,
DeleteDataDictionary,
AddDataDictionaryList,
SearchDataDictionaryList,
ExportDataDictionary,
ImportDataDictionary,
} from '@/services/dataCenter/api';
const Search = () => {
const [searchData, setSearchData] = useState([]); // 搜索框表格数据
const [treeLoading, setTreeLoading] = useState(false);
const [searchWord, setSearchWord] = useState(''); // 关键字
const columns2 = [
{
title: () => <span className={styles.font}>名称</span>,
dataIndex: 'nodeName',
key: 'nodeName',
},
{
title: () => <span className={styles.font}></span>,
dataIndex: 'nodeValue',
width: 400,
key: 'nodeValue',
render: record => {
if (!record) {
return '-';
}
return record;
},
},
{
title: () => <span className={styles.font}>操作</span>,
key: 'action',
width: 100,
align: 'center',
render: record => (
<Space>
<Tooltip title="编辑">
<EditTwoTone
onClick={() => {
setSelect(record);
if (record.parentID === '-1') {
setSelectColor(record);
}
if (record.parentID === '-1' || record.parentID === null) {
setEditVisible1(true);
} else {
setEditVisible(true);
}
editForm.setFieldsValue({
nodeName: record.nodeName,
nodeValue: record.nodeValue,
});
}}
style={{ fontSize: '16px' }}
/>
</Tooltip>
<div onClick={e => e.stopPropagation()}>
<Tooltip title="删除">
<Popconfirm
title="是否确认删除该数据,删除一级目录数据会将其二级目录子数据一起删除?"
okText="确认"
cancelText="取消"
onConfirm={submitDelete}
>
<DeleteOutlined
onClick={() => {
setSelect(record);
if (record.parentID === '-1') {
setSelectColor(record);
}
}}
style={{
fontSize: '16px',
margin: '0px 10px',
color: '#e86060',
}}
/>
</Popconfirm>
</Tooltip>
</div>
</Space>
),
},
];
const sumbitSearch = () => {
SearchDataDictionaryList({ key: searchWord }).then(res => {
if (res.code === 0) {
setSearchData(res.data);
}
// else {
// notification.error({
// message: '提交失败',
// description: res.message,
// })
// }
});
};
// 获取搜索框的值
const handleSearch = e => {
setSearchWord(e.target.value);
};
const pagenation = {
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: '20',
showQuickJumper: true,
showSizeChanger: true,
};
return (
<>
<Spin tip="loading..." spinning={treeLoading}>
<div className={styles.containerBox}>
<div className={styles.config}>
<div className={styles.title} />
<div className={styles.btn}>
<Search
style={{ width: 470, marginBottom: 25 }}
placeholder="输入关键字"
onSearch={sumbitSearch}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
</div>
</div>
<Table
size="small"
bordered
key=""
columns={columns2}
dataSource={searchData}
scroll={{ y: 'calc(100vh - 300px)' }}
// rowClassName={setRowClassName}
// onRow={record => ({
// onClick: () => {
// setSelect(record);
// setSelectColor(record);
// setSelectID(record.nodeID);
// },
// })}
pagination={pagenation}
/>
</div>
</Spin>
</>
);
};
export default Search;
.ant-modal-close-x {
line-height: 35px;
}
.ant-btn .anticon.anticon-plus > svg {
margin-top:-5px;
}
.incidentContainer{
.ant-card-body {
padding: 12px 24px 24px 24px;
}
.linkDrowp{
position: absolute;
left: 93.5%;
width: 1rem;
height: 100%;
display: flex;
align-items: center;
}
.listItem{
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
color: #414E65;
cursor: pointer;
line-height: 28px;
align-items: center;
padding: 8px 14px;
}
.ant-btn .anticon.anticon-plus > svg, .ant-btn .anticon.anticon-minus > svg {
margin-top: -5px;
}
.pickItem{
background-color: #F5F6F9;
}
.contentContainers{
display: flex;
width: 100%;
position: relative;
.ant-table.ant-table-bordered > .ant-table-container {
min-width: calc(100vw - 582px);
height: calc(100vh - 166px);
overflow-x: hidden;
border: none;
}
.orgContainer{
height: calc(100vh - 74px);
width: 250px;
left: 0;
top: 0;
overflow-x: hidden;
margin-right: 10px;
position: relative;
transition-property:width,left;
transition-duration: 0.5s;
white-space: nowrap;
.ant-tree{
padding-top: 6px;
.ant-tree-switcher{
line-height: 1;
margin-right: 0px !important;
color:#1890FF;
.ant-tree-switcher-line-icon{
margin-left: 5px;
}
}
}
.switcher{
display: block;
position: absolute;
font-size: 18px;
color: #1890FF!important;
top: 50%;
right: 2px;
transform: translate(0%,-50%);
z-index: 1;
}
}
.orgContainerHide{
// transform: translateX(-230px);
left: 0px;
top: 0;
width: 26px;
}
.ant-popover-message-title {
padding-left: 20px;
}
.userContainer{
height: calc(100vh - 74px) !important;
z-index: 999;
min-width: 800px;
background: white;
width: 100%;
position: relative;
transition: width 0.5s;
.title{
margin: 16px 0 10px 16px;
display: inline-block;
width: 270px;
cursor: pointer;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
.ant-btn{
margin: 0px 10px;
.ant-btn-primary{
background: #50aefc;
}
}
.ant-input-search-button{
margin-left: 0px !important;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
background-color:#F6F9FE;
}
.ant-table-cell{
text-align:center;
overflow: hidden;
// text-overflow:ellipsis;
white-space: nowrap;
}
.ant-table-body{
height:calc(100vh - 210px);
border-right: white;
overflow: auto !important;
}
.clickRowStyle{
background: #cfe7fd;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
}
}
.icon{
margin-top: -5px !important;
vertical-align: text-bottom;
}
}
.formData{
height: 38rem;
overflow-y: scroll;
.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{
display: none;
}
.formData_label{
display: flex;
align-items: center;
}
.filed_listItem{
display: flex;
height: 3.6rem;
.ant-btn-icon-only {
width: 32px;
height: 32px;
/* padding: 2.4px 0; */
font-size: 16px;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.listCard{
display: flex;
.cardItem{
padding: 0.5rem;
}
.cardContent{
height: 30rem;
overflow-y: scroll;
width: 19rem;
}
.cardItemData{
padding: 1rem;
border: 1px solid #b5b8c8;
margin-bottom: 1rem;
overflow-x: hidden;
}
}
.doctorTable {
margin-bottom: 16px;
table {
width: 100%;
td {
padding: 6px;
border: 1px solid #e8e8e8;
}
thead {
tr {
font-weight: 600;
background: #FAFAFA;
}
}
tbody{
tr:hover{
background-color:#ededed ;
}
}
}
}
.ant-checkbox-group-item {
width: 260px;
}
.ant-drawer-footer {
display:flex;
justify-content: flex-end;
}
.config{
display: flex;
padding: 1rem 0 0.5rem 0.5rem;
justify-content: space-between;
width: calc(100% - 10px);
.title{
font-size: 18px;
color: rgba(0, 114, 255, 1);
font-weight: bold;
}
.btn{
display: flex;
justify-content: flex-end;
width: 20rem;
}
.ant-btn{
display: flex;
align-items: center;
margin-left: 20px;
}
}
.containerBox {
width: 100vm;
height: calc(100vh - 90px) ;
background: #ffffff;
.ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
margin-left: 0;
}
.ant-table.ant-table-bordered > .ant-table-container{
border: none;
}
.clickRowStyle{
background: #cfe7fd;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
}
\ No newline at end of file
......@@ -25,7 +25,7 @@ import SiteManage from '../pages/userCenter/siteManage/SiteManage';
import SiteManageV2 from '../pages/userCenter/siteManageV2/SiteManage';
import Dictionary from '../pages/dataCenter/dictionary';
import Dictionary1 from '../pages/dataCenter/dictionary1';
import Search from '../pages/dataCenter/search';
// import Search from '../pages/dataCenter/search';
import ServiceLog from '../pages/log/serviceLog';
import LoginLog from '../pages/log/loginLog';
import OmsLog from '../pages/log/omsLog';
......@@ -370,11 +370,12 @@ export default {
icon: <TableOutlined style={iconStyle} />,
component: BlankLayout,
routes: [
// {
// path: '/dataCenter/dictionary',
// name: '数据字典',
// component: Dictionary,
// },
{
path: '/dataCenter/dictionary',
name: '数据字典1',
hideMenu: true,
component: Dictionary,
},
{
path: '/dataCenter/dictionary1',
name: '数据字典',
......@@ -382,8 +383,7 @@ export default {
},
// {
// path: '/dataCenter/search',
// name: '搜索',
// // hideMenu: true,
// name: '数据字典',
// component: Search,
// },
// {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment