fix: '代码回滚'

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

 /* eslint-disable no-shadow */
 /* eslint-disable react/jsx-boolean-value */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Form,
   Modal,
@@ -25,8 +25,6 @@ import {
   RollbackOutlined,
   ConsoleSqlOutlined,
   EyeOutlined,
-  ArrowLeftOutlined,
-  UploadOutlined,
 } from '@ant-design/icons';
 import {
   reloadTableFields,
@@ -40,8 +38,7 @@ import FieldEditor from './fieldEditor';
 import AffiliateAdd from '../components/Field/affiliateAdd';
 import LoadGroup from '../components/Field/loadGroupNew';
 import styles from './index.less';
-import clearSvg from '@/assets/font/omsfont/clear.svg';
-// import PerviewPrase from './PerviewPrase';
+import PerviewPrase from './PerviewPrase';
 import { LayerSetting } from '@/services/gis/gis';
 const AddModal = props => {
   const history = useHistory();
@@ -52,7 +49,6 @@ const AddModal = props => {
   const [tableData, setTableData] = useState([]);
   const [treeLoading, setTreeLoading] = useState(false);
   const [formObj, setFormObj] = useState('');
-  const [formName, setFormName] = useState('');
   const [flag, setFlag] = useState(0); // 弹窗类型
   const [isVisible, setIsVisible] = useState(false); // 弹窗
   const [isType, setIsType] = useState(''); // 弹窗类型
@@ -78,8 +74,6 @@ const AddModal = props => {
   const [perviewPrase, setPerViewPrase] = useState(false);
   const [tablesSchema, setTablesSchema] = useState(null); // 存储parseForm组件需要的数据格式
 
-  const formRef = useRef(null);
-
   const getField = () => {
     loadUnattachedTables().then(res => {
       if (res.data.root && res.data.root.length) {
@@ -121,7 +115,6 @@ const AddModal = props => {
       if (treeSelectValue) {
         let ss = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
         setFormObj(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
-        setFormName(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
         reloadTableFields({
           tableName: treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')),
         }).then(res => {
@@ -196,7 +189,6 @@ const AddModal = props => {
       } else {
         let ss = props.location.state.id;
         setFormObj(props.location.state.id);
-        setFormName(props.location.state.name);
         reloadTableFields({
           tableName: props.location.state.id,
         }).then(res => {
@@ -459,13 +451,13 @@ const AddModal = props => {
     setVisible(false);
     setFlag(flag + 1);
   };
+
   return (
     <>
-      {/* <Spin tip="loading..." spinning={treeLoading}> */}
+      <Spin tip="loading..." spinning={treeLoading}>
         <div className={styles.containerBox}>
           <div className={styles.config}>
-          <ArrowLeftOutlined onClick={back} className={styles.goBack} />
-          <div className={styles.title}> 展示名称 【{formName}】</div>
+            <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' }}>
@@ -488,51 +480,25 @@ const AddModal = props => {
                 </TreeSelect>
               </div> */}
               <div className={styles.btn}>
-              <Button
-                type="primary"
-                // icon={<PlusSquareOutlined />}
-                ghost
-                onClick={() => formRef.current.clear()}
-              >
-                <img src={clearSvg} style={{ marginRight: '6px' }} alt="" />
-                清空
-              </Button>
-              <Button
-                type="primary"
-                ghost
-                icon={<EyeOutlined />}
-                onClick={() => formRef.current.preview()}
-                style={{ marginLeft: '10px' }}
-              >
-                预览
+                <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
+                  附加
                 </Button>
                 <Button
-                type="primary"
-                icon={<UploadOutlined />}
-                onClick={() => formRef.current.submit()}
-                style={{ marginLeft: '10px' }}
-              >
-                提交
-              </Button>
-              {/* <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
-                  附加
-                </Button> */}
-              {/* <Button
                   type="primary"
                   icon={<RollbackOutlined />}
                   onClick={back}
                   style={{ marginLeft: '30px' }}
                 >
                   返回
-                </Button> */}
+                </Button>
               </div>
             </div>
           </div>
           <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
-          {formObj && <FormDesigner ref={formRef} tableName={formObj} extra={true} />}
+            {formObj && <FormDesigner tableName={formObj} extra />}
           </div>
         </div>
-      {/* </Spin> */}
+      </Spin>
       {visible && type === 'affiliateAdd' && (
         <AffiliateAdd
           visible={visible}

src/pages/bsmanager/base/tablemanager/filedConfig/index.less

@@ -119,8 +119,8 @@
   padding: 1rem 0 0.5rem 0.5rem;
   justify-content: space-between;
   width: calc(100% - 10px);
-  // position: relative;
-  // padding-left: 50px;
+  position: relative;
+  padding-left: 50px;
 
   .goBack {
     position: absolute;

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

@@ -50,7 +50,6 @@ 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';
@@ -58,12 +57,8 @@ import AffiliateAdd from './components/Field/affiliateAdd';
 import LoadGroup from './components/Field/loadGroup';
 import LoadGroupNew from './components/Field/loadGroupNew';
 import ChooseTableType from './components/ChooseTableType';
-import AddModal from './filedConfig/filedConfig';
 // import { defaultFields } from './components/defaultFields';
 import styles from './index.less';
-import formDesign from '@/assets/font/omsfont/formDesign.svg';
-import tableDesign from '@/assets/font/omsfont/tableDesign.svg';
-import deleteSvg from '@/assets/font/omsfont/delete.svg';
 const { Search } = Input;
 const { Option } = Select;
 const placeholder = '请输入表名';
@@ -97,8 +92,6 @@ const TableManager = props => {
   const [tableType, setTableType] = useState(defaultFields[0]);
   const [groupPopVisible, setgGroupPopVisible] = useState(false);
   const [checkMsg, setCheckMsg] = useState();
-  const [fieldConfigShow, setFieldConfigShow] = useState(false);
-  const [tableInfo, setTableInfo] = useState({});
   const initNum = useRef(0);
   useEffect(() => {
     GetDefaultTableFields().then(res => {
@@ -119,9 +112,9 @@ const TableManager = props => {
 
   useEffect(
     record => {
-      if (props.location.query && initNum.current == 0) {
-        loadTable(props.location.query.searchV);
-        setSearchValue(props.location.query.searchV);
+      if (props.history.location.query && initNum.current == 0) {
+        loadTable(props.history.location.query.searchV);
+        setSearchValue(props.history.location.query.searchV);
       } else {
         loadTable(searchValue);
       }
@@ -217,11 +210,9 @@ const TableManager = props => {
   const fieldsConfig = (record, e) => {
     e.stopPropagation();
     setFormObj(record);
-    // pushFieldConfig(record);
     history.push({
       pathname: `/biz/account/fieldConfig`,
       state: {
-        name: record.tableAlias || record.tableName,
         id: record.tableName,
         template: record,
         tableScroll: document.querySelector('.ant-table-body').scrollTop,
@@ -275,19 +266,6 @@ 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.labelStyle ? `${item.labelStyle}布局` : '左右布局'}`
-                : item.tableStyle;
-            let fieldCount = Number(item.fieldCount);
-            let extraFieldCount = Number(
-              item.extraFieldCount === '(无)' ? 0 : item.extraFieldCount,
-            );
-            // item.fieldCount extraFieldCount
-            item.fieldRatio = `${fieldCount}/${fieldCount + extraFieldCount}`;
-          });
           let groupData = formateArrDataA(res.data.root, 'groupName');
           let newArr = [];
           let aa = [];
@@ -378,41 +356,6 @@ const TableManager = props => {
     return <div dangerouslySetInnerHTML={{ __html: n }} />;
   };
 
-  const pushFieldConfig = record => {
-    history.push({
-      pathname: `/biz/account/fieldConfig`,
-      state: {
-        name: record.tableAlias || record.tableName,
-        id: record.tableName,
-        template: record,
-        tableScroll: document.querySelector('.ant-table-body').scrollTop,
-        groupArr: groupArr,
-        pickIndex: pickIndex,
-        searchValue: searchValue,
-        select: select,
-        keepValue: keepValue,
-        keepTreeSelect: keepTreeSelect,
-        keepTreeFirst: keepTreeFirst,
-        keepData: keepData,
-      },
-    });
-    // setTableInfo({
-    //   name: record.tableAlias || record.tableName,
-    //   id: record.tableName,
-    //   template: record,
-    //   tableScroll: document.querySelector('.ant-table-body').scrollTop,
-    //   groupArr: groupArr,
-    //   pickIndex: pickIndex,
-    //   searchValue: searchValue,
-    //   select: select,
-    //   keepValue: keepValue,
-    //   keepTreeSelect: keepTreeSelect,
-    //   keepTreeFirst: keepTreeFirst,
-    //   keepData: keepData,
-    // });
-    // setFieldConfigShow(true);
-  };
-
   const columns = [
     {
       title: '名称',
@@ -424,76 +367,50 @@ const TableManager = props => {
       ),
     },
     {
-      title: '展示名称',
+      title: '别名',
       dataIndex: 'tableAlias',
       key: 'tableAlias',
       align: 'center',
-      render: text => <div>{text || <span style={{ color: 'grey' }}>（无）</span>}</div>,
+      render: text => <div>{text || '(无)'}</div>,
     },
     {
-      title: '表单布局',
+      title: '表格样式',
       dataIndex: 'tableStyle',
       key: 'tableStyle',
       align: 'center',
       width: 80,
-      render: text => <div>{!text ? <span style={{ color: 'grey' }}>（无）</span> : text}</div>,
+      render: text => <div>{text}</div>,
     },
-    // {
-    //   title: '附加字段',
-    //   dataIndex: 'fieldCount',
-    //   key: 'fieldCount',
-    //   align: 'center',
-    //   width: 80,
-    // },
     {
-      title: '已附加/全部字段',
-      dataIndex: 'fieldRatio',
-      key: 'fieldRatio',
+      title: '附加字段',
+      dataIndex: 'fieldCount',
+      key: 'fieldCount',
       align: 'center',
-      width: 240,
-      render: (text, record) => {
-        if (record.missingFieldCount === '(无)') {
-          return <Tag color="processing">{text}</Tag>;
-        }
-        return <Tag color="error">{text}</Tag>;
-      },
+      width: 80,
     },
     {
-      title: '异常字段',
+      title: '缺少字段',
       dataIndex: 'missingFieldCount',
       key: 'missingFieldCount',
       align: 'center',
       width: 80,
-      render: record => {
-        if (record === '(无)') {
-          return <div style={{ color: 'grey' }}>{record}</div>;
-        }
-        return <div style={{ color: 'red' }}>{record}</div>;
+      render: text => (
+        <div
+          className={classnames({
+            [styles.lack]: text !== '(无)',
+          })}
+        >
+          {text}
+        </div>
+      ),
     },
+    {
+      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',
@@ -523,50 +440,23 @@ const TableManager = props => {
       ellipsis: true,
       key: 'tableID',
       align: 'center',
-      width: 120,
+      width: 100,
       render: (text, record) => (
         <Space>
-          <Tooltip title="表结构设计">
-            {/* <EditOutlined
+          <Tooltip title="修改">
+            <EditOutlined
               onClick={() => changeDesc(record)}
               style={{ fontSize: '20px', color: '#1890FF' }}
-            /> */}
-            <img
-              className={styles.btnImg}
-              src={formDesign}
-              alt=""
-              // onClick={() => changeDesc(record)}
-              onClick={() => {
-                setType('tableEdit');
-                setVisible(true);
-                setFormObj(record);
-              }}
-              style={{ width: '16px', color: '#1890FF' }}
             />
           </Tooltip>
-          <Tooltip title="表单设计">
-            {/* <MenuOutlined
+          <Tooltip title="表配置">
+            <MenuOutlined
               onClick={() => {
                 setType('tableEdit');
                 setVisible(true);
                 setFormObj(record);
               }}
               style={{ fontSize: '20px', color: '#1890FF' }}
-            /> */}
-            <img
-              className={styles.btnImg}
-              src={tableDesign}
-              alt=""
-              // onClick={() => {
-              //   setType('tableEdit');
-              //   setVisible(true);
-              //   setFormObj(record);
-              // }}
-              onClick={e => {
-                e.stopPropagation();
-                pushFieldConfig(record);
-              }}
-              style={{ width: '16px', color: '#1890FF' }}
             />
           </Tooltip>
           {/* <Tooltip title="字段配置">
@@ -597,13 +487,7 @@ const TableManager = props => {
               }}
             >
               <Tooltip title="删除">
-                {/* <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> */}
-                <img
-                  className={styles.btnImg}
-                  src={deleteSvg}
-                  alt=""
-                  style={{ width: '16px', color: '#1890FF' }}
-                />
+                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
               </Tooltip>
             </Popconfirm>
           </div>
@@ -611,10 +495,6 @@ const TableManager = props => {
       ),
     },
   ];
-
-  const tableListCancel = () => {
-    setVisible(false);
-  };
   const pageChage = (page, pageSize) => {
     const list = JSON.parse(JSON.stringify(groupArr));
     list[pickIndex].page = page;
@@ -786,23 +666,22 @@ const TableManager = props => {
                 onRow={record => ({
                   onDoubleClick: event => {
                     event.stopPropagation();
-                    // history.push({
-                    //   pathname: `/biz/account/fieldConfig`,
-                    //   state: {
-                    //     id: record.tableName,
-                    //     template: record,
-                    //     tableScroll: document.querySelector('.ant-table-body').scrollTop,
-                    //     groupArr: groupArr,
-                    //     pickIndex: pickIndex,
-                    //     searchValue: searchValue,
-                    //     select: select,
-                    //     keepValue: keepValue,
-                    //     keepTreeSelect: keepTreeSelect,
-                    //     keepTreeFirst: keepTreeFirst,
-                    //     keepData: keepData,
-                    //   },
-                    // });
-                    pushFieldConfig(record);
+                    history.push({
+                      pathname: `/biz/account/fieldConfig`,
+                      state: {
+                        id: record.tableName,
+                        template: record,
+                        tableScroll: document.querySelector('.ant-table-body').scrollTop,
+                        groupArr: groupArr,
+                        pickIndex: pickIndex,
+                        searchValue: searchValue,
+                        select: select,
+                        keepValue: keepValue,
+                        keepTreeSelect: keepTreeSelect,
+                        keepTreeFirst: keepTreeFirst,
+                        keepData: keepData,
+                      },
+                    });
                   },
                   onClick: event => {
                     event.stopPropagation();
@@ -838,7 +717,7 @@ const TableManager = props => {
         <AddTablelList
           visible={visible && (type === 'add' || type === 'tableEdit')}
           type={type}
-          onCancel={() => tableListCancel()}
+          onCancel={() => setVisible(false)}
           formObj={formObj}
           callBackSubmit={onSubmit}
           defaultFieldsList={defaultFieldsList}
@@ -890,25 +769,6 @@ const TableManager = props => {
         >
           <div style={{ whiteSpace: 'pre-line', textAlign: 'justify' }}>{checkMsg}</div>
         </Modal>
-        <Modal
-          title="表单设计"
-          visible={fieldConfigShow}
-          // onOk={getNewGroup}
-          onCancel={() => setFieldConfigShow(false)}
-          footer={null}
-          width="100vw"
-          style={{
-            maxWidth: '100vw',
-            top: 0,
-            paddingBottom: 0,
-          }}
-          bodyStyle={{
-            height: 'calc(100vh - 55px)',
-          }}
-          getContainer={false}
-        >
-          <AddModal tableInfo={tableInfo} show={fieldConfigShow} />
-        </Modal>
       </PageContainer>
     </Spin>
   );