update

src/views/merchant/List.vue

@@ -58,7 +58,7 @@
         v-model:visible="addModalVisible"
         title="添加商家"
         :confirmLoading="confirmLoading"
-        width="800px"
+        width="1000px"
         @cancel="handleCancel"
       >
         <template #footer>
@@ -74,9 +74,11 @@
           ref="formRef"
           :model="formState"
           :rules="rules"
-          :label-col="{ span: 6 }"
-          :wrapper-col="{ span: 16 }"
+          layout="vertical"
         >
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <div class="form-left-column">
                 <a-form-item label="品牌图片" name="brand_image_url" required>
                   <div class="upload-wrapper">
                     <a-upload
@@ -138,7 +140,10 @@
                 <a-form-item label="联系电话" name="phone" required>
                   <a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
                 </a-form-item>
-
+              </div>
+            </a-col>
+            <a-col :span="12">
+              <div class="form-right-column">
                 <a-form-item label="地址搜索">
                   <a-auto-complete
                     v-model:value="searchAddress"
@@ -181,6 +186,9 @@
                     />
                   </a-input-group>
                 </a-form-item>
+              </div>
+            </a-col>
+          </a-row>
         </a-form>
       </a-modal>
 
@@ -202,7 +210,7 @@
         v-model:visible="editModalVisible"
         title="修改商家"
         :confirmLoading="editLoading"
-        width="800px"
+        width="1000px"
         @cancel="handleEditCancel"
       >
         <template #footer>
@@ -218,9 +226,11 @@
           ref="editFormRef"
           :model="editFormState"
           :rules="rules"
-          :label-col="{ span: 6 }"
-          :wrapper-col="{ span: 16 }"
+          layout="vertical"
         >
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <div class="form-left-column">
                 <a-form-item label="品牌图片" name="brand_image_url" required>
                   <div class="upload-wrapper">
                     <a-upload
@@ -282,7 +292,10 @@
                 <a-form-item label="联系电话" name="phone" required>
                   <a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
                 </a-form-item>
-
+              </div>
+            </a-col>
+            <a-col :span="12">
+              <div class="form-right-column">
                 <a-form-item label="地址搜索">
                   <a-auto-complete
                     v-model:value="editSearchAddress"
@@ -325,6 +338,9 @@
                     />
                   </a-input-group>
                 </a-form-item>
+              </div>
+            </a-col>
+          </a-row>
         </a-form>
       </a-modal>
 
@@ -1481,4 +1497,34 @@ export default defineComponent({
   max-height: 80vh;
   overflow-y: auto;
 }
+
+.form-left-column,
+.form-right-column {
+  padding: 0 12px;
+}
+
+.form-left-column {
+  border-right: 1px dashed #f0f0f0;
+}
+
+.form-right-column {
+  height: 100%;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+}
+
+:deep(.ant-row-form) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:deep(.ant-input),
+:deep(.ant-select),
+:deep(.ant-input-number),
+:deep(.ant-picker),
+:deep(.ant-auto-complete) {
+  width: 100%;
+}
 </style>