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

import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Select, TreeSelect, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message, Row, Col, Spin  } from 'antd';
import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import AddUser from './AddPara'
import '@common/common.less';
import { useSelector } from 'react-redux'
import apiObj from '@api/index';
import UserContext from './para-context';
import utils from '@utils/index'
const { getValueFromEvent } = utils;
const { post, api, xPost } = apiObj;
const { Option } = Select;
function DictManager() {
  useEffect(() => {
    getHospitalSet();
    getHospitalNames();
  }, []);
  const [dictList, setDictList] = useState([]);
  const [title, setTitle] = useState("");
  const [visible, setVisible] = useState(false);
  const [id, setParaId] = useState("");
  const [val, setParaVal] = useState("");
  const [hospitalName, setHospitalName] = useState([]);
  const [code, setParaCode] = useState("");
  const [status, setParaStatus] = useState("");
  const [remark, setParaRemark] = useState("");
  const [msvisible, setMsvisible] = useState(false);
  const [modalType, setModalType] = useState("");
  const [type, setType] = useState("");
  const [formData, setFormData] = useState(null);
  const [size, setSize] = useState(15);
  const [HospitalNamesList, setHospitalNamesList] = useState([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const { organizationData } = utils;
  const { SHOW_PARENT } = TreeSelect;
  const [revise, setRevise] = useState(false);//是否修改 新增修改内容
  const [unsaved, setUnsaved] = useState(false);// 修改未保存弹窗
  const [addHospitalTreeVO, setAddHospitalTreeVO] = useState({
    depts: [],
    hospitals: []
  });
  const [params, setParams] = useState({
    pages: 1,
    current: 1,
    size: 15,
    name: '',
    groupType: '',
    code: ''
  });
  const [query, setQuery] = useState({
    hospitalName: ''
  });
  const [form] = Form.useForm();
  const tipText = {
    1: '确定要删除该参数？',
    2: '禁用后该用户将无法登录，确定要禁用该参数?',
    3: '确定要重置该用户密码？',
  };
  const staticInfo = useSelector(state => {
    return state.staticInfo;
  });
  let list = []
  let data = {
    pages: 1,
    current: 1,
    size: size
  }
  const {statusList } = staticInfo;

  let addHospitalTreeVOs = {
    depts: [],
    hospitals: [],
  }

  //新增弹窗
  const showModal = (title, type, flag, id, hospitalName, name, val, code, remark, status) => {
    setVisible(type);
    setType(flag)
    setParaId(id)
    setHospitalName(hospitalName)
    setParaVal(val)
    setTitle(title);
    setParaCode(code)
    setParaRemark(remark)
    setParaStatus(status)
    if (flag == 1) {
      setFormData({
        status: '1'
      })
    }
    if ( flag == 2) {
      setFormData({
        id: id,
        hospitalName: hospitalName,
        name: name,
        val: val,
        code: code,
        remark: remark,
        status: '1',
      })
    }
  }

  //表格数据
  function getHospitalSet(param) {
    post(api.getHospitalSet, param || params).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        console.log('参数列表数据：', data);
        setDictList(data.records);
        setTotal(data.total)
      }
    })
  }

  //获取当前所属组织
  function getHospitalNames() {
    xPost(api.getHospitalNames, query).then((res) => {
      console.log('所属组织？？', res);
      if (res.data.code === 200) {
        const data = res.data.data;
        console.log('所属组织？？', data);
        let HospitalNamesList = []
        HospitalNamesList = data.map(item => {
          return item.hospitalName
        })
        setHospitalNamesList(HospitalNamesList)
      }
    })
  }

  const onChange = value => {
    value.forEach(it => {
      if (JSON.stringify(it).indexOf('-') > 0) {
        addHospitalTreeVOs.depts.push(it.split('-')[1])
      } else {
        addHospitalTreeVOs.hospitals.push(it)
        gethospitals(HospitalNamesList, it)
      }
    })
    setAddHospitalTreeVO(addHospitalTreeVOs)
    console.log(form.getFieldsValue())
  };

  //递归获取科室
  function gethospitals(arr, val) {
    arr.forEach(item => {
      if (item.value == val) {
        if (item.children) {
          getdepts(item.children)
        }
        if (item.children && item.depts) {
          item.children.forEach(item => {
            addHospitalTreeVOs.depts.push(item.value.split('-')[1])
          })
        }
      } else {
        if (item.children) {
          gethospitals(item.children, val)
        }
      }
    })
  }

  //递归获取医院
  function getdepts(arr) {
    arr.forEach(item => {
      if (JSON.stringify(item.value).indexOf('-') < 0) {
        addHospitalTreeVOs.hospitals.push(item.value)
      }
      if (item.children && item.depts) {
        item.children.forEach(it => {
          addHospitalTreeVOs.depts.push(it.value.split('-')[1])
        })
        return
      }
      if (item.children) {

        getdepts(item.children)
      }
    })
  }

  // 处理组织结构数据回显
  function getHospitals(arr) {
    arr.forEach((item, i, array) => {
      item.value = item.hospitalId
      item.title = item.hospitalName
      if (!item.children && item.depts) {
        item.depts.forEach(it => {
          it.value = item.parentId + '-' + it.deptId
          if (it.relation == 1) {
            list.push(it.value)
          }
        })
      }
      if (item.type != 0 && item.relation == 1) {
        list.push(item.value)
        console.log(list)
      }
      if (item.children) {
        getHospitals(item.children)
      }
    })
    return list
  }

  // 禁用/启用接口
  function disableUser(id, status) {
    const param = { id: id, status: status };
    xPost(api.disableUser, param).then((res) => {
      if (res.data.code === 200) {
        getHospitalSet();
        setMsvisible(false);
        setParaId(null)
        message.success((status ? '启用' : '禁用') + "成功");
      } else {
        message.warning(res.data.msg || '操作失败');
      }
    }).catch(() => {
      message.error("接口出错");
    });
  }

  //重置密码
  function onResetPsd(id) {
    const param = { id: id };
    xPost(api.resetPasswordUser, param).then((res) => {
      if (res.data.code === 200) {
        getHospitalSet();
        message.success("重置成功");
      } else {
        message.warning(res.data.msg || '操作失败');
      }
    }).catch(() => {
      message.error("接口出错");
    });
  }

  //删除
  function deleteHospitalSet() {
    const param = { id: id };
    xPost(api.deleteHospitalSet, param).then((res) => {
      if (res.data.code === 200) {
        getHospitalSet();
        setMsvisible(false);
        setParaId(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)
    setQuery(query)
    getHospitalSet()
  }
  function changePage(page, pageSize) {
    params.current = page
    params.size = pageSize
    setCurrent(page)
    setParams(params)
    setQuery(query)
    getHospitalSet()
  }
  const onFinish = (value) => {
    const param = {
      ...data,
      ...value
    }
    setCurrent(1)
    setParams(param)
    setQuery(param)
    getHospitalSet(param);
  };
  const onReset = () => {
    // setCurrent(1)
    // setParams(data)
    // setQuery(query)
    form.resetFields();
    getHospitalSet(data);
  };
  const messageBox = (type, id) => {
    setMsvisible(true)
    setParaId(id)
    setModalType(type)
  }

  //提示框确认事件
  // function handleOk() {
  //   if (modalType == 1) {
  //     deleteHospitalSet(id)
  //   } else if (modalType == 2) {
  //     disableUser(id, 0)
  //   } else if (modalType == 3) {
  //     onResetPsd(id);
  //   }
  // }
  
  // 确认删除是否继续
  function deleteCancel() {
    setMsvisible(false);
  }

  // 新增修改 取消/关闭
  function cancel() {
    if(revise){
      setUnsaved(true)
    }else{
      setVisible(false)
      setFormData(null)
    }
  }

  function isChange(tog){
    setRevise(tog)
  }

  function addCancel() {
    setRevise(false)
    setVisible(false)
    setUnsaved(false)
    setFormData(null)
  }
    
  function unsavedCancel() {
      setUnsaved(false)
  }

    // 保存 新增修改
    function userChange() {
       setRevise(false)
        setVisible(false)
        getHospitalSet()
    }

  function userChange() {
    let val = form.getFieldsValue()  // 页面刷新
    const param = {
      ...data,
      //...value
      ...val
    }
    getHospitalSet(param)
    setVisible(false)
  }

  // 表格渲染
  const columns = [
    { title: '所属组织', render: (row) => {
      if(row.hospitalName === null){
        return '-'
      }else {
        return hospitalName
      }
    }, key: 'index' },
    { title: '参数名', dataIndex: 'name', key: 'index' },
    { title: '参数值', dataIndex: 'val', key: 'index' },
    { title: '参数说明', dataIndex: 'code', key: 'index' },
    {title: '参数描述', dataIndex: 'remark', key: 'index'},
    {
      title: '操作', dataIndex: 'key', render: (text, record) => (
        <Space size="middle">
          <a onClick={e => showModal(
            '修改参数', 
            true, 2, 
            record.id,
            record.hospitalName,
            record.name,
            record.val,
            record.code,
            record.remark,
            record.status,
            )} >修改</a>
          <a className='delete' onClick={() => messageBox(1, 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 name="hospitalName" label="所属组织">
                <Select
                  allowClear
                >
                  {HospitalNamesList.map((item) => {
                    return (
                      <Option value={item} key={item}>{item}</Option>
                    )
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={5} key={1}>
              <Form.Item label="参数名" name="name" getValueFromEvent={getValueFromEvent}>
                <Input placeholder="参数名" autoComplete='off'/>
              </Form.Item>
            </Col>

            <Col span={5} key={2}>
              <Form.Item label="参数说明" name="code" getValueFromEvent={getValueFromEvent}>
                <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 + record.hospitalName}
          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}
        >
          <UserContext.Provider value={{type, formData }}>
            <AddUser userChange={userChange}  cancel={cancel} isChange={isChange} />
          </UserContext.Provider>
          <Modal
            title="提示"
            okText='确定'
            cancelText='取消'
            width={400}
            visible={unsaved}
            onOk={addCancel}
            onCancel={unsavedCancel}
            >
                <p>当前数据未保存 是否确认关闭?</p>
				  </Modal>
        </Modal>
        : ''}
      
      <Modal
        title="提示"
        okText='确定'
        cancelText='取消'
        width={400}
        visible={msvisible}
        onOk={deleteHospitalSet}
        onCancel={deleteCancel}
      >
        <p>确定要删除该参数？</p>
      </Modal>
    </div >
  )
}

export default DictManager;