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

- 将iView组件统一替换为TDesign组件 - 优化表单、表格、弹窗等交互样式 - 修复路由重复添加问题 - 更新依赖版本 - 调整布局间距与响应式 - 修复表单重置方法兼容性 - 统一消息提示组件
2025-12-20 09:55:53 +08:00 · 2025-11-30 18:19:19 +08:00
parent e5d98d022e
commit 028f32a73c
180 changed files with 10701 additions and 17865 deletions
--- a/seller/README.md
+++ b/seller/README.md
@@ -8,6 +8,11 @@
 ### Customize configuration
 详情点击 [https://cli.vuejs.org/zn/config/](https://cli.vuejs.org/zn/config/).

+### UI 框架与版本
+
+- `view-design@^4.6.1`
+- `vue@^2.6.10`
+
 ####  login.vue页面，测试时不走权限，直接return  318行
 ####  util.initRouter 方法，开发时注释掉登录验证，调用路由接口验证
 ####  Main.vue 页面，241行，修改，避免报错
--- a/seller/package.json
+++ b/seller/package.json
@@ -23,10 +23,11 @@
    "s": "^1.0.0",
    "sass-loader": "^10.4.1",
    "sockjs-client": "^1.4.0",
-    "swiper": "^6.3.5",
+    "swiper": "^5.4.5",
    "uuid": "^8.3.2",
    "view-design": "^4.6.1",
-    "vue": "^2.6.10",
+    "atob": "^2.1.2",
+    "vue": "2.6.14",
    "vue-awesome-swiper": "^4.1.1",
    "vue-json-excel": "^0.3.0",
    "vue-lazyload": "^1.3.3",
@@ -35,6 +36,7 @@
    "vue-router": "^3.1.3",
    "vuedraggable": "^2.23.2",
    "vuex": "^3.4.0",
+    "tdesign-vue": "^1.14.2",
    "xss": "^1.0.7"
  },
  "devDependencies": {
@@ -51,7 +53,7 @@
    "uglifyjs-webpack-plugin": "^2.2.0",
    "view-design": "^4.6.1",
    "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "2.6.14"
  },
  "resolutions": {
    "minimatch": "^3.1.2",
--- a/seller/public/config.js
+++ b/seller/public/config.js
@@ -3,9 +3,9 @@ var BASE = {
   * @description api请求基础路径
   */
  API_DEV: {
-    common: "https://common-api.pickmall.cn",
+    common: "http://127.0.0.1:8890",
    buyer: "https://buyer-api.pickmall.cn",
-    seller: "https://store-api.pickmall.cn",
+    seller: "http://127.0.0.1:8889",
    manager: "https://admin-api.pickmall.cn",
  },
  API_PROD: {
--- a/seller/src/main.js
+++ b/seller/src/main.js
@@ -1,6 +1,11 @@
 import Vue from "vue";
 import ViewUI from "view-design";
 import "./styles/theme.less";
+import TDesign from 'tdesign-vue'
+import 'tdesign-vue/es/style/index.css'
+import { Icon as TIcon } from 'tdesign-icons-vue'
+import 'tdesign-icons-vue/lib/style/index.css'
+import { MessagePlugin, DialogPlugin, NotificationPlugin } from 'tdesign-vue'

 import "core-js/stable";
 import vueQr from "vue-qr";
@@ -49,11 +54,305 @@ Vue.use(VueLazyload, {
 // 引入价格格式化组件
 import priceColorScheme from 'price-color'
 Vue.use(priceColorScheme);
+Vue.use(TDesign)
+Vue.component('t-icon', TIcon)

 const copyViewUi = {...ViewUI}
 copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
 Vue.use(copyViewUi);

+Vue.prototype.$Message = MessagePlugin
+Vue.prototype.$Modal = {
+  confirm: function (opts) {
+    return DialogPlugin.confirm({
+      header: opts && (opts.title || opts.header),
+      content: opts && (opts.content || opts.desc),
+      theme: opts && opts.theme ? opts.theme : 'default',
+      onConfirm: opts && opts.onOk,
+      onCancel: opts && opts.onCancel,
+      onClose: opts && opts.onClose
+    })
+  },
+  info: function (opts) {
+    return DialogPlugin.alert({
+      header: opts && (opts.title || '提示'),
+      content: opts && (opts.content || opts.desc),
+      theme: 'info',
+      onClose: opts && (opts.onOk || opts.onClose)
+    })
+  },
+  success: function (opts) {
+    return DialogPlugin.alert({
+      header: opts && (opts.title || '成功'),
+      content: opts && (opts.content || opts.desc),
+      theme: 'success',
+      onClose: opts && (opts.onOk || opts.onClose)
+    })
+  },
+  warning: function (opts) {
+    return DialogPlugin.alert({
+      header: opts && (opts.title || '警告'),
+      content: opts && (opts.content || opts.desc),
+      theme: 'warning',
+      onClose: opts && (opts.onOk || opts.onClose)
+    })
+  },
+  error: function (opts) {
+    return DialogPlugin.alert({
+      header: opts && (opts.title || '错误'),
+      content: opts && (opts.content || opts.desc),
+      theme: 'danger',
+      onClose: opts && (opts.onOk || opts.onClose)
+    })
+  }
+}
+Vue.prototype.$Notice = {
+  info: function (opts) {
+    return NotificationPlugin.info({
+      title: opts && opts.title,
+      content: opts && (opts.desc || opts.content)
+    })
+  },
+  success: function (opts) {
+    return NotificationPlugin.success({
+      title: opts && opts.title,
+      content: opts && (opts.desc || opts.content)
+    })
+  },
+  warning: function (opts) {
+    return NotificationPlugin.warning({
+      title: opts && opts.title,
+      content: opts && (opts.desc || opts.content)
+    })
+  },
+  error: function (opts) {
+    return NotificationPlugin.error({
+      title: opts && opts.title,
+      content: opts && (opts.desc || opts.content)
+    })
+  },
+  closeAll: function () {
+    return NotificationPlugin.closeAll()
+  }
+}
+
+Vue.component('Input', {
+  inheritAttrs: false,
+  props: ['value'],
+  model: { prop: 'value', event: 'input' },
+  render(h){
+    const props = Object.assign({}, this.$attrs, { value: this.value })
+    const on = Object.assign({}, this.$listeners, {
+      enter: e => this.$emit('on-enter', e),
+      clear: e => this.$emit('on-clear', e),
+      input: v => this.$emit('input', v)
+    })
+    return h('t-input', { props, on })
+  }
+})
+Vue.component('Button', {
+  inheritAttrs: false,
+  render(h){
+    const attrs = this.$attrs || {}
+    const theme = attrs.theme || (attrs.type === 'primary' ? 'primary' : attrs.type)
+    const props = Object.assign({}, attrs, { theme })
+    delete props.type
+    return h('t-button', { props, on: this.$listeners }, this.$slots.default)
+  }
+})
+Vue.component('Spin', {
+  props: ['size','fix'],
+  render(h){
+    const size = this.size === 'large' ? 'large' : 'small'
+    return h('t-loading', { props: { loading: true, size, fullscreen: !!this.fix } })
+  }
+})
+Vue.component('Page', {
+  props: ['total','current','pageSize','showTotal','showElevator','size'],
+  render(h){
+    const showJumper = !!(this.showElevator || this.showTotal)
+    return h('t-pagination', {
+      props: { total: Number(this.total) || 0, current: this.current || 1, pageSize: this.pageSize || 10, showJumper, size: this.size === 'small' ? 'small' : 'medium' },
+      on: { change: ({ current }) => this.$emit('on-change', current) }
+    })
+  }
+})
+Vue.component('Tag', {
+  props: ['color'],
+  render(h){
+    let theme = 'default'
+    if(this.color === 'geekblue') theme = 'primary'
+    return h('t-tag', { props: { theme } }, this.$slots.default)
+  }
+})
+Vue.component('Cascader', {
+  inheritAttrs: false,
+  props: ['value','data','placeholder'],
+  model: { prop: 'value', event: 'input' },
+  render(h){
+    const props = { value: this.value, options: this.data, placeholder: this.placeholder }
+    const on = Object.assign({}, this.$listeners, { change: val => this.$emit('input', val) })
+    return h('t-cascader', { props, on })
+  }
+})
+Vue.component('Tabs', {
+  inheritAttrs: false,
+  props: ['value'],
+  model: { prop: 'value', event: 'change' },
+  render(h){
+    const props = Object.assign({}, this.$attrs, { value: this.value })
+    const on = Object.assign({}, this.$listeners, { change: v => this.$emit('change', v) })
+    return h('t-tabs', { props, on }, this.$slots.default)
+  }
+})
+Vue.component('TabPane', {
+  props: ['label','name'],
+  render(h){
+    const value = this.name
+    const props = { label: this.label, value }
+    return h('t-tab-panel', { props }, this.$slots.default)
+  }
+})
+Vue.component('Row', {
+  inheritAttrs: false,
+  render(h){
+    return h('t-row', { attrs: this.$attrs }, this.$slots.default)
+  }
+})
+Vue.component('Col', {
+  inheritAttrs: false,
+  render(h){
+    const props = Object.assign({}, this.$attrs)
+    if(typeof props.span !== 'undefined') props.span = Number(props.span)
+    return h('t-col', { props }, this.$slots.default)
+  }
+})
+Vue.component('Modal', {
+  inheritAttrs: false,
+  props: ['value','title','footerHide','closable','maskClosable'],
+  model: { prop: 'value', event: 'input' },
+  render(h){
+    const props = {
+      visible: !!this.value,
+      header: this.title,
+      closeOnOverlayClick: this.maskClosable !== false,
+      closeBtn: this.closable !== false,
+    }
+    const on = {
+      confirm: e => this.$emit('on-ok', e),
+      cancel: e => this.$emit('on-cancel', e),
+      close: e => this.$emit('on-close', e),
+      'update:visible': v => this.$emit('input', v)
+    }
+    const slots = Object.assign({}, this.$slots)
+    if(this.footerHide){
+      props.footer = null
+    }
+    return h('t-dialog', { props, on }, slots.default)
+  }
+})
+Vue.component('Drawer', {
+  inheritAttrs: false,
+  props: ['value','title','size','closeOnOverlayClick'],
+  model: { prop: 'value', event: 'input' },
+  render(h){
+    const props = {
+      visible: !!this.value,
+      header: this.title,
+      size: this.size || 400,
+      closeOnOverlayClick: this.closeOnOverlayClick !== false
+    }
+    const on = {
+      'update:visible': v => this.$emit('input', v)
+    }
+    return h('t-drawer', { props, on }, this.$slots.default)
+  }
+})
+Vue.component('Alert', {
+  props: ['type','title'],
+  render(h){
+    const theme = this.type || 'info'
+    return h('t-alert', { props: { theme, message: this.title } })
+  }
+})
+Vue.component('Table', {
+  props: ['columns','data','loading','height','border','rowKey','tooltip'],
+  render(h){
+    const cols = (this.columns || []).map(c => {
+      const nc = Object.assign({}, c)
+      if(c.render && !c.cell){
+        nc.cell = (h2, { row, col, rowIndex }) => c.render(h2, { row, column: col, index: rowIndex })
+        delete nc.render
+      }
+      if(c.key && !c.colKey){
+        nc.colKey = c.key
+        delete nc.key
+      }
+      return nc
+    })
+    const props = { columns: cols, data: this.data, loading: this.loading, height: this.height, rowKey: this.rowKey || 'id' }
+    return h('t-table', { props })
+  }
+})
+Vue.component('Select', {
+  inheritAttrs: false,
+  props: ['value'],
+  model: { prop: 'value', event: 'change' },
+  render(h){
+    const props = Object.assign({}, this.$attrs, { value: this.value })
+    const on = Object.assign({}, this.$listeners, { change: v => { this.$emit('on-change', v); this.$emit('change', v) } })
+    return h('t-select', { props, on }, this.$slots.default)
+  }
+})
+Vue.component('Option', {
+  props: ['value','label'],
+  render(h){
+    return h('t-option', { props: { value: this.value, label: this.label } }, this.$slots.default)
+  }
+})
+Vue.component('i-switch', {
+  props: ['value'],
+  model: { prop: 'value', event: 'change' },
+  render(h){
+    return h('t-switch', { props: { value: this.value }, on: { change: v => { this.$emit('on-change', v); this.$emit('change', v) } } })
+  }
+})
+Vue.component('Tooltip', {
+  props: ['content','placement'],
+  render(h){
+    return h('t-tooltip', { props: { content: this.content, placement: this.placement || 'top' } }, this.$slots.default)
+  }
+})
+Vue.component('Poptip', {
+  inheritAttrs: false,
+  props: ['title','placement'],
+  render(h){
+    const props = { content: this.title || this.$attrs.content, placement: this.placement || 'top' }
+    const on = Object.assign({}, this.$listeners, { confirm: e => this.$emit('on-ok', e), cancel: e => this.$emit('on-cancel', e) })
+    return h('t-popconfirm', { props, on }, this.$slots.default)
+  }
+})
+Vue.component('Icon', {
+  props: ['type','size','color'],
+  render(h){
+    const map = {
+      'md-home': 'home',
+      'md-cart': 'cart',
+      'md-heart': 'heart',
+      'md-document': 'file',
+      'md-person': 'user',
+      'ios-link': 'link',
+      'ios-videocam': 'video',
+      'md-share-alt': 'share'
+    }
+    const name = map[this.type] || this.type || 'link'
+    const props = { name: name, size: this.size }
+    const data = {}
+    if(this.color){ data.style = { color: this.color } }
+    return h('t-icon', { props, ...data })
+  }
+})
+
 Vue.component('liliDialog', liliDialog)

 Vue.component('liliDialog', liliDialog)
--- a/seller/src/utils/filters.js
+++ b/seller/src/utils/filters.js
@@ -61,7 +61,7 @@ export function clientTypeWay(val) {
  } else if (val == "PC") {
    return "PC端";
  } else if (val == "WECHAT_MP") {
-    return "小程序端";
+    return "小程序";
  } else if (val == "APP") {
    return "移动应用端";
  } else {
--- a/seller/src/views/goods/goods-seller/goods.vue
+++ b/seller/src/views/goods/goods-seller/goods.vue
@@ -69,10 +69,10 @@
    <Card>

      <div class="goods-tab">
-        <Tabs v-model="currentStatus" @on-click="goodsStatusClick">
-          <TabPane v-for="(item,index) in goodsStatusWithCount" :key="index" :label="item.title" :name="item.value">
-          </TabPane>
-        </Tabs>
+        <t-tabs :value="currentStatus" @change="goodsStatusClick">
+          <t-tab-panel v-for="(item,index) in goodsStatusWithCount" :key="index" :label="item.title" :value="item.value">
+          </t-tab-panel>
+        </t-tabs>
      </div>

      <Row class="operation padding-row">
@@ -178,7 +178,7 @@
        <Upload :before-upload="handleUpload" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                multiple type="drag" :action="action" :headers="accessToken">
          <div style="padding: 50px 0">
-            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
+            <t-icon name="cloud-upload" size="102" style="color: #3399ff"></t-icon>
            <h2>选择或拖拽文件上传</h2>
          </div>
          <Spin fix v-if="spinShow"></Spin>
@@ -922,7 +922,7 @@ export default {
@import "@/styles/table-common.scss";
 // Tab组件样式
 .goods-tab {
-  ::v-deep .ivu-tabs-tab {
+  ::v-deep .t-tabs__nav-item {
    font-size: 14px;
  }
 }
--- a/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
@@ -85,10 +85,10 @@
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
-      <ButtonGroup>
-        <Button type="primary" @click="selectGoodsType = true">商品类型</Button>
-        <Button type="primary" @click="next">下一步</Button>
-      </ButtonGroup>
+      <t-button-group>
+        <t-button theme="primary" @click="selectGoodsType = true">商品类型</t-button>
+        <t-button theme="primary" @click="next">下一步</t-button>
+      </t-button-group>
    </div>
  </div>
 </template>
--- a/seller/src/views/lili-dialog/link-dialog.vue
+++ b/seller/src/views/lili-dialog/link-dialog.vue
@@ -1,16 +1,15 @@
 <template>
  <div class="wrapper">

-    <Tabs :value="wap[0].title" class="tabs">
-
-      <TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
+    <t-tabs :value="wap[0].title" class="tabs" @change="onTabChange">
+      <t-tab-panel :label="item.title" :value="item.title" v-for="(item, i) in wap" :key="i">
        <component ref="lili-component" :is="templateWay[item.name]" @selected="
          (val) => {
            changed = val;
          }
        " />
-      </TabPane>
-    </Tabs>
+      </t-tab-panel>
+    </t-tabs>

  </div>
 </template>
@@ -48,7 +47,14 @@ export default {
      item.selected = false;
    });
  },
-  methods: {},
+  methods: {
+    onTabChange(val){
+      const idx = this.wap.findIndex(w => w && w.title === val);
+      if(idx !== -1){
+        this.clickTag && this.clickTag(this.wap[idx], idx)
+      }
+    }
+  },
 };
 </script>
 <style scoped lang="scss">
--- a/seller/src/views/lili-dialog/template/other.vue
+++ b/seller/src/views/lili-dialog/template/other.vue
@@ -1,17 +1,17 @@
 <template>
  <div>
-    <Row :gutter="30">
-      <Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
+    <t-row :gutter="30">
+      <t-col :span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
        <div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
-          <Icon size="24" :type="item.icon" />
+          <t-icon size="24" name="link" />
          <p>{{item.title}}</p>
        </div>
-      </Col>
+      </t-col>
      <!-- 外部链接，只有pc端跳转 -->
-      <Col span="6" v-if="$route.name === 'renovation'">
+      <t-col :span="6" v-if="$route.name === 'renovation'">
        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
          <Poptip v-model="linkVisible">
-              <Icon size="24" :type="linkItem.icon" />
+              <t-icon size="24" name="link" />
              <p>{{linkItem.title}}</p>
              <div slot="title">链接地址</div>
              <div slot="content">
@@ -20,8 +20,8 @@
          </Poptip>

        </div>
-      </Col>
-    </Row>
+      </t-col>
+    </t-row>
  </div>
 </template>
 <script>
--- a/seller/src/views/lili-dialog/template/shops.vue
+++ b/seller/src/views/lili-dialog/template/shops.vue
@@ -4,12 +4,12 @@
      <div class="query-wrapper">
        <div class="query-item">
          <div>店铺名称</div>
-          <Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
+          <t-input placeholder="请输入店铺名称" @clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @enter="()=>{shopsData=[]; params.pageNumber =1; init();}" clearable style="width: 150px"
            v-model="params.storeName" />
        </div>

        <div class="query-item">
-          <Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
+          <t-button theme="primary" @click="shopsData=[];params.pageNumber =1; init();">搜索</t-button>
        </div>
      </div>
      <div>
@@ -25,7 +25,7 @@
              <div class="wap-sku" :class="{'theme_color':(item.storeDisable === 'OPEN' ? true : false) }">{{ item.storeDisable === 'OPEN' ? '开启中' : '未开启' }}</div>
            </div>
          </div>
-          <Spin size="large" fix v-if="loading"></Spin>
+          <t-loading v-if="loading" :loading="true" size="large" fullscreen></t-loading>
        </Scroll>
      </div>
    </div>
--- a/seller/src/views/order/after-order/returnGoodsOrder.vue
+++ b/seller/src/views/order/after-order/returnGoodsOrder.vue
@@ -49,9 +49,9 @@
      </Card>
    <Card>
      <div class="order-tab">
-        <Tabs v-model="currentStatus" @on-click="serviceStatusClick">
-          <TabPane v-for="item in serviceStatusWithCount" :key="item.value" :label="item.title" :name="item.value"/>
-        </Tabs>
+        <t-tabs :value="currentStatus" @change="serviceStatusClick">
+          <t-tab-panel v-for="item in serviceStatusWithCount" :key="item.value" :label="item.title" :value="item.value"/>
+        </t-tabs>
      </div>
      <Table
        :loading="loading"
--- a/seller/src/views/order/order/orderList.vue
+++ b/seller/src/views/order/order/orderList.vue
@@ -173,7 +173,7 @@ export default {
            } else if (params.row.clientType == "PC") {
              return h("div", {}, "PC端");
            } else if (params.row.clientType == "WECHAT_MP") {
-              return h("div", {}, "小程序端");
+              return h("div", {}, "小程序");
            } else if (params.row.clientType == "APP") {
              return h("div", {}, "APP端");
            } else {
--- a/seller/src/views/order/order/virtualOrderList.vue
+++ b/seller/src/views/order/order/virtualOrderList.vue
@@ -89,7 +89,7 @@ export default {
            } else if (params.row.clientType == "PC") {
              return h("div", {}, "PC端");
            } else if (params.row.clientType == "WECHAT_MP") {
-              return h("div", {}, "小程序端");
+              return h("div", {}, "小程序");
            } else if (params.row.clientType == "APP") {
              return h("div", {}, "移动应用端");
            } else {
--- a/seller/src/views/shop/modelList/seckill.vue
+++ b/seller/src/views/shop/modelList/seckill.vue
@@ -36,7 +36,7 @@
 </template>
 <script>
 import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
-import "swiper/swiper-bundle.css";
+import "swiper/css/swiper.css";
 export default {
  components: {
    Swiper,
--- a/seller/src/views/shop/ship/logistics.vue
+++ b/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();
            }
          });