changeAdd.jsx 16.1 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1 2 3
/* eslint-disable no-cond-assign */
/* eslint-disable react/no-array-index-key */
/* eslint-disable no-undef */
皮倩雯's avatar
皮倩雯 committed
4 5 6
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable camelcase */
皮倩雯's avatar
皮倩雯 committed
7 8
/* eslint-disable react/jsx-no-undef */
/* eslint-disable valid-typeof */
9
/* eslint-disable no-unused-vars */
皮倩雯's avatar
皮倩雯 committed
10 11 12 13 14 15 16
/* eslint-disable consistent-return */
/* eslint-disable no-shadow */
/* eslint-disable indent */
/* eslint-disable no-unused-expressions */
/* eslint-disable array-callback-return */
/* eslint-disable eqeqeq */
/* eslint-disable no-plusplus */
17
import React, { useState, useEffect } from 'react';
18
import { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty } from 'antd';
皮倩雯's avatar
皮倩雯 committed
19
import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api';
皮倩雯's avatar
皮倩雯 committed
20

皮倩雯's avatar
皮倩雯 committed
21
import styles from './incident.less';
皮倩雯's avatar
皮倩雯 committed
22
const CheckboxGroup = Checkbox.Group;
皮倩雯's avatar
皮倩雯 committed
23
const { TabPane } = Tabs;
皮倩雯's avatar
皮倩雯 committed
24
const ChangeAdd = props => {
25
  const { callBackSubmit = () => {}, pickItem, visible, filed11, newCheckedList } = props;
皮倩雯's avatar
皮倩雯 committed
26
  const [title, setTitle] = useState([]);
皮倩雯's avatar
皮倩雯 committed
27
  const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
皮倩雯's avatar
皮倩雯 committed
28 29 30
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [total, setTotal] = useState();
31
  const [pageSize, setPageSize] = useState(40);
皮倩雯's avatar
皮倩雯 committed
32
  const [currentPage, setCurrentPage] = useState(1);
皮倩雯's avatar
皮倩雯 committed
33
  const [roleValue, setRoleValue] = useState([]);
皮倩雯's avatar
皮倩雯 committed
34 35 36 37 38
  const [checkDataRole, setCheckDataRole] = useState([]);
  const [checkDataPm, setCheckDataPm] = useState([]);
  const [checkDataSite, setCheckDataSite] = useState([]);
  const [filed1, setFiled1] = useState([]); // 角色全部数据
  const [saveCheckValue, setSaveCheckValue] = useState([]); // 保存选中值
皮倩雯's avatar
皮倩雯 committed
39 40 41
  const [keepOption1, setKeepOption1] = useState([]); // 保存了首次获取的部门列表数据
  const [keepOption2, setKeepOption2] = useState([]); // 保存了首次获取的站点列表数据
  const [keepTabKey, setKeepTabKey] = useState(0); // 保存tabs的key
皮倩雯's avatar
皮倩雯 committed
42 43 44
  const [list, setList] = useState([]);
  const [listPm, setListPm] = useState([]);
  const [listSite, setListSite] = useState([]);
45
  const [keyValue, setKeyValue] = useState('0');
46
  const [emptyValue, setEmptyValue] = useState(0);
47

皮倩雯's avatar
皮倩雯 committed
48 49 50 51 52 53 54
  const onSubmit = () => {
    // 没有勾选部门下的选项
    if (saveCheckValue[1] == undefined) {
      let data = [];
      newCheckedList.map(checkItem => {
        if (keepOption1.includes(checkItem)) {
          data.push(checkItem);
皮倩雯's avatar
皮倩雯 committed
55 56
        }
      });
皮倩雯's avatar
皮倩雯 committed
57
      saveCheckValue[1] = data;
皮倩雯's avatar
皮倩雯 committed
58
    }
皮倩雯's avatar
皮倩雯 committed
59 60 61 62 63 64 65
    // 没有勾选站点下的选项
    if (saveCheckValue[2] == undefined) {
      let data = [];
      newCheckedList.map(checkItem => {
        if (keepOption2.includes(checkItem)) {
          data.push(checkItem);
        }
皮倩雯's avatar
皮倩雯 committed
66
      });
皮倩雯's avatar
皮倩雯 committed
67
      saveCheckValue[2] = data;
皮倩雯's avatar
皮倩雯 committed
68
    }
皮倩雯's avatar
皮倩雯 committed
69 70 71
    let data = [];
    saveCheckValue.map((item, index) => {
      data = data.concat(item);
皮倩雯's avatar
皮倩雯 committed
72
    });
皮倩雯's avatar
皮倩雯 committed
73 74 75 76 77 78 79 80
    callBackSubmit({
      saveCheckValue,
      str: data.join(','),
      pickItem,
      stt: data,
      title,
      filed22: filed1,
    });
81
    setKeyValue('0');
皮倩雯's avatar
皮倩雯 committed
82
    setSearchWord('');
83 84
  };

皮倩雯's avatar
皮倩雯 committed
85
  useEffect(() => {
皮倩雯's avatar
皮倩雯 committed
86 87 88 89 90 91 92 93 94 95 96 97
    setKeepOption1(filed11['部门']);
    setKeepOption2(filed11['站点']);
    getRoles('角色', '', pageSize, 1);
    setRoleValue(filed1);
    let arr = Object.keys(filed1);
    setTitle(arr);
    let checkArr = [];
    let listdata = [];
    newCheckedList.map(checkItem => {
      if (filed11['角色'].includes(checkItem)) {
        listdata.push(checkItem);
      }
皮倩雯's avatar
皮倩雯 committed
98
    });
皮倩雯's avatar
皮倩雯 committed
99
    setCheckDataRole(listdata); // 用于设置首次展示已选列表角色数据
皮倩雯's avatar
皮倩雯 committed
100 101 102 103 104 105 106
    checkArr[0] = listdata;
    setSaveCheckValue(checkArr);
    setCheckedList(checkArr);
    let pmdata = [];
    newCheckedList.map(checkItem => {
      if (filed11['部门'].includes(checkItem)) {
        pmdata.push(checkItem);
107
      }
皮倩雯's avatar
皮倩雯 committed
108 109 110 111 112 113
    });
    setCheckDataPm(pmdata);
    let sitedata = [];
    newCheckedList.map(checkItem => {
      if (filed11['站点'].includes(checkItem)) {
        sitedata.push(checkItem);
114
      }
皮倩雯's avatar
皮倩雯 committed
115 116 117
    });
    setCheckDataSite(sitedata);
  }, [visible]);
皮倩雯's avatar
皮倩雯 committed
118

皮倩雯's avatar
皮倩雯 committed
119 120 121 122 123 124 125 126 127
  const submitSearchUser = () => {
    if (keepTabKey == 0) {
      sreachRoles('角色', searchWord, pageSize, 1);
    }
    if (keepTabKey == 1) {
      sreachRoles('部门', searchWord, pageSize, 1);
    }
    if (keepTabKey == 2) {
      sreachRoles('站点', searchWord, pageSize, 1);
皮倩雯's avatar
皮倩雯 committed
128 129
    }
  };
130

皮倩雯's avatar
皮倩雯 committed
131 132 133 134 135 136 137
  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  // 监听分页
  const paginationChange = (page, pageSizes) => {
138 139 140 141 142 143 144 145
    if (keepTabKey == 0) {
      getRoles('角色', searchWord, pageSizes, page);
    }
    if (keepTabKey == 1) {
      getRoles('部门', searchWord, pageSizes, page);
    }
    if (keepTabKey == 2) {
      getRoles('站点', searchWord, pageSizes, page);
皮倩雯's avatar
皮倩雯 committed
146
    }
皮倩雯's avatar
皮倩雯 committed
147
    setCurrentPage(page);
148
    setPageSize(pageSizes);
皮倩雯's avatar
皮倩雯 committed
149 150 151 152 153 154 155 156 157 158 159 160
  };
  // 搜索时获取数据
  const sreachRoles = (type, keywords, pageSizes, pageIndex) => {
    CM_Event_LoadDepartmentAndRoles({
      type,
      keywords,
      pageSize: pageSizes,
      pageIndex,
    }).then(res => {
      if (res.msg === 'Ok') {
        setRoleValue(formateArrDataA1(res.data, 'groupType'));
        setFiled1(formateArrDataA1(res.data, 'groupType'));
161
        setCurrentPage(1);
皮倩雯's avatar
皮倩雯 committed
162
        setTotal(res.data.count);
163 164 165 166 167
        if (res.data.count == 0) {
          setEmptyValue(1);
        } else {
          setEmptyValue(0);
        }
皮倩雯's avatar
皮倩雯 committed
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
      }
    });
  };

  // 重置
  const onReset = () => {
    // setListPm([]);
    if (keepTabKey == 0) {
      getRoles('角色', '', pageSize, 1);
    }
    if (keepTabKey == 1) {
      getRoles('部门', '', pageSize, 1);
    }
    if (keepTabKey == 2) {
      getRoles('站点', '', pageSize, 1);
    }
    setCurrentPage(1);
    setSearchWord('');
皮倩雯's avatar
皮倩雯 committed
186 187
  };

皮倩雯's avatar
皮倩雯 committed
188 189 190 191 192 193 194
  const getRoles = (type, keywords, pageSizes, pageIndex) => {
    CM_Event_LoadDepartmentAndRoles({
      type,
      keywords,
      pageSize: pageSizes,
      pageIndex,
    }).then(res => {
皮倩雯's avatar
皮倩雯 committed
195
      if (res.msg === 'Ok') {
皮倩雯's avatar
皮倩雯 committed
196 197 198
        setTotal(res.data.count);
        setRoleValue(formateArrDataA1(res.data, 'groupType'));
        setFiled1(formateArrDataA1(res.data, 'groupType'));
199 200 201 202 203
        if (res.data.count == 0) {
          setEmptyValue(1);
        } else {
          setEmptyValue(0);
        }
皮倩雯's avatar
皮倩雯 committed
204 205 206
      }
    });
  };
皮倩雯's avatar
皮倩雯 committed
207
  // 页面数据改变重新赋值
皮倩雯's avatar
皮倩雯 committed
208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
  useEffect(() => {
    let arr = Object.keys(filed1);
    setTitle(arr);
    let checkArr = [];
    let data = [];
    saveCheckValue.map((item, index) => {
      data = data.concat(item);
    });
    arr.forEach(item => {
      if (item == '角色') {
        checkArr[0] = [];
        checkDataRole.map(checkItem => {
          if (filed1['角色'].includes(checkItem)) {
            checkArr[0].push(checkItem);
          }
        });
皮倩雯's avatar
皮倩雯 committed
224
        setCheckedList(checkArr); // 按对象数组格式
皮倩雯's avatar
皮倩雯 committed
225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
      } else if (item == '部门') {
        checkArr[1] = [];
        checkDataPm.map(checkItem => {
          if (filed1['部门'].includes(checkItem)) {
            checkArr[1].push(checkItem);
          }
        });
        setCheckedList(checkArr);
      } else if (item == '站点') {
        checkArr[2] = [];
        checkDataSite.map(checkItem => {
          if (filed1['站点'].includes(checkItem)) {
            checkArr[2].push(checkItem);
          }
        });
        setCheckedList(checkArr);
      }
    });
  }, [filed1]);

皮倩雯's avatar
皮倩雯 committed
245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
  const formateArrDataA1 = (initialArr, name) => {
    let aa = [];
    let a1 = [];
    let a2;
    let a3 = [];
    initialArr.data.map(i => {
      a2 = i.groupType;
      a1 = i.root;
      a1.map(j => {
        j.group = a2;
      });
      aa.push(i.root);
    });
    aa.map(p => {
      p.map(o => {
        a3.push(o);
      });
    });

    // 判定传参是否符合规则
    if (!(a3 instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    a3.map(i => {
      if (nameArr.indexOf(i.group) === -1) {
        nameArr.push(i.group);
      }
    });
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in a3) {
        if (a3[j].group == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(a3[j]);
        }
      }
    }
    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.Name);
      });
    }
    return tempObj;
  };

皮倩雯's avatar
皮倩雯 committed
300 301 302 303
  useEffect(() => {
    let checkedListArr = [...saveCheckValue];
    let data = checkDataRole;
    let DataValue = [];
皮倩雯's avatar
皮倩雯 committed
304
    // 拿到当前页数据
皮倩雯's avatar
皮倩雯 committed
305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334
    checkDataRole.forEach(item => {
      if (roleValue['角色'].indexOf(item) != -1) {
        DataValue.push(item);
      }
    });
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
    }
    checkedListArr[0] = data;
    setCheckDataRole(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  }, [list]);

  useEffect(() => {
    let checkedListArr = [...saveCheckValue];
    let data = checkDataPm;
    let DataValue = [];
皮倩雯's avatar
皮倩雯 committed
335
    // 拿到当前页数据
皮倩雯's avatar
皮倩雯 committed
336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360
    checkDataPm.forEach(item => {
      if (roleValue['部门'].indexOf(item) != -1) {
        DataValue.push(item);
      }
    });
    // del
    if (DataValue.length > listPm.length) {
      DataValue.forEach(item => {
        if (listPm.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
        }
      });
    } else {
      // add
      listPm.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
    }
    checkedListArr[1] = data;
    setCheckDataPm(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  }, [listPm]);
皮倩雯's avatar
皮倩雯 committed
361

皮倩雯's avatar
皮倩雯 committed
362 363 364 365
  useEffect(() => {
    const checkedListArr = [...saveCheckValue];
    let data = checkDataSite;
    let DataValue = [];
皮倩雯's avatar
皮倩雯 committed
366
    // 拿到当前页数据
皮倩雯's avatar
皮倩雯 committed
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391
    checkDataSite.forEach(item => {
      if (roleValue['站点'].indexOf(item) != -1) {
        DataValue.push(item);
      }
    });
    // del
    if (DataValue.length > listSite.length) {
      DataValue.forEach(item => {
        if (listSite.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
        }
      });
    } else {
      // add
      listSite.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
    }
    checkedListArr[2] = data;
    setCheckDataSite(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  }, [listSite]);
392
  const handleParChange = key => {
393
    setKeyValue(key);
394
    // setSearchWord('');
皮倩雯's avatar
皮倩雯 committed
395 396
    setCurrentPage(1);
    setKeepTabKey(key);
397 398 399
    let value;
    if (key == 0) {
      value = '角色';
400
      getRoles('角色', searchWord, pageSize, 1);
401 402 403
    }
    if (key == 1) {
      value = '部门';
404
      getRoles('部门', searchWord, pageSize, 1);
405 406 407
    }
    if (key == 2) {
      value = '站点';
408
      getRoles('站点', searchWord, pageSize, 1);
409 410
    }
  };
皮倩雯's avatar
皮倩雯 committed
411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434

  const onChangeListNew = list => {
    setList(list);
  };
  const onChangeListNew1 = list => {
    setListPm(list);
  };
  const onChangeListNew2 = list => {
    setListSite(list);
  };
  return (
    <Modal
      title="权限选择"
      bodyStyle={{ width: '100%', height: '650px', overflowY: 'scorll' }}
      width="1000px"
      style={{ top: '10px' }}
      destroyOnClose
      centered
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender
      getContainer={false}
435 436
      afterClose={() => {
        setKeyValue('0');
皮倩雯's avatar
皮倩雯 committed
437
        setSearchWord('');
438
      }}
皮倩雯's avatar
皮倩雯 committed
439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458
    >
      <Search
        style={{
          width: 260,
          marginRight: '20px',
          marginBottom: '10px',
        }}
        placeholder="搜索"
        onSearch={submitSearchUser}
        onChange={e => handleSearch(e)}
        enterButton
        value={searchWord}
      />
      <Button type="primary" htmlType="submit" onClick={onReset}>
        重置
      </Button>
      {visible && (
        <div className={styles.listCard1}>
          <div className={styles.cardItem1}>
            <div className={styles.cardContent1}>
459
              <Tabs activeKey={keyValue} className={styles.tab} onChange={handleParChange}>
皮倩雯's avatar
皮倩雯 committed
460 461
                <TabPane tab="角色" key="0">
                  <div className={styles.cardItemData1}>
462 463 464 465 466 467 468
                    {emptyValue == 0 ? (
                      <CheckboxGroup
                        options={roleValue['角色']}
                        value={checkedList[0]}
                        onChange={onChangeListNew}
                      />
                    ) : (
469
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
470
                    )}
皮倩雯's avatar
皮倩雯 committed
471
                  </div>
皮倩雯's avatar
皮倩雯 committed
472 473 474
                </TabPane>
                <TabPane tab="部门" key="1">
                  <div className={styles.cardItemData1}>
475 476 477 478
                    {emptyValue == 0 ? (
                      <CheckboxGroup
                        options={roleValue['部门']}
                        value={checkedList[1]}
479
                        onChange={onChangeListNew1}
480 481
                      />
                    ) : (
482
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
483
                    )}
皮倩雯's avatar
皮倩雯 committed
484 485 486 487
                  </div>
                </TabPane>
                <TabPane tab="站点" key="2">
                  <div className={styles.cardItemData1}>
488 489 490 491
                    {emptyValue == 0 ? (
                      <CheckboxGroup
                        options={roleValue['站点']}
                        value={checkedList[2]}
492
                        onChange={onChangeListNew2}
493 494
                      />
                    ) : (
495
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
496
                    )}
皮倩雯's avatar
皮倩雯 committed
497 498 499
                  </div>
                </TabPane>
              </Tabs>
皮倩雯's avatar
皮倩雯 committed
500 501
            </div>
          </div>
皮倩雯's avatar
皮倩雯 committed
502 503
          <div className={styles.cardItem11}>
            <div className={styles.cardContent1}>
504
              <Tabs className={styles.tab} activeKey={keyValue} onChange={handleParChange}>
皮倩雯's avatar
皮倩雯 committed
505 506 507 508 509 510 511 512 513 514
                <TabPane tab="角色" key="0">
                  {checkDataRole.map((item, index) => (
                    <div
                      key={index}
                      style={{
                        marginBottom: '5px',
                      }}
                    >
                      {item}
                    </div>
皮倩雯's avatar
皮倩雯 committed
515
                  ))}
皮倩雯's avatar
皮倩雯 committed
516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541
                </TabPane>
                <TabPane tab="部门" key="1">
                  {checkDataPm.map((item, index) => (
                    <div
                      key={index}
                      style={{
                        marginBottom: '5px',
                      }}
                    >
                      {item}
                    </div>
                  ))}
                </TabPane>
                <TabPane tab="站点" key="2">
                  {checkDataSite.map((item, index) => (
                    <div
                      key={index}
                      style={{
                        marginBottom: '5px',
                      }}
                    >
                      {item}
                    </div>
                  ))}
                </TabPane>
              </Tabs>
皮倩雯's avatar
皮倩雯 committed
542
            </div>
皮倩雯's avatar
皮倩雯 committed
543
          </div>
皮倩雯's avatar
皮倩雯 committed
544 545
        </div>
      )}
546 547 548 549 550 551 552 553 554 555 556 557 558 559
      <div className={styles.foot}>
        <Pagination
          total={total}
          showTotal={item => `共 ${item} 条`}
          defaultPageSize={pageSize}
          defaultCurrent={1}
          pageSizeOptions={[10, 20, 40, 100]}
          current={currentPage}
          onChange={paginationChange}
          style={{ marginBottom: '10px' }}
          size="small"
          showQuickJumper
        />
      </div>
皮倩雯's avatar
皮倩雯 committed
560 561
    </Modal>
  );
皮倩雯's avatar
皮倩雯 committed
562
};
皮倩雯's avatar
皮倩雯 committed
563 564

export default ChangeAdd;