字典管理

src/api/request.js

@@ -61,6 +61,13 @@ const request = {
     deleteMenu: '/security-center/funcManage/deleteMenu',//删除
     getMenuById: '/security-center/funcManage/getMenuById',//获取详情
     updateMenu: '/security-center/funcManage/updateMenu',//修改
+	
+	//字典管理
+	getDictTree: '/security-center/dictionaryManage/getDictionary',//查看字典管理
+	addDict: '/security-center/dictionaryManage/addDictionary',//添加字典
+	deleteDict: '/security-center/dictionaryManage/deleteDictionary',//删除字典
+	getCodeCategory: '/security-center/dictionaryManage/getCodeCategory',//查看字典管理代码类别
+	updateDict: '/security-center/dictionaryManage/updateDictionary',//修改字典
 
     //日志管理
     getOperationLog: '/security-center/logManage/getOperationLog',//操作日志

src/components/AMenu/index.js

@@ -6,7 +6,8 @@ import OrgManager from "../OrgManager";
 import RoleManager from "../RoleManager";
 import UserManager from "../UserManager";
 import DataManager from "../DataManager";
-import InpaManager from "../InpaManager"
+import DictManager from "../DictManager";
+import InpaManager from "../InpaManager";
 import NullPage from "../NullPage";
 import FuncManager from "../FuncManager";
 import OperationLog from "../OperationLog";
@@ -28,6 +29,7 @@ const pageMap = {
     'QXGL-SJQX': <DataManager />,
     'QXGL-BQQX': <InpaManager />,
     'XTSZ-GNGL': <FuncManager />,
+	'XTSZ-ZDGL': <DictManager />,
     'RZGL-CZRZ': <OperationLog />,
     'RZGL-DLRZ': <LoginLog />,
     'RZGL-YCRZ': <ExceptionLog />,

src/components/DictManager/Dict-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+const DictContext = createContext(null);
+
+export default DictContext;

src/components/DictManager/addDict.js

@@ -0,0 +1,180 @@
+import React, {
+  useState, useEffect, useContext
+} from 'react';
+import { Modal, Form, Input, Select, Button, Switch, TreeSelect, message, Space } from 'antd';
+import apiObj from '@api/index';
+import utils from '@utils/index'
+import UserContext from './Dict-context';
+import { useSelector } from 'react-redux'
+import Item from 'antd/lib/list/Item';
+const { post, api, xPost } = apiObj;
+const { Option, OptGroup } = Select;
+const { organizationData } = utils;
+const { SHOW_PARENT } = TreeSelect;
+function AddDict(props) {
+  
+  const [form] = Form.useForm();
+  const { type, formData} = useContext(UserContext);
+  const staticInfo = useSelector(state => {
+    return state.staticInfo;
+  });
+  const { titleList } = staticInfo;
+  const initialValues = formData;
+
+  const onFinish = values => {
+	  values.groupType =Number(values.groupType)
+	  values.status ? values.status=1:values.status=0
+	  console.log(values)
+    let params = values
+    if (type == 3) {
+	  params.id=initialValues.id
+      editDict(params)
+    } else {
+      addDict(params)
+    }
+
+  };
+  function addDict(param) {
+    post(api.addDict, param).then((res) => {
+      if (res.data.code === 200) {
+        props.DictChange()
+        message.success(res.data.message);
+        form.resetFields();
+      } else {
+        message.error(res.data.message);
+      }
+    })
+  }
+  function editDict(param) {
+    post(api.updateDict, param).then((res) => {
+      if (res.data.code === 200) {
+        props.DictChange()
+        message.success(res.data.message);
+        form.resetFields();
+      } else {
+        message.error(res.data.message);
+      }
+    })
+  }
+  function cancel() {
+    props.DictChange()
+  }
+
+  return (
+    <>
+      <Form
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        form={form}
+        name="register"
+        onFinish={onFinish}
+        initialValues={initialValues}
+      >
+
+        <Form.Item
+          name="groupType"
+          label="代码类别"
+          rules={[
+			  {
+				  type: 'number',
+				  transform(value){
+					  if(value){
+						  return Number(value);
+					  }
+					  return null
+				  },
+				  message: '请输入数值',
+			  },
+            {
+              required: true,
+              message: '请输入代码类别',
+            },
+          ]}
+        >
+          {type == 3 ?
+		    <Input  autoComplete='off'/>
+            // <span>{initialValues.groupType}</span>
+            :
+            <Input placeholder="请输入代码类别" autoComplete='off'/>
+          }
+
+        </Form.Item>
+        <Form.Item
+          name="val"
+          label="字典编码"
+          rules={[
+            {
+              required: true,
+              message: '请输入字典编码',
+            },
+          ]}
+        >
+          {type == 3 ?
+            <Input  autoComplete='off'/>
+            :
+            <Input placeholder="请输入字典编码" autoComplete='off'/>
+          }
+
+        </Form.Item>
+        <Form.Item
+          name="name"
+          label="代码名称"
+          rules={[{ required: true, message: '请输入代码名称', whitespace: true }]}
+        >
+          {type == 3 ?
+            <Input  autoComplete='off'/>
+            :
+            <Input placeholder="请输入代码名称" autoComplete='off'/>
+          }
+
+        </Form.Item>
+        <Form.Item
+          name="remark"
+          label="字典说明"
+		  rules={[
+		    {
+		      required: true,
+		      message: '请输入字典说明',
+		    }, 
+			{
+		      max: 50,
+		      message: '密码不能大于50个字符',
+		    },
+			]}
+        >
+          {type == 3 ?
+            <Input autoComplete='off'/>
+            :
+            <Input placeholder="50个字以内" autoComplete='off'/>
+          }
+
+        </Form.Item>
+        <Form.Item
+          name="status"
+          valuePropName="checked"
+          label="当前状态"
+          rules={[{ required: true, message: '请选择状态' }]}
+        >
+         
+		    <Switch/>
+            
+
+        </Form.Item>
+        
+          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+            <Space size="middle">
+              <Button htmlType="button" onClick={e => cancel()}>
+                取消
+            </Button>
+              <Button type="primary" htmlType="submit">
+                保存
+            </Button>
+            </Space>
+          </Form.Item>
+
+      </Form>
+    </>
+  );
+}
+
+export default AddDict;

src/components/DictManager/index.js

@@ -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;