WebDic.jsx 42.5 KB
Newer Older
1
/* eslint-disable operator-assignment */
2 3
/* eslint-disable no-else-return */
/* eslint-disable no-undef */
4
/* eslint-disable no-shadow */
5 6
import React, { useState, useEffect } from 'react';
import {
7 8 9 10 11 12 13 14 15 16 17 18 19 20
  Table,
  Tooltip,
  Spin,
  Modal,
  Form,
  Input,
  Space,
  Popconfirm,
  notification,
  message,
  Row,
  Col,
  Button,
  Upload,
21
} from 'antd';
22 23 24 25 26 27 28 29 30 31
import {
  EditTwoTone,
  DeleteOutlined,
  PlusSquareFilled,
  MinusCircleOutlined,
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  SyncOutlined,
} from '@ant-design/icons';
32

33 34 35 36 37 38 39 40 41
import {
  GetDataDictionaryList,
  EditDataDictionary,
  AddDataDictionary,
  DeleteDataDictionary,
  AddDataDictionaryList,
  SearchDataDictionaryList,
  DataDictionaryChangeOrder,
} from '@/services/dataCenter/api';
42
import styles from './WebDic.less';
43

邓超's avatar
邓超 committed
44
import { GetMetaData } from '@/services/gis/gis';
45
import DragTable from '@/components/DragTable/DragTable';
46
import ImportModal from './importModal';
47 48

const WebDic = () => {
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
  const [loading, setLoading] = useState(false);
  const [level, setLevel] = useState(0); // 设置级别,一级1,二级2,添加条目时使用
  const [data, setData] = useState([]); // 一级条目数据
  const [subData, setSubData] = useState([]); // 二级条目数据
  const [searchData, setSearchData] = useState([]); // 搜索框表格数据
  const [first, setFirst] = useState(true); // 是否第一次加载
  const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级,修改/删除时设置
  const [twoSelectColor, setTwoSelectColor] = useState({});
  const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置
  const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID,添加二级条目时使用
  const [addVisible, setAddVisible] = useState(false); // 添加二级条目
  const [addVisible1, setAddVisible1] = useState(false); // 添加一级条目
  const [addForm] = Form.useForm();
  const [editVisible, setEditVisible] = useState(false); // 编辑二级条目
  const [editVisible1, setEditVisible1] = useState(false); // 编辑一级条目
  const [editForm] = Form.useForm();
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [files, setFiles] = useState('');
  const [flag, setFlag] = useState(0);
  const [flag1, setFlag1] = useState(0); // 搜索框数据是否刷新
  const [isloading, setIsloading] = useState(false);
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
72

73
  const [InPutVisible, setInPutVisible] = useState(false);
74 75 76
  const [importVisible, setImportVisible] = useState(false);
  const [name, setName] = useState('');
  const [keepName, setKeepName] = useState('');
皮倩雯's avatar
皮倩雯 committed
77

78 79 80
  const columns = [
    {
      title: () => <span className={styles.font}>序号</span>,
81 82
      key: 'id ',
      dataIndex: 'id',
83 84 85 86 87 88 89 90 91 92 93 94
      render: (text, record, index) => (
        <Space>
          <span>{index + 1}</span>
        </Space>
      ),
      width: 60,
      align: 'center',
    },
    {
      title: () => <span className={styles.font}>名称</span>,
      dataIndex: 'nodeName',
      key: 'nodeName',
95 96 97 98 99 100 101 102 103
      onCell: () => ({
        style: {
          maxWidth: 350,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'auto',
        },
      }),
104 105 106 107 108 109
      // render: item => searchStyle(item),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {searchStyle(record)}
        </Tooltip>
      ),
110 111 112 113 114 115
    },
    {
      title: () => <span className={styles.font}>操作</span>,
      key: 'action',
      width: 100,
      align: 'center',
116 117 118 119 120
      onCell: () => ({
        style: {
          cursor: '	auto',
        },
      }),
121 122 123 124 125 126 127
      render: record => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
128
                  setSelectColor(record.nodeID);
129
                }
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
                setEditVisible1(true);
                editForm.setFieldsValue({
                  nodeName: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <div onClick={e => e.stopPropagation()}>
            <Tooltip title="删除">
              <Popconfirm
                title="是否确认删除该数据,删除一级目录数据会将其二级目录子数据一起删除?"
                okText="确认"
                cancelText="取消"
145
                onConfirm={submitDeleteOne}
146 147 148 149
              >
                <DeleteOutlined
                  onClick={() => {
                    setSelect(record);
150 151 152
                    // if (record.parentID === '-1') {
                    //   setSelectColor(record);
                    // }
153 154 155 156 157 158 159 160 161 162 163 164 165 166
                  }}
                  style={{
                    fontSize: '16px',
                    margin: '0px 10px',
                    color: '#e86060',
                  }}
                />
              </Popconfirm>
            </Tooltip>
          </div>
        </Space>
      ),
    },
  ];
167

168 169 170
  const columns1 = [
    {
      title: () => <span className={styles.font}>序号</span>,
171 172
      dataIndex: 'ID',
      key: 'ID',
173 174
      width: 60,
      align: 'center',
175
      // className: 'column',
176 177 178 179 180 181 182 183 184 185
      render: (text, record, index) => (
        <Space>
          <span>{index + 1}</span>
        </Space>
      ),
    },
    {
      title: () => <span className={styles.font}>名称</span>,
      dataIndex: 'nodeName',
      key: 'nodeName',
186
      // className: 'column',
187 188 189 190 191 192
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
193
          cursor: 'auto',
194 195 196 197 198 199 200
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
201 202 203 204 205
    },
    {
      title: () => <span className={styles.font}></span>,
      dataIndex: 'nodeValue',
      key: 'nodeValue',
206
      // width: 400,
207
      // className: 'column',
208 209 210 211 212 213
      onCell: () => ({
        style: {
          maxWidth: 300,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
214
          cursor: 'auto',
215 216
        },
      }),
217 218 219
      render: record => {
        if (!record) {
          return '-';
220
        }
221 222 223 224 225
        return (
          <Tooltip placement="topLeft" title={record}>
            {record}
          </Tooltip>
        );
226 227 228 229 230 231
      },
    },
    {
      title: () => <span className={styles.font}>操作</span>,
      key: 'action',
      width: 100,
232
      // className: 'column',
233
      align: 'center',
234 235
      onCell: () => ({
        style: {
236
          cursor: 'auto',
237 238
        },
      }),
239 240 241 242 243 244 245
      render: record => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
246
                  setSelectColor(record.nodeID);
247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268
                }
                setEditVisible(true);
                editForm.setFieldsValue({
                  nodeName: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <div onClick={e => e.stopPropagation()}>
            <Tooltip title="删除">
              <Popconfirm
                title="是否删除该数据?"
                okText="确认"
                cancelText="取消"
                onConfirm={submitDelete}
              >
                <DeleteOutlined
                  onClick={() => {
                    setSelect(record);
                    if (record.parentID === '-1') {
269
                      setSelectColor(record.nodeID);
270 271 272 273 274 275 276 277 278 279 280 281 282 283 284
                    }
                  }}
                  style={{
                    fontSize: '16px',
                    margin: '0px 10px',
                    color: '#e86060',
                  }}
                />
              </Popconfirm>
            </Tooltip>
          </div>
        </Space>
      ),
    },
  ];
285

286 287 288 289
  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
290
      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
291 292
    } else {
      n = val;
293
    }
294 295
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };
296

297 298 299
  const setRowClassName = nodeID => {
    return nodeID == selectColor ? styles.clickRowStyle : '';
  };
300

301 302
  const setRowClassName1 = record =>
    record.nodeID === twoSelectColor.nodeID ? styles.clickRowStyle : '';
皮倩雯's avatar
皮倩雯 committed
303

304 305 306 307
  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };
皮倩雯's avatar
皮倩雯 committed
308

309 310 311
  useEffect(() => {
    getData(null); // 首次加载可以为空
  }, [flag]);
312

313 314 315 316
  // const setOd = e => {
  //     setOrderTable(e)
  //     setFgg(fgg + 1)
  // }
317

318 319 320 321
  // const setOd1 = e => {
  //     setOrderTable1(e)
  //     setFgg(fgg + 1)
  // }
皮倩雯's avatar
皮倩雯 committed
322

323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
  // useEffect(() => {
  //     setOrderTable(data);
  //     setOrderTable1(subData);
  // }, [fgg]);
  // 根据orderTable值改变flowIDs
  useEffect(() => {
    let ids = '';
    data.forEach((item, index) => {
      if (index === data.length - 1) {
        ids += `${item.nodeID}`;
      } else {
        ids += `${item.nodeID},`;
      }
    });
    let bb = ids.split(',');
    setLoading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setLoading(false);
    });
  }, [data]);
  useEffect(() => {
    let ids = '';
    if (subData !== '') {
      subData.forEach((item, index) => {
        if (index === subData.length - 1) {
          ids += `${item.nodeID}`;
        } else {
          ids += `${item.nodeID},`;
皮倩雯's avatar
皮倩雯 committed
351
        }
352
      });
皮倩雯's avatar
皮倩雯 committed
353
    }
354 355 356 357 358 359
    let bb = ids.split(',');
    setIsloading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setIsloading(false);
    });
  }, [subData]);
360 361 362 363 364 365

  // useEffect(() => {
  //   console.log(selectColor);
  //   console.log(data);
  //   console.log(data.find(i => i.nodeID == selectColor));
  // }, [selectColor]);
366 367 368 369 370 371 372 373 374 375 376 377 378 379
  // 根据父节点nodeID(即parentID)获取子节点数据,一级条目parentID = -1
  const getData = value => {
    isLoadingShow(value, true);
    GetDataDictionaryList({ nodeID: value }).then(resnew => {
      if (resnew.code === 0) {
        // if (resnew.data.length > 0) {
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
        }
        if (value === null || value === '-1') {
380
          console.log(123);
381
          setData(res);
382
          console.log(first);
383
          // 是否首次加载
384 385
          if (first) {
            setSelect(res[0]); // 默认当前选中一级条目第一条
386
            setSelectColor(res[0].nodeID);
387 388
            setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
            setFirst(false);
389
            console.log(res[0].nodeName);
390
            setName(res[0].nodeName);
391
            getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目
392 393
          } else {
            console.log(selectColor);
394 395 396 397 398 399 400 401 402 403 404 405 406 407 408
          }
        } else if (value) {
          setSubData(res); // 设置二级条目,res为空[]时也要设置
          // setOd1(res)
        }
        isLoadingShow(value, false);
        // } else {
        //     console.log(3)
        //     isLoadingShow(value, false)
        // }
      } else {
        isLoadingShow(value, false);
        notification.error({
          message: '获取失败',
          description: resnew.msg,
409
        });
410 411 412 413 414 415 416 417 418 419
      }
    });
  };

  // eslint-disable-next-line no-shadow
  const isLoadingShow = (value, data) => {
    if (!value || value === -1) {
      setLoading(data);
    } else {
      setIsloading(data);
420
    }
421 422 423 424 425 426 427 428 429 430 431 432
  };
  // const onSearch = () => {
  //     setSearchVisible(true)
  //     setFlag1(1)
  // }
  // const onSearch = () => {
  //   history.push({
  //     pathname: '/dataCenter/dictionary',
  //   });
  // };
  // 搜索
  const sumbitSearch = () => {
433
    console.log(121212);
434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451
    SearchDataDictionaryList({ key: searchWord }).then(res => {
      if (res.code === 0) {
        setSearchData(res.data);
      }
      // else {
      //     notification.error({
      //         message: '提交失败',
      //         description: res.message,
      //     })
      // }
    });
  };
  // const resetSearch = () => {
  //   setFlag1(0);
  //   setSearchVisible(false);
  //   setSearchWord(''); // 搜索框置空
  //   setSearchData([]);
  // };
452

453 454 455 456 457 458 459 460 461 462 463 464 465 466 467
  // 上传
  // const submitInPut = () => {
  //     ImportDataDictionary({ file: files }).then((res) => {
  //         if (res.code === 0) {
  //             notification.success({
  //                 message: '执行成功',
  //             });
  //         } else {
  //             notification.error({
  //                 message: '执行失败',
  //                 description: res.message,
  //             })
  //         }
  //     })
  // }
468

469 470 471 472 473 474 475 476 477 478 479
  // 导出
  // const submitOutPut = () => {
  //     ExportDataDictionary().then((res) => {
  //         notification.success({
  //             message: '执行成功',
  //         });
  //     })
  // }
  // const inPutOutPut = () => {
  //     setInPutOutPutVisible(true);
  // }
480

481 482 483
  const setItem = value => {
    setLevel(value);
    if (value === 1) {
484
      setSearchWord('');
485 486 487
      setAddVisible1(true);
    }
    if (value === 2) {
488
      if (name == '') {
489
        notification.warning({
490 491 492 493 494
          description: '请先选择一级条目',
        });
      } else {
        setAddVisible(true);
      }
495
    }
496 497
    addForm.resetFields();
  };
498

499 500
  // 添加二级条目
  const submitAdd = value => {
501
    console.log(value);
502 503 504 505
    const nodeName1 = addForm.getFieldsValue();
    const nodeName = addForm.getFieldsValue().nodeName1;
    const nodeValue = addForm.getFieldsValue().nodeValue1;
    let arr = [];
506
    console.log(nodeName1);
507 508 509 510 511 512 513 514 515
    let result = nodeName1.users;
    if (result) {
      // eslint-disable-next-line array-callback-return
      result.map((item, index) => {
        if (item) {
          arr.push({
            nodeName: item.nodeName,
            nodeValue: item.nodeValue,
            parentID: Number(value),
516
          });
517
        }
518
      });
519
    }
520 521 522 523 524 525 526 527 528 529 530 531 532 533 534
    arr.unshift({ nodeName, nodeValue, parentID: Number(value) });
    AddDataDictionaryList([...arr]).then(res => {
      if (res.code === 0) {
        setAddVisible(false);
        getData(value);
        notification.success({
          message: '提交成功',
        });
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
535 536 537 538 539 540 541 542 543 544 545
  };
  // 添加一级条目
  const submitAdd1 = value => {
    const nodeName = addForm.getFieldValue('nodeName');
    AddDataDictionary({
      nodeID: value,
      nodeName,
      nodeValue: '-',
    }).then(res => {
      console.log(res.msg);
      if (res.code === 0) {
546 547 548 549
        console.log(res.data);
        setSelectColor(res.data);
        setSelectID(res.data);
        setRowClassName(res.data);
550
        setAddVisible1(false);
551
        setSubData([]);
552
        getData(null);
553
        setFlag1(0);
554 555
        notification.success({
          message: '提交成功',
556
        });
557
        setName(nodeName);
558 559 560 561 562 563 564 565
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };
566

567 568 569 570 571 572 573 574 575 576 577 578
  // 修改
  const submitEdit = () => {
    const nodeName = editForm.getFieldValue('nodeName');
    const nodeValue = editForm.getFieldValue('nodeValue');
    if (nodeName) {
      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName,
        nodeValue,
      }).then(res => {
        if (res.code === 0) {
          setEditVisible(false);
579

580
          getData(select.parentID === '-1' ? null : select.parentID);
581

582 583 584 585
          notification.success({
            message: '提交成功',
          });
          if (flag1 === 1) {
586 587
            // sumbitSearch();
            getData(null);
588
          }
589
        } else {
590 591 592 593
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
594
        }
595 596 597 598 599 600
      });
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
      });
601
    }
602 603 604 605 606 607 608 609 610 611
  };
  const submitEdit1 = () => {
    const nodeName = editForm.getFieldValue('nodeName');
    if (nodeName) {
      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName,
        nodeValue: '-',
      }).then(res => {
        if (res.code === 0) {
612
          setName(nodeName);
613 614 615 616 617 618 619 620 621
          setEditVisible1(false);
          if (flag1 === 0) {
            getData(select.parentID === '-1' ? null : select.parentID);
          } else {
            submitSearchUser();
          }
          notification.success({
            message: '提交成功',
          });
622 623 624 625
          // if (flag1 === 1) {
          //   // sumbitSearch();
          //   getData(null);
          // }
626
        } else {
627 628 629 630
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
631
        }
632 633 634 635 636 637
      });
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
      });
638
    }
639 640 641 642 643 644 645 646 647 648 649 650 651 652
  };
  // 删除
  const submitDelete = () => {
    DeleteDataDictionary({
      nodeID: select.nodeID,
    })
      .then(res => {
        if (res.code === 0) {
          if (flag1 === 0) {
            getData(select.parentID === '-1' ? null : select.parentID);
          } else {
            submitSearchUser();
          }
          if (select.parentID === '-1') {
653 654
            if (select.nodeID === selectID) {
              setSelectID('');
655
              setSubData([]);
656
            }
657
          }
658

659 660 661 662 663 664 665 666 667 668 669 670 671 672
          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726
  // 删除
  const submitDeleteOne = () => {
    DeleteDataDictionary({
      nodeID: select.nodeID,
    })
      .then(res => {
        if (res.code === 0) {
          if (select.nodeID == selectColor) {
            if (flag1 === 0) {
              // getData(null);
              GetDataDictionaryList({ nodeID: null }).then(resnew => {
                if (resnew.code === 0) {
                  let res = resnew.data;
                  setData(res);
                  setSelect(res[0]); // 默认当前选中一级条目第一条
                  setSelectColor(res[0].nodeID);
                  setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
                  getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目
                  // setSubData(res); // 设置二级条目,res为空[]时也要设置
                  // isLoadingShow(value, false);
                  setName(res[0].nodeName);
                  console.log(res[0].nodeName);
                } else {
                  isLoadingShow(value, false);
                  notification.error({
                    message: '获取失败',
                    description: resnew.msg,
                  });
                }
              });
            } else {
              submitSearchUser(1);
            }
          } else {
            if (flag1 === 0) {
              getData(null);
            } else {
              submitSearchUser();
            }
          }
          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
727 728 729 730 731 732 733
  const pagenation = {
    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
    pageSizeOptions: [10, 20, 50, 100],
    defaultPageSize: '20',
    // showQuickJumper: true,
    showSizeChanger: true,
  };
734

735 736 737 738 739 740
  const props = {
    name: 'file',
    action: `/PandaOMS/OMS/DataManger/ImportDataDictionary`,
    headers: {
      authorization: 'authorization-text',
    },
741
    accept: 'application/vnd.ms-excel',
742
    beforeUpload: file => {
743
      setFiles(file.file);
744 745
    },
    onChange(info) {
746 747
      let data;
      let mse;
748 749
      setFiles(info.file);
      if (info.file.status !== 'uploading') {
750
        // eslint-disable-next-line array-callback-return
751 752 753 754 755
        info.fileList.map(item => {
          data = item.response.code;
          mse = item.response.msg;
        });
        if (data === 0) {
756 757 758
          notification.success({
            message: '导入成功',
          });
759 760 761 762 763 764 765
          setFirst(true);
        } else {
          notification.error({
            message: '导入失败',
            description: mse,
          });
        }
766 767 768
      }
    },
  };
皮倩雯's avatar
皮倩雯 committed
769

770 771 772 773 774
  const input1 = () => {
    setFlag(flag + 1);
    setInPutVisible(false);
  };
  const submitInput = () => {
775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809
    console.log(111);
    setImportVisible(true);
    // setInPutVisible(true);
  };

  const submitSearchUser = aa => {
    setFlag1(1);
    console.log(searchWord);
    SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
      if (res.code === 0) {
        setShowSearchStyle(true);
        if (res.data.length === 0) {
          setData(res.data);
          setSubData([]);
          setName('');
        } else {
          setData(res.data);
          // 搜索
          if (aa == 1) {
            setSelect(res.data[0]);
            setName(res.data[0].nodeName);
            setSelectColor(res.data[0].nodeID);
            setSelectID(res.data[0].nodeID);
            getData(res.data[0].nodeID);
          } else {
            getData(selectColor);
          }
        }
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
810
  };
811

812
  const submitSearchUserAll = aa => {
813
    setFlag1(1);
814
    console.log(searchWord);
815 816 817 818 819 820
    SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
      if (res.code === 0) {
        setShowSearchStyle(true);
        if (res.data.length === 0) {
          setData(res.data);
          setSubData([]);
821
          setName('');
822 823
        } else {
          setData(res.data);
824 825 826 827 828
          // 搜索
          setName(res.data[0].nodeName);
          setSelect(res.data[0]);
          setSelectColor(res.data[0].nodeID);
          setSelectID(res.data[0].nodeID);
829 830 831 832 833 834
          getData(res.data[0].nodeID);
        }
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
835
        });
836 837 838
      }
    });
  };
839

840 841 842 843 844 845 846 847 848 849 850 851 852 853 854
  const handleReset = () => {
    setFlag1(0);
    setSearchWord('');
    setLoading(true);
    setIsloading(true);
    GetDataDictionaryList({ nodeID: null }).then(resnew => {
      if (resnew.code === 0) {
        setLoading(false);
        setIsloading(false);
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
855
        }
856 857
        setData(res);
        setSelect(res[0]); // 默认当前选中一级条目第一条
858 859
        setSelectColor(res[0].nodeID);
        setName(res[0].nodeName);
860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879
        setSelectID(res[0].nodeID); // 设置选中的一级条目ID,用于添加二级条目
        getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环,靠nodeID获取子节点二级条目
        setShowSearchStyle(false);
      }
      setLoading(false);
      setIsloading(false);
    });
  };

  // 拖拽回调函数
  const dragCallBack = value => {
    if (value) {
      setData(value);
    }
  };
  const dragCallBack1 = e => {
    if (e) {
      setSubData(e);
    }
  };
880

881
  const onImportSubmit = () => {
882
    setFirst(true);
883 884 885 886 887 888 889 890 891 892
    setImportVisible(false);
    setFlag(flag + 1);
  };

  const title = (
    <>
      <span>添加二级条目</span>
      <span style={{ color: 'rgb(24, 144, 255)' }}>{name}</span>
    </>
  );
893 894 895 896 897
  return (
    <div className={styles.WebDic}>
      <Spin spinning={loading} tip="loading...">
        <div className={styles.item}>
          {/* <span>
898
                        <SearchOutlined onClick={() => onSearch()} /><span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: "40px", cursor: "pointer" }} onClick={() => onSearch()}>查找条目</span>
899
                    </span> */}
900 901 902 903
          <span>
            <Search
              style={{ width: 260, marginRight: '20px', marginLeft: '10px' }}
              placeholder="搜索一级条目数据"
904
              onSearch={submitSearchUserAll}
905 906 907 908
              onChange={e => handleSearch(e)}
              enterButton
              value={searchWord}
            />
909
            <Button style={{ marginRight: '40px' }} icon={<SyncOutlined />} onClick={handleReset}>
910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939
              重置
            </Button>
          </span>
          <span>
            <DownloadOutlined />
            <span
              style={{
                verticalAlign: 'middle',
                marginLeft: '6px',
                marginRight: '40px',
                cursor: 'pointer',
              }}
            >
              <a
                style={{ color: 'rgba(0, 0, 0, 0.85)' }}
                href="/PandaOMS/OMS/DataManger/ExportDataDictionary"
              >
                导出数据
              </a>
            </span>
          </span>
          <span>
            <UploadOutlined />
            <span
              style={{
                verticalAlign: 'middle',
                marginLeft: '6px',
                marginRight: '40px',
                cursor: 'pointer',
              }}
940
            >
941
              <span style={{ color: 'rgba(0, 0, 0, 0.85)' }} onClick={() => submitInput()}>
942 943 944 945 946 947 948 949 950 951
                导入数据
              </span>
            </span>
          </span>
        </div>
        <Row style={{ background: 'white' }}>
          <Col span={8} className={styles.left}>
            {/* 一级条目 表格 */}
            <DragTable
              size="small"
952 953
              ItemTypes="first"
              bordered
954 955 956 957
              rowKey={record => record.nodeID}
              columns={columns}
              dragCallBack={dragCallBack}
              className={styles.pab}
958 959 960 961 962 963 964 965 966 967
              dataSource={data}
              scroll={{ y: 'calc(100vh - 370px)' }}
              rowClassName={record => setRowClassName(record.nodeID)}
              onClick={record => {
                getData(record.nodeID);
                setSelect(record);
                setSelectColor(record.nodeID);
                setSelectID(record.nodeID);
                setName(record.nodeName);
              }}
968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983
              title={() => (
                <div>
                  <span>一级条目</span>
                  <Tooltip title="添加一级条目配置">
                    <PlusSquareFilled
                      onClick={() => setItem(1)}
                      style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        marginTop: '3px',
                        float: 'right',
                      }}
                    />
                  </Tooltip>
                </div>
              )}
皮倩雯's avatar
皮倩雯 committed
984
              pagination={false}
985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007
            />
          </Col>
          <Col span={16}>
            {/* 二级条目 表格 */}
            <Spin spinning={isloading} tip="loading...">
              <DragTable
                size="small"
                ItemTypes="second"
                bordered
                rowKey={record => record.nodeID}
                columns={columns1}
                dragCallBack={dragCallBack1}
                className={styles.tab}
                dataSource={subData}
                scroll={{ x: 'max-content', y: 'calc(100vh - 340px)' }}
                rowClassName={setRowClassName1}
                onClick={record => {
                  setSelect(record);
                  setTwoSelectColor(record);
                }}
                title={() => (
                  <div>
                    <span>二级条目</span>
1008 1009 1010
                    <span style={{ color: 'rgb(24, 144, 255)' }}>
                      <strong>{name}</strong>
                    </span>
1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023
                    <Tooltip title="添加二级条目配置">
                      <PlusSquareFilled
                        onClick={() => setItem(2)}
                        style={{
                          color: '#1890FF',
                          fontSize: '25px',
                          marginTop: '3px',
                          float: 'right',
                        }}
                      />
                    </Tooltip>
                  </div>
                )}
皮倩雯's avatar
皮倩雯 committed
1024
                pagination={false}
1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044
              />
            </Spin>
          </Col>
        </Row>
      </Spin>
      {/* 添加一级 */}
      <Modal
        title="添加一级条目"
        visible={addVisible1}
        width="500px"
        onOk={() => {
          submitAdd1('-1');
        }}
        onCancel={() => {
          setAddVisible1(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form autoComplete="off" form={addForm} labelCol={{ span: 3 }}>
1045
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
1046 1047 1048 1049 1050 1051
            <Input placeholder="请输入名称" style={{ width: '95%' }} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 添加二级 */}
      <Modal
1052
        title={title}
1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071
        visible={addVisible}
        width="500px"
        onOk={() => {
          submitAdd(selectID);
        }}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form autoComplete="off" form={addForm} labelCol={{ span: 7 }}>
          <Row>
            <Col span={11}>
              <Form.Item
                name="nodeName1"
                label="名称"
                rules={[
                  { required: true, message: '不能为空' },
1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113
                  // {
                  //   validator: (rule, value) => {
                  //     const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                  //     const nodeValue = addForm.getFieldsValue().nodeValue1;
                  //     let aa = 0;
                  //     subData.map(i => {
                  //       if (i.nodeName == nodeName && i.nodeValue == nodeValue) {
                  //         aa = aa + 1;
                  //       }
                  //     });
                  //     if (aa != 0) {
                  //       // eslint-disable-next-line prefer-promise-reject-errors
                  //       return Promise.reject('已存在相同名称与值的数据');
                  //     }
                  //     return Promise.resolve();
                  //   },
                  // },
                  // {
                  //   validator: (rule, value) => {
                  //     const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                  //     const nodeName1 = addForm.getFieldsValue();
                  //     let result = nodeName1.users;
                  //     let arr = [];
                  //     if (result) {
                  //       // eslint-disable-next-line array-callback-return
                  //       result.map(item => {
                  //         if (item) {
                  //           let a = item.nodeName;
                  //           if (a !== '') {
                  //             arr.push(a);
                  //           }
                  //         }
                  //       });
                  //     }
                  //     arr.unshift(nodeName);
                  //     if (new Set(arr).size !== arr.length) {
                  //       // eslint-disable-next-line prefer-promise-reject-errors
                  //       return Promise.reject('用户名重复');
                  //     }
                  //     return Promise.resolve();
                  //   },
                  // },
1114 1115 1116 1117 1118 1119
                ]}
              >
                <Input placeholder="请输入名称" />
              </Form.Item>
            </Col>
            <Col span={11}>
1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143
              <Form.Item
                name="nodeValue1"
                label="值"
                rules={[
                  { required: true, message: '不能为空' },
                  // {
                  //   validator: (rule, value) => {
                  //     const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                  //     const nodeValue = addForm.getFieldsValue().nodeValue1;
                  //     let aa = 0;
                  //     subData.map(i => {
                  //       if (i.nodeName == nodeName && i.nodeValue == nodeValue) {
                  //         aa = aa + 1;
                  //       }
                  //     });
                  //     if (aa != 0) {
                  //       // eslint-disable-next-line prefer-promise-reject-errors
                  //       return Promise.reject('已存在相同名称与值的数据');
                  //     }
                  //     return Promise.resolve();
                  //   },
                  // },
                ]}
              >
1144 1145 1146 1147 1148 1149 1150 1151 1152
                <Input placeholder="请输入值" />
              </Form.Item>
            </Col>
          </Row>
          <Form.List name="users">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }}>
1153
                    <Row>
1154 1155 1156 1157 1158 1159 1160 1161
                      <Col span={11}>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeName']}
                          label="名称"
                          fieldKey={[fieldKey, 'frist']}
                          rules={[
                            { required: true, message: '不能为空' },
1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206
                            // {
                            //   validator: (rule, value, callback) => {
                            //     const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                            //     const nodeName1 = addForm.getFieldsValue();
                            //     let result = nodeName1.users;
                            //     let arr = [];
                            //     // eslint-disable-next-line array-callback-return
                            //     result.map(item => {
                            //       if (item) {
                            //         let a = item.nodeName;
                            //         if (a !== '') {
                            //           arr.push(a);
                            //         }
                            //       }
                            //     });
                            //     if (nodeName !== undefined) {
                            //       arr.unshift(nodeName);
                            //     }
                            //     if (new Set(arr).size !== arr.length) {
                            //       arr = [...new Set(arr)];
                            //       callback('用户名重复');
                            //     }
                            //   },
                            // },
                            // {
                            //   validator: (rule, value) => {
                            //     const nodeName1 = addForm.getFieldsValue().nodeName; // 第一项的nodeName
                            //     const nodeValue1 = addForm.getFieldsValue().nodeValue;
                            //     const nodeNameAll = addForm.getFieldsValue();
                            //     console.log(nodeName1);
                            //     console.log(nodeValue1);
                            //     console.log(nodeNameAll);
                            //     let aa = 0;
                            //     subData.map(i => {
                            //       if (i.nodeName == nodeName1 && i.nodeValue == nodeValue1) {
                            //         aa = aa + 1;
                            //       }
                            //     });
                            //     if (aa != 0) {
                            //       // eslint-disable-next-line prefer-promise-reject-errors
                            //       return Promise.reject('已存在相同名称与值的数据');
                            //     }
                            //     return Promise.resolve();
                            //   },
                            // },
1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217
                          ]}
                        >
                          <Input placeholder="请输入名称" />
                        </Form.Item>
                      </Col>
                      <Col span={11}>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeValue']}
                          label="值"
                          fieldKey={[fieldKey, 'last']}
1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239
                          rules={[
                            { required: true, message: '不能为空' },
                            // {
                            //   validator: (rule, value) => {
                            //     const nodeName1 = addForm.getFieldsValue().nodeName; // 第一项的nodeName
                            //     const nodeValue1 = addForm.getFieldsValue().nodeValue;
                            //     console.log(nodeName1);
                            //     console.log(nodeValue1);
                            //     let aa = 0;
                            //     subData.map(i => {
                            //       if (i.nodeName == nodeName1 && i.nodeValue == nodeValue1) {
                            //         aa = aa + 1;
                            //       }
                            //     });
                            //     if (aa != 0) {
                            //       // eslint-disable-next-line prefer-promise-reject-errors
                            //       return Promise.reject('已存在相同名称与值的数据');
                            //     }
                            //     return Promise.resolve();
                            //   },
                            // },
                          ]}
1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282
                        >
                          <Input placeholder="请输入值" />
                        </Form.Item>
                      </Col>
                      <Col span={2}>
                        <Tooltip title="移除条目项">
                          <MinusCircleOutlined
                            onClick={() => remove(name)}
                            style={{ marginLeft: '20px', fontSize: '20px' }}
                          />
                        </Tooltip>
                      </Col>
                    </Row>
                  </Space>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                    style={{ width: '353px', marginLeft: '61px' }}
                  >
                    新增条目项
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form>
      </Modal>
      {/* 修改一级条目 */}
      <Modal
        title="修改一级条目"
        visible={editVisible1}
        onOk={submitEdit1}
        onCancel={() => {
          setEditVisible1(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
1283
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
1284 1285 1286 1287 1288
            <Input placeholder="请输入名称" style={{ width: '90%' }} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 修改二级条目 */}
1289

1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300
      <Modal
        title="修改二级条目"
        visible={editVisible}
        onOk={submitEdit}
        onCancel={() => {
          setEditVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
1301
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
1302 1303 1304 1305 1306 1307 1308
            <Input placeholder="请输入名称" style={{ width: '90%' }} />
          </Form.Item>
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" style={{ width: '90%' }} />
          </Form.Item>
        </Form>
      </Modal>
1309

1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348
      {/* <Modal
        title="查找条目"
        visible={searchVisible}
        width="700px"
        onOk={resetSearch}
        onCancel={() => {
          setSearchVisible(false);
          setSearchWord(''); // 搜索框置空
          setSearchData([]);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Search
          style={{ width: 470, marginBottom: 25 }}
          placeholder="输入关键字"
          onSearch={sumbitSearch}
          onChange={e => handleSearch(e)}
          enterButton
          value={searchWord}
        />
        <Table
          size="small"
          bordered
          key=""
          columns={columns2}
          dataSource={searchData}
          scroll={{ x: 'max-content', y: 'calc(100vh - 700px)' }}
          rowClassName={setRowClassName}
          onRow={record => ({
            onClick: () => {
              setSelect(record);
              setSelectColor(record);
              setSelectID(record.nodeID);
            },
          })}
          pagination={pagenation}
        />
      </Modal> */}
1349
      {/* <Modal
1350 1351 1352
        title="导入数据"
        visible={InPutVisible}
        onOk={input1}
1353
        onCancel={input1}
1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366
        okText="确认"
        cancelText="取消"
      >
        <Upload {...props}>
          <UploadOutlined />
          <span
            style={{
              verticalAlign: 'middle',
              marginLeft: '6px',
              marginRight: '40px',
              cursor: 'pointer',
            }}
          >
1367
            <a style={{ color: 'rgb(24 144 255)' }}>请选择将要导入的数据文件(仅支持Excel文件)</a>
1368 1369
          </span>
        </Upload>
1370 1371 1372 1373 1374 1375
      </Modal> */}
      <ImportModal
        visible={importVisible}
        onCancel={() => setImportVisible(false)}
        callBackSubmit={onImportSubmit}
      />
1376 1377
    </div>
  );
1378 1379
};

1380
export default WebDic;