浏览代码

style: ERP店铺管理页面布局优化,与其他管理页面风格统一

- 搜索区改为 el-form :inline 布局,带标签和重置按钮
- 标题+操作按钮改为 flex 左右布局,与 ERP 商品页一致
- 分页移到表格下方独立区域

Co-Authored-By: Claude <noreply@anthropic.com>
skyline 1 天之前
父节点
当前提交
b989702664
共有 1 个文件被更改,包括 84 次插入46 次删除
  1. 84 46
      haha-admin-web/src/views/erp-shop/index.vue

+ 84 - 46
haha-admin-web/src/views/erp-shop/index.vue

@@ -5,6 +5,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Refresh from "~icons/ep/refresh";
 import Link from "~icons/ep/link";
 import Remove from "~icons/ep/remove";
+import Search from "~icons/ep/search";
 import {
   syncErpShops,
   getErpShopList,
@@ -23,8 +24,12 @@ const loading = ref(false);
 const syncing = ref(false);
 const autoBinding = ref(false);
 const unbindingAll = ref(false);
-const keyword = ref("");
-const boundStatus = ref<number | undefined>(undefined);
+
+const form = reactive({
+  keyword: "",
+  boundStatus: undefined as number | undefined
+});
+
 const dataList = ref<any[]>([]);
 const total = ref(0);
 const pagination = reactive({ currentPage: 1, pageSize: 10 });
@@ -38,8 +43,8 @@ async function fetchList() {
   loading.value = true;
   try {
     const res = await getErpShopList({
-      keyword: keyword.value || undefined,
-      boundStatus: boundStatus.value,
+      keyword: form.keyword || undefined,
+      boundStatus: form.boundStatus,
       page: pagination.currentPage,
       pageSize: pagination.pageSize
     });
@@ -53,19 +58,26 @@ async function fetchList() {
   }
 }
 
-function handlePageChange(page: number) {
-  pagination.currentPage = page;
+function resetForm() {
+  form.keyword = "";
+  form.boundStatus = undefined;
+  pagination.currentPage = 1;
   fetchList();
 }
 
-function handleSizeChange(size: number) {
+function handleSearch() {
   pagination.currentPage = 1;
-  pagination.pageSize = size;
   fetchList();
 }
 
-function handleSearch() {
+function handlePageChange(page: number) {
+  pagination.currentPage = page;
+  fetchList();
+}
+
+function handleSizeChange(size: number) {
   pagination.currentPage = 1;
+  pagination.pageSize = size;
   fetchList();
 }
 
@@ -79,7 +91,7 @@ async function fetchBoundStatus() {
         erp._boundDevice = bound || null;
       });
     }
-  } catch (e) {
+  } catch {
     // ignore
   }
 }
@@ -93,7 +105,7 @@ async function handleSync() {
     } else {
       ElMessage.error(res.message || "同步失败");
     }
-  } catch (e) {
+  } catch {
     ElMessage.error("同步请求失败,请稍后重试");
   } finally {
     syncing.value = false;
@@ -110,7 +122,7 @@ async function handleAutoBind() {
     } else {
       ElMessage.error(res.message || "自动绑定失败");
     }
-  } catch (e) {
+  } catch {
     ElMessage.error("自动绑定请求失败");
   } finally {
     autoBinding.value = false;
@@ -188,7 +200,7 @@ async function handleUnbind(row: any) {
     } else {
       ElMessage.error(res.message || "解绑失败");
     }
-  } catch (e) {
+  } catch {
     // 取消操作
   }
 }
@@ -200,12 +212,16 @@ onMounted(() => {
 
 <template>
   <div class="main">
-    <div class="px-6 pt-4 flex items-center justify-between">
-      <h2 class="text-lg font-semibold">ERP 店铺管理</h2>
-      <div class="flex items-center gap-3">
+    <!-- 搜索表单区域 -->
+    <el-form
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="绑定状态:">
         <el-select
-          v-model="boundStatus"
-          placeholder="绑定状态"
+          v-model="form.boundStatus"
+          placeholder="全部"
           clearable
           class="w-[140px]!"
           @change="handleSearch"
@@ -213,40 +229,61 @@ onMounted(() => {
           <el-option label="已绑定" :value="1" />
           <el-option label="未绑定" :value="0" />
         </el-select>
+      </el-form-item>
+      <el-form-item label="店铺名称:">
         <el-input
-          v-model="keyword"
+          v-model="form.keyword"
           placeholder="搜索店铺名称或卖家账号"
           clearable
           class="w-[240px]!"
           @keyup.enter="handleSearch"
         />
-        <el-button @click="handleSearch">搜索</el-button>
+      </el-form-item>
+      <el-form-item>
         <el-button
           type="primary"
-          :icon="useRenderIcon(Refresh)"
-          :loading="syncing"
-          @click="handleSync"
+          :icon="useRenderIcon(Search)"
+          :loading="loading"
+          @click="handleSearch"
         >
-          从 ERP 同步
+          搜索
         </el-button>
-        <el-button
-          type="success"
-          :loading="autoBinding"
-          @click="handleAutoBind"
-        >
-          一键绑定
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
+          重置
         </el-button>
-        <el-button
-          type="danger"
-          :loading="unbindingAll"
-          @click="handleUnbindAll"
-        >
-          一键解绑
-        </el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
 
+    <!-- 操作按钮 + 表格 -->
     <div class="px-6 pt-4">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold">ERP 店铺管理</h2>
+        <div class="flex items-center gap-2">
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(Refresh)"
+            :loading="syncing"
+            @click="handleSync"
+          >
+            从 ERP 同步
+          </el-button>
+          <el-button
+            type="success"
+            :loading="autoBinding"
+            @click="handleAutoBind"
+          >
+            一键绑定
+          </el-button>
+          <el-button
+            type="danger"
+            :loading="unbindingAll"
+            @click="handleUnbindAll"
+          >
+            一键解绑
+          </el-button>
+        </div>
+      </div>
+
       <el-table
         v-loading="loading"
         :data="dataList"
@@ -254,12 +291,13 @@ onMounted(() => {
         stripe
         style="width: 100%"
         empty-text="暂无数据,请先同步ERP店铺"
+        :row-style="{ height: '64px' }"
       >
-        <el-table-column prop="erpShopId" label="ERP店铺ID" width="160" />
-        <el-table-column prop="shopName" label="店铺名称" min-width="180" />
-        <el-table-column prop="nickName" label="卖家账号" min-width="180" />
-        <el-table-column prop="shopCode" label="设备ID" width="180" />
-        <el-table-column label="绑定设备" min-width="160">
+        <el-table-column prop="erpShopId" label="ERP店铺ID" width="160" align="center" />
+        <el-table-column prop="shopName" label="店铺名称" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="nickName" label="卖家账号" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="shopCode" label="设备ID(shopCode)" width="180" align="center" show-overflow-tooltip />
+        <el-table-column label="绑定设备" min-width="180">
           <template #default="{ row }">
             <el-popover
               v-if="row._boundDevice"
@@ -273,7 +311,7 @@ onMounted(() => {
                 </el-tag>
               </template>
               <div class="text-sm">
-                <div class="font-medium text-base mb-3">{{ row._boundDevice.deviceId || row._boundDevice.name }}</div>
+                <div class="font-medium text-base mb-3">{{ row._boundDevice.name || row._boundDevice.deviceId }}</div>
                 <div class="grid grid-cols-[60px_1fr] gap-y-2 gap-x-2 text-xs">
                   <span class="text-gray-400">设备名称</span>
                   <span>{{ row._boundDevice.name || '-' }}</span>
@@ -289,7 +327,7 @@ onMounted(() => {
             <span v-else class="text-gray-400">未绑定</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="160" fixed="right">
+        <el-table-column label="操作" width="160" fixed="right" align="center">
           <template #default="{ row }">
             <el-button
               v-if="!row._boundDevice"