|
@@ -0,0 +1,271 @@
|
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
+import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message, Row, Col } from 'antd';
|
|
|
|
+import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
|
|
|
+import AddDict from './addDict'
|
|
|
|
+import '@common/common.less';
|
|
|
|
+import { useSelector } from 'react-redux'
|
|
|
|
+import apiObj from '@api/index';
|
|
|
|
+import DictContext from './Dict-context';
|
|
|
|
+
|
|
|
|
+const { post, api, xPost } = apiObj;
|
|
|
|
+const { Option } = Select;
|
|
|
|
+//获取列表
|
|
|
|
+function DictManager() {
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ getDictPage();
|
|
|
|
+ }, []);
|
|
|
|
+ const [DictList, setDictList] = useState([]);//当前页列表数据
|
|
|
|
+ const [Dictid, setDictid] = useState([]);//当前列表id
|
|
|
|
+ const [title, setTitle] = useState("");//数据总量
|
|
|
|
+ const [visible, setVisible] = useState(false);//弹窗
|
|
|
|
+ const [msvisible, setMsvisible] = useState(false);//删除的弹窗
|
|
|
|
+ const [modalType, setModalType] = useState("");
|
|
|
|
+ const [groupTypeList, setgroupTypeList] = useState([]);//代码类别模糊查找
|
|
|
|
+ const [type, setType] = useState("");
|
|
|
|
+ const [formData, setFormData] = useState(null);//当前行数据
|
|
|
|
+ const [size, setSize] = useState(15);//每页显示条数
|
|
|
|
+ const [total, setTotal] = useState(0);
|
|
|
|
+ const [current, setCurrent] = useState(1);//当前页
|
|
|
|
+ const [params, setParams] = useState({
|
|
|
|
+ pages: 1,
|
|
|
|
+ current: 1,
|
|
|
|
+ size: 15
|
|
|
|
+ });
|
|
|
|
+ const [form] = Form.useForm();
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ let list = []
|
|
|
|
+ let data = {
|
|
|
|
+ pages: 1,
|
|
|
|
+ current: 1,
|
|
|
|
+ size: size
|
|
|
|
+ }
|
|
|
|
+ //新增弹窗
|
|
|
|
+ const showModal = (name, type, flag, Dictrow) => {
|
|
|
|
+ setVisible(type);
|
|
|
|
+ setTitle(name);
|
|
|
|
+ setType(flag)
|
|
|
|
+ if (flag == 1) {
|
|
|
|
+ setFormData({
|
|
|
|
+ status: '1'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (flag == 3) {
|
|
|
|
+ setFormData(Dictrow)
|
|
|
|
+ getDictPage()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //表格数据
|
|
|
|
+ function getDictPage(param) {
|
|
|
|
+ post(api.getDictTree, param || params).then((res) => {
|
|
|
|
+ if (res.data.code === 200) {
|
|
|
|
+ const data = res.data.data;
|
|
|
|
+ console.log(data.records)
|
|
|
|
+ setDictList(data.records);
|
|
|
|
+ setTotal(data.total)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //模糊查询
|
|
|
|
+ function getCodeCategory(val){
|
|
|
|
+ xPost(api.getCodeCategory,{groupType:val}).then((res) => {
|
|
|
|
+ if (res.data.code === 200) {
|
|
|
|
+ const data = res.data.data;
|
|
|
|
+ setgroupTypeList(data)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ function onSearch(value) {
|
|
|
|
+ getCodeCategory(value)
|
|
|
|
+ }
|
|
|
|
+ function onFocus() {
|
|
|
|
+ getCodeCategory("")
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //删除
|
|
|
|
+ function deleteDict() {
|
|
|
|
+ xPost(api.deleteDict,{id:Dictid}).then((res) => {
|
|
|
|
+ if (res.data.code === 200) {
|
|
|
|
+ getDictPage();
|
|
|
|
+ setMsvisible(false);
|
|
|
|
+ setDictid(null)
|
|
|
|
+ message.success("删除成功");
|
|
|
|
+ } else {
|
|
|
|
+ message.warning(res.data.msg || '操作失败');
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ message.error("接口出错");
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ //每页显示条数切换
|
|
|
|
+ function onSizeChange(current, pageSize) {
|
|
|
|
+ params.current = current
|
|
|
|
+ params.size = pageSize
|
|
|
|
+ setSize(pageSize)
|
|
|
|
+ setCurrent(current)
|
|
|
|
+ setParams(params)
|
|
|
|
+ getDictPage()
|
|
|
|
+ }
|
|
|
|
+ //翻页
|
|
|
|
+ function changePage(page, pageSize) {
|
|
|
|
+ params.current = page
|
|
|
|
+ params.size = pageSize
|
|
|
|
+ setCurrent(page)
|
|
|
|
+ setParams(params)
|
|
|
|
+ getDictPage()
|
|
|
|
+ }
|
|
|
|
+ const onFinish = (value) => {
|
|
|
|
+ const param = {
|
|
|
|
+ ...data,
|
|
|
|
+ ...value
|
|
|
|
+ }
|
|
|
|
+ setCurrent(1)
|
|
|
|
+ setParams(param)
|
|
|
|
+ getDictPage(param);
|
|
|
|
+ };
|
|
|
|
+ const onReset = () => {
|
|
|
|
+ setCurrent(1)
|
|
|
|
+ setParams(data)
|
|
|
|
+ form.resetFields();
|
|
|
|
+ getDictPage(data);
|
|
|
|
+ };
|
|
|
|
+ const messageBox = (id) => {
|
|
|
|
+ setDictid(id)
|
|
|
|
+ setMsvisible(true)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //提示框取消
|
|
|
|
+ function handleCancel() {
|
|
|
|
+ setMsvisible(false);
|
|
|
|
+ }
|
|
|
|
+ function cancel() {
|
|
|
|
+ setVisible(false)
|
|
|
|
+ setFormData(null)
|
|
|
|
+ }
|
|
|
|
+ function DictChange() {
|
|
|
|
+ setVisible(false)
|
|
|
|
+ getDictPage();
|
|
|
|
+ }
|
|
|
|
+ const columns = [
|
|
|
|
+ { title: '代码类别', dataIndex: 'groupType', key: 'index' },
|
|
|
|
+ { title: '字典编码', dataIndex: 'val', key: 'index' },
|
|
|
|
+ { title: '代码名称', dataIndex: 'name', key: 'index' },
|
|
|
|
+ { title: '字典说明', dataIndex: 'remark', key: 'index' },
|
|
|
|
+ { title: '状态', dataIndex: 'status', key: 'status'},
|
|
|
|
+ {
|
|
|
|
+ title: '操作', dataIndex: 'key', render: (text, record) => (
|
|
|
|
+ <Space size="middle">
|
|
|
|
+
|
|
|
|
+ <a onClick={e => showModal('修改字典', true, 3, record)}>修改</a>
|
|
|
|
+ <a onClick={e => messageBox(record.id)}>删除</a>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </Space>
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ return (
|
|
|
|
+ <div className="wrapper">
|
|
|
|
+ <div className="filter-box">
|
|
|
|
+ <Form
|
|
|
|
+ form={form}
|
|
|
|
+ name="normal_login"
|
|
|
|
+ onFinish={onFinish}
|
|
|
|
+ initialValues={{ status: '' }}
|
|
|
|
+ >
|
|
|
|
+ <Row gutter={24}>
|
|
|
|
+ <Col span={5} key={0}>
|
|
|
|
+ <Form.Item id="groupTypeval" label="代码类别" name="groupType">
|
|
|
|
+ <Select
|
|
|
|
+ showSearch
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
+ onSearch={onSearch}
|
|
|
|
+ onFocus={onFocus}
|
|
|
|
+ >
|
|
|
|
+ {groupTypeList.map((item) => {
|
|
|
|
+ return (
|
|
|
|
+ <Option value={item} key={item}>{item}</Option>
|
|
|
|
+ )
|
|
|
|
+ })}
|
|
|
|
+ </Select>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </Col>
|
|
|
|
+ <Col span={5} key={1}>
|
|
|
|
+ <Form.Item label="代码名称" name="name">
|
|
|
|
+ <Input placeholder="代码名称" autoComplete='off'/>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </Col>
|
|
|
|
+
|
|
|
|
+ <Col span={6} key={3}>
|
|
|
|
+ <Form.Item>
|
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
|
+ 查询
|
|
|
|
+ </Button>
|
|
|
|
+ <Button onClick={onReset}>
|
|
|
|
+ 重置
|
|
|
|
+ </Button>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </Col>
|
|
|
|
+ </Row>
|
|
|
|
+ </Form>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div className="table">
|
|
|
|
+ <div className="table-header">
|
|
|
|
+ <h2 className="table-title">字典管理</h2>
|
|
|
|
+ <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增字典', true, 1)}>新增字典</Button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <Table
|
|
|
|
+ columns={columns}
|
|
|
|
+ scroll={{ y: 'calc(100vh - 320px)' }}
|
|
|
|
+ dataSource={DictList}
|
|
|
|
+ rowKey={record => record.id}
|
|
|
|
+ pagination={{
|
|
|
|
+ current: current,
|
|
|
|
+ pageSize: size,
|
|
|
|
+ size: 'small',
|
|
|
|
+ showSizeChanger: true,
|
|
|
|
+ pageSizeOptions: ['15', '30', '60', '120'],
|
|
|
|
+ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
|
|
|
|
+ onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
|
|
|
|
+ onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
|
|
|
|
+ total: total
|
|
|
|
+ }} />
|
|
|
|
+ </div>
|
|
|
|
+ {visible && formData ?
|
|
|
|
+ <Modal
|
|
|
|
+ title={title}
|
|
|
|
+ okText='确定'
|
|
|
|
+ cancelText='取消'
|
|
|
|
+ width={'45%'}
|
|
|
|
+ visible={visible}
|
|
|
|
+ onCancel={cancel}
|
|
|
|
+ footer={null}
|
|
|
|
+ forceRender={true}
|
|
|
|
+ >
|
|
|
|
+ <DictContext.Provider value={{type, formData}}>
|
|
|
|
+ <AddDict DictChange={DictChange} />
|
|
|
|
+ </DictContext.Provider>
|
|
|
|
+
|
|
|
|
+ </Modal>
|
|
|
|
+ : ''}
|
|
|
|
+ <Modal
|
|
|
|
+ title="提示"
|
|
|
|
+ okText='确定'
|
|
|
|
+ cancelText='取消'
|
|
|
|
+ width={400}
|
|
|
|
+ visible={msvisible}
|
|
|
|
+ onOk={deleteDict}
|
|
|
|
+ onCancel={handleCancel}
|
|
|
|
+ >
|
|
|
|
+ <p>确定要删除该字典?</p>
|
|
|
|
+ </Modal>
|
|
|
|
+ </div >
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default DictManager;
|