fix: '优化表字段有空白的模态'

src/pages/bsmanager/base/tablemanager/components/Field/addTable.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Modal, Input, Select, Checkbox, Divider, notification, Row } from 'antd';
 
-import {
-    createTable, loadTableFields, addFields
-} from '@/services/tablemanager/tablemanager'
+import { createTable, loadTableFields, addFields } from '@/services/tablemanager/tablemanager';
 
-import styles from './index.less'
+import styles from './index.less';
 const { Option } = Select;
 const CheckboxGroup = Checkbox.Group;
 const editor = props => {
-    const { callBackSubmit = () => { }, type, visible } = props;
-    const [reminder, setReminder] = useState(' 事件表会默认创建如下字段：事件编号、事件状态、事件名称上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶')
+  const { callBackSubmit = () => {}, type, visible } = props;
+  const [reminder, setReminder] = useState(
+    ' 事件表会默认创建如下字段：事件编号、事件状态、事件名称上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶',
+  );
   const [loading, setLoading] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [form] = Form.useForm();
   const { Item } = Form;
-    const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
-    const [plainOptions, setPlainOptions] = useState([]);//复选框所有内容
+  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
+  const [plainOptions, setPlainOptions] = useState([]); // 复选框所有内容
   const [indeterminate, setIndeterminate] = useState(true);
   const [isVisible, setIsVisible] = useState(true);
   const [checkAll, setCheckAll] = useState(false);
-    const [chartName, setChartName] = useState('');//附加表名称
+  const [chartName, setChartName] = useState(''); // 附加表名称
 
   const onChange = list => {
     setCheckedList(list);
@@ -42,31 +42,33 @@ const editor = props => {
         let obj = form.getFieldsValue();
         obj.tableName = obj.tableType.substr(0, obj.tableType.length - 1) + '_' + obj.tableName;
         createTable({
-                    ...obj
-                }).then(res => {
+          ...obj,
+        })
+          .then(res => {
             setLoading(false);
-                    if (res.msg === "Ok") {
+            if (res.msg === 'Ok') {
               notification.success({
                 message: '提示',
                 duration: 1,
                 description: '建表成功',
               });
-                        setIsVisible(false)
-                        setChartName(res.data.tableInfo.Name)
+              setIsVisible(false);
+              setChartName(res.data.tableInfo.Name);
               loadTableFields({ tableName: res.data.tableInfo.Name }).then(response => {
                 if (response.data.root.length) {
-                                let arr = [], newArr = []
+                  let arr = [],
+                    newArr = [];
                   response.data.root.map(item => {
-                                    newArr.push(item.fieldName)
+                    newArr.push(item.fieldName);
                     if (item.isCheck) {
-                                        arr.push(item.fieldName)
+                      arr.push(item.fieldName);
                     }
-                                })
-                                setPlainOptions(newArr)
-                                setCheckedList(arr)
+                  });
+                  setPlainOptions(newArr);
+                  setCheckedList(arr);
                 }
-                            setIsModalVisible(true)
-                        })
+                setIsModalVisible(true);
+              });
             } else {
               form.resetFields();
               callBackSubmit();
@@ -76,7 +78,8 @@ const editor = props => {
                 description: res.msg,
               });
             }
-                }).catch(err => {
+          })
+          .catch(err => {
             console.log('err', err);
             notification.error({
               message: '提示',
@@ -85,7 +88,6 @@ const editor = props => {
             });
             setLoading(false);
           });
-
       }
     });
   };
@@ -93,51 +95,51 @@ const editor = props => {
     if (type != '') {
       form.setFieldsValue({ tableType: '事件表' });
     }
-
   }, [visible]);
   const handleOk = () => {
     if (chartName != '') {
       addFields({
         tableName: chartName,
-                fieldNames: checkedList.join(',')
-            }).then(res => {
-                if (res.msg === "Ok" || res.msg === "") {
+        fieldNames: checkedList.join(','),
+      })
+        .then(res => {
+          if (res.msg === 'Ok' || res.msg === '') {
             notification.success({
               message: '提示',
               duration: 1,
               description: '附加字段添加成功',
             });
-                    setIsModalVisible(false)
+            setIsModalVisible(false);
             form.resetFields();
             callBackSubmit();
-                }
-                else {
+          } else {
             notification.error({
               message: '提示',
               duration: 3,
               description: res.msg,
             });
           }
-            }).catch(err => {
-                console.log('err', err);
         })
-        }
-        else {
+        .catch(err => {
+          console.log('err', err);
+        });
+    } else {
       notification.success({
         message: '提示',
         duration: 1,
         description: '表名称没添加',
       });
     }
-    }
+  };
   const handleCancel = () => {
-        setIsModalVisible(false)
-    }
-    const changeChart = (value) => {
-        let str = ''
+    setIsModalVisible(false);
+  };
+  const changeChart = value => {
+    let str = '';
     switch (value) {
       case '事件表':
-                str = ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
+        str =
+          ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
         break;
       case '工单表':
         str = '工单表默认创建如下字段：工单编号';
@@ -146,31 +148,32 @@ const editor = props => {
         str = '台账表默认创建如下字段：所属站点、录入时间、是否删除';
         break;
       case '设备表':
-                str = '设备表默认创建如下字段：编码、父设备编码、GIS编号、设备名称、所属站点、坐标位置、风貌图、视频缩略图、第三方编码、录入时间、是否删除';
+        str =
+          '设备表默认创建如下字段：编码、父设备编码、GIS编号、设备名称、所属站点、坐标位置、风貌图、视频缩略图、第三方编码、录入时间、是否删除';
         break;
       case '反馈表':
-                str ='反馈表默认创建如下字段：编码、设备编码、录入时间、是否删除';
+        str = '反馈表默认创建如下字段：编码、设备编码、录入时间、是否删除';
         break;
-            default :
-            str = ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
-        }
-        setReminder(str)
+      default:
+        str =
+          ' 事件表默认创建如下字段：事件编号、事件状态、事件名称、上报站点、处理站点、上报人名称、上报人部分、上报时间、现场图片、现场录音、坐标位置、更新时间、更新状态、是否置顶';
     }
+    setReminder(str);
+  };
   const layout = {
     layout: 'horizontal',
     labelCol: {
       span: 4,
     },
     wrapperCol: {
-            span: 16,
+      span: 19,
     },
   };
 
-
   return (
     <>
       <Modal
-                title='建表'
+        title="建表"
         bodyStyle={{ width: '100%', minHeight: '100px' }}
         style={{ top: '150px' }}
         width="700px"
@@ -185,12 +188,11 @@ const editor = props => {
         forceRender={true}
         getContainer={false}
       >
-
-                <Form form={form} {...layout} >
-                    <Item
-                        label="【特别提示】"
-                    >
-                        <span>此处仅建立基础表和必要字段，额外字段需通过其他方式进行添加，比如使用Navicat工具等。</span>
+        <Form form={form} {...layout}>
+          <Item label="【特别提示】">
+            <span>
+              此处仅建立基础表和必要字段，额外字段需通过其他方式进行添加，比如使用Navicat工具等。
+            </span>
           </Item>
           <Item
             label="建表类型"
@@ -198,11 +200,11 @@ const editor = props => {
             rules={[{ required: true, message: '请输入表名' }]}
           >
             <Select onChange={changeChart}>
-                            <Select.Option value='事件表'>事件表</Select.Option>
-                            <Select.Option value='工单表'>工单表</Select.Option>
-                            <Select.Option value='台账表'>台账表</Select.Option>
-                            <Select.Option value='设备表'>设备表</Select.Option>
-                            <Select.Option value='反馈表'>反馈表</Select.Option>
+              <Select.Option value="事件表">事件表</Select.Option>
+              <Select.Option value="工单表">工单表</Select.Option>
+              <Select.Option value="台账表">台账表</Select.Option>
+              <Select.Option value="设备表">设备表</Select.Option>
+              <Select.Option value="反馈表">反馈表</Select.Option>
             </Select>
           </Item>
           <Item
@@ -212,20 +214,13 @@ const editor = props => {
           >
             <Input placeholder='请以"模块_表名"的个数输入' allowClear />
           </Item>
-                    <Item
-                        label="别名"
-                        name="alias"
-                    >
+          <Item label="别名" name="alias">
             <Input placeholder="请输入别名,通常用作该表的备注" allowClear />
           </Item>
-                    <Item
-                        label=" "
-                        colon={false}
-                    >
+          <Item label=" " colon={false}>
             <span> ●{reminder}</span>
           </Item>
         </Form>
-
       </Modal>
       <Modal title="附加字段" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
         <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
@@ -234,13 +229,13 @@ const editor = props => {
         <Divider />
         <div className={styles.field}>
           <Row>
-                        {
-                            plainOptions.length ? <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> : ''
-                        }
+            {plainOptions.length ? (
+              <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+            ) : (
+              ''
+            )}
           </Row>
         </div>
-
-
       </Modal>
     </>
   );

src/pages/bsmanager/base/tablemanager/components/Field/affiliateAdd.jsx

@@ -11,8 +11,8 @@ const AddModal = props => {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const { Item } = Form;
-  const [plainOptions, setPlainOptions] = useState([]); //复选框所有内容
-  const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
+  const [plainOptions, setPlainOptions] = useState([]); // 复选框所有内容
+  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
   const [indeterminate, setIndeterminate] = useState(true);
   const [checkAll, setCheckAll] = useState(false);
 
@@ -115,10 +115,10 @@ const AddModal = props => {
   const layout = {
     layout: 'horizontal',
     labelCol: {
-      span: 4,
+      span: 3,
     },
     wrapperCol: {
-      span: 18,
+      span: 20,
     },
   };
 

src/pages/bsmanager/base/tablemanager/components/Field/editor.jsx

@@ -49,10 +49,7 @@ const AddModal = props => {
         if (res.data.root && res.data.root.length) {
           form.setFieldsValue({
             ...res.data.root[0],
-            tableStyle:
-              res.data.root[0].tableStyle === ''
-                ? '大'
-                : res.data.root[0].tableStyle,
+            tableStyle: res.data.root[0].tableStyle === '' ? '大' : res.data.root[0].tableStyle,
           });
           setTableID(res.data.root[0].tableID);
         }
@@ -67,10 +64,10 @@ const AddModal = props => {
   const layout = {
     layout: 'horizontal',
     labelCol: {
-      span: 4,
+      span: 3,
     },
     wrapperCol: {
-      span: 17,
+      span: 20,
     },
   };
 
@@ -82,7 +79,7 @@ const AddModal = props => {
       width="700px"
       destroyOnClose
       maskClosable={false}
-      centered ={true}
+      centered={true}
       cancelText="取消"
       okText="确认"
       {...props}
@@ -93,21 +90,13 @@ const AddModal = props => {
     >
       {visible && (
         <Form form={form} {...layout}>
-          <Item
-            label="表名"
-            name="tableName"
-            rules={[{ required: true, message: '请输入表名' }]}
-          >
+          <Item label="表名" name="tableName" rules={[{ required: true, message: '请输入表名' }]}>
             <Input placeholder="请输入表名" allowClear />
           </Item>
           <Item label="别名" name="tableAlias">
             <Input placeholder="请输入别名" allowClear />
           </Item>
-          <Item
-            label="样式"
-            name="tableStyle"
-            rules={[{ required: true, message: '请选择样式' }]}
-          >
+          <Item label="样式" name="tableStyle" rules={[{ required: true, message: '请选择样式' }]}>
             <Radio.Group>
               <Radio value="大">大(3)</Radio>
               <Radio value="中">中(4)</Radio>

src/pages/bsmanager/base/tablemanager/components/Field/index.less

-.field{
-    width:100%;
+.field {
+  width: 100%;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   max-height: 20rem;
   overflow-y: scroll;
-    .ant-card{
-        width: 83%;
-        margin-left: 4rem;
+  .ant-card {
+    width: 90.5%;
+    margin-left: 40px;
   }
-    .ant-card-head-title{
+  .ant-card-head-title {
     flex: none;
   }
-    .ant-card-extra{
+  .ant-card-extra {
     margin-left: 0.2rem;
   }
-    .ant-card-body{
+  .ant-card-body {
     // padding: 0 ;
     height: 15rem;
     overflow-y: scroll;
   }
-   
 }
 
-.paneTitle{
+.paneTitle {
   font-weight: bold;
   font-size: 18px;
-    margin: 0 0 0.5rem 4rem;
+  margin: 0 0 0.5rem 38px;
 }
-.listEvent{
+.listEvent {
   display: flex;
-
 }
-.cardList{
-    .ant-card-body{
-        overflow-y:none  !important;
+.cardList {
+  .ant-card-body {
+    overflow-y: none !important;
   }
 }
-.unit{
+.unit {
   display: flex;
   margin-left: 1.1rem;
   align-items: center;
-
 }
-.listCard{
+.listCard {
   display: flex;
-    .cardItem{
+  .cardItem {
     width: 50%;
     padding: 0.5rem;
   }
-    .cardContent{
-        height:35rem;
+  .cardContent {
+    height: 35rem;
     overflow-y: scroll;
     width: 22rem;
   }
-    .cardItemData{
+  .cardItemData {
     padding: 1rem;
     border: 1px solid #b5b8c8;
     margin-bottom: 1rem;
@@ -62,9 +59,9 @@
 }
 .sortable-ghost {
   border-bottom: 2px dashed #1890ff;
-  }
+}
 
-  .doctorTable {
+.doctorTable {
   margin-bottom: 16px;
   table {
     width: 100%;
@@ -75,33 +72,33 @@
     thead {
       tr {
         font-weight: 600;
-          background: #FAFAFA;
+        background: #fafafa;
       }
-        td{
+      td {
         width: 12rem;
       }
     }
-      tbody{
-          tr:hover{
-              background-color:#ededed ;
-          }
+    tbody {
+      tr:hover {
+        background-color: #ededed;
       }
     }
   }
-  .defaultTile{
-    background-color:transparent ;
 }
-  .activeTile{
-      background-color:#dfe8f6 ;
-  }
+.defaultTile {
+  background-color: transparent;
+}
+.activeTile {
+  background-color: #dfe8f6;
+}
 
-  tr.drop-over-downward td {
+tr.drop-over-downward td {
   border-bottom: 2px dashed #1890ff;
-  }
+}
 
-  tr.drop-over-upward td {
+tr.drop-over-upward td {
   border-top: 2px dashed #1890ff;
-  }
-  .clickRowStyle{
+}
+.clickRowStyle {
   background: #cfe7fd;
 }