fix: '1.表编辑交互样式优化2.内嵌表单相关交互优化'

src/assets/font/omsfont/clear.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678185038184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" id="mx_n_1678185038188" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M901.3 504.8l-76.3-150c-13.4-26.3-40-42.6-69.5-42.6H639c-1.1 0-2-0.9-2-2V120.6c0-31.1-25.3-56.3-56.3-56.3h-90c-31.1 0-56.3 25.3-56.3 56.3v189.6c0 1.1-0.9 2-2 2H315.8c-29.5 0-56.1 16.3-69.5 42.6l-76.3 150c-9.2 18.1-8.4 39.3 2.2 56.6 10.3 16.8 27.9 27 47.4 27.6-4.8 101-38.3 205.9-90.2 279.5-12.5 17.8-14.1 40.8-4.1 60.1 10 19.3 29.7 31.3 51.5 31.3h601.5c35 0 66-23.6 75.2-57.4 15.5-56.5 28.4-107.9 29.4-164.9C884 685 874 636 852.9 589c19-1.1 36.1-11.2 46.2-27.6 10.6-17.3 11.4-38.5 2.2-56.6z m-681.4 25.4l76.3-150c3.8-7.4 11.3-12 19.6-12h116.4c32 0 58-26 58-58V120.6c0-0.1 0.2-0.3 0.3-0.3h90c0.1 0 0.3 0.2 0.3 0.3v189.6c0 32 26 58 58 58h116.4c8.3 0 15.8 4.6 19.6 12l76.3 150c0.2 0.3 0.5 1-0.1 2s-1.3 1-1.7 1H221.7c-0.4 0-1.1 0-1.7-1-0.6-1-0.3-1.7-0.1-2zM827 736.6c-0.9 50.5-12.9 98.3-27.4 151.1-2.6 9.5-11.3 16.2-21.2 16.2H651.8c11.3-22.3 18.5-44 23.1-61.2 7.1-26.7 10.7-53.5 10.6-78-0.1-17.1-15.5-30.1-32.4-27.4-13.6 2.2-23.6 14-23.6 27.8 0.1 42.7-14.1 98.2-42.7 138.8H406.2c15.2-21.7 26.1-43.8 33.6-61.9 10-24.3 17.4-49.7 21.2-72.5 2.8-17-10.4-32.5-27.6-32.5-13.6 0-25.3 9.8-27.6 23.3-2.8 16.6-8.3 37.7-17.7 60.4-10.1 24.6-27.8 58.1-55.6 83.3H176.9c-0.5 0-1.2 0-1.8-1.1-0.6-1.1-0.2-1.6 0.1-2 29.7-42.1 54.8-94.5 72.5-151.4 16.2-52.1 25.7-106.9 28-160.3h514.6C816 635.6 828 684 827 736.6z" fill="#1f94ff" p-id="3010"></path></svg>
\ No newline at end of file

src/assets/font/omsfont/delete.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678178629566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10120" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M958.171 285.257H73.143c-21.943 0-36.572-14.628-36.572-36.571s14.629-36.572 36.572-36.572h877.714c21.943 0 36.572 14.629 36.572 36.572s-14.629 36.571-29.258 36.571z m-570.514 724.114c-21.943 0-36.571-14.628-36.571-36.571V394.971c0-21.942 14.628-36.571 36.571-36.571s36.572 14.629 36.572 36.571V972.8c0 21.943-14.629 36.571-36.572 36.571z m212.114 0c-21.942 0-36.571-14.628-36.571-36.571V394.971c0-21.942 14.629-36.571 36.571-36.571s36.572 14.629 36.572 36.571V972.8c0 21.943-21.943 36.571-36.572 36.571z" fill="#FF4D4F" p-id="10121"></path><path d="M672.914 1024H336.457c-102.4 0-182.857-80.457-182.857-182.857V394.97c0-21.942 14.629-36.571 36.571-36.571s36.572 14.629 36.572 36.571v446.172c0 65.828 51.2 109.714 109.714 109.714H680.23c65.828 0 109.714-51.2 109.714-109.714V394.97c0-21.942 14.628-36.571 36.571-36.571s36.572 14.629 36.572 36.571v446.172C855.77 943.543 775.314 1024 672.914 1024z m-14.628-738.743c-21.943 0-36.572-14.628-36.572-36.571V131.657c0-36.571-29.257-58.514-58.514-58.514H453.486c-29.257 0-58.515 21.943-58.515 58.514v117.029c0 21.943-14.628 36.571-36.571 36.571s-36.571-14.628-36.571-36.571V131.657C321.829 58.514 380.343 0 453.486 0H563.2c73.143 0 131.657 58.514 131.657 131.657v117.029c0 21.943-14.628 36.571-36.571 36.571z" fill="#FF4D4F" p-id="10122"></path></svg>
\ No newline at end of file

src/assets/font/omsfont/formDesign.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678097486298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8826" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M589.6 364.3c3 5 8.7 7.7 14.5 7l25.2-3.1c9.4-1.1 15.3-10.7 12.3-19.6l-28.4-82.8c-2.1-6-7.7-10.1-14.1-10.1H292.9c-6.2 0-11.7 3.8-13.9 9.5l-32 82.9c-3.5 9.2 2.6 19.2 12.4 20.2l28.8 2.9c5.8 0.6 11.4-2.2 14.4-7.3l1.6-2.8c20.2-34.2 31.2-42.8 35-44.9 3.9-2.2 16.6-7.2 51.7-7.2 3.3 0 6 0 8.3 0.1V574c-1.9 0.2-4.5 0.5-8.3 0.5h-33.5c-8.2 0-14.9 6.7-14.9 14.9v21.8c0 8.2 6.7 14.9 14.9 14.9h173.9c8.2 0 14.9-6.7 14.9-14.9v-21.8c0-8.2-6.7-14.9-14.9-14.9h-33.5c-3.7 0-6.5-0.3-8.3-0.8V310.4v-1c4.3-0.1 10-0.2 17.8-0.2 36.3 0 45.3 5.9 46.2 6.6 3.4 2.5 13.4 12 34.4 45.8l1.7 2.7z" p-id="8827" fill="#2a98fe"></path><path d="M880 112H144c-17.6 0-32 14.4-32 32v736c0 17.6 14.4 32 32 32h422.1c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16H184V184h656v389.6c0 8.8 7.2 16 16 16h40c8.8 0 16-7.2 16-16V144c0-17.6-14.4-32-32-32z" p-id="8828" fill="#2a98fe"></path><path d="M895.6 703.4h-97.8v-97.8c0-8.8-7.2-16-16-16H722c-8.8 0-16 7.2-16 16v97.8h-97.8c-8.8 0-16 7.2-16 16v59.8c0 8.8 7.2 16 16 16H706V893c0 8.8 7.2 16 16 16h59.8c8.8 0 16-7.2 16-16v-97.8h97.8c8.8 0 16-7.2 16-16v-59.8c0-8.8-7.2-16-16-16z" p-id="8829" fill="#2a98fe"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678185419712" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5434" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M774.4 454.4c0-160-505.6-160-505.6 0v288c0 76.8 128 121.6 249.6 121.6s249.6-44.8 249.6-121.6V473.6c6.4-6.4 6.4-12.8 6.4-19.2z m-256-57.6c128 0 192 44.8 192 57.6s-64 57.6-192 57.6-192-44.8-192-57.6 70.4-57.6 192-57.6z m0 403.2c-121.6 0-185.6-44.8-185.6-57.6v-57.6c51.2 25.6 115.2 38.4 185.6 38.4 70.4 0 140.8-12.8 185.6-38.4v57.6c6.4 19.2-57.6 57.6-185.6 57.6z m0-140.8c-121.6 0-185.6-44.8-185.6-57.6v-64c51.2 25.6 121.6 38.4 185.6 38.4 70.4 0 140.8-12.8 185.6-38.4v64c6.4 19.2-57.6 57.6-185.6 57.6z" fill="#1685FF" p-id="5435"></path><path d="M761.6 998.4H281.6c-96 0-172.8-76.8-172.8-172.8V230.4C108.8 134.4 185.6 57.6 281.6 57.6h499.2l160 160v608c0 96-76.8 172.8-179.2 172.8zM281.6 121.6c-64 0-108.8 51.2-108.8 108.8v595.2c0 57.6 51.2 108.8 108.8 108.8H768c57.6 0 108.8-51.2 108.8-108.8V243.2l-121.6-121.6H281.6z" fill="#1685FF" p-id="5436"></path><path d="M928 313.6H768c-51.2 0-89.6-38.4-89.6-83.2V108.8h64v121.6c0 6.4 12.8 19.2 25.6 19.2h153.6v64z" fill="#1685FF" p-id="5437"></path></svg>
\ No newline at end of file

src/assets/font/omsfont/tableDesign.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678097386457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7748" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M785.4 931.1h-0.1l-547.5-0.7c-61.2-0.1-111-49.4-110.9-110l0.7-484.9c0.1-60.5 49.9-109.7 111.1-109.7h61.2c18.2 0 32.9 14.7 32.9 32.8 0 18.2-14.7 32.9-32.8 32.9h-61.1-0.1c-25 0-45.4 19.8-45.4 44.1l-0.7 484.8c0 24.3 20.3 44.2 45.3 44.2l547.4 0.7c25 0 45.3-19.8 45.3-44.1l0.7-484.9c0-11.6-4.7-22.6-13.1-31-8.6-8.5-20-13.2-32.2-13.2l-77.6-0.8c-18.1-0.2-32.7-15-32.5-33.2s15.2-33.6 33.2-32.5l77.3 0.8c29.2 0 57 11.5 77.9 32.1 21.1 20.8 32.7 48.5 32.7 77.8l-0.7 484.9c0 60.8-49.9 109.9-111 109.9z" fill="#2a98fe" p-id="7749"></path><path d="M688.9 387.6l-353.9-0.5c-8.7 0-17.1-3.5-23.2-9.7-6.2-6.2-9.6-14.5-9.6-23.2l0.2-159.8c0-18.1 14.7-32.8 32.8-32.8l53.1 0.1c2.4-29.4 15-56.7 36.1-77.7 23.4-23.4 54.6-36.2 87.7-36.2h0.2c33.2 0 64.3 13 87.7 36.5 21.1 21.1 33.6 48.4 35.9 77.8l53.2 0.1c18.1 0 32.8 14.7 32.8 32.9l-0.2 159.8c0 8.7-3.5 17.1-9.7 23.2-6.1 6-14.4 9.5-23.1 9.5z m-321-66.1l288.1 0.3 0.1-94.1-56-0.1c-10.2 0-19.7-4.7-26-12.8-6.2-8-8.3-18.5-5.8-28.3 1.5-5.7 2.2-10.4 2.2-14.6 0-15.6-6-30.3-17.1-41.3-11.1-11.1-26.6-18-41.4-17.2-15.6 0-30.2 6.1-41.3 17.1-11.1 11-17.2 25.7-17.2 41.3 0 4.2 0.7 8.9 2.1 14.6 2.5 9.8 0.4 20.3-5.9 28.3-6.2 8-15.8 12.7-26 12.7l-56-0.1 0.2 94.2zM667.9 525H341.4c-17.5 0-31.7-14.2-31.7-31.7s14.2-31.7 31.7-31.7h326.5c17.5 0 31.7 14.2 31.7 31.7S685.4 525 667.9 525zM667.9 642.4H341.4c-17.5 0-31.7-14.2-31.7-31.7s14.2-31.7 31.7-31.7h326.5c17.5 0 31.7 14.2 31.7 31.7s-14.2 31.7-31.7 31.7zM667.9 759.8H341.4c-17.5 0-31.7-14.2-31.7-31.7s14.2-31.7 31.7-31.7h326.5c17.5 0 31.7 14.2 31.7 31.7s-14.2 31.7-31.7 31.7z" fill="#2a98fe" p-id="7750"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678185429472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5601" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M838.4 614.4c-19.2-12.8-51.2-6.4-70.4 6.4l-19.2 19.2 76.8 76.8 19.2-19.2c25.6-25.6 25.6-64-6.4-83.2zM537.6 857.6l-6.4 6.4-12.8 64c0 12.8 6.4 19.2 19.2 19.2l64-12.8s6.4 0 6.4-6.4l185.6-185.6-76.8-76.8-179.2 192z" fill="#1685FF" p-id="5602"></path><path d="M864 262.4L640 76.8c0-6.4-6.4-6.4-12.8-6.4h-384c-70.4 0-128 64-128 134.4v614.4c0 76.8 57.6 134.4 128 134.4h179.2c19.2 0 32-12.8 32-32s-12.8-32-32-32H236.8c-38.4 0-70.4-32-70.4-70.4V204.8c0-38.4 32-70.4 70.4-70.4h326.4v147.2c0 51.2 38.4 96 89.6 96h172.8v147.2c0 19.2 12.8 32 32 32s32-12.8 32-32V288c-12.8-12.8-12.8-19.2-25.6-25.6z m-217.6 44.8c-12.8 0-25.6-12.8-25.6-32V140.8l198.4 160v6.4h-172.8z" fill="#1685FF" p-id="5603"></path><path d="M537.6 723.2H307.2c-19.2 0-38.4-12.8-38.4-38.4s12.8-38.4 38.4-38.4h236.8c19.2 0 38.4 12.8 38.4 38.4s-19.2 38.4-44.8 38.4zM614.4 499.2H307.2c-19.2 0-32-19.2-32-38.4s12.8-38.4 32-38.4h307.2c19.2 0 32 12.8 32 38.4s-12.8 38.4-32 38.4z" fill="#1685FF" p-id="5604"></path></svg>
\ No newline at end of file

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

-import React, { useEffect, useState, useRef, useContext } from 'react';
+import React, { useEffect, useState, useRef, useContext, useMemo } from 'react';
 import {
   CreateTablePost,
   getTableInfo,
   updateTablePost,
   GetDefaultTableFields,
+  reloadTableFields,
+  removeFields,
 } from '@/services/tablemanager/tablemanager';
 import {
   Form,
@@ -18,6 +20,7 @@ import {
   Tooltip,
   Switch,
   Spin,
+  Empty,
 } from 'antd';
 import {
   DeleteOutlined,
@@ -29,6 +32,7 @@ import {
 import styles from './TableView.less';
 import primaryKey from '../../../../../assets/images/icons/主键.svg';
 import index from '../../../../../assets/images/icons/索引.svg';
+import clearImg from '@/assets/font/omsfont/clear.svg';
 // import { defaultFields } from './defaultFields';
 const EditableContext = React.createContext(null);
 
@@ -323,6 +327,7 @@ const TableView = props => {
   const [tableDataCount, setTableDataCount] = useState(false);
   const [defaultData, setDefaultData] = useState([]);
   const [showDefault, setShowDefault] = useState(true);
+  const [exceptionArr, setExceptionArr] = useState([]);
   const [form] = Form.useForm();
 
   useEffect(() => {
@@ -382,15 +387,42 @@ const TableView = props => {
         listitem = listitem.filter(item => !item.ReadOnly);
         setDataSource(listitem);
       }
+      reloadTableFieldsArr();
     } else {
       setShowDefault(false);
       setDataSource([]);
       setDefaultData([]);
       setSelectedRowKeys([]);
+      setExceptionArr([]);
       form.resetFields();
     }
   }, [visible]);
 
+  const removeMissingFields = () => {
+    let ids = exceptionArr.map(item => item.ID).join(',');
+    removeFields({
+      fieldIDs: ids,
+    }).then(res => {
+      if (res.code === 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '清除成功',
+        });
+        reloadTableFieldsArr();
+      }
+    });
+  };
+  const reloadTableFieldsArr = () => {
+    reloadTableFields({
+      tableName: formObj.tableName,
+    }).then(res => {
+      if (res.msg === 'Ok') {
+        setExceptionArr(res.data.root.filter(item => item.group === '(缺少字段)'));
+      }
+    });
+  };
+
   // 提交表单
   const onFinish = () => {
     // 校验提示
@@ -509,6 +541,13 @@ const TableView = props => {
     const newData = dataSource.filter((item, index) => index !== keyIndex);
     setDataSource(newData);
   };
+  const addArr = useMemo(() => {
+    let arr = JSON.parse(JSON.stringify(dataSource));
+    if (showDefault) {
+      return arr;
+    }
+    return [...defaultData, ...arr];
+  }, [showDefault, defaultData, dataSource]);
   // 修改后存值
   const handleSave = (row, key) => {
     if (key === 'FieldType') {
@@ -553,11 +592,15 @@ const TableView = props => {
     }
     setDataSource(list);
   };
-  const deleteAddField = index => {
-    // let arr = dataSource;
-    // arr[index].IsAddFieldConfig = false;
-    // setDataSource(arr);
-    // console.log(index, arr, 'indexxxxxxxxxxx');
+  const deleteAddField = (index, name) => {
+    let arr = JSON.parse(JSON.stringify(dataSource));
+    arr.forEach(item => {
+      if (item.Name === name) {
+        item.IsAddFieldConfig = false;
+      }
+    });
+    console.log(arr, name, 'arrarrarrarrarrarr');
+    setDataSource(arr);
   };
   // 表格设置
   const components = {
@@ -665,7 +708,7 @@ const TableView = props => {
     },
     {
       title: '操作',
-      width: 100,
+      width: 50,
       align: 'center',
       render: (_, record, index) =>
         dataSource.length >= 1 ? (
@@ -751,11 +794,11 @@ const TableView = props => {
                   />
                 </Form.Item>
                 <Form.Item
-                  label="别名"
+                  label="展示名称"
                   name="alias"
                   style={{ marginBottom: '0', marginLeft: '10px' }}
                 >
-                  <Input placeholder="请填写别名" />
+                  <Input placeholder="请填写展示名称" />
                 </Form.Item>
               </div>
               <div style={{ display: 'flex' }}>
@@ -804,22 +847,59 @@ const TableView = props => {
           </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 className={styles.subArea} style={{ height: exceptionArr.length ? '70%' : '100%' }}>
+            <div className={styles.subTitle}>已附加字段集</div>
+            <div className={styles.subItems}>
+              {addArr.map((item, index) =>
+                item.IsAddFieldConfig ? (
+                  <div className={styles.subItem}>
+                    <span>{item.Alias || item.Name}</span>{' '}
+                    <span
+                      className={styles.deleteItem}
+                      onClick={() => deleteAddField(index, item.Name)}
+                    >
+                      X
+                    </span>
+                  </div>
+                ) : null,
+              )}
+              {/* {dataSource.some(item => {
+                item.IsAddFieldConfig;
+              })?:<Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="暂无数据"
+              style={{ margin: '20px auto 0px auto', paddingTop: '50px' }}
+            />} */}
+            </div>
           </div>
+          {exceptionArr.length ? (
+            <div className={styles.exceptionArea}>
+              <div className={styles.subTitle}>
+                异常字段集{' '}
+                <Button
+                  danger
+                  style={{
+                    borderRadius: '4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-around',
+                  }}
+                  onClick={() => removeMissingFields()}
+                  size="small"
+                >
+                  <img src={clearImg} alt="" style={{ width: '14px' }} />
+                  一键清除
+                </Button>
+              </div>
+              <div className={styles.subItems}>
+                {exceptionArr.map((item, index) => (
+                  <div className={styles.subItem}>
+                    <span style={{ color: 'red' }}>{item.alias || item.name}</span>{' '}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
         </div>
       </div>
     </Modal>

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

@@ -3,36 +3,62 @@
   display: flex;
 
   >div {
-    width: 80%;
+    width: 75%;
   }
+
   .subContent {
-    width: 20%;
+    width: 25%;
     padding: 8px;
     margin-left: 10px;
     border-left: 3px solid gainsboro;
 
-    .subTitle {
-      font-weight: bold;
-    }
-    .subItems {
-      padding: 0 10px;
-      overflow-y: auto;
+    .subArea,
+    .exceptionArea {
       height: 100%;
-      padding: 5px 10px;
 
-      .subItem {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 5px;
+      .subTitle {
+        background: #E6F3FF;
+        color: #2495FF;
+        padding: 4px 2px;
+        border-radius: 8px;
+        padding-left: 4px;
+        border: 1px solid #C0DFFC;
+      }
+
+      .subItems {
+        padding: 0 10px;
+        overflow-y: auto;
+        height: 95%;
+        padding: 5px 10px;
+
+        .subItem {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 5px;
 
-        // >span:last-child:hover {
-        //   cursor: pointer;
-        // }
-        .deleteItem {
-          opacity: 0;
+          // >span:last-child:hover {
+          //   cursor: pointer;
+          // }
+          .deleteItem {
+            display: none;
+          }
         }
       }
     }
+
+    .exceptionArea {
+      height: 20%;
+      margin-top: 20px;
+
+      .subTitle {
+        background: #FCE7E7;
+        color: #FF4C3E;
+        border: 1px solid #FDBBBB;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
   }
 
   :global {

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

@@ -25,6 +25,8 @@ import {
   RollbackOutlined,
   ConsoleSqlOutlined,
   EyeOutlined,
+  ArrowLeftOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
 import {
   reloadTableFields,
@@ -38,6 +40,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 { LayerSetting } from '@/services/gis/gis';
 const AddModal = props => {
@@ -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(''); // 弹窗类型
@@ -191,6 +195,7 @@ 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,7 +464,8 @@ const AddModal = props => {
       <Spin tip="loading..." spinning={treeLoading}>
         <div className={styles.containerBox}>
           <div className={styles.config}>
-            <div className={styles.title}> 字段配置 【{formObj}】</div>
+            <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' }}>
@@ -482,39 +488,43 @@ const AddModal = props => {
                 </TreeSelect>
               </div> */}
               <div className={styles.btn}>
-                {/* <Button
-                  type="primary"
-                  icon={<PlusSquareOutlined />}
-                  onClick={() => formRef.current.clear()}
-                >
-                  清除
-                </Button> */}
                 <Button
                   type="primary"
                   // icon={<PlusSquareOutlined />}
-                  onClick={() => formRef.current.submit()}
+                  ghost
+                  onClick={() => formRef.current.clear()}
                 >
-                  提交
+                  <img src={clearSvg} style={{ marginRight: '6px' }} alt="" />
+                  清空
                 </Button>
                 <Button
                   type="primary"
-                  // icon={<PlusSquareOutlined />}
+                  ghost
+                  icon={<EyeOutlined />}
                   onClick={() => formRef.current.preview()}
-                  style={{ marginLeft: '30px' }}
+                  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
                   type="primary"
                   icon={<RollbackOutlined />}
                   onClick={back}
                   style={{ marginLeft: '30px' }}
                 >
                   返回
-                </Button>
+                </Button> */}
               </div>
             </div>
           </div>

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

@@ -119,6 +119,16 @@
   padding: 1rem 0 0.5rem 0.5rem;
   justify-content: space-between;
   width: calc(100% - 10px);
+  position: relative;
+  padding-left: 50px;
+
+  .goBack {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-32%);
+    font-size: 18px;
+  }
   .title {
     font-size: 18px;
     color: rgba(0, 114, 255, 1);
@@ -142,4 +152,8 @@
     margin-bottom: 2px;
   }
 }
-
+:global {
+  svg {
+    vertical-align: initial!important;
+  }
+}

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

@@ -62,6 +62,7 @@ import ChooseTableType from './components/ChooseTableType';
 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 = '请输入表名';
@@ -371,6 +372,7 @@ const TableManager = props => {
     history.push({
       pathname: `/biz/account/fieldConfig`,
       state: {
+        name: record.tableAlias || record.tableName,
         id: record.tableName,
         template: record,
         tableScroll: document.querySelector('.ant-table-body').scrollTop,
@@ -425,7 +427,7 @@ const TableManager = props => {
       align: 'center',
       width: 240,
       render: (text, record) => {
-        if (record.exceptionFields === '(无)') {
+        if (record.missingFieldCount === '(无)') {
           return <Tag color="processing">{text}</Tag>;
         }
         return <Tag color="error">{text}</Tag>;
@@ -433,8 +435,8 @@ const TableManager = props => {
     },
     {
       title: '异常字段',
-      dataIndex: 'exceptionFields',
-      key: 'exceptionFields',
+      dataIndex: 'missingFieldCount',
+      key: 'missingFieldCount',
       align: 'center',
       width: 80,
       render: record => {
@@ -496,10 +498,10 @@ const TableManager = props => {
       ellipsis: true,
       key: 'tableID',
       align: 'center',
-      width: 100,
+      width: 120,
       render: (text, record) => (
         <Space>
-          <Tooltip title="表模型管理">
+          <Tooltip title="表结构设计">
             {/* <EditOutlined
               onClick={() => changeDesc(record)}
               style={{ fontSize: '20px', color: '#1890FF' }}
@@ -514,7 +516,7 @@ const TableManager = props => {
                 setVisible(true);
                 setFormObj(record);
               }}
-              style={{ width: '20px', color: '#1890FF' }}
+              style={{ width: '16px', color: '#1890FF' }}
             />
           </Tooltip>
           <Tooltip title="表单设计">
@@ -539,7 +541,7 @@ const TableManager = props => {
                 e.stopPropagation();
                 pushFieldConfig(record);
               }}
-              style={{ width: '20px', color: '#1890FF' }}
+              style={{ width: '16px', color: '#1890FF' }}
             />
           </Tooltip>
           {/* <Tooltip title="字段配置">
@@ -570,7 +572,13 @@ const TableManager = props => {
               }}
             >
               <Tooltip title="删除">
-                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+                {/* <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> */}
+                <img
+                  className={styles.btnImg}
+                  src={deleteSvg}
+                  alt=""
+                  style={{ width: '16px', color: '#1890FF' }}
+                />
               </Tooltip>
             </Popconfirm>
           </div>
@@ -578,6 +586,11 @@ const TableManager = props => {
       ),
     },
   ];
+
+  const tableListCancel = () => {
+    console.log('取消咯666666');
+    setVisible(false);
+  };
   const pageChage = (page, pageSize) => {
     const list = JSON.parse(JSON.stringify(groupArr));
     list[pickIndex].page = page;
@@ -801,7 +814,7 @@ const TableManager = props => {
         <AddTablelList
           visible={visible && (type === 'add' || type === 'tableEdit')}
           type={type}
-          onCancel={() => setVisible(false)}
+          onCancel={() => tableListCancel()}
           formObj={formObj}
           callBackSubmit={onSubmit}
           defaultFieldsList={defaultFieldsList}