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

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

manager/src/views/distribution/distributionCash.vue

@@ -1,66 +1,81 @@
 <template>
   <div>
-    <Card>
-        <Form ref="searchForm" @keydown.enter.native.prevent="handleSearch" :model="searchForm"  class="search-form">
-          <Form-item label="会员名称"  class="flex" prop="memberName">
-            <Input
-              type="text" placeholder="请输入会员名称" v-model="searchForm.memberName" clearable
-              style="width: 240px"></Input>
-          </Form-item>
-          <Form-item label="编号" class="flex">
-            <Input
-              type="text" placeholder="请输入编号" v-model="searchForm.sn" clearable
-              style="width: 240px"></Input>
-          </Form-item>
-          <Form-item label="状态"
-                     style="width: 240px">
-            <Select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
-                <Option v-for="item in cashStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-            </Select>
-          </Form-item>
-          <Form-item>
-            <Button @click="handleSearch" type="primary">搜索</Button>
-          </Form-item>
-        </Form>
-        </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
-      <Row type="flex" justify="end" class="page padding-row">
-        <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>
-    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
-      <Form ref="form" :model="form" :label-width="100"  >
-      <FormItem label="编号">
-          <Input disabled v-model="form.sn" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="会员名称">
-          <Input disabled v-model="form.distributionName" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="金额">
-          <Input disabled v-model="form.price" clearable style="width:100%"/>
-        </FormItem>
-        <FormItem label="是否通过" prop="result" v-if="handleStatus =='edit'">
-             <RadioGroup v-model="result" type="button" button-style="solid">
-                 <Radio label="VIA_AUDITING">通过</Radio>
-                 <Radio label="FAIL_AUDITING">拒绝</Radio>
-             </RadioGroup>
-        </FormItem>
-      </Form>
-      <div slot="footer" v-if="handleStatus == 'edit'">
-        <Button type="text" @click="modalVisible=false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+    <t-card style="margin-bottom: 12px">
+      <t-form :data="searchForm" layout="inline" class="search-form" @submit="handleSearch">
+        <t-form-item label="会员名称" name="memberName">
+          <t-input v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
+        </t-form-item>
+        <t-form-item label="编号" name="sn">
+          <t-input v-model="searchForm.sn" placeholder="请输入编号" clearable style="width: 240px" />
+        </t-form-item>
+        <t-form-item label="状态">
+          <t-select v-model="searchForm.distributionCashStatus" clearable style="width: 240px">
+            <t-option v-for="item in cashStatusList" :value="item.value" :key="item.value" :label="item.label" />
+          </t-select>
+        </t-form-item>
+        <t-form-item>
+          <t-button theme="primary" @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"></t-table>
+      <div class="page padding-row" 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>
-    </Modal>
+    </t-card>
+    <t-drawer :visible.sync="modalVisible" :header="modalTitle" placement="right" size="500px" @close="modalVisible = false">
+      <div v-if="handleStatus === 'view'">
+        <t-descriptions :column="1" size="medium">
+          <t-descriptions-item label="编号">{{ form.sn }}</t-descriptions-item>
+          <t-descriptions-item label="会员名称">{{ form.distributionName }}</t-descriptions-item>
+          <t-descriptions-item label="申请金额">{{ form.price }}</t-descriptions-item>
+          <t-descriptions-item label="申请时间">{{ form.createTime }}</t-descriptions-item>
+          <t-descriptions-item label="姓名">{{ form.name }}</t-descriptions-item>
+          <t-descriptions-item label="身份证号">{{ form.idNumber }}</t-descriptions-item>
+          <t-descriptions-item label="结算银行开户行名称">{{ form.settlementBankAccountName }}</t-descriptions-item>
+          <t-descriptions-item label="结算银行开户账号">{{ form.settlementBankAccountNum }}</t-descriptions-item>
+          <t-descriptions-item label="结算银行开户支行名称">{{ form.settlementBankBranchName }}</t-descriptions-item>
+          <t-descriptions-item label="处理时间">{{ form.updateTime }}</t-descriptions-item>
+          <t-descriptions-item label="状态">{{ { APPLY: '待处理', VIA_AUDITING: '通过', FAIL_AUDITING: '审核拒绝' }[form.distributionCashStatus] || form.distributionCashStatus }}</t-descriptions-item>
+        </t-descriptions>
+      </div>
+      <div v-else>
+        <t-form ref="form" :data="form" :labelWidth="100">
+          <t-form-item label="编号">
+            <t-input v-model="form.sn" disabled style="width: 100%" />
+          </t-form-item>
+          <t-form-item label="会员名称">
+            <t-input v-model="form.distributionName" disabled style="width: 100%" />
+          </t-form-item>
+          <t-form-item label="金额">
+            <t-input v-model="form.price" disabled style="width: 100%" />
+          </t-form-item>
+          <t-form-item label="是否通过">
+            <t-radio-group v-model="result">
+              <t-radio value="VIA_AUDITING">通过</t-radio>
+              <t-radio value="FAIL_AUDITING">拒绝</t-radio>
+            </t-radio-group>
+          </t-form-item>
+        </t-form>
+      </div>
+      <template #footer>
+        <div v-if="handleStatus === 'edit'" style="display: flex; justify-content: flex-end">
+          <t-button variant="text" @click="modalVisible = false">取消</t-button>
+          <t-button theme="primary" :loading="submitLoading" style="margin-left: 8px" @click="handleSubmit">提交</t-button>
+        </div>
+        <div v-else style="display: flex; justify-content: flex-start">
+          <t-button theme="primary" @click="modalVisible = false">返回</t-button>
+        </div>
+      </template>
+    </t-drawer>
   </div>
 </template>
 
 <script>
-import {
-auditDistributionCash,
-getDistributionCash
-} from "@/api/distribution";
-import { cashStatusList } from './dataJson';
+import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
+import { cashStatusList } from "./dataJson";
+import { MessagePlugin, DialogPlugin } from "tdesign-vue";
 export default {
   name: "distributionCash",
   data() {
@@ -84,83 +99,36 @@ export default {
       },
       submitLoading: false, // 添加或编辑提交状态
       columns: [
+        { title: "编号", colKey: "sn", width: 300, align: "left" },
+        { title: "会员名称", colKey: "distributionName", minWidth: 120, align: "left" },
+        { title: "申请金额", colKey: "price", minWidth: 100, align: "left", cell: (h, p) => h("priceColorScheme", { props: { value: p.row.price, color: this.$mainColor } }) },
+        { title: "申请时间", colKey: "createTime", minWidth: 150, align: "left" },
+        { title: "姓名", colKey: "name", minWidth: 100, align: "left" },
+        { title: "身份证号", colKey: "idNumber", minWidth: 120, align: "left" },
+        { title: "结算银行开户行名称", colKey: "settlementBankAccountName", minWidth: 120, align: "left" },
+        { title: "结算银行开户账号", colKey: "settlementBankAccountNum", minWidth: 120, align: "left" },
+        { title: "结算银行开户支行名称", colKey: "settlementBankBranchName", minWidth: 120, align: "left" },
+        { title: "处理时间", colKey: "updateTime", minWidth: 150, align: "left" },
         {
-          title: "编号",
-          key: "sn",
-          minWidth: 200
-        },
-        {
-          title: "会员名称",
-          key: "distributionName",
-          minWidth: 120
-        },
-        {
-          title: "申请金额",
-          key: "price",
-          minWidth: 90,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
+          title: "状态",
+          colKey: "distributionCashStatus",
+          minWidth: 120,
+          align: "left",
+          cell: (h, p) => {
+            const s = p.row.distributionCashStatus;
+            const map = { APPLY: { theme: "warning", label: "待处理" }, VIA_AUDITING: { theme: "success", label: "通过" }, FAIL_AUDITING: { theme: "danger", label: "审核拒绝" } };
+            const cfg = map[s] || { theme: "default", label: s };
+            return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
           },
         },
-        {
-          title: "申请时间",
-          key: "createTime",
-          minWidth: 130
-        },
-        {
-          title: "姓名",
-          key: "name",
-          minWidth: 100,
-        },
-        {
-          title: "身份证号",
-          key: "idNumber",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户行名称",
-          key: "settlementBankAccountName",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户账号",
-          key: "settlementBankAccountNum",
-          minWidth: 120,
-        },
-        {
-          title: "结算银行开户支行名称",
-          key: "settlementBankBranchName",
-          minWidth: 120,
-        },
-        {
-          title: "处理时间",
-          key: "updateTime",
-          minWidth: 130
-        },
-        {
-          title: "状态",
-          key: "distributionCashStatus",
-          minWidth: 100,
-          render: (h, params) => {
-              if (params.row.distributionCashStatus == 'APPLY') {
-                   return h("div", "待处理");
-              }
-              if (params.row.distributionCashStatus == 'VIA_AUDITING') {
-                   return h("div", "通过");
-              }
-              if (params.row.distributionCashStatus == 'FAIL_AUDITING') {
-                   return h("div", "审核拒绝");
-              }
-            },
-         },
         {
           title: "操作",
-          key: "action",
+          colKey: "action",
           align: "center",
           fixed: "right",
           width: 130,
-          render: (h, params) => {
-            if (params.row.distributionCashStatus != 'APPLY') {
+          cell: (h, params) => {
+            if (params.row.distributionCashStatus !== "APPLY") {
               return h("div", { class: "ops" }, [
                 h(
                   "a",
@@ -168,29 +136,28 @@ export default {
                     on: {
                       click: () => {
                         this.view(params.row);
-                      }
-                    }
+                      },
+                    },
                   },
                   "查看"
                 ),
               ]);
-            } else {
-              return h("div", { class: "ops" }, [
-                h(
-                  "a",
-                  {
-                    on: {
-                      click: () => {
-                        this.edit(params.row);
-                      }
-                    }
-                  },
-                  "审核"
-                ),
-              ]);
             }
-          }
-        }
+            return h("div", { class: "ops" }, [
+              h(
+                "a",
+                {
+                  on: {
+                    click: () => {
+                      this.edit(params.row);
+                    },
+                  },
+                },
+                "审核"
+              ),
+            ]);
+          },
+        },
       ],
       data: [], // 表单数据
       total: 0 // 表单数据总数
@@ -211,59 +178,68 @@ 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();
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-      // 带多条件搜索参数获取表单数据 请自行修改接口
-      getDistributionCash(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;
+      getDistributionCash(this.searchForm)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
     // 通过还是拒绝申请
     handleSubmit() {
-      let result = "拒绝"
-      if(this.result == 'VIA_AUDITING'){
-        result = "通过"
+      let result = "拒绝";
+      if (this.result === "VIA_AUDITING") {
+        result = "通过";
       }
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$Modal.confirm({
-            title: "确认审核",
-            content: "您确认要审核"+result+"么?",
-            loading: true,
-            onOk: () => {
-                auditDistributionCash(this.form.id,{result:this.result}).then(res => {
-                    if (res.success) {
-                      this.$Modal.remove();
-                      this.$Message.success("审核成功");
-                      this.getDataList();
-                      this.modalVisible = false;
-                    } else {
-                      this.modalVisible = false;
-                    }
-                });
-            }
-          })
-        }
+      DialogPlugin.confirm({
+        header: "确认审核",
+        content: "您确认要审核" + result + "么?",
+        theme: "warning",
+        onConfirm: () => {
+          this.submitLoading = true;
+          auditDistributionCash(this.form.id, { result: this.result })
+            .then((res) => {
+              this.submitLoading = false;
+              if (res.success) {
+                MessagePlugin.success("审核成功");
+                this.getDataList();
+                this.modalVisible = false;
+              } else {
+                this.modalVisible = false;
+              }
+            })
+            .catch(() => {
+              this.submitLoading = false;
+            });
+        },
       });
     },
     // 弹出modal 审核
     edit(v) {
       this.modalTitle = "审核";
       this.handleStatus = 'edit';
-      this.$refs.form.resetFields();
+      if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
       // 转换null为""
       for (let attr in v) {
         if (v[attr] === null) {
@@ -277,7 +253,7 @@ export default {
     view(v){
       this.modalTitle = "查看";
       this.handleStatus = 'view';
-      this.$refs.form.resetFields();
+      if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
       // 转换null为""
       for (let attr in v) {
         if (v[attr] === null) {