feat: 运输商列表

src/router/index.js

@@ -89,6 +89,12 @@ const routes = [
         name: 'system_management',
         meta: { title: '客户管理' },
       },
+      {
+        path: '/saas/logistics/transporters',
+        component: () => import('@/views/system/transporters.vue'),
+        name: 'system_transporters',
+        meta: { title: '运输商列表' },
+      },
     ],
   },
 ]

src/views/home/navMenu.vue

@@ -228,6 +228,14 @@ export default {
               index: '/saas/management',
               children: [],
             },
+            {
+              id: 9,
+              path: '',
+              label: '运输商列表',
+              icon: 'el-icon-s-operation',
+              index: '/saas/logistics/transporters',
+              children: [],
+            },
           ],
         },
       ],

src/views/system/transporters.vue

+<template>
+  <div class="wrap card">
+    <div class="search">
+      <el-form
+        :model="searchForm"
+        ref="form"
+        :inline="true"
+        size="small"
+        v-enter-submit="search"
+        @submit.native.prevent
+      >
+        <el-form-item label="名称">
+          <el-input
+            style="width: 300px"
+            v-model="searchForm.name"
+            placeholder="请输入名称&中文名称&英文名称"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="search"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="table_wrap">
+      <table-view
+        :sourceData="sourceData"
+        :tableColumns="tableColumns"
+      ></table-view>
+
+      <!-- <vxe-table
+        border
+        ref="xTable"
+        height="100%"
+        show-overflow
+        size="mini"
+        @scroll="scrollChange"
+        :data="sourceData">
+        <vxe-column
+          v-for="(config, index) in tableColumns"
+          :key="index"
+          :width="config.width"
+          :type="config.type"
+          :field="config.key"
+          :title="config.label"></vxe-column>
+      </vxe-table> -->
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="paginationOptions.total"
+        :page-size="paginationOptions.pageSize"
+        :current-page="paginationOptions.currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '../../common/api/axios'
+import TableView from '@/common/components/base/tableView.vue'
+export default {
+  name: 'logistics_transporters',
+  components: {
+    TableView,
+  },
+  data() {
+    return {
+      sourceData: [],
+      searchForm: {},
+      isLoad: false,
+      bodyHeight: 0,
+      currentPage: 1,
+      sourceDataTotal: 0,
+      paginationOptions: {
+        total: 0,
+        pageSize: 100,
+        currentPage: 1,
+      },
+    }
+  },
+  computed: {
+    tableColumns() {
+      return [
+        { label: '编码', key: 'code' },
+        { label: '中文名称', key: 'nameCn', align: 'left' },
+        { label: '英文名称', key: 'nameEn', align: 'left' },
+        { label: '港澳名称', key: 'nameHk', align: 'left' },
+        { label: '链接', key: 'url', align: 'left' },
+      ]
+    },
+  },
+  mounted() {
+    this.getlist()
+  },
+  methods: {
+    onCurrentChange(currentPage) {
+      this.paginationOptions.currentPage = currentPage
+      this.getlist()
+    },
+    sizeChange(pageSize) {
+      this.paginationOptions.pageSize = pageSize
+      this.getlist()
+    },
+    search() {
+      this.getlist()
+    },
+    scrollChange({ scrollTop, scrollHeight, bodyHeight }) {
+      if (!this.bodyHeight) {
+        this.bodyHeight = bodyHeight
+      }
+      if (scrollTop + this.bodyHeight >= scrollHeight) {
+        if (!this.isLoad) {
+          this.isLoad = true
+          this.currentPage++
+          if (
+            this.sourceData.length >= this.sourceDataTotal
+          ) {
+            return
+          }
+          this.getlist(true)
+        }
+      }
+    },
+    getlist() {
+      const { pageSize, currentPage } =
+        this.paginationOptions
+      axios
+        .post('LogisticsCarrierCode/list_page', {
+          pageSize,
+          currentPage,
+          ...this.searchForm,
+        })
+        .then((res) => {
+          this.sourceData = res.data.records
+          this.paginationOptions.total = res.data.total
+        })
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.wrap {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.table-wrap {
+  background: #fff;
+  flex: 1;
+  overflow: hidden;
+}
+.table_wrap {
+  vertical-align: middle;
+}
+
+.table_wrap >>> .vxe-checkbox--label {
+  padding-left: 0;
+}
+.table_wrap >>> .vxe-header--column.tablecolgroup,
+.table_wrap
+  >>> .vxe-header--column.col--ellipsis.tablecolgroup {
+  height: 22px !important;
+}
+.table_wrap >>> .vxe-cell {
+  /* max-height: 30px !important; */
+  padding-left: 5px;
+  padding-right: 5px;
+}
+</style>