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

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

manager/src/views/distribution/distributionOrder.vue

@@ -1,77 +1,62 @@
 <template>
   <div>
-    <Card>
-      <Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="订单编号"  prop="orderSn">
-          <Input
-            type="text"
-            v-model="searchForm.orderSn"
-            placeholder="请输入订单编号"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="分销商" prop="distributionName">
-          <Input
-            type="text"
-            v-model="searchForm.distributionName"
-            placeholder="请输入分销商名称"
-            clearable
-            style="width: 240px"
-          />
-        </Form-item>
-        <Form-item label="店铺名称">
-          <Select v-model="searchForm.storeId" placeholder="请选择" @on-query-change="searchChange" filterable
-                  clearable style="width: 240px">
-            <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="订单时间">
-          <DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
-                      style="width: 240px"></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
-        <template slot-scope="{row}" slot="goodsMsg">
+    <t-card style="margin-bottom: 12px">
+      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
+        <t-form-item label="订单编号" name="orderSn">
+          <t-input v-model="searchForm.orderSn" placeholder="请输入订单编号" clearable style="width: 240px" />
+        </t-form-item>
+        <t-form-item label="分销商" name="distributionName">
+          <t-input v-model="searchForm.distributionName" placeholder="请输入分销商名称" clearable style="width: 240px" />
+        </t-form-item>
+        <t-form-item label="店铺名称">
+          <t-select v-model="searchForm.storeId" placeholder="请选择" :filterable="true" clearable style="width: 240px" @input-change="searchChange">
+            <t-option v-for="item in shopList" :value="item.id" :key="item.id" :label="item.storeName" />
+          </t-select>
+        </t-form-item>
+        <t-form-item label="订单时间">
+          <t-date-picker v-model="timeRange" mode="date" range format="YYYY-MM-DD" valueType="time-stamp" placeholder="选择时间" style="width: 240px" />
+        </t-form-item>
+        <t-form-item>
+          <t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button>
+        </t-form-item>
+      </t-form>
+    </t-card>
+    <t-card>
+      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id">
+        <template #goodsMsg="{ row }">
           <div class="goods-msg">
-            <img :src="row.image" width="60" height="60" alt="">
+            <img :src="row.image" width="60" height="60" alt="" />
             <div>
               <div class="div-zoom">
-                <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
+                <a @click="linkTo(row.goodsId,row.skuId)">{{ row.goodsName }}</a>
               </div>
-              <div style="color:#999;font-size:10px">数量：x{{row.num}}</div>
-              <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-                <div slot="content">
-                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
-                </div>
-                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-              </Poptip>
+              <div style="color:#999;font-size:10px">数量：x{{ row.num }}</div>
+              <t-popup trigger="hover" placement="top" :showArrow="true">
+                <template #content>
+                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150" />
+                </template>
+                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
+              </t-popup>
             </div>
           </div>
         </template>
-        <template slot-scope="{row}" slot="distributionOrderStatus">
-          <Tag :color="filterStatusColor(row.distributionOrderStatus)">{{filterStatus(row.distributionOrderStatus)}}</Tag>
+        <template #distributionOrderStatus="{ row }">
+          <t-tag :theme="filterStatusColor(row.distributionOrderStatus) === 'green' ? 'success' : (filterStatusColor(row.distributionOrderStatus) === 'orange' ? 'warning' : 'danger')" size="small" variant="light">{{ filterStatus(row.distributionOrderStatus) }}</t-tag>
         </template>
-      </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-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>
 
 <script>
-  import {
-    getDistributionOrder
-  } from "@/api/distribution";
-  import {orderStatusList} from './dataJson'
-  import {getShopListData} from '@/api/shops'
-  import vueQr from 'vue-qr'
+  import { getDistributionOrder } from "@/api/distribution";
+  import { orderStatusList } from "./dataJson";
+  import { getShopListData } from "@/api/shops";
+  import vueQr from "vue-qr";
+  import { MessagePlugin } from "tdesign-vue";
 
   export default {
     name: "distributionOrder",
@@ -80,7 +65,7 @@
     },
     data() {
       return {
-        timeRange: [], // 范围时间
+        timeRange: undefined, // 范围时间
         orderStatusList, // 订单状态列表
         shopList: [], // 店铺列表
         distributionId: this.$route.query.id, // 分销id
@@ -92,54 +77,13 @@
           order:"desc"
         },
         columns: [
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 180,
-            fixed: "left",
-            tooltip: true
-          },
-          {
-            title: '商品信息',
-            slot: 'goodsMsg',
-            minWidth: 150
-          },
-
-          {
-            title: "分销商",
-            key: "distributionName",
-            tooltip: true,
-            minWidth:80,
-          },
-          {
-            title: "店铺名称",
-            key: "storeName",
-            minWidth:80,
-            tooltip: true
-          },
-          {
-            title: "状态",
-            slot: "distributionOrderStatus",
-            minWidth:80,
-          },
-          {
-            title: "佣金金额",
-            key: "rebate",
-            minWidth:80,
-            sortable: false,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rebate,color:this.$mainColor}} );
-            },
-
-
-          },
-          {
-            fixed: "right",
-            title: "创建时间",
-            key: "createTime",
-            minWidth:100,
-            sortable: false,
-          }
+          { title: "订单编号", colKey: "orderSn", minWidth: 180, fixed: "left", tooltip: true },
+          { title: "商品信息", colKey: "goodsMsg", minWidth: 180 },
+          { title: "分销商", colKey: "distributionName", tooltip: true, minWidth: 120 },
+          { title: "店铺名称", colKey: "storeName", minWidth: 120, tooltip: true },
+          { title: "状态", colKey: "distributionOrderStatus", minWidth: 120 },
+          { title: "佣金金额", colKey: "rebate", minWidth: 120, cell: (h, p) => h("priceColorScheme", { props: { value: p.row.rebate, color: this.$mainColor } }) },
+          { fixed: "right", title: "创建时间", colKey: "createTime", minWidth: 150 },
         ],
         data: [], // 表单数据
         total: 0 // 表单数据总数
@@ -151,16 +95,22 @@
         this.getDataList();
         this.getShopList()
       },
-      //分页 改变页码
       changePage(v) {
         this.searchForm.pageNumber = v;
         this.getDataList();
       },
-      // 分页 改变页数
       changePageSize(v) {
         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;
@@ -171,23 +121,27 @@
       getDataList() {
         this.searchForm.distributionId = this.distributionId;
         this.loading = true;
-        if (this.timeRange && this.timeRange[0]) {
-          let startTime = this.timeRange[0]
-          let endTime = this.timeRange[1]
+        if (Array.isArray(this.timeRange) && this.timeRange.length === 2) {
+          const startTime = this.timeRange[0]
+          const endTime = this.timeRange[1]
           this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
           this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
+        } else {
+          this.searchForm.startTime = null
+          this.searchForm.endTime = null
         }
         // 带多条件搜索参数获取表单数据 请自行修改接口
-        getDistributionOrder(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;
+        getDistributionOrder(this.searchForm)
+          .then((res) => {
+            this.loading = false;
+            if (res.success) {
+              this.data = res.result.records;
+              this.total = res.result.total;
+            }
+          })
+          .catch(() => {
+            this.loading = false;
+          });
       },
       getShopList(val) { // 获取店铺列表 搜索用
         const params = {