fix: '表字段字段配置界面新增切换表功能'

src/pages/bsmanager/base/standingBook/BookConfig.jsx

@@ -254,7 +254,7 @@ const BookConfig = props => {
           <Input placeholder="台账名称不可重复" allowClear />
         </Item>
         <Item label="台账表" name="TableName" rules={[{ required: true, message: '请选择台账表' }]}>
-          <Select placeholder="" optionFilterProp="children" onChange={changTable}>
+          <Select placeholder="" optionFilterProp="children" onChange={changTable} showSearch>
             {standingTable.map((item, index) => (
               <Option key={index} value={item.value}>
                 {item.text}

src/pages/bsmanager/base/tablemanager/filedConfig/fieldEditor.jsx

@@ -687,6 +687,9 @@ const AddModal = props => {
         visible={isVisible}
         onClose={onCancel}
         destroyOnClose
+        afterClose={() => {
+          form.resetFields();
+        }}
         footer={
           <Space>
             <Button onClick={onSubmit} type="primary">

src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx

 /* eslint-disable react/jsx-boolean-value */
 import React, { useState, useEffect } from 'react';
-import { Form, Modal, Space, Table, Button, Popconfirm, Spin, notification, Tooltip } from 'antd';
+import {
+  Form,
+  Modal,
+  Space,
+  Table,
+  Button,
+  Popconfirm,
+  Spin,
+  notification,
+  Tooltip,
+  TreeSelect,
+  Empty,
+} from 'antd';
 import {
   EditOutlined,
   DeleteOutlined,
@@ -37,6 +49,10 @@ const AddModal = props => {
   const [visible, setVisible] = useState(false); // 弹窗
   const [type, setType] = useState(''); // 弹窗类型
   const [chooseLine, setChooseLine] = useState('');
+  const { TreeNode } = TreeSelect;
+  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
+  const [selectTreeData, setSelectTreeData] = useState([]);
+  const [selectDataFirst, setSelectDataFirst] = useState([]);
   const editor = record => {
     setIsType('edit');
     setIsVisible(true);
@@ -253,11 +269,15 @@ const AddModal = props => {
   ];
   useEffect(() => {
     console.log(props);
+    console.log(treeSelectValue);
+    console.log(props.match.params.id);
     if (props.match.params.id) {
-      setFormObj(props.match.params.id);
+      setSelectTreeData(props.location.state.keepTreeSelect);
+      setSelectDataFirst(props.location.state.keepTreeFirst);
+      setFormObj(treeSelectValue || props.match.params.id);
       setTreeLoading(true);
       reloadTableFields({
-        tableName: props.match.params.id,
+        tableName: treeSelectValue || props.match.params.id,
       }).then(res => {
         setTreeLoading(false);
         if (res.msg === 'Ok') {
@@ -267,14 +287,12 @@ const AddModal = props => {
             newArr.push({ type: item, key: index, id: index });
           });
           setAllData(arr);
-          console.log(arr);
           let aa = [];
           let bb = [];
           Object.keys(arr).forEach((item, index) => {
             aa.push({ name: item, key: index, ID: index, children: arr[item] });
             bb.push(item);
           });
-          console.log(bb);
           setKeepTreeFirst(bb);
           setTreeData(aa);
           setTableData(newArr);
@@ -388,12 +406,70 @@ const AddModal = props => {
     setVisible(false);
     setFlag(flag + 1);
   };
+  const treeSelectOnchange = e => {
+    setTreeSelectValue(e);
+    setFormObj(e);
+    reloadTableFields({
+      tableName: e,
+    }).then(res => {
+      setTreeLoading(false);
+      if (res.msg === 'Ok') {
+        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);
+        setTableData(newArr);
+        let aa = [];
+        let bb = [];
+        Object.keys(arr).forEach((item, index) => {
+          aa.push({ name: item, key: index, ID: index, children: arr[item] });
+          bb.push(item);
+        });
+        setKeepTreeFirst(bb);
+        setTreeData(aa);
+        setSelect(newArr);
+      }
+    });
+  };
+  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>
+    ) : (
+      <TreeNode value={org.tableName} title={org.tableName} />
+    );
+  };
   return (
     <>
       <Spin tip="loading..." spinning={treeLoading}>
         <div className={styles.containerBox}>
           <div className={styles.config}>
             <div className={styles.title}>{formObj}</div>
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
+              <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>
               <div className={styles.btn}>
                 <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
                   附加
@@ -406,6 +482,7 @@ const AddModal = props => {
                 </Button>
               </div>
             </div>
+          </div>
 
           <Table
             columns={columns}

src/pages/bsmanager/base/tablemanager/index.jsx

+/* eslint-disable object-shorthand */
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import {
@@ -58,6 +59,8 @@ const TableManager = props => {
   const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
   const [chooseLine, setChooseLine] = useState([0]);
   const [keepValue, setKeepValue] = useState([0]);
+  const [keepTreeSelect, setKeepTreeSelect] = useState([]);
+  const [keepTreeFirst, setKeepTreeFirst] = useState([]);
   useEffect(
     record => {
       loadTable(searchValue);
@@ -144,6 +147,8 @@ const TableManager = props => {
         template: record,
         tableScroll: document.querySelector('.ant-table-body').scrollTop,
         keepValue: keepValue,
+        keepTreeSelect: keepTreeSelect,
+        keepTreeFirst: keepTreeFirst,
       },
     });
     // setType('config');
@@ -191,6 +196,16 @@ const TableManager = props => {
           });
           console.log(newArr);
           setAllData(groupData);
+          console.log(groupData);
+          let aa = [];
+          let bb = [];
+          Object.keys(groupData).forEach((item, index) => {
+            aa.push({ name: item, key: index, ID: index, children: groupData[item] });
+            bb.push(item);
+          });
+          console.log(bb);
+          setKeepTreeFirst(bb);
+          setKeepTreeSelect(aa);
           setGroupArr(newArr);
           setSelect(newArr);
         }
@@ -375,6 +390,8 @@ const TableManager = props => {
                 template: record,
                 tableScroll: document.querySelector('.ant-table-body').scrollTop,
                 keepValue: keepValue,
+                keepTreeSelect: keepTreeSelect,
+                keepTreeFirst: keepTreeFirst,
               },
             });
           },