refactor(manager): 替换iView组件为TDesign并优化样式

- 将iView组件统一替换为TDesign组件
- 优化表单、表格、弹窗等交互样式
- 修复路由重复添加问题
- 更新依赖版本
- 调整布局间距与响应式
- 修复表单重置方法兼容性
- 统一消息提示组件

manager/src/views/order/flow/paymentLog.vue

@@ -1,38 +1,50 @@
 <template>
   <div class="search">
-    <Card>
-      <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
-          <Form-item label="订单号" prop="sn">
-            <Input type="text" v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
-          </Form-item>
-          <Form-item label="付款状态" prop="orderStatus">
-            <Select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
-              <Option value="UNPAID">未付款</Option>
-              <Option value="PAID">已付款</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="支付方式" prop="orderStatus">
-            <Select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
-              <Option value="">全部</Option>
-              <Option value="WECHAT">微信</Option>
-              <Option value="ALIPAY">支付宝</Option>
-              <Option value="WALLET">余额</Option>
-              <Option value="BANK_TRANSFER">银行转账</Option>
-            </Select>
-          </Form-item>
-          
-          <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-        </Form>
-      </Row>
-    </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small"
-          show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <t-card style="margin-bottom: 12px">
+      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
+        <t-form-item label="订单号" name="sn">
+          <t-input v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
+        </t-form-item>
+        <t-form-item label="支付方式" name="paymentMethod">
+          <t-select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
+            <t-option value="" label="全部" />
+            <t-option value="WECHAT" label="微信" />
+            <t-option value="ALIPAY" label="支付宝" />
+            <t-option value="WALLET" label="余额" />
+            <t-option value="BANK_TRANSFER" label="银行转账" />
+          </t-select>
+        </t-form-item>
+        <t-form-item>
+          <t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button>
+          <t-button variant="outline" style="margin-left: 8px" @click="handleReset">重置</t-button>
+        </t-form-item>
+      </t-form>
+    </t-card>
+    <t-card>
+      <div class="order-tab">
+        <t-tabs v-model="activeStatus" @change="onStatusTabChange">
+          <t-tab-panel label="全部" value="ALL" />
+          <t-tab-panel label="未付款" value="UNPAID" />
+          <t-tab-panel label="已付款" value="PAID" />
+        </t-tabs>
+      </div>
+      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id">
+        <template #paymentMethodTag="{ row }">
+          <t-tag v-if="row.paymentMethod === 'WECHAT'" theme="success" size="small" variant="light">微信</t-tag>
+          <t-tag v-else-if="row.paymentMethod === 'ALIPAY'" theme="primary" size="small" variant="light">支付宝</t-tag>
+          <t-tag v-else-if="row.paymentMethod === 'WALLET'" theme="warning" size="small" variant="light">余额支付</t-tag>
+          <t-tag v-else-if="row.paymentMethod === 'BANK_TRANSFER'" theme="warning" size="small" variant="light">银行转账</t-tag>
+          <t-tag v-else size="small" variant="light">暂未付款</t-tag>
+        </template>
+        <template #payStatusTag="{ row }">
+          <t-tag v-if="row.payStatus === 'PAID'" theme="success" size="small" variant="light">已付款</t-tag>
+          <t-tag v-else theme="danger" size="small" variant="light">未付款</t-tag>
+        </template>
+      </t-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
+      </div>
+    </t-card>
   </div>
 </template>
 
@@ -44,6 +56,7 @@ export default {
   data() {
     return {
       loading: true, // 表单加载状态
+      activeStatus: 'ALL',
       searchForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
@@ -54,112 +67,24 @@ export default {
         payStatus: "",
         startDate: "", //订单创建时间
         endDate: "", //订单结束时间
+        paymentMethod: "",
       },
-      times: [], //订单创建时间
       columns: [
-        {
-          title: "订单/交易编号",
-          key: "sn",
-          minWidth: 180,
-          tooltip: true,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "支付方式",
-          key: "paymentMethod",
-          width: 120,
-          align: "center",
-          render: (h, params) => {
-            if (params.row.paymentMethod === "WECHAT") {
-              return h("div", [
-                h("Tag", { props: { color: "green" } }, "微信"),
-              ]);
-            } else if (params.row.paymentMethod === "ALIPAY") {
-              return h("div", [
-                h("Tag", { props: { color: "blue" } }, "支付宝"),
-              ]);
-            } else if (params.row.paymentMethod === "WALLET") {
-              return h("div", [
-                h("Tag", { props: { color: "geekblue" } }, "余额支付"),
-              ]);
-            } else if (params.row.paymentMethod === "BANK_TRANSFER") {
-              return h("div", [
-                h("Tag", { props: { color: "orange" } }, "银行转帐"),
-              ]);
-            } else {
-              return h("div", [h("Tag", {}, "暂未付款")]);
-            }
-          },
-        },
-        {
-          title: "第三方流水",
-          key: "receivableNo",
-          minWidth: 130,
-          render: (h, params) => {
-            return h("div", [
-              h("span", {}, params.row.receivableNo || "暂无流水号"),
-            ]);
-          },
-        },
-        {
-          title: "客户端",
-          key: "clientType",
-          width: 130,
-          render: (h, params) => {
-            if (
-              params.row.clientType === "WECHAT_MP" ||
-              params.row.clientType === "小程序"
-            ) {
-              return h("div", [h("span", {}, "小程序")]);
-            } else if (params.row.clientType === "APP") {
-              return h("div", [h("span", {}, "APP")]);
-            } else if (params.row.clientType === "PC") {
-              return h("div", [h("span", {}, "PC网页")]);
-            } else if (
-              params.row.clientType === "H5" ||
-              params.row.clientType === "wap"
-            ) {
-              return h("div", [h("span", {}, "移动端")]);
-            }
-          },
-        },
-        {
-          title: "支付时间",
-          key: "paymentTime",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h("span", {}, params.row.paymentTime || "暂无支付时间"),
-            ]);
-          },
-        },
-        {
-          title: "订单金额",
-          fixed: "right",
-          key: "flowPrice",
-          minWidth: 80,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
-          },
-        },
-        {
-          title: "支付状态",
-          key: "payStatus",
-          width: 95,
-          fixed: "right",
-          render: (h, params) => {
-            if (params.row.payStatus == "PAID") {
-              return h("div", [h("Tag", {props:{color:'green'}}, "已付款")]);
-            } else {
-              return h("div", [h("Tag", {props:{color:'red'}}, "未付款")]);
-            }
-          },
-        },
+        { title: "订单/交易编号", colKey: "sn", minWidth: 180, tooltip: true },
+        { title: "店铺名称", colKey: "storeName", minWidth: 100, tooltip: true },
+        { title: "支付方式", colKey: "paymentMethodTag", width: 120, align: "center" },
+        { title: "第三方流水", colKey: "receivableNo", minWidth: 130, cell: (h, p) => h("div", [h("span", {}, p.row.receivableNo || "暂无流水号")]) },
+        { title: "客户端", colKey: "clientTypeText", width: 130, cell: (h, p) => {
+          let text = "";
+          if (p.row.clientType === "WECHAT_MP" || p.row.clientType === "小程序") text = "小程序";
+          else if (p.row.clientType === "APP") text = "APP";
+          else if (p.row.clientType === "PC") text = "PC网页";
+          else if (p.row.clientType === "H5" || p.row.clientType === "wap") text = "移动端";
+          return h("span", {}, text);
+        } },
+        { title: "支付时间", colKey: "paymentTime", width: 200, cell: (h, p) => h("span", {}, p.row.paymentTime || "暂无支付时间") },
+        { title: "订单金额", colKey: "flowPrice", minWidth: 80, fixed: "right", cell: (h, p) => h("priceColorScheme", { props: { value: p.row.flowPrice, color: this.$mainColor } }) },
+        { title: "支付状态", colKey: "payStatusTag", width: 95, fixed: "right" },
       ],
       data: [], // 表单数据
       total: 0, // 表单数据总数
@@ -181,29 +106,55 @@ export default {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
+    onPaginationChange(info) {
+      if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) {
+        this.changePageSize(info.pageSize);
+      }
+      if (info && typeof info.current !== "undefined") {
+        this.changePage(info.current);
+      }
+    },
     // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    changeDate(val) {
-      // 改变日期格式
-      this.searchForm.startDate = val[0];
-      this.searchForm.endDate = val[1];
+    handleReset() {
+      this.searchForm = {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        sn: "",
+        payStatus: "",
+        startDate: "",
+        endDate: "",
+        paymentMethod: "",
+      };
+      this.activeStatus = 'ALL';
+      this.getDataList();
+    },
+    onStatusTabChange(v){
+      this.activeStatus = v;
+      this.searchForm.payStatus = v === 'ALL' ? '' : v;
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
     },
     // 获取列表
     getDataList() {
       this.loading = true;
-      API_Order.paymentLog(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-      this.total = this.data.length;
-      this.loading = false;
+      API_Order.paymentLog(this.searchForm)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
   },
   mounted() {
@@ -211,4 +162,3 @@ export default {
   },
 };
 </script>
-