From e94baa863001933b78e5a865917c89d14bb193eb Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 23 Mar 2025 16:47:09 +0800
Subject: [PATCH] update

---
 src/views/merchant/List.vue | 442 ++++++++++++++++++++----------------
 1 file changed, 244 insertions(+), 198 deletions(-)

diff --git a/src/views/merchant/List.vue b/src/views/merchant/List.vue
index 20f347f..35e3a12 100644
--- a/src/views/merchant/List.vue
+++ b/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,113 +74,121 @@
           ref="formRef"
           :model="formState"
           :rules="rules"
-          :label-col="{ span: 6 }"
-          :wrapper-col="{ span: 16 }"
+          layout="vertical"
         >
-          <a-form-item label="品牌图片" name="brand_image_url" required>
-            <div class="upload-wrapper">
-              <a-upload
-                v-model:fileList="brandImageList"
-                :customRequest="handleBrandImageUpload"
-                list-type="picture-card"
-                :maxCount="1"
-                @preview="handlePreview"
-                @remove="handleBrandImageRemove"
-                accept=".jpg,.jpeg,.png"
-              >
-                <div v-if="!formState.brand_image_url">
-                  <plus-outlined />
-                  <div style="margin-top: 8px">上传图片</div>
-                </div>
-              </a-upload>
-            </div>
-            <div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
-          </a-form-item>
+          <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
+                      v-model:fileList="brandImageList"
+                      :customRequest="handleBrandImageUpload"
+                      list-type="picture-card"
+                      :maxCount="1"
+                      @preview="handlePreview"
+                      @remove="handleBrandImageRemove"
+                      accept=".jpg,.jpeg,.png"
+                    >
+                      <div v-if="!formState.brand_image_url">
+                        <plus-outlined />
+                        <div style="margin-top: 8px">上传图片</div>
+                      </div>
+                    </a-upload>
+                  </div>
+                  <div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
+                </a-form-item>
 
-          <a-form-item label="选择用户" name="user_id" required>
-            <a-select
-              v-model:value="formState.user_id"
-              placeholder="请选择用户"
-              :loading="userLoading"
-              :filter-option="false"
-              :show-search="true"
-              @search="handleUserSearch"
-            >
-              <a-select-option 
-                v-for="user in userOptions" 
-                :key="user.userid" 
-                :value="user.userid"
-              >
-                {{ user.phone }} ({{ user.nickname || '未设置昵称' }})
-              </a-select-option>
-            </a-select>
-          </a-form-item>
+                <a-form-item label="选择用户" name="user_id" required>
+                  <a-select
+                    v-model:value="formState.user_id"
+                    placeholder="请选择用户"
+                    :loading="userLoading"
+                    :filter-option="false"
+                    :show-search="true"
+                    @search="handleUserSearch"
+                  >
+                    <a-select-option 
+                      v-for="user in userOptions" 
+                      :key="user.userid" 
+                      :value="user.userid"
+                    >
+                      {{ user.phone }} ({{ user.nickname || '未设置昵称' }})
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
 
-          <a-form-item label="商家分类" name="category_id" required>
-            <a-select
-              v-model:value="formState.category_id"
-              placeholder="请选择商家分类"
-              :options="categories.map(item => ({
-                value: item.id,
-                label: item.name
-              }))"
-            />
-          </a-form-item>
+                <a-form-item label="商家分类" name="category_id" required>
+                  <a-select
+                    v-model:value="formState.category_id"
+                    placeholder="请选择商家分类"
+                    :options="categories.map(item => ({
+                      value: item.id,
+                      label: item.name
+                    }))"
+                  />
+                </a-form-item>
 
-          <a-form-item label="商家名称" name="name" required>
-            <a-input v-model:value="formState.name" placeholder="请输入商家名称" />
-          </a-form-item>
+                <a-form-item label="商家名称" name="name" required>
+                  <a-input v-model:value="formState.name" placeholder="请输入商家名称" />
+                </a-form-item>
 
-          <a-form-item label="营业时间" name="business_hours" required>
-            <a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
-          </a-form-item>
+                <a-form-item label="营业时间" name="business_hours" required>
+                  <a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
+                </a-form-item>
 
-          <a-form-item label="联系电话" name="phone" required>
-            <a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
-          </a-form-item>
+                <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"
+                    :options="searchOptions"
+                    placeholder="输入地址搜索"
+                    @change="handleSearch"
+                    @select="handleSelect"
+                    :loading="searchLoading"
+                    allow-clear
+                  />
+                </a-form-item>
 
-          <a-form-item label="地址搜索">
-            <a-auto-complete
-              v-model:value="searchAddress"
-              :options="searchOptions"
-              placeholder="输入地址搜索"
-              @change="handleSearch"
-              @select="handleSelect"
-              :loading="searchLoading"
-              allow-clear
-            />
-          </a-form-item>
+                <a-form-item label="地图选点" required>
+                  <div class="map-container">
+                    <div id="add-map-container" style="height: 300px;"></div>
+                  </div>
+                </a-form-item>
 
-          <a-form-item label="地图选点" required>
-            <div class="map-container">
-              <div id="add-map-container" style="height: 300px;"></div>
-            </div>
-          </a-form-item>
+                <a-form-item label="详细地址" name="address" required>
+                  <a-input v-model:value="formState.address" placeholder="请输入详细地址" />
+                </a-form-item>
 
-          <a-form-item label="详细地址" name="address" required>
-            <a-input v-model:value="formState.address" placeholder="请输入详细地址" />
-          </a-form-item>
-
-          <a-form-item label="经纬度" required>
-            <a-input-group compact>
-              <a-input-number
-                v-model:value="formState.longitude"
-                :min="-180"
-                :max="180"
-                style="width: calc(100% - 8px); margin-right: 16px"
-                placeholder="经度"
-                disabled
-              />
-              <a-input-number
-                v-model:value="formState.latitude"
-                :min="-90"
-                :max="90"
-                style="width: calc(100% - 8px)"
-                placeholder="纬度"
-                disabled
-              />
-            </a-input-group>
-          </a-form-item>
+                <a-form-item label="经纬度" required>
+                  <a-input-group compact>
+                    <a-input-number
+                      v-model:value="formState.longitude"
+                      :min="-180"
+                      :max="180"
+                      style="width: calc(100% - 8px); margin-right: 16px"
+                      placeholder="经度"
+                      disabled
+                    />
+                    <a-input-number
+                      v-model:value="formState.latitude"
+                      :min="-90"
+                      :max="90"
+                      style="width: calc(100% - 8px)"
+                      placeholder="纬度"
+                      disabled
+                    />
+                  </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,113 +226,121 @@
           ref="editFormRef"
           :model="editFormState"
           :rules="rules"
-          :label-col="{ span: 6 }"
-          :wrapper-col="{ span: 16 }"
+          layout="vertical"
         >
-          <a-form-item label="品牌图片" name="brand_image_url" required>
-            <div class="upload-wrapper">
-              <a-upload
-                v-model:fileList="editBrandImageList"
-                :customRequest="handleBrandImageUpload"
-                list-type="picture-card"
-                :maxCount="1"
-                @preview="handlePreview"
-                @remove="handleBrandImageRemove"
-                accept=".jpg,.jpeg,.png"
-              >
-                <div v-if="!editFormState.brand_image_url">
-                  <plus-outlined />
-                  <div style="margin-top: 8px">上传图片</div>
-                </div>
-              </a-upload>
-            </div>
-            <div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
-          </a-form-item>
+          <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
+                      v-model:fileList="editBrandImageList"
+                      :customRequest="handleBrandImageUpload"
+                      list-type="picture-card"
+                      :maxCount="1"
+                      @preview="handlePreview"
+                      @remove="handleBrandImageRemove"
+                      accept=".jpg,.jpeg,.png"
+                    >
+                      <div v-if="!editFormState.brand_image_url">
+                        <plus-outlined />
+                        <div style="margin-top: 8px">上传图片</div>
+                      </div>
+                    </a-upload>
+                  </div>
+                  <div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
+                </a-form-item>
 
-          <a-form-item label="选择用户" name="user_id" required>
-            <a-select
-              v-model:value="editFormState.user_id"
-              placeholder="请选择用户"
-              :loading="userLoading"
-              :filter-option="false"
-              :show-search="true"
-              @search="handleUserSearch"
-            >
-              <a-select-option 
-                v-for="user in userOptions" 
-                :key="user.userid" 
-                :value="user.userid"
-              >
-                {{ user.phone }} ({{ user.nickname || '未设置昵称' }})
-              </a-select-option>
-            </a-select>
-          </a-form-item>
+                <a-form-item label="选择用户" name="user_id" required>
+                  <a-select
+                    v-model:value="editFormState.user_id"
+                    placeholder="请选择用户"
+                    :loading="userLoading"
+                    :filter-option="false"
+                    :show-search="true"
+                    @search="handleUserSearch"
+                  >
+                    <a-select-option 
+                      v-for="user in userOptions" 
+                      :key="user.userid" 
+                      :value="user.userid"
+                    >
+                      {{ user.phone }} ({{ user.nickname || '未设置昵称' }})
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
 
-          <a-form-item label="商家分类" name="category_id" required>
-            <a-select
-              v-model:value="editFormState.category_id"
-              placeholder="请选择商家分类"
-              :options="categories.map(item => ({
-                value: item.id,
-                label: item.name
-              }))"
-            />
-          </a-form-item>
+                <a-form-item label="商家分类" name="category_id" required>
+                  <a-select
+                    v-model:value="editFormState.category_id"
+                    placeholder="请选择商家分类"
+                    :options="categories.map(item => ({
+                      value: item.id,
+                      label: item.name
+                    }))"
+                  />
+                </a-form-item>
 
-          <a-form-item label="商家名称" name="name" required>
-            <a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
-          </a-form-item>
+                <a-form-item label="商家名称" name="name" required>
+                  <a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
+                </a-form-item>
 
-          <a-form-item label="营业时间" name="business_hours" required>
-            <a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
-          </a-form-item>
+                <a-form-item label="营业时间" name="business_hours" required>
+                  <a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
+                </a-form-item>
 
-          <a-form-item label="联系电话" name="phone" required>
-            <a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
-          </a-form-item>
+                <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"
+                    :options="searchOptions"
+                    placeholder="输入地址搜索"
+                    @change="handleSearch"
+                    @select="handleEditSelect"
+                    :loading="searchLoading"
+                    allow-clear
+                  />
+                </a-form-item>
 
-          <a-form-item label="地址搜索">
-            <a-auto-complete
-              v-model:value="editSearchAddress"
-              :options="searchOptions"
-              placeholder="输入地址搜索"
-              @change="handleSearch"
-              @select="handleEditSelect"
-              :loading="searchLoading"
-              allow-clear
-            />
-          </a-form-item>
+                <a-form-item label="地图选点" required>
+                  <div class="map-container">
+                    <div id="edit-map-container" style="height: 300px;"></div>
+                  </div>
+                </a-form-item>
 
-          <a-form-item label="地图选点" required>
-            <div class="map-container">
-              <div id="edit-map-container" style="height: 300px;"></div>
-            </div>
-          </a-form-item>
+                <a-form-item label="详细地址" name="address" required>
+                  <a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
+                </a-form-item>
 
-          <a-form-item label="详细地址" name="address" required>
-            <a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
-          </a-form-item>
-
-          <a-form-item label="经纬度" required>
-            <a-input-group compact>
-              <a-input-number
-                v-model:value="editFormState.longitude"
-                :min="-180"
-                :max="180"
-                style="width: calc(100% - 8px); margin-right: 16px"
-                placeholder="经度"
-                disabled
-              />
-              <a-input-number
-                v-model:value="editFormState.latitude"
-                :min="-90"
-                :max="90"
-                style="width: calc(100% - 8px)"
-                placeholder="纬度"
-                disabled
-              />
-            </a-input-group>
-          </a-form-item>
+                <a-form-item label="经纬度" required>
+                  <a-input-group compact>
+                    <a-input-number
+                      v-model:value="editFormState.longitude"
+                      :min="-180"
+                      :max="180"
+                      style="width: calc(100% - 8px); margin-right: 16px"
+                      placeholder="经度"
+                      disabled
+                    />
+                    <a-input-number
+                      v-model:value="editFormState.latitude"
+                      :min="-90"
+                      :max="90"
+                      style="width: calc(100% - 8px)"
+                      placeholder="纬度"
+                      disabled
+                    />
+                  </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> 
\ No newline at end of file