ai-admin/src/components/DataManager/AddData.js

import { useEffect, useState, useContext } from 'react';
import { Form, Input, Button, Steps, Tabs, Space, Switch, Breadcrumb, Radio, TreeSelect, Tree, Tag, Card, message, Modal } from 'antd';
import './index.less';
import DataContext from './data-context';
import MenuTree from './MenuTree';
import { useSelector } from 'react-redux'
import apiObj from '@api/index';
import utils from '@utils/index'
import backIcon from "@images/back.png";
import del from '@images/icon-del.png'
import DoctorList from "./doctorList"
import Item from 'antd/lib/list/Item';
const { post, api, xPost } = apiObj;
const { SHOW_PARENT } = TreeSelect;
const { organizationData } = utils;
const { Step } = Steps;
const { TabPane } = Tabs;
function AddData(props) {
  useEffect(() => {
    getHospitalTree()
    getOrgList()
    if (type == 3) {
      setValue(val)
    }
  }, []);
  const { back, } = props;
  const [form] = Form.useForm();
  const [isChange, setIsChange] = useState(false);
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState([]);
  const [key, setKey] = useState();
  const [index, setIndex] = useState('0');
  const [treeRloe, setTreeRloe] = useState([]);
  const [tags, setTags] = useState([[]]);
  const [treeData, setTreeData] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [orgList, setOrgList] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [softwareId, setSoftwareId] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const { save, formData, type, val, tag } = useContext(DataContext);
  const staticInfo = useSelector(state => {
    return state.staticInfo;
  });
  const { dataList } = staticInfo;
  const initialValues = formData
  const validateMessages = {
    required: '${label}不能为空',
  };
  function handleOk() {
    back()
  }
  function handleCancel() {
    setVisible(false)
  }
  const goback = () => {
    if ((form.getFieldsValue().name != undefined || isChange) && type != 3) {
      setVisible(true)
    } else {
      back()
    }
  };
  //获取当前用于所属角色
  function getCreateRoles(softwareId) {
    const params = {
      softwareId: softwareId
    }
    xPost(api.getCreateRoles, params).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        let arr = JSON.parse(JSON.stringify(data).replace(/name/g, 'title').replace(/id/g, 'value'))
        setTreeRloe(arr)
      }
    })
  }
  //获取当前用户组织
  function getHospitalTree() {
    post(api.getHospitalTree).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data
        let arr = structureTreeData(data)
        setTreeData(arr)
      }
    })
  }
  //数据转换为树形结构所需字段
  function structureTreeData(arr) {
    arr.forEach(item => {
      item.key = item.hospitalId + '-' + item.hospitalName
      item.title = item.hospitalName
      if (!item.children && item.depts) {
        item.depts.forEach(it => {
          it.key = item.hospitalId + '-' + it.deptId + '-' + it.deptName
        })
        item.children = JSON.parse(JSON.stringify(item.depts).replace(/deptName/g, 'title').replace(/deptId/g, 'key'))
        return
      }
      if (item.children) {
        structureTreeData(item.children)
      }
    })
    return arr
    // let list = []
    // arr.forEach(it => {
    //   it.key = it.hospitalId
    //   it.title = it.hospitalName
    //   list.push({
    //     children: it.depts,
    //     title: it.hospitalName,
    //     key: it.parentId + '-' + it.hospitalId + '-' + it.hospitalName
    //   })
    //   it.depts.forEach(its => {
    //     its.key = it.parentId + '-' + it.hospitalId + '-' + its.deptId + '-' + its.deptName
    //   })
    // })
    // arr = JSON.parse(JSON.stringify(list).replaceAll(/deptName/g, 'title').replaceAll(/deptId/g, 'key'))
    // return arr
  }
  //获取组织列表
  function getOrgList() {
    xPost(api.getUserHospitals).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        const { software } = data;
        setOrgList(software);
        setKey(software[0].id)
        getCreateRoles(software[0].id)
        if (type == 3) {
          software.forEach((it, index) => {
            tag.forEach((item, i) => {
              tags[index] = []
              if(i == index){
                tags[index] = tag[i]
              } 
            })
            setTags([...tags])
          })
        } else {
          software.forEach((it, index) => {
            tags[index] = []
            setTags([...tags])
          })
        }
      } else {
        message.warning(res.data.msg || '获取医院列表失败');
      }
    }).catch(() => {
      message.error("接口出错");
    });
  }

  const onChange = (e, i) => {
    let val = value
    const formData = form.getFieldsValue();
    let arr = formData.softwareVOS;
    arr[index].id = key
    arr[index].softwareMenuIds = []
    arr[index].dataAuthDetails = []
    arr[index].selectedRowKeys = []
    if (e.target.value != 7) {
      arr[index].dataAuthDetails = [{
        dataType: e.target.value
      }]
    }
    tags[index] = []
    val[i] = e.target.value
    selectedRowKeys[index] = []
    form.setFieldsValue({
      softwareVOS: arr
    });
    setTags([...tags])
    setValue([...val])
    setSelectedRowKeys([...selectedRowKeys])
    setIsChange(true)
  };
  // 删除选择标签
  function delTag(type, id, i) {
    const formData = form.getFieldsValue();
    const softwareVOS = formData.softwareVOS[index]
    if (type == 3) {
      softwareVOS.selectedRowKeys.forEach((item, inx) => {
        if (item.split('-')[0] == id) {
          softwareVOS.selectedRowKeys.splice(inx)
        }
      })
      softwareVOS.dataAuthDetails.forEach((item, inx) => {
        if (item.detailId == id) {
          softwareVOS.dataAuthDetails.splice(inx)
        }
      })
    } else if (type == 1) {
      softwareVOS.softwareMenuIds.forEach((item, inx) => {
        if (item.split('-')[0] == id) {
          softwareVOS.softwareMenuIds.splice(inx)
        }
      })
      softwareVOS.dataAuthDetails.forEach((item, inx) => {
        if (item.detailId == id) {
          softwareVOS.dataAuthDetails.splice(inx)
        }
      })
    } else if (type == 2) {
      softwareVOS.softwareMenuIds.forEach((item, inx) => {
        if (item.split('-')[1] == id) {
          softwareVOS.softwareMenuIds.splice(inx)
        }
      })
      softwareVOS.dataAuthDetails.forEach((item, inx) => {
        if (item.detailId == id) {
          softwareVOS.dataAuthDetails.splice(inx)
        }
      })
    }
    form.setFieldsValue({
      softwareVOS: formData.softwareVOS
    });
    tags[index].splice(i)
    setTags([...tags])
  }
  function callback(key) {
    setKey(key.split('-')[0])
    setIndex(key.split('-')[1])
    getCreateRoles(key.split('-')[0])
  }
  function treeChange(value) {
    const formData = form.getFieldsValue();
    let arr = formData.softwareVOS;
    arr[index].roles = value
    form.setFieldsValue({
      softwareVOS: arr
    });
    setIsChange(true)
  }
  // 去重
  function unique(arr) {
    let result = {};
    let finalResult = [];
    for (let i = 0; i < arr.length; i++) {
      result[arr[i].detailId] = arr[i];
    }

    for (let item in result) {
      finalResult.push(result[item]);
    }
    return finalResult;
  }
  //医生选中
  function checkDoctEvent(selectedRowKeys) {
    const formData = form.getFieldsValue();
    let arr = formData.softwareVOS[index].dataAuthDetails ? formData.softwareVOS[index].dataAuthDetails : []
    selectedRowKeys.forEach(it => {
      arr.push({
        dataType: 7,
        detailId: it.split('-')[0],
        detailType: 3
      })
    });
    formData.softwareVOS[index].dataAuthDetails = unique(arr)
    formData.softwareVOS[index].selectedRowKeys = selectedRowKeys
    form.setFieldsValue({
      softwareVOS: formData.softwareVOS
    });
    getTags()
  }
  //树形结构选中事件
  function checkTreeEvent(idsArr) {
    const formData = form.getFieldsValue();
    let arr = formData.softwareVOS[index].dataAuthDetails ? formData.softwareVOS[index].dataAuthDetails : []
    let result = idsArr.filter(ele => {
      return ele.split('-').length == 2
    })
    if (result) {
      result.forEach(it => {
        arr.push({
          dataType: 7,
          detailId: it.split('-')[0],
          detailType: 1
        })
      })
    } else {
      idsArr.forEach(it => {
        arr.push({
          dataType: 7,
          detailId: it.split('-')[1],
          detailType: 2
        })
      })
    }
    formData.softwareVOS[index].dataAuthDetails = unique(arr)
    formData.softwareVOS[index].softwareMenuIds = idsArr
    form.setFieldsValue({
      softwareVOS: formData.softwareVOS
    });
    getTags()
  }
  //获取已选中标签

  function getTags() {
    const formData = form.getFieldsValue();
    let tag = []
    let softwareMenuIds = formData.softwareVOS[index].softwareMenuIds
    let selectedRowKeys = formData.softwareVOS[index].selectedRowKeys
    selectedRowKeys && selectedRowKeys.forEach(it => {
      tag.push({
        id: it.split('-')[0],
        name: it.split('-')[1],
        type: 3
      })
    });
    if (softwareMenuIds) {
      let result = softwareMenuIds.filter(ele => {
        return ele.split('-').length == 2
      })
      if (result) {
        result.forEach(it => {
          tag.push({
            id: it.split('-')[0],
            name: it.split('-')[1],
            type: 1
          })
        })
      } else {
        softwareMenuIds.forEach(it => {
          tag.push({
            id: it.split('-')[1],
            name: it.split('-')[2],
            type: 2
          })
        })
      }
    }
    tags[index] = tag
    setTags([...tags])
  }
  const onFinish = value => {
    save(form.getFieldsValue())
  };
  function swichChange(val) {
    form.setFieldsValue({ status: val ? 1 : 0 })
  }
  function delAll() {
    const formData = form.getFieldsValue();
    formData.softwareVOS[index].selectedRowKeys = []
    formData.softwareVOS[index].softwareMenuIds = []
    formData.softwareVOS[index].dataAuthDetails = []
    form.setFieldsValue({
      softwareVOS: formData.softwareVOS
    });
    tags[index] = []
    setTags([...tags])
  }
  return (
    <>
      <Breadcrumb separator="">
        <Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={goback} alt="返回上一页" /></Breadcrumb.Item>
        <Breadcrumb.Item>数据权限</Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>{type == 3 ? '修改' : '新增'}数据权限</Breadcrumb.Item>
      </Breadcrumb>
      <div className='form-center'>
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} form={form} name="nest-messages" onFinish={onFinish} initialValues={initialValues} validateMessages={validateMessages}>
          <Form.Item name="name" label="数据权限名称" rules={[{ required: true }]}>
            <Input placeholder="请填写数据权限名称" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="权限范围" rules={[{ required: true }]} >
            <Tabs type="card" onChange={callback}>
              {
                orgList.map((it, i) => {
                  return (
                    <TabPane tab={it.name} key={it.id + "-" + i} forceRender={type == 3 && form.getFieldValue().softwareVOS[i] ? true : false}>
                      <Form.Item
                        key={i}
                        name={['softwareVOS', i, 'datatype']} noStyle>
                        <Radio.Group onChange={e => { onChange(e, i) }} className="radio">
                          <Space direction="vertical">
                            {dataList.map((Item) => {
                              return (
                                <Radio key={i} value={Item.name}>{Item.val}</Radio>
                              )
                            })
                            }
                          </Space>
                        </Radio.Group>
                      </Form.Item>
                      <Form.Item key={i + "a"} hidden={true} name={['softwareVOS', i, 'id']} noStyle>
                        <Input />
                      </Form.Item>
                      <Form.Item key={i + "b"} hidden={true} name={['softwareVOS', i, 'dataAuthDetails']} noStyle>
                        <Input />
                      </Form.Item>
                      <Form.Item key={i + "e"} hidden={true} name={['softwareVOS', i, 'roles']} noStyle>
                        <Input />
                      </Form.Item>
                      <Form.Item key={i + "c"} style={{ display: value[index] == 7 && it.id == key ? 'block' : 'none' }}>
                        <Card title="已选中" extra={<span onClick={delAll} className='del-all'><img className='del-icon' src={del} />清空所有</span>} >
                          {tags[index].map((tag, i) => {
                            return (
                              <Tag key={i} closable onClose={e => delTag(tag.type, tag.id, i)}>{tag.name}</Tag>
                            );
                          })}
                        </Card>
                      </Form.Item>
                      <Form.Item key={i + "d"} style={{ display: value[index] == 7 && it.id == key ? 'block' : 'none' }}>
                        <Tabs defaultActiveKey="0">
                          <TabPane tab="可看医生" key="0" forceRender={type == 3 && form.getFieldValue().softwareVOS[i] ? true : false}>
                            <Form.Item
                              name={['softwareVOS', i, 'selectedRowKeys']}
                            >
                              <DoctorList checkeds={form.getFieldValue().softwareVOS ? form.getFieldValue().softwareVOS[i] : []} checkDoct={(selectedRowKeys) => checkDoctEvent(selectedRowKeys)} />
                            </Form.Item>
                          </TabPane>
                          <TabPane tab="可看科室" key="1" forceRender={type == 3 && form.getFieldValue().softwareVOS[i] ? true : false}>
                            <Form.Item
                              name={['softwareVOS', i, 'softwareMenuIds']}
                            >
                              <MenuTree data={treeData} checkeds={form.getFieldValue().softwareVOS ? form.getFieldValue().softwareVOS[i] : []} checkEv={(checkedKeys) => checkTreeEvent(checkedKeys)} />
                            </Form.Item>
                          </TabPane>
                        </Tabs>
                      </Form.Item>
                    </TabPane>
                  )
                })
              }
            </Tabs>
          </Form.Item>
          <Form.Item label="所属角色" required >
            {
              orgList.map((it, i) => {
                return (
                  <Form.Item
                    key={i}
                    style={{ display: i == index ? 'block' : 'none' }}
                  >
                    {index == i ?
                      <Form.Item key={i + "b"}
                        name={['softwareVOS', i, 'roles']}
                        rules={[
                          {
                            required: true,
                            message: '请选择所属角色',
                          },
                        ]}>
                        <TreeSelect
                          style={{ width: 300 }}
                          showSearch={false}
                          treeData={treeRloe}
                          onChange={treeChange}
                          maxTagCount={1}
                          treeCheckable
                          showCheckedStrategy={SHOW_PARENT}
                          placeholder="请选择角色"
                        />
                      </Form.Item>
                      : null}

                  </Form.Item>
                )
              })
            }
          </Form.Item>
          <Form.Item
            name="status"
            valuePropName="checked"
            label="当前状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Switch onChange={swichChange} />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 6, offset: 20 }}>
            <Button className='but' onClick={goback}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
        <Modal
          title="提示"
          okText='确定'
          cancelText='取消'
          width={400}
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <p>您还有内容未保存，确定要退出？</p>
        </Modal>
      </div>
    </>
  )
}

export default AddData;