【修改】STable replace JTable

2021-03-25 17:41:16 +08:00
parent 982310046a
commit bcb0016168
13 changed files with 32 additions and 849 deletions
@@ -24110,7 +24110,7 @@
              tab: "报表参数",
              forceRender: !0
            }
-          }, [n("report-params-table", {
+          }, [n("report-paramj-table", {
            ref: "table2",
            attrs: {
              loading: e.confirmLoading,
@@ -1,292 +0,0 @@
 Table 重封装组件说明
 ====
 封装说明
 ----
 >  基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。
 >
 > 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
 例子1
 ----
 （基础使用）
 ```vue
 <template>
  <s-table
    ref="table"
    :rowKey="(record) => record.data.id"
    size="default"
    :columns="columns"
    :data="loadData"
  >
  </s-table>
 </template>
 <script>
  import STable from '@/components/table/'
  export default {
    components: {
      STable
    },
    data() {
      return {
        columns: [
          {
            title: '规则编号',
            dataIndex: 'no'
          },
          {
            title: '描述',
            dataIndex: 'description'
          },
          {
            title: '服务调用次数',
            dataIndex: 'callNo',
            sorter: true,
            needTotal: true,
            customRender: (text) => text + ' 次'
          },
          {
            title: '状态',
            dataIndex: 'status',
            needTotal: true
          },
          {
            title: '更新时间',
            dataIndex: 'updatedAt',
            sorter: true
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return this.$http.get('/service', {
            params: Object.assign(parameter, this.queryParam)
          }).then(res => {
            return res.result
          })
        },
      }
    }
  }
 </script>
 ```
 例子2
 ----
 （简单的表格，最后一列是各种操作）
 ```vue
 <template>
  <s-table
    ref="table"
    size="default"
    :columns="columns"
    :data="loadData"
  >
    <span slot="action" slot-scope="text, record">
      <a>编辑</a>
      <a-divider type="vertical"/>
      <a-dropdown>
        <a class="ant-dropdown-link">
          更多 <a-icon type="down"/>
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
  </s-table>
 </template>
 <script>
  import STable from '@/components/table/'
  export default {
    components: {
      STable
    },
    data() {
      return {
        columns: [
          {
            title: '规则编号',
            dataIndex: 'no'
          },
          {
            title: '描述',
            dataIndex: 'description'
          },
          {
            title: '服务调用次数',
            dataIndex: 'callNo',
          },
          {
            title: '状态',
            dataIndex: 'status',
          },
          {
            title: '更新时间',
            dataIndex: 'updatedAt',
          },
          {
            table: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return this.$http.get('/service', {
            params: Object.assign(parameter, this.queryParam)
          }).then(res => {
            return res.result
          })
        },
      }
    },
    methods: {
      edit(row) {
        // axios 发送数据到后端 修改数据成功后
        // 调用 refresh() 重新加载列表数据
        // 这里 setTimeout 模拟发起请求的网络延迟..
        setTimeout(() => {
          this.$refs.table.refresh()
        }, 1500)
      }
    }
  }
 </script>
 ```
 内置方法
 ----
 通过 `this.$refs.table` 调用
 `this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后，重载列表数据)
 > 注意：要调用 `refresh()` 需要给表格组件设定 `ref` 值
 注意事项
 ----
 > 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码：
 (需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。)
 修改 `@/components/table/index.js`  第 106 行起
 ```javascript
 result.then(r => {
  this.localPagination = Object.assign({}, this.localPagination, {
    current: r.pageNo,  // 返回结果中的当前分页数
    total: r.totalCount, // 返回结果中的总记录数
    showSizeChanger: this.showSizeChanger,
    pageSize: (pagination && pagination.pageSize) ||
      this.localPagination.pageSize
  });
  !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
  this.localDataSource = r.data; // 返回结果中的数组数据
  this.localLoading = false
 });
 ```
 返回 JSON 例子：
 ```json
 {
  "message": "",
  "result": {
    "data": [{
        id: 1,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
        title: 'Alipay',
        description: '那是一种内在的东西， 他们到达不了，也无法触及的',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      },
      {
        id: 2,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
        title: 'Angular',
        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      },
      {
        id: 3,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
        title: 'Ant Design',
        description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      },
      {
        id: 4,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
        title: 'Ant Design Pro',
        description: '那时候我只会想自己想要什么，从不想自己拥有什么',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      },
      {
        id: 5,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
        title: 'Bootstrap',
        description: '凛冬将至',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      },
      {
        id: 6,
        cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
        title: 'Vue',
        description: '生命就像一盒巧克力，结果往往出人意料',
        status: 1,
        updatedAt: '2018-07-26 00:00:00'
      }
    ],
    "pageSize": 10,
    "pageNo": 0,
    "totalPage": 6,
    "totalCount": 57
  },
  "status": 200,
  "timestamp": 1534955098193
 }
 ```
 更新时间
 ----
 该文档最后更新于： 2018-10-31 PM 08:15
@@ -1,252 +0,0 @@
 <template>
  <div class="standard-table">
    <div class="alert">
      <a-alert type="info" :show-icon="true">
        <div slot="message">
          已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
          <template v-for="(item, index) in needTotalList" v-if="item.needTotal">
            {{ item.title }} 总计&nbsp;
            <a :key="index" style="font-weight: 600">
              {{ item.customRender ? item.customRender(item.total) : item.total }}
            </a>&nbsp;&nbsp;
          </template>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
      </a-alert>
    </div>
    <a-table
      :size="size"
      :bordered="bordered"
      :loading="loading"
      :columns="columns"
      :dataSource="current"
      :rowKey="rowKey"
      :pagination="pagination"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: updateSelect }"
    >
    </a-table>
  </div>
 </template>
 <script>
  export default {
    name: "StandardTable",
    // props: ['bordered', 'loading', 'columns', 'data', 'rowKey', 'pagination', 'selectedRows'],
    props: {
      /**
       * 数据加载函数，返回值必须是 Promise
       * 默认情况下必须传递 data 参数；
       *    如果使用本地数据渲染表格，业务代码中将获取本地数据包装为 Promise 即可。
       *
       * currentData 用于向外暴露表格当前渲染的数据，
       * 业务开发中也可以直接修改 currentData，从而重新渲染表格（仅推荐用于客户端排序、数据过滤等场景）
       */
      data: {
        type: Function,
        required: true
      },
      dataSource: {
        type: Array,
        default () {
          return []
        }
      },
      columns: {
        type: Array,
        required: true
      },
 /*      pagination: {
        type: Object,
        default () {
          return {}
        }
      },*/
      pageSize: {
        type: Number,
        default: 10
      },
      pageNum: {
        type: Number,
        default: 1
      },
      pageSizeOptions: {
        type: Array,
        default () {
          return ['10', '20', '30', '40', '50']
        }
      },
      responseParamsName: {
        type: Object,
        default () {
          return {}
        }
      },
      bordered: {
        type: Boolean,
        default: false
      },
      /**
       * 表格大小风格，default, middle, small
       */
      size: {
        type: String,
        default: 'default'
      },
      rowKey: {
        type: String,
        default: ''
      },
      selectedRows: {
        type: Array,
        default: null
      }
    },
    data () {
      return {
        needTotalList: [],
        selectedRowKeys: [],
        loading: true,
        total: 0,
        pageNumber: this.pageNum,
        currentPageSize: this.pageSize,
        defaultCurrent: 1,
        sortParams: {},
        current: [],
        pagination: {},
        paramsName: {},
      }
    },
    created () {
      //数据请求参数配置
      this.paramsName = Object.assign(
        {},
        {
          pageNumber: "pageNo",
          pageSize: "pageSize",
          total: "totalCount",
          results: "data",
          sortColumns: "sortColumns"
        },
        this.responseParamsName
      );
      this.needTotalList = this.initTotalList(this.columns)
      // load data
      this.loadData( { pageNum: this.pageNumber } )
    },
    methods: {
      updateSelect (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        let list = this.needTotalList
        this.needTotalList = list.map(item => {
          return {
            ...item,
            total: selectedRows.reduce((sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
        this.$emit('change', selectedRowKeys, selectedRows)
      },
      initTotalList (columns) {
        const totalList = []
        columns.forEach(column => {
          if (column.needTotal) {
            totalList.push({ ...column, total: 0 })
          }
        })
        return totalList
      },
      loadData (params) {
        let that = this
        that.loading = true
        params = Object.assign({}, params)
        const remoteParams = Object.assign({}, that.sortParams)
        remoteParams[that.paramsName.pageNumber] = params.pageNum || that.pageNumber
        remoteParams[that.paramsName.pageSize] = params.pageSize || that.currentPageSize
        if (params.pageNum) {
          that.pageNumber = params.pageNum
        }
        if (params.pageSize) {
          that.currentPageSize = params.pageSize
        }
        let dataPromise = that.data(remoteParams)
        dataPromise.then( response => {
          if (!response) {
            that.loading = false
            return
          }
          let results = response[that.paramsName.results]
          results = (results instanceof Array && results) || []
          that.current = results
          that.$emit("update:currentData", that.current.slice())
          that.$emit("dataloaded", that.current.slice())
          that.total = response[that.paramsName.total] * 1
          that.pagination = that.pager()
          that.loading = false
        }, () => {
          // error callback
          that.loading = false
        })
      },
      // eslint-disable-next-line
      onPagerChange (page, pageSize) {
        this.pageNumber = page
        this.loadData({ pageNum: page })
      },
      onPagerSizeChange (current, size) {
        this.currentPageSize = size
        /*
        if (current === this.pageNumber) this.loadData()
        console.log('page-size-change', current, size)
        */
      },
      onClearSelected () {
        this.selectedRowKeys = []
        this.updateSelect([], [])
      },
      pager () {
        return {
          total: this.total,
          showTotal: total => `共有 ${total} 条`,
          showSizeChanger: true,
          pageSizeOptions: this.pageSizeOptions,
          pageSize: this.pageSize,
          defaultCurrent: this.defaultCurrent,
          onChange: this.onPagerChange,
          onShowSizeChange: this.onPagerSizeChange
        }
      }
    },
    watch: {
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
    }
  }
 </script>
 <style scoped>
    .alert {
        margin-bottom: 16px;
    }
 </style>
@@ -1,269 +0,0 @@
 import T from "ant-design-vue/es/table/Table";
 import get from "lodash.get"
 export default {
  data() {
    return {
      needTotalList: [],
      selectedRows: [],
      selectedRowKeys: [],
      localLoading: false,
      localDataSource: [],
      localPagination: Object.assign({}, T.props.pagination)
    };
  },
  props: Object.assign({}, T.props, {
    rowKey: {
      type: [String, Function],
      default: 'id'
    },
    data: {
      type: Function,
      required: true
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showSizeChanger: {
      type: Boolean,
      default: true
    },
    showAlertInfo: {
      type: Boolean,
      default: false
    },
    showPagination: {
      default: 'auto'
    }
  }),
  watch: {
    'localPagination.current'(val) {
      this.$router.push({
        name: this.$route.name,
        params: Object.assign({}, this.$route.params, {
          pageNo: val
        }),
      });
    },
    pageNum(val) {
      Object.assign(this.localPagination, {
        current: val
      });
    },
    pageSize(val) {
      console.log('pageSize:', val)
      Object.assign(this.localPagination, {
        pageSize: val
      });
    },
    showSizeChanger(val) {
      console.log('showSizeChanger', val)
      Object.assign(this.localPagination, {
        showSizeChanger: val
      });
    }
  },
  created() {
    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
      current: this.pageNum,
      pageSize: this.pageSize,
      showSizeChanger: this.showSizeChanger
    });
    this.needTotalList = this.initTotalList(this.columns)
    this.loadData();
  },
  methods: {
    refresh() {
      this.loadData();
    },
    loadData(pagination, filters, sorter) {
      this.localLoading = true
      var result = this.data(
        Object.assign({
            pageNo: (pagination && pagination.current) ||
              this.localPagination.current,
            pageSize: (pagination && pagination.pageSize) ||
              this.localPagination.pageSize
          },
          (sorter && sorter.field && {
            sortField: sorter.field
          }) || {},
          (sorter && sorter.order && {
            sortOrder: sorter.order
          }) || {}, {
            ...filters
          }
        )
      );
      if (result instanceof Promise) {
        result.then(r => {
          this.localPagination = Object.assign({}, this.localPagination, {
            current: r.pageNo,  // 返回结果中的当前分页数
            total: r.totalCount, // 返回结果中的总记录数
            showSizeChanger: this.showSizeChanger,
            pageSize: (pagination && pagination.pageSize) ||
              this.localPagination.pageSize
          });
          //update--begin--autor:wangshuai-----date:20200724------for：判断showPagination是否为false------
          (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination = false)
          //update--end--autor:wangshuai-----date:20200724------for：判断showPagination是否为false-----
          this.localDataSource = r.data; // 返回结果中的数组数据
          this.localLoading = false
        });
      }
    },
    initTotalList(columns) {
      const totalList = []
      columns && columns instanceof Array && columns.forEach(column => {
        if (column.needTotal) {
          totalList.push({ ...column,
            total: 0
          })
        }
      })
      return totalList
    },
    updateSelect(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      let list = this.needTotalList
      this.needTotalList = list.map(item => {
        return {
          ...item,
          total: selectedRows.reduce((sum, val) => {
            let total = sum + get(val, item.dataIndex)
            return isNaN(total) ? 0 : total
          }, 0)
        }
      })
      // this.$emit('change', selectedRowKeys, selectedRows)
    },
    updateEdit() {
      this.selectedRows = []
    },
    onClearSelected() {
      // 【TESTA-262】页面清空后还能才做所选行，增加  this.$emit('clearAll')
      this.selectedRowKeys = []
      this.selectedRows = []
      this.updateSelect([], [])
      this.$emit('clearAll')
    },
    renderMsg(h) {
      const _vm = this
      let d = []
      // 构建 已选择
      d.push(
        h('span', {
          style: {
            marginRight: '12px'
          }
        }, ['已选择 ', h('a', {
          style: {
            fontWeight: 600
          }
        }, this.selectedRows.length)])
      );
      // 构建 列统计
      this.needTotalList.map(item => {
        d.push(h('span', {
            style: {
              marginRight: '12px'
            }
          },
          [
            `${ item.title }总计 `,
            h('a', {
              style: {
                fontWeight: 600
              }
            }, `${ !item.customRender ? item.total : item.customRender(item.total) }`)
          ]))
      });
      // 构建 清空选择
      d.push(h('a', {
        style: {
          marginLeft: '24px'
        },
        on: {
          click: _vm.onClearSelected
        }
      }, '清空'))
      return d
    },
    renderAlert(h) {
      return h('span', {
        slot: 'message'
      }, this.renderMsg(h))
    },
  },
  render(h) {
    const _vm = this
    let props = {},
      localKeys = Object.keys(this.$data);
    Object.keys(T.props).forEach(k => {
      let localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`;
      if (localKeys.includes(localKey)) {
        return props[k] = _vm[localKey];
      }
      return props[k] = _vm[k];
    })
    // 显示信息提示
    if (this.showAlertInfo) {
      props.rowSelection = {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          _vm.updateSelect(selectedRowKeys, selectedRows)
          _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows })
        }
      };
      return h('div', {}, [
        h("a-alert", {
          style: {
            marginBottom: '16px'
          },
          props: {
            type: 'info',
            showIcon: true
          }
        }, [_vm.renderAlert(h)]),
        h("a-table", {
          tag: "component",
          attrs: props,
          on: {
            change: _vm.loadData
          },
          scopedSlots: this.$scopedSlots
        }, this.$slots.default)
      ]);
    }
    return h("a-table", {
      tag: "component",
      attrs: props,
      on: {
        change: _vm.loadData
      },
      scopedSlots: this.$scopedSlots
    }, this.$slots.default);
  }
 };
@@ -359,10 +359,6 @@ export const constantRouterMap = [
      }
    ]
  },
  {
    path: '/jtable',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/jero/jtable1')
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
@@ -13,7 +13,7 @@
 </template>
 <script>
-import JTable from '@/components/table/jTable'
+import JTable from '@/components/jero/JTable'
 export default {
  name: 'Jtable',
@@ -27,7 +27,7 @@
      </a-form>
    </div>
-    <s-table :columns="columns" :data="loadData">
+    <j-table :columns="columns" :data="loadData">
      <span slot="actions" slot-scope="text, record">
        <a-tag v-for="(action, index) in record.actionList" :key="index">{{ action.describe }}</a-tag>
@@ -57,7 +57,7 @@
          </a-menu>
        </a-dropdown>
      </span>
-    </s-table>
+    </j-table>
    <a-modal
      title="操作"
@@ -134,12 +134,12 @@
 </template>
 <script>
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  export default {
    name: "TableList",
    components: {
-      STable
+      JTable
    },
    data () {
      return {
@@ -27,7 +27,7 @@
      </a-form>
    </div>
-    <s-table
+    <j-table
      ref="table"
      size="default"
      :columns="columns"
@@ -71,7 +71,7 @@
          </a-menu>
        </a-dropdown>
      </span>
-    </s-table>
+    </j-table>
    <role-modal ref="modal" @ok="handleOk"></role-modal>
@@ -79,13 +79,13 @@
 </template>
 <script>
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  import RoleModal from './modules/RoleModal'
  export default {
    name: "TableList",
    components: {
-      STable,
+      JTable,
      RoleModal
    },
    data () {
@@ -75,7 +75,7 @@
      </a-dropdown>
    </div>
-    <s-table
+    <j-table
      ref="table"
      size="default"
      :columns="columns"
@@ -110,7 +110,7 @@
          </span>
        </div>
      </template>
-    </s-table>
+    </j-table>
    <a-modal title="新建规则" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
      <!---->
      <a-form style="margin-top: 8px" :autoFormCreate="(form)=>{this.createForm = form}">
@@ -123,12 +123,12 @@
 </template>
 <script>
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  export default {
    name: "TableList",
    components: {
-      STable
+      JTable
    },
    data () {
      return {
@@ -75,7 +75,7 @@
      </a-dropdown>
    </div>
-    <s-table
+    <j-table
      ref="table"
      size="default"
      :columns="columns"
@@ -103,7 +103,7 @@
          </a-menu>
        </a-dropdown>
      </span>
-    </s-table>
+    </j-table>
    <a-modal
      title="操作"
@@ -188,7 +188,7 @@
 </template>
 <script>
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  import ATextarea from "ant-design-vue/es/input/TextArea"
  import AInput from "ant-design-vue/es/input/Input"
  import moment from "moment"
@@ -200,7 +200,7 @@
    components: {
      AInput,
      ATextarea,
-      STable
+      JTable
    },
    data () {
      return {
@@ -27,7 +27,7 @@
      </a-form>
    </div>
-    <s-table
+    <j-table
      size="default"
      :columns="columns"
      :data="loadData"
@@ -70,7 +70,7 @@
          </a-menu>
        </a-dropdown>
      </span>
-    </s-table>
+    </j-table>
    <a-modal
      title="操作"
@@ -149,13 +149,13 @@
 </template>
 <script>
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  import { getRoleList, getServiceList } from '@/api/manage'
  export default {
    name: "TableList",
    components: {
-      STable
+      JTable
    },
    data () {
      return {
@@ -18,17 +18,17 @@
      <a-divider style="margin-bottom: 32px"/>
      <div class="title">退货商品</div>
-      <s-table
+      <j-table
-        style="margin-bottom: 24px" 
+        style="margin-bottom: 24px"
-        :columns="goodsColumns" 
+        :columns="goodsColumns"
        :data="loadGoodsData">
-      </s-table>
+      </j-table>
      <div class="title">退货进度</div>
-      <s-table
+      <j-table
-        style="margin-bottom: 24px" 
+        style="margin-bottom: 24px"
-        :columns="scheduleColumns" 
+        :columns="scheduleColumns"
        :data="loadScheduleData">
        <template
@@ -37,14 +37,14 @@
          <a-badge :status="status" :text="status | statusFilter"/>
        </template>
-      </s-table>
+      </j-table>
    </a-card>
  </page-layout>
 </template>
 <script>
  import PageLayout from '@/components/page/PageLayout'
-  import STable from '@/components/table/'
+  import JTable from '@/components/jero/JTable'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  const DetailListItem = DetailList.Item
@@ -55,7 +55,7 @@
      ABadge,
      DetailList,
      DetailListItem,
-      STable
+      JTable
    },
    data () {
      return {