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

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

seller/src/views/shop/ship/logistics.vue

@@ -1,59 +1,72 @@
 <template>
   <div class="logistics">
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
-    </Card>
-    <Modal v-model="openModal" :title="openModalTitle" @on-ok="submit" @on-cancel="cancelModal" :width="700">
+    <t-card>
+      <t-table :loading="loading" :columns="columns" :data="data">
+        <template #selected="{ row }">
+          <t-tag :theme="row.selected ? 'success' : 'danger'">{{ row.selected ? '开启' : '关闭' }}</t-tag>
+        </template>
+        <template #action="{ row }">
+          <a v-if="!row.selected" style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="open(row)">开启</a>
+          <template v-else>
+            <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="close(row)">关闭</a>
+            <span style="margin:0 8px;color:#dcdee2">|</span>
+            <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="getFaceSheetInfo(row)">修改</a>
+          </template>
+        </template>
+      </t-table>
+    </t-card>
+    <t-dialog :visible="openModal" :header="openModalTitle" :width="700" @close="cancelModal">
       <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
-
-      <ButtonGroup style="margin-bottom: 10px;">
-        <Button :type="faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = true">需要</Button>
-        <Button :type="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'"
-          @click="faceSheetForm.faceSheetFlag = false">不需要</Button>
-      </ButtonGroup>
-      <Card v-if="openText" class="modalStyle">
+      <div style="margin-bottom: 10px;">
+        <t-button :theme="faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = true">需要</t-button>
+        <t-button :theme="!faceSheetForm.faceSheetFlag ? 'primary' : 'default'" @click="faceSheetForm.faceSheetFlag = false" style="margin-left:8px">不需要</t-button>
+      </div>
+      <t-card v-if="openText" class="modalStyle">
         <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
-        <Form ref="formValidate" :label-width="250" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
-          <FormItem label="电子面单客户账户/月结账号/客户代码" prop="customerName">
-            <Input v-model="faceSheetForm.customerName" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="客户密码/电子面单密码" prop="customerPwd">
-            <Input v-model="faceSheetForm.customerPwd" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="电子面单密钥" prop="monthCode">
-            <Input v-model="faceSheetForm.monthCode" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="归属网点/网点编码/电子面单承载编号" prop="sendSite">
-            <Input v-model="faceSheetForm.sendSite" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="收件快递员" prop="sendStaff">
-            <Input v-model="faceSheetForm.sendStaff" type="text" class="faceSheetInput"></Input>
-          </FormItem>
-          <FormItem label="支付方式" prop="payType">
-            <Select v-model="faceSheetForm.payType" class="faceSheetInput">
-              <Option value="1">现付</Option>
-              <Option value="2">到付</Option>
-              <Option value="3">月结</Option>
-              <Option value="4">第三方支付(仅SF支持)</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="快递类型" prop="expType">
-            <Input v-model="faceSheetForm.expType" type="text" class="faceSheetInput" />
-          </FormItem>
+        <t-form ref="formValidate" :data="faceSheetForm" :labelWidth="250">
+          <t-form-item label="电子面单客户账户/月结账号/客户代码" name="customerName">
+            <t-input v-model="faceSheetForm.customerName" class="faceSheetInput" />
+          </t-form-item>
+          <t-form-item label="客户密码/电子面单密码" name="customerPwd">
+            <t-input v-model="faceSheetForm.customerPwd" class="faceSheetInput" />
+          </t-form-item>
+          <t-form-item label="电子面单密钥" name="monthCode">
+            <t-input v-model="faceSheetForm.monthCode" class="faceSheetInput" />
+          </t-form-item>
+          <t-form-item label="归属网点/网点编码/电子面单承载编号" name="sendSite">
+            <t-input v-model="faceSheetForm.sendSite" class="faceSheetInput" />
+          </t-form-item>
+          <t-form-item label="收件快递员" name="sendStaff">
+            <t-input v-model="faceSheetForm.sendStaff" class="faceSheetInput" />
+          </t-form-item>
+          <t-form-item label="支付方式" name="payType">
+            <t-select v-model="faceSheetForm.payType" class="faceSheetInput">
+              <t-option value="1" label="现付" />
+              <t-option value="2" label="到付" />
+              <t-option value="3" label="月结" />
+              <t-option value="4" label="第三方支付(仅SF支持)" />
+            </t-select>
+          </t-form-item>
+          <t-form-item label="快递类型" name="expType">
+            <t-input v-model="faceSheetForm.expType" class="faceSheetInput" />
+          </t-form-item>
           <div style="width:100%;text-align:center;">
             <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
             <a @click="frontDownload('type')">快递类型</a>
           </div>
-        </Form>
-      </Card>
-      <br />
-    </Modal>
+        </t-form>
+      </t-card>
+      <template #footer>
+        <t-button variant="text" @click="cancelModal">取消</t-button>
+        <t-button theme="primary" @click="submit">保存</t-button>
+      </template>
+    </t-dialog>
   </div>
 </template>
 
 <script>
 import * as API_Shop from "@/api/shops";
+import { MessagePlugin, DialogPlugin } from "tdesign-vue";
 
 export default {
   name: "logistics",
@@ -91,90 +104,9 @@ export default {
         sendStaff: "",
       },
       columns: [
-        {
-          title: "物流公司",
-          key: "name",
-          minWidth: 120,
-          sortable: false,
-        },
-        {
-          title: "状态",
-          key: "selected",
-          minWidth: 120,
-          sortable: true,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [h("tag", { props: { color: "volcano" } }, "关闭")]);
-            } else {
-              return h("div", [h("tag", { props: { color: "green" } }, "开启")]);
-            }
-          }
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          width: 200,
-          render: (h, params) => {
-            if (!params.row.selected) {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.open(params.row);
-                      },
-                    },
-                  },
-                  "开启"
-                ),
-              ]);
-            } else {
-              return h("div", [
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.close(params.row);
-                      },
-                    },
-                  },
-                  "关闭"
-                ),
-                h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
-                h(
-                  "a",
-                  {
-                    style: {
-                      color: "#2d8cf0",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                    },
-                    on: {
-                      click: () => {
-                        this.getFaceSheetInfo(params.row);
-                      },
-                    },
-                  },
-                  "修改"
-                ),
-              ]);
-            }
-
-          },
-        },
+        { title: "物流公司", colKey: "name", minWidth: 120 },
+        { title: "状态", colKey: "selected", minWidth: 120 },
+        { title: "操作", colKey: "action", align: "center", width: 200 },
       ],
       data: [], // 表单数据
       openText: false,
@@ -277,16 +209,15 @@ export default {
           this.faceSheetForm
         ).then((res) => {
           this.openModal = false;
-          this.$Modal.remove();
           if (res.success) {
-            this.$Message.success("物流公司开启成功");
+            MessagePlugin.success("物流公司开启成功");
             this.init();
           }
         });
       } else {
         API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
           if (res.success) {
-            this.$Message.success("修改成功");
+            MessagePlugin.success("修改成功");
             this.init();
           }
         });
@@ -294,15 +225,14 @@ export default {
     },
     // 关闭
     close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
+      DialogPlugin.confirm({
+        header: "确认关闭",
         content: "您确认关闭此物流公司?",
-        loading: true,
-        onOk: () => {
+        theme: "warning",
+        onConfirm: () => {
           API_Shop.logisticsUnChecked(v.logisticsId).then((res) => {
-            this.$Modal.remove();
             if (res.success) {
-              this.$Message.success("物流公司关闭成功");
+              MessagePlugin.success("物流公司关闭成功");
               this.init();
             }
           });