filedConfig.jsx 17.8 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
    LayerSetting({ client: 'sandbox' }).then(res => {
      let dataArea = res.data.find(i => i.layerType == 'PipenetLayer');
      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
115
  }, []);
116

皮倩雯's avatar
皮倩雯 committed
117
  useEffect(() => {
涂伟's avatar
涂伟 committed
118 119 120
    if (props.tableInfo.id) {
      setSelectTreeData(props.tableInfo.keepData);
      setSelectDataFirst(props.tableInfo.keepTreeFirst);
121
      if (treeSelectValue) {
122
        let ss = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
123
        setFormObj(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
涂伟's avatar
涂伟 committed
124
        setFormName(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
125 126 127 128 129
        reloadTableFields({
          tableName: treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')),
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
130 131 132 133 134 135
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
136
            setKeepTree(arrlist);
137 138 139 140
            data.TableFieldNames = arrlist;
            data.TableName = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
            listArr.push(data);
            setKeepTreeData(listArr);
141 142 143 144 145 146 147 148
            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 = [];
149 150 151 152

            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
153
            Object.keys(arr).forEach((item, index) => {
154 155 156 157
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
158
                i.showCss = props.tableInfo.template.tableStyle;
159 160 161 162 163 164 165
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
166
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
167
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
168 169
              bb.push(item);
            });
170 171
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
172
            list.showCss = props.tableInfo.template.tableStyle;
173 174 175 176 177 178 179 180
            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);
181 182
            setKeepTreeFirst(bb);
            setTreeData(aa);
183
            setSelectGroup(newArr);
184 185 186 187 188
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      } else {
涂伟's avatar
涂伟 committed
189 190 191
        let ss = props.tableInfo.id;
        setFormObj(props.tableInfo.id);
        setFormName(props.tableInfo.name);
192
        reloadTableFields({
涂伟's avatar
涂伟 committed
193
          tableName: props.tableInfo.id,
194 195 196
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
197 198
            let result = {};
            // result.
199 200 201 202 203 204
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
205
            setKeepTree(arrlist);
206
            data.TableFieldNames = arrlist;
涂伟's avatar
涂伟 committed
207
            data.TableName = props.tableInfo.id;
208 209
            listArr.push(data);
            setKeepTreeData(listArr);
210 211 212 213 214 215 216 217
            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 = [];
218 219 220
            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
221
            Object.keys(arr).forEach((item, index) => {
222 223 224 225
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
226
                i.showCss = props.tableInfo.template.tableStyle;
227 228 229 230 231 232 233
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
234
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
235
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
236 237
              bb.push(item);
            });
238 239
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
240
            list.showCss = props.tableInfo.template.tableStyle;
241 242 243 244 245 246 247 248
            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);
249
            setSelectGroup(newArr);
250 251 252 253 254 255 256
            setKeepTreeFirst(bb);
            setTreeData(aa);
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      }
皮倩雯's avatar
皮倩雯 committed
257 258
      setTreeLoading(true);
      getField();
259
    }
260
  }, [flag, props.tableInfo]);
皮倩雯's avatar
皮倩雯 committed
261

皮倩雯's avatar
皮倩雯 committed
262 263 264 265
  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
shaoan123's avatar
shaoan123 committed
266
    }
皮倩雯's avatar
皮倩雯 committed
267 268 269
    if (!name) {
      return '请传入对象属性';
    }
270
    // 先获取一下这个数组中有多少个"name"
皮倩雯's avatar
皮倩雯 committed
271
    let nameArr = [];
272
    // eslint-disable-next-line no-restricted-syntax
皮倩雯's avatar
皮倩雯 committed
273 274 275 276 277
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
278
    // 新建一个包含多个list的结果对象
皮倩雯's avatar
皮倩雯 committed
279 280 281 282 283 284 285 286
    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
287
        }
皮倩雯's avatar
皮倩雯 committed
288
      }
289
    }
皮倩雯's avatar
皮倩雯 committed
290 291 292 293 294 295 296
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
297
    }
皮倩雯's avatar
皮倩雯 committed
298 299
    return tempObj;
  };
皮倩雯's avatar
皮倩雯 committed
300

皮倩雯's avatar
皮倩雯 committed
301 302
  // 返回上一级
  const back = () => {
邓超's avatar
邓超 committed
303 304 305 306 307 308 309 310
    let {
      template,
      tableScroll,
      keepValue,
      pickIndex,
      groupArr,
      searchValue,
      select,
涂伟's avatar
涂伟 committed
311
    } = props.tableInfo;
皮倩雯's avatar
皮倩雯 committed
312
    history.push({
313
      pathname: '/biz/account/table',
314 315 316
      query: {
        template,
        tableScroll,
邓超's avatar
邓超 committed
317 318
        backIndex: pickIndex,
        group: groupArr,
319
        keepValue,
邓超's avatar
邓超 committed
320 321
        searchV: searchValue,
        selectValue: select,
322
      },
皮倩雯's avatar
皮倩雯 committed
323 324
    });
  };
325

326
  const treeSelectOnchange = e => {
327 328 329 330 331
    if (e) {
      setTreeLoading(true);
      setSelectedRowKeys([]);
      setMultiOperate(true);
      setTreeSelectValue(e);
332
      let ss = e.substring(0, e.lastIndexOf('@'));
333 334 335 336 337 338
      setFormObj(e.substring(0, e.lastIndexOf('@')));
      reloadTableFields({
        tableName: e.substring(0, e.lastIndexOf('@')),
      }).then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok') {
339 340 341 342 343 344
          let arrlist = [];
          let data = {};
          let listArr = [];
          res.data.root.map(i => {
            arrlist.push(i.name);
          });
345
          setKeepTree(arrlist);
346 347 348 349
          data.TableFieldNames = arrlist;
          data.TableName = e.substring(0, e.lastIndexOf('@'));
          listArr.push(data);
          setKeepTreeData(listArr);
350 351 352 353 354 355 356 357 358 359
          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 = [];
360 361 362
          let list = {};
          let arrdata = [];
          let flowNodeMeta = {};
363
          Object.keys(arr).forEach((item, index) => {
364 365 366 367
            arr[item].map(i => {
              i.fieldName = i.name;
              i.configInfo = i.config;
              i.presetValue = i.preset == '(无)' ? '' : i.preset;
涂伟's avatar
涂伟 committed
368
              i.showCss = props.tableInfo.template.tableStyle;
369 370 371 372 373 374 375
              i.tableName = ss;
              i.uiGroup = item;
              i.readOnly = i.readOnly == '是' ? 1 : 0;
              i.type = '文本';
              i.visible = 1;
              i.colSpan = i.rowSpan;
            });
376
            aa.push({ name: item, key: index, ID: index, children: arr[item] });
377
            arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
378 379
            bb.push(item);
          });
380 381
          flowNodeMeta.groups = arrdata;
          list.flowNodeMeta = flowNodeMeta;
涂伟's avatar
涂伟 committed
382
          list.showCss = props.tableInfo.template.tableStyle;
383 384 385 386 387 388 389 390
          let tablesSchema = {
            child: {},
            groups: list.flowNodeMeta.groups,
            values: [],
            modules: [],
            relationForm: {},
          };
          setTablesSchema(tablesSchema);
391 392 393 394 395 396 397 398
          setKeepTreeFirst(bb);
          setTreeData(aa);
          setSelect(newArr);
        }
      });
    } else {
      setTreeSelectValue('');
    }
399 400 401 402 403 404 405 406
  };
  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>
    ) : (
407
      <TreeNode
皮倩雯's avatar
皮倩雯 committed
408
        value={`${org.tableName}@${org.groupName}|${org.tableID}`}
409
        title={org.tableName}
皮倩雯's avatar
皮倩雯 committed
410
        key={`${org.tableName}@${org.groupName}|${org.tableID}`}
411
      />
412 413
    );
  };
414

皮倩雯's avatar
皮倩雯 committed
415 416 417 418 419 420 421 422 423 424 425
  // 附加
  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
426
      setPramFormObj(props.tableInfo.template);
皮倩雯's avatar
皮倩雯 committed
427 428 429
    }
    setType('affiliateAdd');
    setVisible(true);
430
  };
431

皮倩雯's avatar
皮倩雯 committed
432 433 434
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
435
  };
皮倩雯's avatar
皮倩雯 committed
436
  return (
437 438
    <Modal
      title={
涂伟's avatar
涂伟 committed
439 440 441 442 443
        <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>
444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462
          <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
463
            <div className={styles.btn}>
464 465 466 467 468 469 470 471
              <Button
                type="primary"
                icon={<SnippetsOutlined />}
                ghost
                onClick={() => formRef.current.initLayout()}
              >
                一键布局
              </Button>
涂伟's avatar
涂伟 committed
472 473 474 475 476
              <Button
                type="primary"
                // icon={<PlusSquareOutlined />}
                ghost
                onClick={() => formRef.current.clear()}
477
                style={{ marginLeft: '10px' }}
涂伟's avatar
涂伟 committed
478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499
              >
                <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}>
500 501
              附加
            </Button> */}
涂伟's avatar
涂伟 committed
502
              {/* <Button
503 504 505 506 507 508 509
              type="primary"
              icon={<RollbackOutlined />}
              onClick={back}
              style={{ marginLeft: '30px' }}
            >
              返回
            </Button> */}
shaoan123's avatar
shaoan123 committed
510
            </div>
皮倩雯's avatar
皮倩雯 committed
511 512
          </div>
        </div>
513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530
      }
      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
531
        <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
田翔's avatar
田翔 committed
532
          {formObj && <FormDesigner ref={formRef} tableName={formObj} />}
涂伟's avatar
涂伟 committed
533 534 535
        </div>
      </div>
      {/* </Spin> */}
皮倩雯's avatar
皮倩雯 committed
536 537 538 539 540 541 542 543 544 545
      {visible && type === 'affiliateAdd' && (
        <AffiliateAdd
          visible={visible}
          tableList={tableList}
          type={type}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          formObj={pramFormObj}
        />
      )}
546
    </Modal>
皮倩雯's avatar
皮倩雯 committed
547
  );
548 549
};
export default AddModal;