ai-admin/src/components/DictManager/index.js

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;