filedConfig.jsx 18.6 KB
Newer Older
1
/* eslint-disable no-shadow */
2
/* eslint-disable react/jsx-boolean-value */
涂伟's avatar
涂伟 committed
3
import React, { useState, useEffect, useRef } from 'react';
4 5 6 7 8 9 10 11 12 13 14 15
import {
  Form,
  Modal,
  Space,
  Table,
  Button,
  Popconfirm,
  Spin,
  notification,
  Tooltip,
  TreeSelect,
  Empty,
16 17
  Checkbox,
  Switch,
18
  Tag,
19
} from 'antd';
皮倩雯's avatar
皮倩雯 committed
20 21 22 23 24 25
import {
  EditOutlined,
  DeleteOutlined,
  SortDescendingOutlined,
  PlusSquareOutlined,
  RollbackOutlined,
26
  ConsoleSqlOutlined,
27
  EyeOutlined,
涂伟's avatar
涂伟 committed
28 29
  ArrowLeftOutlined,
  UploadOutlined,
30
  SnippetsOutlined,
皮倩雯's avatar
皮倩雯 committed
31
} from '@ant-design/icons';
32 33 34 35
import {
  reloadTableFields,
  removeFields,
  loadUnattachedTables,
皮倩雯's avatar
皮倩雯 committed
36
  LoadLedgers,
37
} from '@/services/tablemanager/tablemanager';
皮倩雯's avatar
皮倩雯 committed
38
import { FormDesigner } from 'panda-xform';
39
import { useHistory } from 'react-router-dom';
40
import FieldEditor from './fieldEditor';
41 42
import AffiliateAdd from '../components/Field/affiliateAdd';
import LoadGroup from '../components/Field/loadGroupNew';
43
import styles from './index.less';
涂伟's avatar
涂伟 committed
44 45
import clearSvg from '@/assets/font/omsfont/clear.svg';
// import PerviewPrase from './PerviewPrase';
46
import { LayerSetting } from '@/services/gis/gis';
47
const AddModal = props => {
皮倩雯's avatar
皮倩雯 committed
48 49
  const history = useHistory();
  const [allData, setAllData] = useState([]);
50 51
  const [treeData, setTreeData] = useState([]);
  const [keepTreeFirst, setKeepTreeFirst] = useState([]);
皮倩雯's avatar
皮倩雯 committed
52 53 54 55
  const [tableList, setTableList] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [treeLoading, setTreeLoading] = useState(false);
  const [formObj, setFormObj] = useState('');
涂伟's avatar
涂伟 committed
56
  const [formName, setFormName] = useState('');
皮倩雯's avatar
皮倩雯 committed
57 58 59 60 61 62 63 64 65
  const [flag, setFlag] = useState(0); // 弹窗类型
  const [isVisible, setIsVisible] = useState(false); // 弹窗
  const [isType, setIsType] = useState(''); // 弹窗类型
  const [itemData, setItemData] = useState({});
  const [select, setSelect] = useState([]);
  const [selectTableName, setSelectTableName] = useState({});
  const [pramFormObj, setPramFormObj] = useState({});
  const [visible, setVisible] = useState(false); // 弹窗
  const [type, setType] = useState(''); // 弹窗类型
66
  const [chooseLine, setChooseLine] = useState('');
67 68 69 70
  const { TreeNode } = TreeSelect;
  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
  const [selectTreeData, setSelectTreeData] = useState([]);
  const [selectDataFirst, setSelectDataFirst] = useState([]);
71
  const [multiOperate, setMultiOperate] = useState(true); // 是否禁用用户批量操作
邓超's avatar
邓超 committed
72
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选字段配置数,机构改变时重置
73
  const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 批量删除
74 75
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [selectGroup, setSelectGroup] = useState([]);
皮倩雯's avatar
皮倩雯 committed
76
  const [keepStandingBook, setKeepStandingBook] = useState([]);
77
  const [keepTreeData, setKeepTreeData] = useState([]);
78
  const [keepTree, setKeepTree] = useState([]); // 保存树字段名称
79
  const [perviewPrase, setPerViewPrase] = useState(false);
80
  const [tablesSchema, setTablesSchema] = useState(null); // 存储parseForm组件需要的数据格式
81

涂伟's avatar
涂伟 committed
82 83
  const formRef = useRef(null);

皮倩雯's avatar
皮倩雯 committed
84 85 86 87 88 89 90
  const getField = () => {
    loadUnattachedTables().then(res => {
      if (res.data.root && res.data.root.length) {
        setTableList(res.data.root);
      }
    });
  };
91

皮倩雯's avatar
皮倩雯 committed
92 93 94 95 96 97 98
  useEffect(() => {
    LoadLedgers().then(res => {
      if (res.code === 0) {
        let data = [];
        res.data.root.map(i => {
          data.push(i.name);
        });
99
        setKeepStandingBook(res.data.root);
皮倩雯's avatar
皮倩雯 committed
100 101
      }
    });
102 103 104 105 106 107 108 109 110 111 112 113 114 115
    LayerSetting({ client: 'sandbox' }).then(res => {
      let dataArea = res.data.find(i => i.layerType == 'PipenetLayer');
      console.log(res.data[0]);
      let ss = {
        layers: [dataArea],
      };
      let depart = { OID: 1017, code: '1-1016-1017', name: '管理员' };
      let userInfo = { OID: 1, fullName: '总经理', loginName: 'admin', depart };
      window.globalConfig = {
        ...window.globalConfig,
        mapsettings: ss,
        userInfo,
      };
    });
皮倩雯's avatar
皮倩雯 committed
116
  }, []);
117

皮倩雯's avatar
皮倩雯 committed
118
  useEffect(() => {
涂伟's avatar
涂伟 committed
119 120 121
    if (props.tableInfo.id) {
      setSelectTreeData(props.tableInfo.keepData);
      setSelectDataFirst(props.tableInfo.keepTreeFirst);
122
      if (treeSelectValue) {
123
        let ss = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
124
        setFormObj(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
涂伟's avatar
涂伟 committed
125
        setFormName(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
126 127 128 129 130
        reloadTableFields({
          tableName: treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')),
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
131
            console.log(res.data.root);
132 133 134 135 136 137
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
138 139
            console.log(arrlist);
            setKeepTree(arrlist);
140 141 142 143
            data.TableFieldNames = arrlist;
            data.TableName = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
            listArr.push(data);
            setKeepTreeData(listArr);
144 145 146 147 148 149 150 151
            let arr = formateArrDataA(res.data.root, 'group');
            let newArr = [];
            Object.keys(arr).map((item, index) => {
              newArr.push({ type: item, key: index, id: index });
            });
            setAllData(arr);
            let aa = [];
            let bb = [];
152 153 154 155

            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
156
            Object.keys(arr).forEach((item, index) => {
157 158 159 160 161
              console.log(arr[item]);
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
162
                i.showCss = props.tableInfo.template.tableStyle;
163 164 165 166 167 168 169
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
170
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
171
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
172 173
              bb.push(item);
            });
174 175
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
176
            list.showCss = props.tableInfo.template.tableStyle;
177
            console.log(list);
178 179 180 181 182 183 184 185 186

            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);
187

188 189
            console.log(arr);
            console.log(newArr);
190 191
            setKeepTreeFirst(bb);
            setTreeData(aa);
192
            setSelectGroup(newArr);
193 194 195 196 197
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      } else {
涂伟's avatar
涂伟 committed
198 199 200
        let ss = props.tableInfo.id;
        setFormObj(props.tableInfo.id);
        setFormName(props.tableInfo.name);
201
        reloadTableFields({
涂伟's avatar
涂伟 committed
202
          tableName: props.tableInfo.id,
203 204 205
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
206 207 208
            console.log(res.data.root);
            let result = {};
            // result.
209 210 211 212 213 214
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
215 216
            console.log(arrlist);
            setKeepTree(arrlist);
217
            data.TableFieldNames = arrlist;
涂伟's avatar
涂伟 committed
218
            data.TableName = props.tableInfo.id;
219 220
            listArr.push(data);
            setKeepTreeData(listArr);
221 222 223 224 225 226 227 228
            let arr = formateArrDataA(res.data.root, 'group');
            let newArr = [];
            Object.keys(arr).map((item, index) => {
              newArr.push({ type: item, key: index, id: index });
            });
            setAllData(arr);
            let aa = [];
            let bb = [];
229 230 231
            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
232
            Object.keys(arr).forEach((item, index) => {
233 234 235 236 237
              console.log(arr[item]);
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
238
                i.showCss = props.tableInfo.template.tableStyle;
239 240 241 242 243 244 245
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
246
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
247
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
248 249
              bb.push(item);
            });
250 251
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
252
            list.showCss = props.tableInfo.template.tableStyle;
253
            console.log(list);
254 255 256 257 258 259 260 261 262

            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);
263
            console.log(aa, 'aaaaaaaaaaaaa');
264 265 266
            console.log(arr);
            console.log(newArr);
            setSelectGroup(newArr);
267 268 269 270 271 272 273
            setKeepTreeFirst(bb);
            setTreeData(aa);
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      }
皮倩雯's avatar
皮倩雯 committed
274 275
      setTreeLoading(true);
      getField();
276
    }
277
  }, [flag, props.tableInfo]);
皮倩雯's avatar
皮倩雯 committed
278

皮倩雯's avatar
皮倩雯 committed
279 280 281 282
  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
shaoan123's avatar
shaoan123 committed
283
    }
皮倩雯's avatar
皮倩雯 committed
284 285 286
    if (!name) {
      return '请传入对象属性';
    }
287
    // 先获取一下这个数组中有多少个"name"
皮倩雯's avatar
皮倩雯 committed
288
    let nameArr = [];
289
    // eslint-disable-next-line no-restricted-syntax
皮倩雯's avatar
皮倩雯 committed
290 291 292 293 294
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
295
    // 新建一个包含多个list的结果对象
皮倩雯's avatar
皮倩雯 committed
296 297 298 299 300 301 302 303
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
shaoan123's avatar
shaoan123 committed
304
        }
皮倩雯's avatar
皮倩雯 committed
305
      }
306
    }
皮倩雯's avatar
皮倩雯 committed
307 308 309 310 311 312 313
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
314
    }
皮倩雯's avatar
皮倩雯 committed
315 316
    return tempObj;
  };
皮倩雯's avatar
皮倩雯 committed
317

皮倩雯's avatar
皮倩雯 committed
318 319
  // 返回上一级
  const back = () => {
涂伟's avatar
涂伟 committed
320
    console.log(props.tableInfo);
邓超's avatar
邓超 committed
321 322 323 324 325 326 327 328
    let {
      template,
      tableScroll,
      keepValue,
      pickIndex,
      groupArr,
      searchValue,
      select,
涂伟's avatar
涂伟 committed
329
    } = props.tableInfo;
330
    console.log(keepValue);
邓超's avatar
邓超 committed
331
    console.log(pickIndex, groupArr, 'back');
皮倩雯's avatar
皮倩雯 committed
332
    history.push({
333
      pathname: '/biz/account/table',
334 335 336
      query: {
        template,
        tableScroll,
邓超's avatar
邓超 committed
337 338
        backIndex: pickIndex,
        group: groupArr,
339
        keepValue,
邓超's avatar
邓超 committed
340 341
        searchV: searchValue,
        selectValue: select,
342
      },
皮倩雯's avatar
皮倩雯 committed
343 344
    });
  };
345

346
  const treeSelectOnchange = e => {
347 348 349 350 351 352 353 354
    console.log(e);
    if (e) {
      setTreeLoading(true);
      console.log('切换');
      setSelectedRowKeys([]);
      setMultiOperate(true);
      setTreeSelectValue(e);
      console.log(e.substring(0, e.lastIndexOf('@')));
355
      let ss = e.substring(0, e.lastIndexOf('@'));
356 357 358 359 360 361
      setFormObj(e.substring(0, e.lastIndexOf('@')));
      reloadTableFields({
        tableName: e.substring(0, e.lastIndexOf('@')),
      }).then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok') {
362 363 364 365 366 367
          let arrlist = [];
          let data = {};
          let listArr = [];
          res.data.root.map(i => {
            arrlist.push(i.name);
          });
368 369
          console.log(arrlist);
          setKeepTree(arrlist);
370 371 372 373 374
          data.TableFieldNames = arrlist;
          data.TableName = e.substring(0, e.lastIndexOf('@'));
          listArr.push(data);
          setKeepTreeData(listArr);
          console.log(res.data.root);
375 376 377 378 379 380 381 382 383 384
          let arr = formateArrDataA(res.data.root, 'group');
          let newArr = [];
          Object.keys(arr).map((item, index) => {
            newArr.push({ type: item, key: index, id: index });
          });
          setAllData(arr);
          setSelectGroup(newArr);
          setTableData(newArr);
          let aa = [];
          let bb = [];
385 386 387
          let list = {};
          let arrdata = [];
          let flowNodeMeta = {};
388
          Object.keys(arr).forEach((item, index) => {
389 390 391 392
            arr[item].map(i => {
              i.fieldName = i.name;
              i.configInfo = i.config;
              i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
393
              i.showCss = props.tableInfo.template.tableStyle;
394 395 396 397 398 399 400
              i.tableName = ss;
              i.uiGroup = item;
              i.readOnly = i.readOnly == '是' ? 1 : 0;
              i.type = '文本';
              i.visible = 1;
              i.colSpan = i.rowSpan;
            });
401
            aa.push({ name: item, key: index, ID: index, children: arr[item] });
402
            arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
403 404
            bb.push(item);
          });
405 406
          flowNodeMeta.groups = arrdata;
          list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
407
          list.showCss = props.tableInfo.template.tableStyle;
408
          console.log(list);
409 410 411 412 413 414 415 416 417

          let tablesSchema = {
            child: {},
            groups: list.flowNodeMeta.groups,
            values: [],
            modules: [],
            relationForm: {},
          };
          setTablesSchema(tablesSchema);
418 419 420 421 422 423 424 425
          setKeepTreeFirst(bb);
          setTreeData(aa);
          setSelect(newArr);
        }
      });
    } else {
      setTreeSelectValue('');
    }
426 427 428 429 430 431 432 433
  };
  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    return haveChildren ? (
      <TreeNode value={org.name} title={org.name} disabled>
        {org.children.map(item => mapTree(item))}
      </TreeNode>
    ) : (
434
      <TreeNode
皮倩雯's avatar
皮倩雯 committed
435
        value={`${org.tableName}@${org.groupName}|${org.tableID}`}
436
        title={org.tableName}
皮倩雯's avatar
皮倩雯 committed
437
        key={`${org.tableName}@${org.groupName}|${org.tableID}`}
438
      />
439 440
    );
  };
441

皮倩雯's avatar
皮倩雯 committed
442 443 444 445 446 447 448 449 450 451 452
  // 附加
  const add = record => {
    if (treeSelectValue) {
      selectTreeData.map(i => {
        i.children.map(j => {
          if (j.tableName == treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'))) {
            setPramFormObj(j);
          }
        });
      });
    } else {
涂伟's avatar
涂伟 committed
453
      setPramFormObj(props.tableInfo.template);
皮倩雯's avatar
皮倩雯 committed
454 455 456
    }
    setType('affiliateAdd');
    setVisible(true);
457
  };
458

皮倩雯's avatar
皮倩雯 committed
459 460 461
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
462
  };
皮倩雯's avatar
皮倩雯 committed
463
  return (
464 465
    <Modal
      title={
涂伟's avatar
涂伟 committed
466 467 468 469 470
        <div className={styles.config}>
          {/* <ArrowLeftOutlined onClick={back} className={styles.goBack} /> */}
          <div className={styles.title}> 展示名称 【{formName}</div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            {/* <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489
          <div style={{ width: '350px', marginRight: '10px' }}>
            <TreeSelect
              showSearch
              style={{ width: '100%' }}
              value={treeSelectValue}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择表名 "
              allowClear
              treeDefaultExpandAll
              showCheckedStrategy
              onChange={treeSelectOnchange}
            >
              {selectTreeData ? (
                selectTreeData.map(i => mapTree(i))
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </TreeSelect>
          </div> */}
涂伟's avatar
涂伟 committed
490
            <div className={styles.btn}>
491 492 493 494 495 496 497 498
              <Button
                type="primary"
                icon={<SnippetsOutlined />}
                ghost
                onClick={() => formRef.current.initLayout()}
              >
                一键布局
              </Button>
涂伟's avatar
涂伟 committed
499 500 501 502 503
              <Button
                type="primary"
                // icon={<PlusSquareOutlined />}
                ghost
                onClick={() => formRef.current.clear()}
504
                style={{ marginLeft: '10px' }}
涂伟's avatar
涂伟 committed
505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526
              >
                <img src={clearSvg} style={{ marginRight: '6px' }} alt="" />
                清空
              </Button>
              <Button
                type="primary"
                ghost
                icon={<EyeOutlined />}
                onClick={() => formRef.current.preview()}
                style={{ marginLeft: '10px' }}
              >
                预览
              </Button>
              <Button
                type="primary"
                icon={<UploadOutlined />}
                onClick={() => formRef.current.submit()}
                style={{ marginLeft: '10px' }}
              >
                提交
              </Button>
              {/* <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
527 528
              附加
            </Button> */}
涂伟's avatar
涂伟 committed
529
              {/* <Button
530 531 532 533 534 535 536
              type="primary"
              icon={<RollbackOutlined />}
              onClick={back}
              style={{ marginLeft: '30px' }}
            >
              返回
            </Button> */}
shaoan123's avatar
shaoan123 committed
537
            </div>
皮倩雯's avatar
皮倩雯 committed
538 539
          </div>
        </div>
540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557
      }
      visible={props.fieldConfigShow}
      // onOk={getNewGroup}
      onCancel={() => props.setFieldConfigShow(false)}
      footer={null}
      width="100vw"
      style={{
        maxWidth: '100vw',
        top: 0,
        paddingBottom: 0,
      }}
      bodyStyle={{
        height: 'calc(100vh - 55px)',
      }}
      getContainer={false}
    >
      {/* <Spin tip="loading..." spinning={treeLoading}> */}
      <div className={styles.containerBox}>
涂伟's avatar
涂伟 committed
558 559 560 561 562
        <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
          {formObj && <FormDesigner ref={formRef} tableName={formObj} />}
        </div>
      </div>
      {/* </Spin> */}
皮倩雯's avatar
皮倩雯 committed
563 564 565 566 567 568 569 570 571 572
      {visible && type === 'affiliateAdd' && (
        <AffiliateAdd
          visible={visible}
          tableList={tableList}
          type={type}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          formObj={pramFormObj}
        />
      )}
573
    </Modal>
皮倩雯's avatar
皮倩雯 committed
574
  );
575 576
};
export default AddModal;