|
|
@@ -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"
|