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

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%;
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    max-height: 20rem;
+.field {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  max-height: 20rem;
+  overflow-y: scroll;
+  .ant-card {
+    width: 90.5%;
+    margin-left: 40px;
+  }
+  .ant-card-head-title {
+    flex: none;
+  }
+  .ant-card-extra {
+    margin-left: 0.2rem;
+  }
+  .ant-card-body {
+    // padding: 0 ;
+    height: 15rem;
     overflow-y: scroll;
-    .ant-card{
-        width: 83%;
-        margin-left: 4rem;
-    }
-    .ant-card-head-title{
-        flex: none;
-    }
-    .ant-card-extra{
-        margin-left: 0.2rem;
-    }
-    .ant-card-body{
-        // padding: 0 ;
-        height: 15rem;
-        overflow-y: scroll;
-    }
-   
+  }
 }
 
-.paneTitle{
-    font-weight: bold;
-    font-size: 18px;
-    margin: 0 0 0.5rem 4rem;
+.paneTitle {
+  font-weight: bold;
+  font-size: 18px;
+  margin: 0 0 0.5rem 38px;
 }
-.listEvent{
-    display: flex;
-
+.listEvent {
+  display: flex;
 }
-.cardList{
-    .ant-card-body{
-        overflow-y:none  !important;
-    }
+.cardList {
+  .ant-card-body {
+    overflow-y: none !important;
+  }
 }
-.unit{
-    display: flex;
-    margin-left: 1.1rem;
-    align-items: center;
-
+.unit {
+  display: flex;
+  margin-left: 1.1rem;
+  align-items: center;
 }
-.listCard{
-    display: flex;
-    .cardItem{
-        width: 50%;
-        padding: 0.5rem;
-    }
-    .cardContent{
-        height:35rem;
-        overflow-y: scroll;
-        width: 22rem;
-    }
-    .cardItemData{
-        padding: 1rem;
-        border: 1px solid #b5b8c8;
-        margin-bottom: 1rem;
-    }
+.listCard {
+  display: flex;
+  .cardItem {
+    width: 50%;
+    padding: 0.5rem;
+  }
+  .cardContent {
+    height: 35rem;
+    overflow-y: scroll;
+    width: 22rem;
+  }
+  .cardItemData {
+    padding: 1rem;
+    border: 1px solid #b5b8c8;
+    margin-bottom: 1rem;
+  }
 }
 .sortable-ghost {
-    border-bottom: 2px dashed #1890ff;
-  }
-  
-  .doctorTable {
-    margin-bottom: 16px;
-    table {
-      width: 100%;
-      td {
-        padding: 6px;
-        border: 1px solid #e8e8e8;
+  border-bottom: 2px dashed #1890ff;
+}
+
+.doctorTable {
+  margin-bottom: 16px;
+  table {
+    width: 100%;
+    td {
+      padding: 6px;
+      border: 1px solid #e8e8e8;
+    }
+    thead {
+      tr {
+        font-weight: 600;
+        background: #fafafa;
       }
-      thead {
-        tr {
-          font-weight: 600;
-          background: #FAFAFA;
-        }
-        td{
-            width: 12rem;
-        }
+      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 {
-    border-bottom: 2px dashed #1890ff;
-  }
-  
-  tr.drop-over-upward td {
-    border-top: 2px dashed #1890ff;
-  }
-  .clickRowStyle{
-    background: #cfe7fd;
-}
\ No newline at end of file
+tr.drop-over-downward td {
+  border-bottom: 2px dashed #1890ff;
+}
+
+tr.drop-over-upward td {
+  border-top: 2px dashed #1890ff;
+}
+.clickRowStyle {
+  background: #cfe7fd;
+}