EditModal.jsx 4.35 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 38 39 40 41 42
          _version: 9999,
          _dc: new Date().getTime(),
        })
          .then(res => {
            setLoading(false);
            if (res.success) {
              form.resetFields();
              notification.success({
Maofei94's avatar
Maofei94 committed
43
                message: '提示',
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
                duration: 3,
                description: '编辑成功',
              });
              confirmModal();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message,
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
          });
      })
      .catch(err => {
        console.error(err);
      });
  };
Maofei94's avatar
Maofei94 committed
69 70 71
  const onChange = value => {
    console.log(value);
    const { length } = value;
72
    form.setFieldsValue({
Maofei94's avatar
Maofei94 committed
73
      group: value[length - 1],
74
    });
Maofei94's avatar
Maofei94 committed
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 101 102
  };
  // 获取分组列表
  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 => {};
103 104 105 106 107
  return (
    <SiteModal
      {...props}
      title="编辑角色"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
Maofei94's avatar
Maofei94 committed
108
      style={{ top: 100 }}
109 110 111
      width="600px"
      destroyOnClose
      cancelText="取消"
Maofei94's avatar
Maofei94 committed
112
      okText="确认"
113 114 115
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
Maofei94's avatar
Maofei94 committed
116 117 118 119 120 121
      <Form
        form={form}
        layout={formLayout}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
      >
122 123
        <Item
          label="角色名称"
Maofei94's avatar
Maofei94 committed
124
          name="roleName"
125 126 127 128 129 130 131 132 133
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
          ]}
        >
          <Input placeholder="请输入角色名称" />
        </Item>
Maofei94's avatar
Maofei94 committed
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
        <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>
155 156 157 158 159 160 161 162
        <Item label="角色描述" name="description">
          <Input placeholder="请输入角色描述" />
        </Item>
      </Form>
    </SiteModal>
  );
};

Maofei94's avatar
Maofei94 committed
163
export default AddModal;