solutionConfig.jsx 21.2 KB
Newer Older
1
/* eslint-disable no-return-assign */
2
import { Space, Table, Button, Popconfirm, notification, Divider, Checkbox, Spin } from 'antd';
3
import React, { useState, useEffect, useCallback } from 'react';
4
import VisibleRoleModal from '@/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal';
5 6 7 8

import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
import RoleModal from './RoleModal';
import styles from '../SchemeConfig.less';
9
import {
10 11 12 13
  deleteConfig,
  setServiceType,
  SetServiceConfig,
  GetMaplayerByTerminalType,
14
  SetDefaultsSchemeName,
15
} from '@/services/webConfig/api';
16
import { RoleGroupList } from '@/services/messagemanage/messagemanage';
17
import AddModal from './AddModal';
18
const VectorData = props => {
19 20
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [schemename, setSchemename] = useState([]);
21
  const [record, setRecord] = useState({}); // 选中关联角色的方案名
22 23 24
  const [webCurrent, setWebCurrent] = useState(0); // web列表下标
  const [handCurrent, setHandCurrent] = useState(0); // hand列表下标
  const [webData, setWebData] = useState([]); // web数据
25
  const [handData, setHandData] = useState([]); // 手持数据
26 27 28 29 30 31 32
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 更新list
  const [handStatus, setHandStatus] = useState([]); // 更新状态
  const [webStatus, setWebStatus] = useState([]); // 更新状态
  const [type, setType] = useState(''); // 弹窗类型
  const [checkLoading, setCheckLoading] = useState(false);
  const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
33 34 35 36 37
  const [tree, setTree] = useState([]);
  const [leafs, setLeafs] = useState([]);
  const [addVisible, setAddVisible] = useState(false);
  const [checkValue, setCheckValue] = useState([]);

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
  const columns = [
    {
      title: '默认方案',
      align: 'center',
      key: 'url',
      render: (text, record, index) => (
        <Space>
          <Checkbox
            checked={webStatus[index + webCurrent * 5]}
            onChange={e => {
              onChangeCheck(e, record, index + webCurrent * 5);
            }}
          />
        </Space>
      ),
    },
    {
      title: '方案名',
      dataIndex: 'schemename',
      key: 'schemename',
      align: 'center',
    },
    {
      title: '关联角色',
      align: 'center',
      key: 'type',
64 65 66 67 68 69
      render: record => (
        <Space size="middle">
          <UserAddOutlined
            onClick={() => pickRole(record)}
            style={{ fontSize: '18px', color: '#1890FF' }}
          />
70 71 72 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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
        </Space>
      ),
    },
    {
      title: '编辑',
      align: 'center',
      key: 'schemename',
      render: (text, record, index) => (
        <Space>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除此条方案?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delWebConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
  const columns1 = [
    {
      title: '查询方案',
      align: 'center',
      key: 'url',
      render: (text, record, index) => (
        <Space>
          <Checkbox
            checked={handStatus[index + handCurrent * 5]}
            onChange={e => {
              onChangeHand(e, record, index + handCurrent * 5);
            }}
          />
        </Space>
      ),
    },
    {
      title: '方案名',
      dataIndex: 'schemename',
      key: 'schemename',
      align: 'center',
    },
    {
      title: '关联角色',
      align: 'center',
      key: 'type',
123 124 125 126 127 128
      render: record => (
        <Space size="middle">
          <UserAddOutlined
            onClick={() => pickRole(record)}
            style={{ fontSize: '18px', color: '#1890FF' }}
          />
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
        </Space>
      ),
    },
    {
      title: '编辑',
      align: 'center',
      key: 'schemename',
      render: (text, record, index) => (
        <Space>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除此条方案?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delhandConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
156
  // 获取选中的角色
157
  const onPushSubmit = value => {
158
    setAddVisible(false);
159 160 161 162 163 164
    if (value.length) {
      let query = {
        schemename: record.schemename,
        terminalType: record.isStatus,
        isBaseMap: false,
        jsonCfg: JSON.stringify({
165
          roles: value.join(','),
166 167 168 169
        }),
      };
      SetServiceConfig(query)
        .then(res => {
170
          if (res.code == '0') {
171 172 173 174 175
            prompt('success', '关联角色成功');
            setFlag(flag + 1);
          } else {
            prompt('fail', '关联角色失败');
          }
176
        })
177 178 179 180 181
        .catch(err => {
          prompt('fail', '网络请求失败');
        });
    }
  };
182 183 184 185 186 187 188 189 190 191 192 193 194 195
  const rolCallBack = useCallback(list => {
    let strList = [];
    if (list.length > 0) {
      list.forEach(item => {
        console.log(item, 'item');
        Object.keys(item.last).forEach(i => {
          strList.push(i);
        });
      });
      console.log(strList);
      onPushSubmit(strList);
    }
  });

196
  // 获取角色
197 198 199 200 201 202 203 204
  const pickRole = e => {
    setRecord(e);
    setAddVisible(true);
    console.log(tree);
    console.log(leafs);
    let arr = e.roles != null ? e.roles.split(',') : [];
    console.log(arr);
    setCheckValue(arr);
205
  };
206
  // 设置web方案
207
  const onChangeCheck = (e, record, index) => {
208 209 210
    console.log(e);
    console.log(record);
    console.log(index);
211
    setCheckLoading(true);
212
    console.log(webStatus);
213
    const newLoadings = [...webStatus];
214 215
    newLoadings.map((item, loadIndex) =>
      loadIndex == index
216
        ? (newLoadings[loadIndex] = !newLoadings[loadIndex])
217 218
        : (newLoadings[loadIndex] = false),
    );
219
    console.log(newLoadings);
220 221
    setWebStatus(newLoadings);
    let query = {
222
      schemename: record.schemename,
223 224
      type: 'web',
      uncheck: true,
225
    };
226
    // 取消默认
227
    if (!newLoadings[index]) {
228
      SetDefaultsSchemeName(query).then(res => {
229
        setCheckLoading(false);
230
        if (res.code == '0') {
231 232
          const changehandData = [...webData];
          changehandData[index].type = 'dynamic';
233
          console.log(changehandData);
234
          setWebData(changehandData);
235

236 237
          prompt('success', '设置成功');
        } else {
238
          prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
239
        }
240 241 242
      });
      return;
    }
243
    // 设置默认
244
    let beforeDefault = webData.findIndex(item => item.type == 'pipenet');
245
    SetDefaultsSchemeName({
246
      schemename: record.schemename,
247 248
      type: 'web',
      uncheck: false,
249 250
    }).then(res => {
      setCheckLoading(false);
251
      if (res.code == '0') {
252 253
        const changehandData = [...webData];
        changehandData[index].type = 'pipenet';
254
        console.log(changehandData);
255
        setWebData(changehandData);
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278
        // 设置默认的同时取消另一个默认
        // if (beforeDefault != -1) {
        //   SetDefaultsSchemeName({
        //     schemename: changehandData[beforeDefault].schemename,
        //     type: 'web',
        //     uncheck: true,
        //   }).then(resdata => {
        //     setCheckLoading(false);
        //     if (resdata.code == 0) {
        //       const changehandData1 = [...webData];
        //       changehandData1[beforeDefault].type = 'dynamic';
        //       console.log(changehandData1);
        //       setWebData(changehandData1);
        //       prompt('success', '设置成功');
        //       // return;
        //     } else {
        //       prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        //     }
        //   });
        // } else {
        //   prompt('success', '设置成功');
        // }
        prompt('success', '设置成功');
279 280 281 282 283 284 285 286 287 288 289 290
      }
    });
  };

  // 无选中值时的默认值
  const onChangeCheck1 = (e, record, index, aa) => {
    console.log(aa);
    console.log(webStatus);
    setCheckLoading(true);
    const newLoadings = [...aa];
    let query = {
      schemename: record.schemename,
291 292
      type: 'web',
      uncheck: true,
293 294
    };
    if (!newLoadings[index]) {
295
      SetDefaultsSchemeName(query).then(res => {
296
        setCheckLoading(false);
297
        if (res.code == '0') {
298 299 300 301 302 303 304 305 306 307 308
          const changehandData = [...webData];
          changehandData[index].type = 'dynamic';
          // setWebData(changehandData);
          prompt('success', '设置成功');
        } else {
          prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        }
      });
      return;
    }
    let beforeDefault = webData.findIndex(item => item.type == 'pipenet');
309
    SetDefaultsSchemeName({
310
      schemename: record.schemename,
311 312
      type: 'web',
      uncheck: false,
313 314
    }).then(res => {
      setCheckLoading(false);
315
      if (res.code == '0') {
316 317 318
        const changehandData = [...webData];
        changehandData[index].type = 'pipenet';
        // setWebData(changehandData);
319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339

        // if (beforeDefault != -1) {
        //   SetDefaultsSchemeName({
        //     schemename: changehandData[beforeDefault].schemename,
        //     type: 'web',
        //     uncheck: true,
        //   }).then(resdata => {
        //     setCheckLoading(false);
        //     if (resdata.code == 0) {
        //       const changehandData1 = [...webData];
        //       changehandData1[beforeDefault].type = 'dynamic';
        //       // setWebData(changehandData1);
        //       prompt('success', '设置成功');
        //     } else {
        //       prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        //     }
        //   });
        // } else {
        //   prompt('success', '设置成功');
        // }
        prompt('success', '设置成功');
340 341 342
      }
    });
  };
343

344
  // 选择手持方案
345 346 347
  const onChangeHand = (e, record, index) => {
    setCheckLoading(true);
    const newLoadings = [...handStatus];
348 349
    newLoadings.map((item, loadIndex) =>
      loadIndex == index
350
        ? (newLoadings[loadIndex] = !newLoadings[loadIndex])
351 352
        : (newLoadings[loadIndex] = false),
    );
353 354
    setHandStatus(newLoadings);
    let query = {
355
      schemename: record.schemename,
356 357
      type: 'phone',
      uncheck: true,
358 359
    };
    if (!newLoadings[index]) {
360
      SetDefaultsSchemeName(query).then(res => {
361
        setCheckLoading(false);
362
        if (res.code == '0') {
363 364 365 366 367
          const changehandData = [...handData];
          changehandData[index].isDefault = false;
          setHandData(changehandData);
          prompt('success', '设置成功');
        } else {
368
          prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
369
        }
370 371 372
      });
      return;
    }
373
    let beforeDefault = handData.findIndex(item => item.isDefault);
374
    SetDefaultsSchemeName({
375
      schemename: record.schemename,
376 377
      type: 'phone',
      uncheck: false,
378 379
    }).then(res => {
      setCheckLoading(false);
380
      if (res.code == '0') {
381 382 383
        const changehandData = [...handData];
        changehandData[index].isDefault = true;
        setHandData(changehandData);
384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404
        // if (beforeDefault != -1) {
        //   SetDefaultsSchemeName({
        //     schemename: changehandData[beforeDefault].schemename,
        //     type: 'phone',
        //     uncheck: true,
        //   }).then(resdata => {
        //     setCheckLoading(false);
        //     if (resdata.code == 0) {
        //       const changehandData1 = [...handData];
        //       changehandData1[beforeDefault].isDefault = false;
        //       setHandData(changehandData1);
        //       prompt('success', '设置成功');
        //       // return;
        //     } else {
        //       prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        //     }
        //   });
        // } else {
        //   prompt('success', '设置成功');
        // }
        prompt('success', '设置成功');
405 406 407 408 409 410 411 412 413 414
      }
    });
  };

  // 选择手持方案
  const onChangeHand1 = (e, record, index, aa) => {
    setCheckLoading(true);
    const newLoadings = [...aa];
    let query = {
      schemename: record.schemename,
415 416
      type: 'phone',
      uncheck: true,
417 418
    };
    if (!newLoadings[index]) {
419
      SetDefaultsSchemeName(query).then(res => {
420
        setCheckLoading(false);
421
        if (res.code == '0') {
422 423 424 425 426 427 428 429 430 431 432
          const changehandData = [...handData];
          changehandData[index].isDefault = false;
          // setHandData(changehandData);
          prompt('success', '设置成功');
        } else {
          prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        }
      });
      return;
    }
    let beforeDefault = handData.findIndex(item => item.isDefault);
433
    SetDefaultsSchemeName({
434
      schemename: record.schemename,
435 436
      type: 'phone',
      uncheck: false,
437 438
    }).then(res => {
      setCheckLoading(false);
439
      if (res.code == '0') {
440 441 442
        const changehandData = [...handData];
        changehandData[index].isDefault = true;
        // setHandData(changehandData);
443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463
        // if (beforeDefault != -1) {
        //   SetDefaultsSchemeName({
        //     schemename: changehandData[beforeDefault].schemename,
        //     type: 'phone',
        //     uncheck: true,
        //   }).then(resdata => {
        //     setCheckLoading(false);
        //     if (resdata.code == 0) {
        //       const changehandData1 = [...handData];
        //       changehandData1[beforeDefault].isDefault = false;
        //       // setHandData(changehandData1);
        //       prompt('success', '设置成功');
        //       // return;
        //     } else {
        //       prompt('fail', `${record.schemename}默认设置时遇到错误:${res.message}`);
        //     }
        //   });
        // } else {
        //   prompt('success', '设置成功');
        // }
        prompt('success', '设置成功');
464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479
      }
    });
  };
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    } else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
480
    }
481 482 483
  };
  const onSubmit = prop => {
    setVisible(false);
484 485 486 487 488 489
    if (type == 'add') {
      renderTileWeb();
    } else {
      renderTile();
    }
    // setFlag(flag + 1);
490
  };
491
  // 删除web配置方案
492 493
  const delWebConfirm = record => {
    deleteConfig({
494
      schemename: record.schemename,
495 496 497
      terminalType: 'web',
      isBaseMap: false,
    }).then(res => {
498
      if (res.code == '0') {
499 500 501 502 503 504 505
        prompt('success', '删除成功');
        setFlag(flag + 1);
      } else {
        prompt('fail', '删除失败');
      }
    });
  };
506
  // 删除手持配置方案
507 508
  const delhandConfirm = e => {
    setCheckLoading(true);
509
    deleteConfig({
510
      schemename: e.schemename,
511 512 513
      terminalType: 'phone',
      isBaseMap: false,
    }).then(res => {
514
      setCheckLoading(false);
515
      if (res.code == '0') {
516 517 518 519 520 521 522
        prompt('success', '删除成功');
        setFlag(flag + 1);
      } else {
        prompt('fail', '删除失败');
      }
    });
  };
523
  // 添加方案
524 525 526 527
  const addType = type => {
    setType(type);
    let listData = [];
    type == 'add' ? (listData = webData) : (listData = handData);
528 529
    let webSchemenameArr = [];
    let schemeArr = [];
530 531 532 533 534
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'scheme',
      isBaseMap: false,
    }).then(res => {
535
      if (res.data && res.data.length > 0) {
536 537 538 539
        setTreeLoading(false);
        listData.map(item => {
          webSchemenameArr.push(item.schemename);
        });
540
        res.data.map(item => {
541 542 543 544 545 546
          if (!webSchemenameArr.includes(item.schemename)) schemeArr.push(item.schemename);
        });
        setSchemename(schemeArr);
        if (schemeArr.length) {
          setVisible(true);
        } else {
547
          console.log(12);
548 549 550 551 552 553 554
          notification.warning({
            message: '提示',
            duration: 3,
            description: '请先配置方案',
          });
        }
      } else {
555
        console.log(34);
556 557 558 559 560 561 562 563 564 565
        setTreeLoading(false);
        notification.warning({
          message: '提示',
          duration: 3,
          description: '请先配置方案',
        });
      }
    });
  };
  useEffect(() => {
566
    console.log(flag);
567
    renderTile();
568
    renderTileWeb();
569 570 571 572
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setCheckLoading(true);
573
    // 查询手持方案
574
    let schemeConfigQueryRequest = GetMaplayerByTerminalType({
575 576 577
      terminalType: 'phone',
      isBaseMap: false,
    });
578
    Promise.all([schemeConfigQueryRequest])
579
      .then(res => {
580
        if (res[0].code == '0') {
581
          let arr = [];
582
          res[0].data.optionalLayer.layers.map((item, index) => {
583 584
            if (item.isDefault) {
              arr.push(true);
585
            } else {
586
              arr.push(false);
587
            }
588 589 590
            item.isStatus = 'phone';
            return item;
          });
591
          setHandData(res[0].data.optionalLayer.layers);
592 593 594 595 596
          if (arr.indexOf(true) == -1) {
            arr[arr.length - 1] = true;
            setHandStatus(arr);
            onChangeHand1(
              '',
597
              res[0].data.optionalLayer.layers[arr.length - 1],
598 599 600 601 602 603
              arr.length - 1,
              arr,
            );
          } else {
            setHandStatus(arr);
          }
604
        }
605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621
        setCheckLoading(false);
      })
      .catch(e => {
        setCheckLoading(false);
      });
  };

  // 获取瓦片数据配置数据
  const renderTileWeb = () => {
    setCheckLoading(true);
    // 查询web方案
    let webSchemeQueryRequest = GetMaplayerByTerminalType({
      terminalType: 'web',
      isBaseMap: false,
    });
    Promise.all([webSchemeQueryRequest])
      .then(res => {
622
        if (res[0].code == '0') {
623
          let arr = [];
624
          res[0].data.optionalLayer.layers.map((item, index) => {
625 626 627 628
            if (item.type === 'pipenet') {
              arr.push(true);
            } else {
              arr.push(false);
629
            }
630 631 632
            item.isStatus = 'web';
            return item;
          });
633
          setWebData(res[0].data.optionalLayer.layers);
634 635 636 637 638
          if (arr.indexOf(true) == -1) {
            arr[arr.length - 1] = true;
            setWebStatus(arr);
            onChangeCheck1(
              '',
639
              res[0].data.optionalLayer.layers[arr.length - 1],
640 641 642 643 644 645
              arr.length - 1,
              arr,
            );
          } else {
            setWebStatus(arr);
          }
646 647 648 649 650 651 652
        }
        setCheckLoading(false);
      })
      .catch(e => {
        setCheckLoading(false);
      });
  };
653

654
  return (
655
    <div className={styles.solutionContainer}>
656
      <Spin tip="loading..." spinning={checkLoading}>
657
        <div style={{ height: 'calc(100vh - 150px)', width: '100%', overflow: 'scroll' }}>
658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673
          <Divider orientation="left">
            <div className={styles.divider}>
              {' '}
              Web{' '}
              <PlusOutlined
                onClick={() => {
                  addType('add');
                }}
                className={styles.dividerIcon}
              />
            </div>
          </Divider>
          <Table
            columns={columns}
            dataSource={webData}
            bordered
674
            // style={{ height: 'calc(100vh - 610px)' }}
675
            pagination={false}
676
            rowKey="schemename"
677
            scroll={{ y: 250 }}
678 679
          />

680 681
          <Divider orientation="left">
            <div className={styles.divider}>
682
              Moblie{' '}
683 684 685 686 687 688 689 690 691 692 693 694 695
              <PlusOutlined
                onClick={() => {
                  addType('addHand');
                }}
                className={styles.dividerIcon}
              />
            </div>{' '}
          </Divider>
          <Table
            columns={columns1}
            dataSource={handData}
            bordered
            rowKey="schemename"
696
            scroll={{ y: 250 }}
697
            // style={{ height: 'calc(100vh - 610px)' }}
698
            pagination={false}
699 700 701 702 703 704 705 706 707 708 709
          />
        </div>
      </Spin>
      <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        formObj={formObj}
        listData={schemename}
      />
710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727
      {/* <VisibleRoleModal
        visible={addVisible}
        onCancel={() => setAddVisible(false)}
        onSubmit={onPushSubmit}
        title="关联角色"
        initValues={checkValue}
        tree={tree}
        leafs={leafs}
      /> */}
      <RoleModal
        selectValue={checkValue.toString()}
        visible={addVisible}
        rolCallBack={roleList => rolCallBack(roleList)}
        onCancel={() => {
          setAddVisible(false);
        }}
      />
    </div>
728 729 730
  );
};
export default VectorData;