AddModal.jsx 4.2 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1 2
import React, { useState, useEffect } from 'react';
import { Form, Input, notification, Select } from 'antd';
3
import SiteModal from '@/components/Modal/SiteModa';
Maofei94's avatar
Maofei94 committed
4
import { addRole, getRoleGroup } from '@/services/userCenter/roleManage/api';
5
const { Item } = Form;
Maofei94's avatar
Maofei94 committed
6
const { Option } = Select;
7 8 9
const AddModal = props => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
Maofei94's avatar
Maofei94 committed
10
  const [groupList, setGroupList] = useState([]);
11
  const [loading, setLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
12 13 14 15 16 17 18 19 20 21 22
  const { confirmModal, itemObj } = props;

  useEffect(() => {
    itemObj.groupflag &&
      form.setFieldsValue({
        group: itemObj.groupflag,
      });
    return () => {
      form.resetFields();
    };
  }, [itemObj]);
23 24 25 26 27
  const onSubmit = () => {
    form
      .validateFields()
      .then(res => {
        setLoading(true);
Maofei94's avatar
Maofei94 committed
28 29
        addRole({
          roleName: res.roleName,
30
          description: res.description,
Maofei94's avatar
Maofei94 committed
31 32
          group: res.group,
          subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
33 34 35 36 37 38 39 40
          _version: 9999,
          _dc: new Date().getTime(),
        })
          .then(res => {
            setLoading(false);
            if (res.success) {
              form.resetFields();
              notification.success({
Maofei94's avatar
Maofei94 committed
41
                message: '提示',
42 43 44 45 46 47 48
                duration: 3,
                description: '新增成功',
              });
              confirmModal();
            } else {
              notification.error({
                message: '提示',
Maofei94's avatar
Maofei94 committed
49
                duration: 15,
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
                description: res.message,
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
          });
      })
      .catch(err => {
        console.error(err);
      });
  };
Maofei94's avatar
Maofei94 committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
  const onChange = value => {
    console.log(value);
    const { length } = value;
    form.setFieldsValue({
      group: value[length - 1],
    });
  };
  // 获取分组列表
  const selectFocus = e => {
    setGroupList([]);
    getRoleGroup({
      _version: 9999,
      _dc: Date.now(),
      subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
      subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '',
    })
      .then(res => {
        if (res) {
          setGroupList(res);
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.message,
          });
          setGroupList([]);
        }
      })
      .catch(err => {
        console.error(err);
      });
  };
99 100 101 102 103 104 105

  const onFinish = value => {};
  return (
    <SiteModal
      {...props}
      title="新增角色"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
Maofei94's avatar
Maofei94 committed
106
      style={{ top: 100 }}
107 108 109
      width="600px"
      destroyOnClose
      cancelText="取消"
Maofei94's avatar
Maofei94 committed
110
      okText="确认"
111 112 113
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
Maofei94's avatar
Maofei94 committed
114 115 116 117 118 119
      <Form
        form={form}
        layout={formLayout}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
      >
120 121
        <Item
          label="角色名称"
Maofei94's avatar
Maofei94 committed
122
          name="roleName"
123 124 125 126 127 128 129 130 131
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
          ]}
        >
          <Input placeholder="请输入角色名称" />
        </Item>
Maofei94's avatar
Maofei94 committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
        <Item label="角色类别" name="subSystemValue">
          {itemObj.subSystemValue || itemObj.visibleValue}
        </Item>
        <Item label="角色分组" name="group">
          <Select
            mode="tags"
            placeholder="请选择分组"
            onFocus={() => {
              selectFocus();
            }}
            onChange={e => {
              onChange(e);
            }}
          >
            {groupList.map((item, index) => (
              <Option value={item.value} key={index}>
                {item.text}
              </Option>
            ))}
          </Select>
        </Item>
153 154 155 156 157 158 159 160 161
        <Item label="角色描述" name="description">
          <Input placeholder="请输入角色描述" />
        </Item>
      </Form>
    </SiteModal>
  );
};

export default AddModal;