ai-admin/src/components/FuncManager/AddFunc.js

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 FuncContext from './func-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;
const { TextArea } = Input;
function AddUser(props) {
  useEffect(() => {
    getHospitalTree();
  }, []);
  const [form] = Form.useForm();
  const { type,id,detail } = useContext(FuncContext);
  const [treeData, setTreeData] = useState([]);
  const [treeFunc, setTreeFunc] = useState([]);
  const staticInfo = useSelector(state => {
    return state.staticInfo;
  });
  const { titleList } = staticInfo;
  const initialValues = detail
  //所属系统
  function getHospitalTree() {
    xPost(api.getUserHospitals).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data.software
        const treeFunc = organizationData(data)
        setTreeFunc(treeFunc)
      } else {
        message.warning(res.data.msg || '获取医院列表失败');
      }
    })
  }
  function organizationData(arr) {
    
    arr.forEach(item => {
      item.value = item.id
      item.title = item.name
    })
    return arr
  }
  function addAttr(data) {
    for (var j = 0; j < data.length; j++) {
      data[j].title = data[j].name //添加title属性
      data[j].key = data[j].code //添加key属性
      if (data[j].children.length > 0) {
        addAttr(data[j].children)
      }
    }
    return data
  }
  function swichChange(val) {
    form.setFieldsValue({ status: val ? 1 : 0 })
  }
  const onChangeRloe = value => {
    form.setFieldsValue({ roles: value })
  };
  const onFinish = values => {
    const formData = form.getFieldValue()
    let params = values
    params.parentId = formData.parentId
    if (type == 2) {
      params.id = id
      updateMenu(params)
    } else {
      addMenu(params)
    }
  };
  function addMenu(param) {
    post(api.addMenu, param).then((res) => {
      if (res.data.code === 200) {
        props.userChange()
        message.success(res.data.message);
        form.resetFields();
      } else {
        message.error(res.data.message);
      }
    })
  }
  function updateMenu(param) {
    post(api.updateMenu, param).then((res) => {
      if (res.data.code === 200) {
        props.userChange()
        message.success(res.data.message);
        form.resetFields();
      } else {
        message.error(res.data.message);
      }
    })
  }
  function cancel() {
    props.userChange()
  }
  return (
    <>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
        name="register"
        onFinish={onFinish}
        initialValues={initialValues}
      >
        <Form.Item
          name="softwares"
          label="所属系统"
          rules={[
            {
              required: true,
              message: '请选择所属系统',
            },
          ]}
        >
          <TreeSelect
            showSearch={false}
            treeData={treeFunc}
            treeCheckable
            onChange={onChangeRloe}
            showCheckedStrategy={SHOW_PARENT}
            placeholder="请选择所属系统"
            style={{ width: '100%' }}
          />

        </Form.Item>
        <Form.Item
          name="parentName"
          label="上级菜单"
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          name="name"
          label="功能名称"
          rules={[
            {
              required: true,
              message: '请填写功能名称',
            },
          ]}
        >
          <Input placeholder="请填写功能名称" />
        </Form.Item>
        <Form.Item
          name="type"
          label="类型"
          rules={[
            {
              required: true,
              message: '请选择类型',
            }
          ]}
        >
          <Select
            allowClear
          >
            <Option value="0">目录</Option>
            <Option value="1">菜单</Option>
            <Option value="2">按钮</Option>
            <Option value="3">功能</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="permissions"
          label="链接地址"
        >
          <Input placeholder="请填写链接地址" />

        </Form.Item>
        <Form.Item
          name="code"
          label="权限标识"
          rules={[
            {
              required: true,
              message: '请填写权限标识',
            }
          ]}
        >
          <Input placeholder="请填写权限标识" />
        </Form.Item>
        <Form.Item
          name="orderNo"
          label="排序"
        >
          <Input placeholder="大于0的整数" />
        </Form.Item>
        <Form.Item
          name="menuDescribe"
          label="功能描述"
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          name="remark"
          label="备注"
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          name="status"
          valuePropName="checked"
          label="当前状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Switch onChange={swichChange} />
        </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 AddUser;