AddModal.jsx 7.75 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1
/* eslint-disable no-unused-expressions */
Maofei94's avatar
Maofei94 committed
2
import React, { useState, useEffect } from 'react';
3
import { Form, Input, notification, Select, Radio, Tooltip, Switch } from 'antd';
4
import SiteModal from '@/components/Modal/SiteModa';
皮倩雯's avatar
皮倩雯 committed
5 6
import { addRole, GetRoleGroup, getWebConfigTypes } from '@/services/RoleManage/api';
import { InfoCircleOutlined } from '@ant-design/icons';
7
const { Item } = Form;
Maofei94's avatar
Maofei94 committed
8
const { Option } = Select;
9 10 11
const AddModal = props => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
Maofei94's avatar
Maofei94 committed
12
  const [groupList, setGroupList] = useState([]);
13
  const [loading, setLoading] = useState(false);
14
  const { confirmModal, itemObj, siteList, visible } = props;
Maofei94's avatar
Maofei94 committed
15
  const [typeList, setTypeList] = useState([]); // 应用类别
16 17 18 19
  const [value, setValue] = useState(false);
  useEffect(() => {
    setValue(false);
  }, [visible]);
Maofei94's avatar
Maofei94 committed
20 21 22 23 24
  useEffect(() => {
    itemObj.groupflag &&
      form.setFieldsValue({
        group: itemObj.groupflag,
      });
Maofei94's avatar
Maofei94 committed
25 26 27 28
    itemObj &&
      form.setFieldsValue({
        subSystemValue: itemObj.visibleValue,
      });
Maofei94's avatar
Maofei94 committed
29 30 31 32
    return () => {
      form.resetFields();
    };
  }, [itemObj]);
Maofei94's avatar
Maofei94 committed
33 34 35 36 37 38 39
  useEffect(() => {
    getWebConfigTypes({}).then(res => {
      if (res.code === 0) {
        const { data } = res;
        const arr = Object.entries(data);
        const list = [];
        arr.map((item, index) => {
Maofei94's avatar
Maofei94 committed
40 41 42 43 44 45 46
          console.log(item, 'item');
          if (item[1] === '小程序') {
            item[1] = '移动应用';
          }
          if (item[1] === '手持系统') {
            return;
          }
Maofei94's avatar
Maofei94 committed
47 48 49 50 51 52 53 54 55
          let obj = {
            key: index,
            value: item[0],
            label: item[1],
          };
          list.push(obj);
        });
        setTypeList(list);
        console.log(list);
56 57 58 59 60 61
      } else {
        notification.error({
          message: '提示',
          duration: 5,
          description: res.msg,
        });
Maofei94's avatar
Maofei94 committed
62 63 64 65
      }
      console.log(res, 'resss');
    });
  }, [itemObj]);
66 67 68 69
  const onSubmit = () => {
    form
      .validateFields()
      .then(res => {
Maofei94's avatar
Maofei94 committed
70
        console.log(form.getFieldsValue());
71
        setLoading(true);
72

皮倩雯's avatar
皮倩雯 committed
73
        console.log(res.BuiltInRole);
74
        console.log(value);
Maofei94's avatar
Maofei94 committed
75 76
        addRole({
          roleName: res.roleName,
77
          description: res.description,
Maofei94's avatar
Maofei94 committed
78
          group: res.group,
Maofei94's avatar
Maofei94 committed
79
          subSystemValue: res.subSystemValue || '',
80
          BuiltInRole: value,
81 82 83
        })
          .then(res => {
            setLoading(false);
皮倩雯's avatar
皮倩雯 committed
84
            if (res.msg === '') {
Maofei94's avatar
Maofei94 committed
85
              let id = res.roleID;
86 87
              form.resetFields();
              notification.success({
Maofei94's avatar
Maofei94 committed
88
                message: '提示',
89 90 91
                duration: 3,
                description: '新增成功',
              });
Maofei94's avatar
Maofei94 committed
92
              confirmModal(id);
93 94 95
            } else {
              notification.error({
                message: '提示',
Maofei94's avatar
Maofei94 committed
96
                duration: 15,
97
                description: res.msg,
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
          });
      })
      .catch(err => {
        console.error(err);
      });
  };
Maofei94's avatar
Maofei94 committed
114 115 116 117 118 119 120 121 122 123
  const onChange = value => {
    console.log(value);
    const { length } = value;
    form.setFieldsValue({
      group: value[length - 1],
    });
  };
  // 获取分组列表
  const selectFocus = e => {
    setGroupList([]);
Maofei94's avatar
Maofei94 committed
124
    console.log(form.getFieldsValue().subSystemValue);
125
    GetRoleGroup({
Maofei94's avatar
Maofei94 committed
126 127 128 129
      // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
      // subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '',
      subSystemValue: form.getFieldsValue().subSystemValue || '',
      subSystemName: form.getFieldsValue().subSystemValue || '',
Maofei94's avatar
Maofei94 committed
130 131 132
    })
      .then(res => {
        if (res) {
133
          setGroupList(res.data);
Maofei94's avatar
Maofei94 committed
134 135 136 137 138 139 140 141 142 143 144 145 146
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.message,
          });
          setGroupList([]);
        }
      })
      .catch(err => {
        console.error(err);
      });
  };
Maofei94's avatar
Maofei94 committed
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
  const handleSelect = () => {
    // getWebConfigTypes({}).then(res => {
    //   if (res.code === 0) {
    //     const { data } = res;
    //     const arr = Object.entries(data);
    //     const list = [];
    //     arr.map((item, index) => {
    //       let obj = {
    //         key: index,
    //         value: item[0],
    //         label: item[1],
    //       };
    //       list.push(obj);
    //     });
    //     setTypeList(list);
    //     console.log(list);
    //   }
    //   console.log(res, 'resss');
    // });
  };
  const handleChange = e => {
    console.log(e);
  };
170

皮倩雯's avatar
皮倩雯 committed
171
  const onChangeRadio = e => {
172
    setValue(e);
皮倩雯's avatar
皮倩雯 committed
173
  };
174 175 176 177 178 179
  const onFinish = value => {};
  return (
    <SiteModal
      {...props}
      title="新增角色"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
Maofei94's avatar
Maofei94 committed
180
      style={{ top: 100 }}
181 182 183
      width="600px"
      destroyOnClose
      cancelText="取消"
Maofei94's avatar
Maofei94 committed
184
      okText="确认"
185 186 187
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
Maofei94's avatar
Maofei94 committed
188 189 190 191 192
      <Form
        form={form}
        layout={formLayout}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
Maofei94's avatar
Maofei94 committed
193 194 195
        // initialValues={{
        //   subSystemValue: itemObj.subSystemValue || itemObj.visibleValue,
        // }}
Maofei94's avatar
Maofei94 committed
196
      >
197 198
        <Item
          label="角色名称"
Maofei94's avatar
Maofei94 committed
199
          name="roleName"
200 201 202 203 204 205 206
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
          ]}
        >
207
          <Input placeholder="请输入角色名称" maxLength="20" />
208
        </Item>
Maofei94's avatar
Maofei94 committed
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
        <Item
          label="角色类别"
          name="subSystemValue"
          rules={[
            {
              required: true,
              message: '请选择角色类别',
            },
          ]}
        >
          {/* {itemObj.subSystemValue || itemObj.visibleValue} */}
          <Select
            placeholder="请选择角色类别"
            onFocus={() => {
              handleSelect();
            }}
            onChange={e => {
              handleChange(e);
            }}
Maofei94's avatar
Maofei94 committed
228
            disabled
Maofei94's avatar
Maofei94 committed
229 230 231 232 233 234 235
          >
            {typeList.map(item => (
              <Option value={item.value} key={item.key}>
                {item.label}
              </Option>
            ))}
          </Select>
Maofei94's avatar
Maofei94 committed
236
        </Item>
皮倩雯's avatar
皮倩雯 committed
237 238 239 240 241 242 243 244 245 246 247
        <Item
          label={
            <div>
              <Tooltip title="内置角色不能配置菜单权限">
                <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} />
              </Tooltip>
              <span>内置角色</span>
            </div>
          }
          name="BuiltInRole"
        >
248 249 250 251 252 253 254
          <Switch
            checkedChildren="是"
            unCheckedChildren="否"
            checked={value}
            onChange={onChangeRadio}
          />
          {/* <Radio.Group onChange={onChangeRadio} value={value} defaultValue={value}>
皮倩雯's avatar
皮倩雯 committed
255
            <Radio value={2}>否</Radio>
256
            <Radio value={1}>是</Radio>
257
          </Radio.Group> */}
皮倩雯's avatar
皮倩雯 committed
258
        </Item>
Maofei94's avatar
Maofei94 committed
259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
        <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>
277
        <Item label="角色描述" name="description">
278
          <Input placeholder="请输入角色描述" maxLength="100" />
279 280 281 282 283 284 285
        </Item>
      </Form>
    </SiteModal>
  );
};

export default AddModal;