fix: '代码还原'

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

 /* eslint-disable no-shadow */
 /* eslint-disable react/jsx-boolean-value */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Form,
   Modal,
@@ -25,6 +25,8 @@ import {
   RollbackOutlined,
   ConsoleSqlOutlined,
   EyeOutlined,
+  ArrowLeftOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
 import {
   reloadTableFields,
@@ -38,7 +40,8 @@ import FieldEditor from './fieldEditor';
 import AffiliateAdd from '../components/Field/affiliateAdd';
 import LoadGroup from '../components/Field/loadGroupNew';
 import styles from './index.less';
-import PerviewPrase from './PerviewPrase';
+import clearSvg from '@/assets/font/omsfont/clear.svg';
+// import PerviewPrase from './PerviewPrase';
 import { LayerSetting } from '@/services/gis/gis';
 const AddModal = props => {
   const history = useHistory();
@@ -49,6 +52,7 @@ 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(''); // 弹窗类型
@@ -74,6 +78,8 @@ 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) {
@@ -109,12 +115,13 @@ const AddModal = props => {
   }, []);
 
   useEffect(() => {
-    if (props.location.state.id) {
-      setSelectTreeData(props.location.state.keepData);
-      setSelectDataFirst(props.location.state.keepTreeFirst);
+    if (props.tableInfo.id) {
+      setSelectTreeData(props.tableInfo.keepData);
+      setSelectDataFirst(props.tableInfo.keepTreeFirst);
       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 => {
@@ -151,7 +158,7 @@ const AddModal = props => {
                 i.fieldName = i.name;
                 i.configInfo = i.config;
                 i.presetValue = i.preset == '(无)' ? '' : i.preset;
-                i.showCss = props.location.state.template.tableStyle;
+                i.showCss = props.tableInfo.template.tableStyle;
                 i.tableName = ss;
                 i.uiGroup = item;
                 i.readOnly = i.readOnly == '是' ? 1 : 0;
@@ -165,7 +172,7 @@ const AddModal = props => {
             });
             flowNodeMeta.groups = arrdata;
             list.flowNodeMeta = flowNodeMeta;
-            list.showCss = props.location.state.template.tableStyle;
+            list.showCss = props.tableInfo.template.tableStyle;
             console.log(list);
 
             let tablesSchema = {
@@ -187,10 +194,11 @@ const AddModal = props => {
           }
         });
       } else {
-        let ss = props.location.state.id;
-        setFormObj(props.location.state.id);
+        let ss = props.tableInfo.id;
+        setFormObj(props.tableInfo.id);
+        setFormName(props.tableInfo.name);
         reloadTableFields({
-          tableName: props.location.state.id,
+          tableName: props.tableInfo.id,
         }).then(res => {
           setTreeLoading(false);
           if (res.msg === 'Ok') {
@@ -206,7 +214,7 @@ const AddModal = props => {
             console.log(arrlist);
             setKeepTree(arrlist);
             data.TableFieldNames = arrlist;
-            data.TableName = props.location.state.id;
+            data.TableName = props.tableInfo.id;
             listArr.push(data);
             setKeepTreeData(listArr);
             let arr = formateArrDataA(res.data.root, 'group');
@@ -226,7 +234,7 @@ const AddModal = props => {
                 i.fieldName = i.name;
                 i.configInfo = i.config;
                 i.presetValue = i.preset == '(无)' ? '' : i.preset;
-                i.showCss = props.location.state.template.tableStyle;
+                i.showCss = props.tableInfo.template.tableStyle;
                 i.tableName = ss;
                 i.uiGroup = item;
                 i.readOnly = i.readOnly == '是' ? 1 : 0;
@@ -240,7 +248,7 @@ const AddModal = props => {
             });
             flowNodeMeta.groups = arrdata;
             list.flowNodeMeta = flowNodeMeta;
-            list.showCss = props.location.state.template.tableStyle;
+            list.showCss = props.tableInfo.template.tableStyle;
             console.log(list);
 
             let tablesSchema = {
@@ -308,7 +316,7 @@ const AddModal = props => {
 
   // 返回上一级
   const back = () => {
-    console.log(props.location.state);
+    console.log(props.tableInfo);
     let {
       template,
       tableScroll,
@@ -317,7 +325,7 @@ const AddModal = props => {
       groupArr,
       searchValue,
       select,
-    } = props.location.state;
+    } = props.tableInfo;
     console.log(keepValue);
     console.log(pickIndex, groupArr, 'back');
     history.push({
@@ -381,7 +389,7 @@ const AddModal = props => {
               i.fieldName = i.name;
               i.configInfo = i.config;
               i.presetValue = i.preset == '(无)' ? '' : i.preset;
-              i.showCss = props.location.state.template.tableStyle;
+              i.showCss = props.tableInfo.template.tableStyle;
               i.tableName = ss;
               i.uiGroup = item;
               i.readOnly = i.readOnly == '是' ? 1 : 0;
@@ -395,7 +403,7 @@ const AddModal = props => {
           });
           flowNodeMeta.groups = arrdata;
           list.flowNodeMeta = flowNodeMeta;
-          list.showCss = props.location.state.template.tableStyle;
+          list.showCss = props.tableInfo.template.tableStyle;
           console.log(list);
 
           let tablesSchema = {
@@ -441,7 +449,7 @@ const AddModal = props => {
         });
       });
     } else {
-      setPramFormObj(props.location.state.template);
+      setPramFormObj(props.tableInfo.template);
     }
     setType('affiliateAdd');
     setVisible(true);
@@ -451,15 +459,15 @@ const AddModal = props => {
     setVisible(false);
     setFlag(flag + 1);
   };
-
   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>
+      {/* <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 style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            {/* <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
               <div style={{ width: '350px', marginRight: '10px' }}>
                 <TreeSelect
                   showSearch
@@ -479,26 +487,52 @@ const AddModal = props => {
                   )}
                 </TreeSelect>
               </div> */}
-              <div className={styles.btn}>
-                <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
+            <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>
+              <Button
+                type="primary"
+                icon={<UploadOutlined />}
+                onClick={() => formRef.current.submit()}
+                style={{ marginLeft: '10px' }}
+              >
+                提交
+              </Button>
+              {/* <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
                   附加
-                </Button>
-                <Button
+                </Button> */}
+              {/* <Button
                   type="primary"
                   icon={<RollbackOutlined />}
                   onClick={back}
                   style={{ marginLeft: '30px' }}
                 >
                   返回
-                </Button>
-              </div>
+                </Button> */}
             </div>
           </div>
-          <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
-            {formObj && <FormDesigner tableName={formObj} extra />}
-          </div>
         </div>
-      </Spin>
+        <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
+          {formObj && <FormDesigner ref={formRef} tableName={formObj} />}
+        </div>
+      </div>
+      {/* </Spin> */}
       {visible && type === 'affiliateAdd' && (
         <AffiliateAdd
           visible={visible}