fix: '1.台账表切换返回保留搜索词2.表编辑展示已附加字段集'

src/pages/bsmanager/base/tablemanager/components/TableView.jsx

@@ -553,6 +553,12 @@ const TableView = props => {
     }
     setDataSource(list);
   };
+  const deleteAddField = index => {
+    // let arr = dataSource;
+    // arr[index].IsAddFieldConfig = false;
+    // setDataSource(arr);
+    // console.log(index, arr, 'indexxxxxxxxxxx');
+  };
   // 表格设置
   const components = {
     body: {
@@ -717,84 +723,104 @@ const TableView = props => {
       centered
     >
       <div className={styles.content}>
-        <Form form={form}>
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div style={{ display: 'flex' }}>
-              <Form.Item
-                label="表名"
-                rules={[
-                  {
-                    required: true,
-                    message: '表名称不能为空',
-                  },
-                  {
-                    pattern: /^[\u4e00-\u9fffa-zA-Z0-9_]+$/,
-                    message: '不能输入特殊符号',
-                  },
-                ]}
-                name="tableName"
-                required
-                style={{ marginBottom: '0' }}
-              >
-                <Input
-                  addonBefore={
-                    type === 'add' ? `${tableType.substr(0, tableType.length - 1)}_` : null
-                  }
-                  placeholder="请填写表名"
-                />
-              </Form.Item>
-              <Form.Item
-                label="别名"
-                name="alias"
-                style={{ marginBottom: '0', marginLeft: '10px' }}
-              >
-                <Input placeholder="请填写别名" />
-              </Form.Item>
-            </div>
-            <div style={{ display: 'flex' }}>
-              <Form.Item label="内置字段" style={{ marginBottom: '0', marginRight: '10px' }}>
-                <Switch
-                  checkedChildren="显示"
-                  unCheckedChildren="隐藏"
-                  onChange={showDefaultFields}
-                />
-              </Form.Item>
-              <Form.Item style={{ marginBottom: '0', marginRight: '10px' }}>
-                <Button type="primary" onClick={() => handleAdd()}>
-                  <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <PlusOutlined style={{ marginRight: '5px' }} />
-                    <span> 新增</span>
-                  </div>
-                </Button>
-              </Form.Item>
-              <Form.Item style={{ marginBottom: '0' }}>
-                <Button onClick={() => deleteFilleds()}>
-                  <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <MinusOutlined style={{ marginRight: '5px' }} />
-                    <span> 批量删除</span>
-                  </div>
-                </Button>
-              </Form.Item>
+        <div>
+          <Form form={form}>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex' }}>
+                <Form.Item
+                  label="表名"
+                  rules={[
+                    {
+                      required: true,
+                      message: '表名称不能为空',
+                    },
+                    {
+                      pattern: /^[\u4e00-\u9fffa-zA-Z0-9_]+$/,
+                      message: '不能输入特殊符号',
+                    },
+                  ]}
+                  name="tableName"
+                  required
+                  style={{ marginBottom: '0' }}
+                >
+                  <Input
+                    addonBefore={
+                      type === 'add' ? `${tableType.substr(0, tableType.length - 1)}_` : null
+                    }
+                    placeholder="请填写表名"
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="别名"
+                  name="alias"
+                  style={{ marginBottom: '0', marginLeft: '10px' }}
+                >
+                  <Input placeholder="请填写别名" />
+                </Form.Item>
+              </div>
+              <div style={{ display: 'flex' }}>
+                <Form.Item label="内置字段" style={{ marginBottom: '0', marginRight: '10px' }}>
+                  <Switch
+                    checkedChildren="显示"
+                    unCheckedChildren="隐藏"
+                    onChange={showDefaultFields}
+                  />
+                </Form.Item>
+                <Form.Item style={{ marginBottom: '0', marginRight: '10px' }}>
+                  <Button type="primary" onClick={() => handleAdd()}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <PlusOutlined style={{ marginRight: '5px' }} />
+                      <span> 新增</span>
+                    </div>
+                  </Button>
+                </Form.Item>
+                <Form.Item style={{ marginBottom: '0' }}>
+                  <Button onClick={() => deleteFilleds()}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <MinusOutlined style={{ marginRight: '5px' }} />
+                      <span> 批量删除</span>
+                    </div>
+                  </Button>
+                </Form.Item>
+              </div>
             </div>
+          </Form>
+          <Spin spinning={loading}>
+            <Table
+              rowKey="keyIndex"
+              rowSelection={rowSelection}
+              size="small"
+              style={{ marginTop: '10PX' }}
+              components={components}
+              rowClassName={() => 'editable-row'}
+              bordered
+              dataSource={dataSource}
+              columns={columns}
+              scroll={{ y: '540px' }}
+              pagination={false}
+              id="box"
+            />
+            <div id="page-bottom" />
+          </Spin>
+        </div>
+        <div className={styles.subContent}>
+          <div className={styles.subTitle}>已附加字段集</div>
+          <div className={styles.subItems}>
+            {/* <div className={styles.subItem}>
+              <span>处理站点</span> <span>X</span>
+            </div> */}
+            {dataSource.map((item, index) =>
+              item.IsAddFieldConfig ? (
+                <div className={styles.subItem}>
+                  <span>{item.Alias || item.Name}</span>{' '}
+                  <span className={styles.deleteItem} onClick={() => deleteAddField(index)}>
+                    X
+                  </span>
+                </div>
+              ) : null,
+            )}
           </div>
-        </Form>
-        <Spin spinning={loading}>
-          <Table
-            rowKey="keyIndex"
-            rowSelection={rowSelection}
-            size="small"
-            style={{ marginTop: '10PX' }}
-            components={components}
-            rowClassName={() => 'editable-row'}
-            bordered
-            dataSource={dataSource}
-            columns={columns}
-            scroll={{ y: '540px' }}
-            pagination={false}
-            id="box"
-          />
-          <div id="page-bottom" />
-        </Spin>
+        </div>
       </div>
     </Modal>
   );

src/pages/bsmanager/base/tablemanager/components/TableView.less

 .content {
   height: 620px;
+  display: flex;
+
+  >div {
+    width: 80%;
+  }
+  .subContent {
+    width: 20%;
+    padding: 8px;
+    margin-left: 10px;
+    border-left: 3px solid gainsboro;
+
+    .subTitle {
+      font-weight: bold;
+    }
+    .subItems {
+      padding: 0 10px;
+      overflow-y: auto;
+      height: 100%;
+      padding: 5px 10px;
+
+      .subItem {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+
+        // >span:last-child:hover {
+        //   cursor: pointer;
+        // }
+        .deleteItem {
+          opacity: 0;
+        }
+      }
+    }
+  }
 
   :global {
     .ant-table-row {

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

@@ -50,6 +50,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import { Ellipse } from 'bizcharts/lib/g-components';
 
+import { number } from 'prop-types';
 import Editor from './components/Field/editor';
 // import AddTablelList from './components/Field/addTable';
 import AddTablelList from './components/TableView';
@@ -112,9 +113,9 @@ const TableManager = props => {
 
   useEffect(
     record => {
-      if (props.history.location.query && initNum.current == 0) {
-        loadTable(props.history.location.query.searchV);
-        setSearchValue(props.history.location.query.searchV);
+      if (props.location.query && initNum.current == 0) {
+        loadTable(props.location.query.searchV);
+        setSearchValue(props.location.query.searchV);
       } else {
         loadTable(searchValue);
       }
@@ -266,6 +267,14 @@ const TableManager = props => {
         setTreeLoading(false);
         if (res.msg === 'Ok') {
           // setTableData(res.data.root);
+          let arr = res.data.root;
+          arr.forEach(item => {
+            item.tableStyle = item.tableStyle === '大' ? '一行三个' : item.tableStyle;
+            let fieldCount = Number(item.fieldCount);
+            let extraFieldCount = Number(item.extraFieldCount);
+            // item.fieldCount extraFieldCount
+            item.fieldRatio = `${fieldCount + extraFieldCount}/${fieldCount}`;
+          });
           let groupData = formateArrDataA(res.data.root, 'groupName');
           let newArr = [];
           let aa = [];
@@ -367,50 +376,70 @@ const TableManager = props => {
       ),
     },
     {
-      title: '别名',
+      title: '展示名称',
       dataIndex: 'tableAlias',
       key: 'tableAlias',
       align: 'center',
       render: text => <div>{text || '(无)'}</div>,
     },
     {
-      title: '表格样式',
+      title: '表单布局',
       dataIndex: 'tableStyle',
       key: 'tableStyle',
       align: 'center',
       width: 80,
       render: text => <div>{text}</div>,
     },
+    // {
+    //   title: '附加字段',
+    //   dataIndex: 'fieldCount',
+    //   key: 'fieldCount',
+    //   align: 'center',
+    //   width: 80,
+    // },
     {
-      title: '附加字段',
-      dataIndex: 'fieldCount',
-      key: 'fieldCount',
-      align: 'center',
-      width: 80,
-    },
-    {
-      title: '缺少字段',
-      dataIndex: 'missingFieldCount',
-      key: 'missingFieldCount',
+      title: '附加字段（已附加/全部字段）',
+      dataIndex: 'fieldRatio',
+      key: 'fieldRatio',
       align: 'center',
-      width: 80,
+      width: 240,
       render: text => (
-        <div
-          className={classnames({
-            [styles.lack]: text !== '(无)',
-          })}
+        <span
+          style={{
+            borderRadius: '3px',
+            color: 'rgb(97,140,249)',
+            background: 'rgb(157,183,249)',
+            padding: '0 8px',
+            border: '1px solid rgb(97,140,249)',
+          }}
         >
           {text}
-        </div>
+        </span>
       ),
     },
-    {
-      title: '未附加',
-      dataIndex: 'extraFieldCount',
-      key: 'extraFieldCount',
-      align: 'center',
-      width: 80,
-    },
+    // {
+    //   title: '缺少字段',
+    //   dataIndex: 'missingFieldCount',
+    //   key: 'missingFieldCount',
+    //   align: 'center',
+    //   width: 80,
+    //   render: text => (
+    //     <div
+    //       className={classnames({
+    //         [styles.lack]: text !== '(无)',
+    //       })}
+    //     >
+    //       {text}
+    //     </div>
+    //   ),
+    // },
+    // {
+    //   title: '未附加',
+    //   dataIndex: 'extraFieldCount',
+    //   key: 'extraFieldCount',
+    //   align: 'center',
+    //   width: 80,
+    // },
     {
       title: '分组数量',
       dataIndex: 'groupCount',
@@ -443,13 +472,13 @@ const TableManager = props => {
       width: 100,
       render: (text, record) => (
         <Space>
-          <Tooltip title="修改">
+          <Tooltip title="表结构设计">
             <EditOutlined
               onClick={() => changeDesc(record)}
               style={{ fontSize: '20px', color: '#1890FF' }}
             />
           </Tooltip>
-          <Tooltip title="表配置">
+          <Tooltip title="表单设计">
             <MenuOutlined
               onClick={() => {
                 setType('tableEdit');