RelateRoleModal.jsx 7.5 KB
Newer Older
1
import React, { useState, useCallback, useEffect } from 'react';
2
import { Modal, Spin, Tabs, notification, message, Checkbox, Divider } from 'antd';
3
import { SetUserRelationList, setUserRelation, setUserRelations } from '@/services/userManage/api';
4
import ListCardItem from './components/listCardItem';
5
const CheckboxGroup = Checkbox.Group;
6 7 8 9 10 11 12 13 14 15 16 17 18

const RelateRoleModal = props => {
  const {
    currentUser,
    currentSelectOrg,
    userIDs,
    visible,
    rolelist,
    stationlist,
    multiRelateRoles,
    onCancel,
    onSelect,
    loading,
19 20
    multiRoleList,
    multistationList,
21
    mult,
22
    submitSearchUser,
23 24 25 26
  } = props;
  const { TabPane } = Tabs;
  const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表
  const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表
27
  const authority = localStorage.getItem('panda-oms-authority');
28
  const [activeKey, setActiveKey] = useState('1');
29 30

  const getRoleValueCallback = useCallback((value, index) => {
31
    console.log(value);
32
    roleValueList[index] = value;
33
    console.log(roleValueList);
34
    setRoleValueList({ ...roleValueList });
35
    console.log({ ...roleValueList });
36 37 38
  }, []);

  const getStationValueCallback = useCallback((value, index) => {
39
    console.log(value);
40
    stationValueList[index] = value;
41
    console.log(stationValueList);
42 43 44
    setStationValueList({ ...stationValueList });
  }, []);

45
  useEffect(() => {
46 47 48
    if (!visible) {
      setActiveKey('1');
    }
49
    console.log(currentUser);
50 51 52
    console.log(multiRoleList);
    console.log(multistationList);
  }, [visible]);
53

54 55
  // 提交-关联角色
  const submitRole = () => {
56
    console.log(1212121212);
57
    SetUserRelationList(
58
      currentUser.userId,
59 60 61 62 63 64 65 66
      Object.keys(roleValueList)
        .map(k => roleValueList[k])
        .flat(),
      Object.keys(stationValueList)
        .map(k => stationValueList[k])
        .flat(),
    )
      .then(res => {
67
        if (res.code == 0) {
68 69
          onCancel();
          // 跳转到新组织机构下的用户表
70 71 72 73
          // if (currentSelectOrg !== '-1') {
          //   onSelect([currentSelectOrg]);
          // }
          currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
74 75 76 77 78 79 80
          notification.success({
            message: '提交成功',
            duration: 2,
          });
        } else {
          notification.error({
            message: '提交失败',
81
            description: res.msg,
82 83 84 85 86 87 88 89 90
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  // 提交-批量关联角色
  const submitRoles = () => {
91
    console.log(64634676437);
92 93 94 95 96 97 98 99 100 101 102 103 104 105
    setUserRelations(
      userIDs,
      Object.keys(roleValueList)
        .map(k => roleValueList[k])
        .flat()
        .toString(),
      Object.keys(stationValueList)
        .map(k => stationValueList[k])
        .flat()
        .toString(),
    )
      .then(res => {
        if (res.code === 0) {
          onCancel();
106 107
          // 跳转到组织重新请求该机构下用户数据,查找用户时currentSelectOrg为'-1',不需要重新请求
          if (currentSelectOrg !== '-1') {
108
            onSelect([currentSelectOrg]);
109
          }
110 111 112 113 114
          notification.success({
            message: '提交成功',
            duration: 2,
          });
        } else {
115 116 117 118 119
          console.log(1);
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
120 121 122 123 124 125
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
126
  const onChangeList = () => {};
127 128 129 130 131 132
  const title = (
    <span>
      <span style={{ marginRight: '20px' }}>批量关联角色</span>
      <span style={{ color: 'red' }}>提示:批量关联角色会覆盖原有角色</span>
    </span>
  );
133 134
  const title1 = (
    <span>
135
      <span>
136
        关联权限
137 138 139
        <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
{currentUser.userName}
        </span>
140
      </span>
141
    </span>
142
  );
143 144 145 146
  const onChange = e => {
    console.log(e);
    setActiveKey(e);
  };
147
  if (mult == 'Yes') {
148 149
    return (
      <Modal
150
        title={title}
151
        visible={visible}
152
        onOk={submitRoles}
153 154
        maskClosable={false}
        destroyOnClose
155 156 157 158 159 160
        onCancel={onCancel}
        okText="确认"
        cancelText="取消"
        width="500px"
      >
        <Spin spinning={loading} tip="loading">
161
          <Tabs activeKey={activeKey} onChange={onChange} style={{ marginTop: '-16px' }}>
162
            <TabPane tab="角色" key="1">
163
              <div style={{ height: '500px', overflowY: 'scroll' }}>
164 165 166 167 168 169 170 171 172 173 174 175 176 177
                {visible &&
                  rolelist.map((role, index) => (
                    <ListCardItem
                      style={{ display: 'none' }}
                      itemid={index}
                      key={`item${index}key`}
                      userList={role.roleList}
                      multiRoleList={multiRoleList}
                      mult={mult}
                      OUName={role.visibleTitle}
                      getValueCallback={getRoleValueCallback}
                    />
                  ))}
              </div>
178
            </TabPane>
179
            <TabPane tab="站点" key="2" forceRender={true}>
180
              <div style={{ height: '500px', overflowY: 'scroll' }}>
181 182 183 184 185 186 187 188 189 190 191 192 193
                {visible &&
                  stationlist.map((station, index) => (
                    <ListCardItem
                      itemid={index}
                      key={`item${index}key`}
                      userList={station.stationList}
                      multistationList={multistationList}
                      mult={mult}
                      OUName={station.visibleTitle}
                      getValueCallback={getStationValueCallback}
                    />
                  ))}
              </div>
194 195 196 197 198
            </TabPane>
          </Tabs>
        </Spin>
      </Modal>
    );
199 200 201 202 203 204 205
  }
  return (
    <Modal
      title={multiRelateRoles ? title : title1}
      visible={visible}
      onOk={multiRelateRoles ? submitRoles : submitRole}
      onCancel={onCancel}
206
      maskClosable={false}
207 208 209 210 211
      okText="确认"
      cancelText="取消"
      width="500px"
    >
      <Spin spinning={loading} tip="loading">
212
        <Tabs activeKey={activeKey} onChange={onChange} style={{ marginTop: '-16px' }}>
213
          <TabPane tab="角色" key="1">
214 215 216 217 218 219 220 221 222 223
            <div style={{ height: '500px', overflowY: 'scroll' }}>
              {visible &&
                rolelist.map((role, index) => (
                  <ListCardItem
                    itemid={index}
                    key={`item${index}key`}
                    userList={role.roleList}
                    mult={mult}
                    OUName={role.visibleTitle}
                    getValueCallback={getRoleValueCallback}
224
                    tab="roles"
225 226 227
                  />
                ))}
            </div>
228
          </TabPane>
229
          <TabPane tab="站点" key="2" forceRender={true}>
230 231 232 233 234 235 236 237 238 239
            <div style={{ height: '500px', overflowY: 'scroll' }}>
              {visible &&
                stationlist.map((station, index) => (
                  <ListCardItem
                    itemid={index}
                    key={`item${index}key`}
                    userList={station.stationList}
                    mult={mult}
                    OUName={station.visibleTitle}
                    getValueCallback={getStationValueCallback}
240
                    tab="sites"
241 242 243
                  />
                ))}
            </div>
244 245 246 247 248
          </TabPane>
        </Tabs>
      </Spin>
    </Modal>
  );
249 250 251
};

export default RelateRoleModal;