EditModal.jsx 4.28 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 { editRole, getRoleGroup } from '@/services/userCenter/roleManage/api';
5
const { Item } = Form;
Maofei94's avatar
Maofei94 committed
6 7
const { Option } = Select;
const AddModal = props => {
8 9
  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
  const { confirmModal, itemObj, editVisible } = props;
Maofei94's avatar
Maofei94 committed
13 14 15 16 17 18 19 20 21 22
  console.log(itemObj, 'itemObj');

  useEffect(() => {
    form.setFieldsValue({
      roleName: itemObj.roleName,
      description: itemObj.description,
      group: itemObj.group,
      subSystemValue: itemObj.subSystemValue,
    });
  }, [itemObj]);
23 24 25 26
  const onSubmit = () => {
    form
      .validateFields()
      .then(res => {
Maofei94's avatar
Maofei94 committed
27
        console.log(res, 'res');
28
        setLoading(true);
Maofei94's avatar
Maofei94 committed
29 30 31
        editRole({
          roleID: itemObj.roleID,
          roleName: res.roleName,
32
          description: res.description,
Maofei94's avatar
Maofei94 committed
33 34
          group: res.group,
          subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
35 36 37
        })
          .then(res => {
            setLoading(false);
38
            if (res.msg==='') {
39 40
              form.resetFields();
              notification.success({
Maofei94's avatar
Maofei94 committed
41
                message: '提示',
42 43 44 45 46 47 48 49
                duration: 3,
                description: '编辑成功',
              });
              confirmModal();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
50
                description: res.msg,
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
          });
      })
      .catch(err => {
        console.error(err);
      });
  };
Maofei94's avatar
Maofei94 committed
67 68 69
  const onChange = value => {
    console.log(value);
    const { length } = value;
70
    form.setFieldsValue({
Maofei94's avatar
Maofei94 committed
71
      group: value[length - 1],
72
    });
Maofei94's avatar
Maofei94 committed
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 99 100
  };
  // 获取分组列表
  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);
      });
  };

  const onFinish = value => {};
101 102 103 104 105
  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
        <Item label="角色描述" name="description">
          <Input placeholder="请输入角色描述" />
        </Item>
      </Form>
    </SiteModal>
  );
};

Maofei94's avatar
Maofei94 committed
161
export default AddModal;