manager 升级到vue3

manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue

@@ -1,19 +1,33 @@
 <template>
   <div class="wx-channel-category">
     <div class="toolbar">
-      <i-switch v-model="forceRefresh" size="large">
-        <span slot="open">强刷</span>
-        <span slot="close">缓存</span>
-      </i-switch>
-      <Button
-        type="primary"
-        @click="loadThirdCategories"
-        :loading="loading"
-        style="margin-left: 10px"
-        >刷新</Button
-      >
+      <el-switch v-model="forceRefresh" active-text="强刷" inactive-text="缓存" />
+      <el-button type="primary" :loading="loading" style="margin-left: 10px" @click="loadThirdCategories">
+        刷新
+      </el-button>
     </div>
-    <Table border :loading="loading" :columns="columns" :data="data"></Table>
+    <el-table v-loading="loading" border :data="data" style="width: 100%">
+      <el-table-column prop="firstCatName" label="一级类目" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="secondCatName" label="二级类目" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="thirdCatName" label="三级类目" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="thirdCatId" label="三级类目ID" width="120" />
+      <el-table-column prop="qualification" label="类目资质" min-width="220" show-overflow-tooltip />
+      <el-table-column label="类目资质类型" width="120">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="qualificationTagType(row.qualificationType)">
+            {{ qualificationLabel(row.qualificationType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="productQualification" label="商品资质" min-width="220" show-overflow-tooltip />
+      <el-table-column label="商品资质类型" width="120">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="qualificationTagType(row.productQualificationType)">
+            {{ qualificationLabel(row.productQualificationType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -27,48 +41,21 @@ export default {
       forceRefresh: false,
       loading: false,
       data: [],
-      columns: [
-        { title: "一级类目", key: "firstCatName", minWidth: 150, tooltip: true },
-        { title: "二级类目", key: "secondCatName", minWidth: 150, tooltip: true },
-        { title: "三级类目", key: "thirdCatName", minWidth: 200, tooltip: true },
-        { title: "三级类目ID", key: "thirdCatId", width: 120 },
-        { title: "类目资质", key: "qualification", minWidth: 220, tooltip: true },
-        {
-          title: "类目资质类型",
-          key: "qualificationType",
-          width: 120,
-          render: (h, params) => {
-            const val = params.row.qualificationType;
-            const map = { 0: "不需要", 1: "必填", 2: "选填" };
-            return h(
-              "Tag",
-              { props: { color: val === 1 ? "red" : val === 2 ? "orange" : "green" } },
-              map[val] || "-"
-            );
-          },
-        },
-        { title: "商品资质", key: "productQualification", minWidth: 220, tooltip: true },
-        {
-          title: "商品资质类型",
-          key: "productQualificationType",
-          width: 120,
-          render: (h, params) => {
-            const val = params.row.productQualificationType;
-            const map = { 0: "不需要", 1: "必填", 2: "选填" };
-            return h(
-              "Tag",
-              { props: { color: val === 1 ? "red" : val === 2 ? "orange" : "green" } },
-              map[val] || "-"
-            );
-          },
-        },
-      ],
     };
   },
   mounted() {
     this.loadThirdCategories();
   },
   methods: {
+    qualificationLabel(val) {
+      const map = { 0: "不需要", 1: "必填", 2: "选填" };
+      return map[val] || "-";
+    },
+    qualificationTagType(val) {
+      if (val === 1) return "danger";
+      if (val === 2) return "warning";
+      return "success";
+    },
     loadThirdCategories() {
       this.loading = true;
       getWxChannelsThirdCategory({ forceRefresh: !!this.forceRefresh })

manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue

@@ -1,46 +1,60 @@
 <template>
   <div class="wx-channel-goods">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="商品名称" prop="goodsName">
-          <Input
-            v-model="searchForm.goodsName"
-            placeholder="请输入商品名称"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Select v-model="searchForm.status" clearable style="width: 180px" placeholder="全部">
-            <Option v-for="item in statusList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <Button
-          @click="handleSearch"
-          type="primary"
-          icon="ios-search"
-          class="search-btn"
-          :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input
+          v-model="searchForm.goodsName"
+          placeholder="请输入商品名称"
+          clearable
+          style="width: 220px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="searchForm.status" clearable style="width: 180px" placeholder="全部">
+          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column label="商品图片" width="90" align="center">
+        <template #default="{ row }">
+          <img
+            v-if="row"
+            :src="row.goodsImage || ''"
+            alt="加载图片失败"
+            style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsName" label="商品名称" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="storeName" label="店铺" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="categoryName" label="分类" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="costPrice" label="销售价" width="100" />
+      <el-table-column prop="channelPrice" label="视频号价" width="100" />
+      <el-table-column prop="stock" label="库存" width="90" />
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="statusTagType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -65,52 +79,20 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        {
-          title: "商品图片",
-          key: "goodsImage",
-          width: 90,
-          align: "center",
-          render: (h, params) => {
-            return h("img", {
-              attrs: { src: params.row.goodsImage || "", alt: "加载图片失败" },
-              style: {
-                width: "50px",
-                height: "50px",
-                objectFit: "cover",
-                borderRadius: "4px",
-              },
-            });
-          },
-        },
-        { title: "商品名称", key: "goodsName", minWidth: 220, tooltip: true },
-        { title: "店铺", key: "storeName", minWidth: 160, tooltip: true },
-        { title: "分类", key: "categoryName", minWidth: 160, tooltip: true },
-        { title: "销售价", key: "costPrice", width: 100 },
-        { title: "视频号价", key: "channelPrice", width: 100 },
-        { title: "库存", key: "stock", width: 90 },
-        {
-          title: "状态",
-          key: "status",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.status;
-            const map = {
-              APPROVED: { label: "已通过", color: "green" },
-              PENDING: { label: "审核中", color: "orange" },
-              REJECTED: { label: "已拒绝", color: "red" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    statusLabel(val) {
+      const map = { APPROVED: "已通过", PENDING: "审核中", REJECTED: "已拒绝" };
+      return map[val] || val || "-";
+    },
+    statusTagType(val) {
+      const map = { APPROVED: "success", PENDING: "warning", REJECTED: "danger" };
+      return map[val] || "info";
+    },
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.loadPage();

manager/src/views/wx-channel/components/WxChannelsOrderTab.vue

@@ -1,61 +1,72 @@
 <template>
   <div class="wx-channel-order">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="订单编号" prop="channelOrderSn">
-          <Input
-            v-model="searchForm.channelOrderSn"
-            placeholder="视频号订单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="会员昵称" prop="memberNickName">
-          <Input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
-        </FormItem>
-        <FormItem label="商品名称" prop="goodsName">
-          <Input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Input v-model="searchForm.status" placeholder="订单状态" clearable style="width: 140px" />
-        </FormItem>
-        <FormItem label="场景" prop="scene">
-          <Select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
-            <Option v-for="item in sceneList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="下单时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="订单编号" prop="channelOrderSn">
+        <el-input v-model="searchForm.channelOrderSn" placeholder="视频号订单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="会员昵称" prop="memberNickName">
+        <el-input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-input v-model="searchForm.status" placeholder="订单状态" clearable style="width: 140px" />
+      </el-form-item>
+      <el-form-item label="场景" prop="scene">
+        <el-select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
+          <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="下单时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column prop="channelOrderSn" label="视频号订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="orderSn" label="平台订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="memberNickName" label="会员昵称" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="amount" label="订单金额" width="110" />
+      <el-table-column label="订单状态" width="130">
+        <template #default="{ row }">
+          <el-tag v-if="row && row.status" type="primary">{{ row.status }}</el-tag>
+          <span v-else-if="row">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="channelName" label="带货视频号" min-width="160" show-overflow-tooltip />
+      <el-table-column label="下单场景" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="sceneTagType(row.scene)">{{ sceneLabel(row.scene) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip />
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -85,54 +96,28 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        { title: "视频号订单编号", key: "channelOrderSn", minWidth: 200, tooltip: true },
-        { title: "平台订单编号", key: "orderSn", minWidth: 200, tooltip: true },
-        { title: "会员昵称", key: "memberNickName", minWidth: 140, tooltip: true },
-        { title: "订单金额", key: "amount", width: 110 },
-        {
-          title: "订单状态",
-          key: "status",
-          width: 130,
-          render: (h, params) => {
-            const val = params.row.status;
-            if (!val) return h("span", "-");
-            return h("Tag", { props: { color: "blue" } }, val);
-          },
-        },
-        { title: "带货视频号", key: "channelName", minWidth: 160, tooltip: true },
-        {
-          title: "下单场景",
-          key: "scene",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.scene;
-            const map = {
-              LIVE: { label: "直播", color: "orange" },
-              WINDOW: { label: "橱窗", color: "purple" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-        { title: "创建时间", key: "createTime", minWidth: 160, tooltip: true },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    sceneLabel(val) {
+      const map = { LIVE: "直播", WINDOW: "橱窗" };
+      return map[val] || val || "-";
+    },
+    sceneTagType(val) {
+      const map = { LIVE: "warning", WINDOW: "" };
+      return map[val] || "info";
+    },
     selectDateRange(v) {
       if (!v || v.length !== 2) {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
-      const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
-      const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
+      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;
       this.searchForm.endTime = Number.isFinite(end) ? end : null;
     },

manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue

@@ -1,76 +1,76 @@
 <template>
-  <div class="wx-channel-overview">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="统计时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >查询</Button
-        >
-      </Form>
-    </Row>
+  <div v-loading="loading" class="wx-channel-overview">
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="统计时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">查询</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Row :gutter="16" style="margin-top: 12px">
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+    <el-row :gutter="16" style="margin-top: 12px">
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">视频号总销售额</div>
             <div class="value">{{ summary.totalSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">直播间销售额</div>
             <div class="value">{{ summary.liveSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">橱窗销售额</div>
             <div class="value">{{ summary.windowSales || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-    </Row>
-    <Row :gutter="16" style="margin-top: 16px">
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="16" style="margin-top: 16px">
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">视频号退款总金额</div>
             <div class="value">{{ summary.totalRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">直播间退款金额</div>
             <div class="value">{{ summary.liveRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-      <Col :xs="24" :sm="12" :md="8">
-        <Card dis-hover>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card shadow="never">
           <div class="overview-card">
             <div class="label">橱窗退款金额</div>
             <div class="value">{{ summary.windowRefund || 0 }}</div>
           </div>
-        </Card>
-      </Col>
-    </Row>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -107,8 +107,7 @@ export default {
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
+      const [startStr, endStr] = v;
       const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
       const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;

manager/src/views/wx-channel/components/WxChannelsRefundTab.vue

@@ -1,69 +1,74 @@
 <template>
   <div class="wx-channel-refund">
-    <Row>
-      <Form :model="searchForm" inline :label-width="70" class="search-form">
-        <FormItem label="退单编号" prop="channelRefundSn">
-          <Input
-            v-model="searchForm.channelRefundSn"
-            placeholder="视频号退单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="订单编号" prop="channelOrderSn">
-          <Input
-            v-model="searchForm.channelOrderSn"
-            placeholder="视频号订单编号"
-            clearable
-            style="width: 220px"
-          />
-        </FormItem>
-        <FormItem label="会员昵称" prop="memberNickName">
-          <Input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
-        </FormItem>
-        <FormItem label="商品名称" prop="goodsName">
-          <Input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
-        </FormItem>
-        <FormItem label="状态" prop="status">
-          <Input v-model="searchForm.status" placeholder="退单状态" clearable style="width: 140px" />
-        </FormItem>
-        <FormItem label="场景" prop="scene">
-          <Select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
-            <Option v-for="item in sceneList" :key="item.value" :value="item.value">{{ item.label }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="时间">
-          <DatePicker
-            type="daterange"
-            v-model="selectDate"
-            format="yyyy-MM-dd"
-            clearable
-            @on-change="selectDateRange"
-            placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </FormItem>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn" :loading="loading"
-          >搜索</Button
-        >
-      </Form>
-    </Row>
+    <el-form :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form-item label="退单编号" prop="channelRefundSn">
+        <el-input v-model="searchForm.channelRefundSn" placeholder="视频号退单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="channelOrderSn">
+        <el-input v-model="searchForm.channelOrderSn" placeholder="视频号订单编号" clearable style="width: 220px" />
+      </el-form-item>
+      <el-form-item label="会员昵称" prop="memberNickName">
+        <el-input v-model="searchForm.memberNickName" placeholder="请输入会员昵称" clearable style="width: 180px" />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="goodsName">
+        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-input v-model="searchForm.status" placeholder="退单状态" clearable style="width: 140px" />
+      </el-form-item>
+      <el-form-item label="场景" prop="scene">
+        <el-select v-model="searchForm.scene" clearable style="width: 140px" placeholder="全部">
+          <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间">
+        <el-date-picker
+          v-model="selectDate"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          clearable
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+          @change="selectDateRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" class="search-btn" :loading="loading" @click="handleSearch">搜索</el-button>
+      </el-form-item>
+    </el-form>
 
-    <Table :loading="loading" border :columns="columns" :data="data" class="mt_10"></Table>
-    <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
-      <Page
-        :current="searchForm.pageNumber"
+    <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table-column prop="channelRefundSn" label="视频号退单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="channelOrderSn" label="视频号订单编号" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="memberNickName" label="会员昵称" min-width="140" show-overflow-tooltip />
+      <el-table-column prop="amount" label="退款金额" width="110" />
+      <el-table-column label="退单状态" width="130">
+        <template #default="{ row }">
+          <el-tag v-if="row && row.status" type="primary">{{ row.status }}</el-tag>
+          <span v-else-if="row">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下单场景" width="110">
+        <template #default="{ row }">
+          <el-tag v-if="row" :type="sceneTagType(row.scene)">{{ sceneLabel(row.scene) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip />
+    </el-table>
+
+    <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <el-pagination
+        v-model:current-page="searchForm.pageNumber"
+        v-model:page-size="searchForm.pageSize"
+        :page-sizes="[20, 50, 100]"
         :total="total"
-        :page-size="searchForm.pageSize"
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-        :page-size-opts="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
         size="small"
-        show-total
-        show-elevator
-        show-sizer
-      ></Page>
-    </Row>
+        @current-change="changePage"
+        @size-change="changePageSize"
+      />
+    </div>
   </div>
 </template>
 
@@ -94,53 +99,28 @@ export default {
         pageNumber: 1,
         pageSize: 20,
       },
-      columns: [
-        { title: "视频号退单编号", key: "channelRefundSn", minWidth: 200, tooltip: true },
-        { title: "视频号订单编号", key: "channelOrderSn", minWidth: 200, tooltip: true },
-        { title: "会员昵称", key: "memberNickName", minWidth: 140, tooltip: true },
-        { title: "退款金额", key: "amount", width: 110 },
-        {
-          title: "退单状态",
-          key: "status",
-          width: 130,
-          render: (h, params) => {
-            const val = params.row.status;
-            if (!val) return h("span", "-");
-            return h("Tag", { props: { color: "blue" } }, val);
-          },
-        },
-        {
-          title: "下单场景",
-          key: "scene",
-          width: 110,
-          render: (h, params) => {
-            const val = params.row.scene;
-            const map = {
-              LIVE: { label: "直播", color: "orange" },
-              WINDOW: { label: "橱窗", color: "purple" },
-            };
-            const item = map[val] || { label: val || "-", color: "default" };
-            return h("Tag", { props: { color: item.color } }, item.label);
-          },
-        },
-        { title: "创建时间", key: "createTime", minWidth: 160, tooltip: true },
-      ],
     };
   },
   mounted() {
     this.loadPage();
   },
   methods: {
+    sceneLabel(val) {
+      const map = { LIVE: "直播", WINDOW: "橱窗" };
+      return map[val] || val || "-";
+    },
+    sceneTagType(val) {
+      const map = { LIVE: "warning", WINDOW: "" };
+      return map[val] || "info";
+    },
     selectDateRange(v) {
       if (!v || v.length !== 2) {
         this.searchForm.startTime = null;
         this.searchForm.endTime = null;
         return;
       }
-      const startStr = v[0];
-      const endStr = v[1];
-      const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
-      const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
+      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
       this.searchForm.startTime = Number.isFinite(start) ? start : null;
       this.searchForm.endTime = Number.isFinite(end) ? end : null;
     },

manager/src/views/wx-channel/components/WxChannelsSettingTab.vue

@@ -1,31 +1,30 @@
 <template>
-  <div class="wx-channel-setting">
-    <Form :label-width="160" label-position="right" :model="configObject">
-      <FormItem label="AppId">
-        <Input v-model="configObject.appId" style="width: 360px" />
-      </FormItem>
-      <FormItem label="AppSecret">
-        <Input v-model="configObject.appSecret" style="width: 360px" />
-      </FormItem>
-      <FormItem label="接口基础地址">
-        <Input
+  <div v-loading="loading" class="wx-channel-setting">
+    <el-form label-width="160px" label-position="right" :model="configObject">
+      <el-form-item label="AppId">
+        <el-input v-model="configObject.appId" style="width: 360px" />
+      </el-form-item>
+      <el-form-item label="AppSecret">
+        <el-input v-model="configObject.appSecret" style="width: 360px" />
+      </el-form-item>
+      <el-form-item label="接口基础地址">
+        <el-input
           v-model="configObject.apiBase"
           style="width: 360px"
           placeholder="https://api.weixin.qq.com/minishop"
         />
-      </FormItem>
-      <FormItem label="Token地址">
-        <Input
+      </el-form-item>
+      <el-form-item label="Token地址">
+        <el-input
           v-model="configObject.tokenUrl"
           style="width: 360px"
           placeholder="https://api.weixin.qq.com/cgi-bin/token"
         />
-      </FormItem>
+      </el-form-item>
       <div class="actions">
-        <Button type="primary" @click="submit" :loading="submitLoading">保存</Button>
+        <el-button type="primary" :loading="submitLoading" @click="submit">保存</el-button>
       </div>
-    </Form>
-    <Spin size="large" fix v-if="loading"></Spin>
+    </el-form>
   </div>
 </template>
 
@@ -79,8 +78,8 @@ export default {
       getSetting("WX_CHANNELS")
         .then((res) => {
           if (res && res.success) {
-            const base = this.normalizeConfig(res.result);
-            this.configObject = this.pickConfigFields(base);
+            const raw = this.normalizeConfig(res.result);
+            this.configObject = this.pickConfigFields(raw);
           }
         })
         .finally(() => {
@@ -88,12 +87,14 @@ export default {
         });
     },
     submit() {
-      const payload = { ...this.configObject };
       this.submitLoading = true;
-      setSetting("WX_CHANNELS", payload)
+      setSetting("WX_CHANNELS", this.configObject)
         .then((res) => {
           if (res && res.success) {
             this.$Message.success("保存成功");
+            this.reloadConfig();
+          } else {
+            this.$Message.error("保存失败");
           }
         })
         .finally(() => {
@@ -107,8 +108,5 @@ export default {
 <style scoped lang="scss">
 .actions {
   margin-left: 160px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
 }
 </style>

manager/src/views/wx-channel/wxChannel.vue

@@ -1,26 +1,26 @@
 <template>
-  <Card>
-    <Tabs v-model="selectedTab">
-      <TabPane label="视频号概括" name="WX_CHANNELS_OVERVIEW">
+  <el-card>
+    <el-tabs v-model="selectedTab">
+      <el-tab-pane label="视频号概括" name="WX_CHANNELS_OVERVIEW">
         <WxChannelsOverviewTab v-if="selectedTab === 'WX_CHANNELS_OVERVIEW'" />
-      </TabPane>
-      <TabPane label="视频号订单" name="WX_CHANNELS_ORDER">
+      </el-tab-pane>
+      <el-tab-pane label="视频号订单" name="WX_CHANNELS_ORDER">
         <WxChannelsOrderTab v-if="selectedTab === 'WX_CHANNELS_ORDER'" />
-      </TabPane>
-      <TabPane label="视频号退单" name="WX_CHANNELS_REFUND">
+      </el-tab-pane>
+      <el-tab-pane label="视频号退单" name="WX_CHANNELS_REFUND">
         <WxChannelsRefundTab v-if="selectedTab === 'WX_CHANNELS_REFUND'" />
-      </TabPane>
-      <TabPane label="视频号商品" name="WX_CHANNELS_GOODS">
+      </el-tab-pane>
+      <el-tab-pane label="视频号商品" name="WX_CHANNELS_GOODS">
         <WxChannelsGoodsTab v-if="selectedTab === 'WX_CHANNELS_GOODS'" />
-      </TabPane>
-      <TabPane label="视频号分类列表" name="WX_CHANNELS_CATEGORY">
+      </el-tab-pane>
+      <el-tab-pane label="视频号分类列表" name="WX_CHANNELS_CATEGORY">
         <WxChannelsCategoryTab v-if="selectedTab === 'WX_CHANNELS_CATEGORY'" />
-      </TabPane>
-      <TabPane label="视频号设置" name="WX_CHANNELS">
+      </el-tab-pane>
+      <el-tab-pane label="视频号设置" name="WX_CHANNELS">
         <WxChannelsSettingTab v-if="selectedTab === 'WX_CHANNELS'" />
-      </TabPane>
-    </Tabs>
-  </Card>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 
 <script>