wl-design-mobile 0.2.8 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "",
   "main": "index.js",
   "author": "finch",

package/table/lambo-ag-table.vue

@@ -1,20 +1,39 @@
 <template>
-  <div class="ag-theme-balham" :style="{width: '100%', height: tableHeight}">
-    <ag-grid-vue
-        :columnDefs="columns"
-        :rowData="rowData"
-        :pinnedBottomRowData="sumData"
-        :defaultColDef="defaultColDef"
-        @grid-ready="onGridReady"
-        class="ag-theme-balham"
-        style="width: 100%; height: 100%;"
-    ></ag-grid-vue>
+  <div class="table-container">
+    <div class="ag-theme-balham" :style="{width: '100%', height: tableHeight}">
+      <ag-grid-vue
+          :columnDefs="columns"
+          :rowData="rowData"
+          :pinnedBottomRowData="sumData"
+          :defaultColDef="defaultColDef"
+          @grid-ready="onGridReady"
+          @sortChanged="onSortChanged"
+          class="ag-theme-balham"
+          style="width: 100%; height: 100%;"
+      ></ag-grid-vue>
+    </div>
+    <van-pagination
+        v-if="isPage"
+        v-model="currentPage"
+        :total-items="total"
+        :items-per-page="limit"
+        @change="onPageChanged"
+        mode="simple"
+        class="vant-page-comp">
+      <template #prev-text>
+        <van-icon name="arrow-left"/>
+      </template>
+      <template #next-text>
+        <van-icon name="arrow"/>
+      </template>
+    </van-pagination>
   </div>
 </template>
 <script>
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-balham.css'
-import {AgGridVue} from 'ag-grid-vue'
+import {AgGridVue} from 'ag-grid-vue/lib/main.cjs.js'
+// import {AgGridVue} from 'ag-grid-vue'
 import {axios} from "../util/axios/index"
 import {Toast} from "vant"
 
@@ -36,7 +55,11 @@ export default {
     },
     searchParams: {
       type: Object
-    }
+    },
+    isPage: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -49,21 +72,70 @@ export default {
         resizable: false,
         filter: false,
         autoHeight: true
-      }
+      },
+      currentPage: 1,
+      offset: 0,
+      limit: 10,
+      total: 0,
     }
   },
   methods: {
     onGridReady(params) {
       params.api.sizeColumnsToFit();
     },
+    columnsFilterSort() {
+      if (this.columns && this.columns.length > 0) {
+        for (const item of this.columns) {
+          if (item && item.hasOwnProperty("field")) {
+            item['comparator'] = this.preventComparator
+          }
+        }
+      }
+    },
+    preventComparator(v1, v2) {
+      return 0;
+    },
+    onSortChanged(event) {
+      console.log("lambo-ag-table -- onSortChanged -- event:", event)
+      if (event && event.hasOwnProperty("columns") && event.columns) {
+        let sortColumns = event.columns
+        if (sortColumns && sortColumns.length > 0) {
+          let sortCol = sortColumns[sortColumns.length - 1]
+          if (sortCol && sortCol.hasOwnProperty("colId") && sortCol.hasOwnProperty("sort")) {
+            let sortField = sortCol.colId
+            let sortType = sortCol.sort
+            console.log("lambo-ag-table -- onSortChanged -- sortField:" + sortField + ",sortType:" + sortType)
+            if (sortField && (sortType === 'desc' || sortType === 'asc')) {
+              this.searchParams.sort = sortField
+              this.searchParams.order = sortType
+              this.dataRefresh()
+            }
+          }
+        }
+      }
+    },
+    onPageChanged() {
+      this.offset = (this.currentPage - 1) * this.limit
+      this.dataRefresh()
+    },
     dataRefresh() {
-      axios.get(this.url, this.searchParams).then(res => {
+      let params = {}
+      if (this.isPage === true) {
+        params = {offset: this.offset, limit: this.limit, ...this.searchParams}
+      } else {
+        params = {...this.searchParams}
+      }
+      console.log("lambo-ag-table -- onLoad -- params:", params)
+      axios.get(this.url, {params}).then(res => {
         console.log("lambo-ag-table -- onLoad -- dataRefresh:", res)
         if (res && res.code === 1) {
-          this.rowData = []
-          this.sumData = []
-          this.rowData = res.data.data || []
-          this.sumData = res.data.sumData || []
+          let dataObj = res.data
+          this.rowData = dataObj.rows || []
+          this.sumData = dataObj.sum || []
+
+          if (this.isPage === true) {
+            this.total = dataObj.total || 0
+          }
         } else {
           console.error("lambo-ag-table -- onLoad -- 查询[" + this.url + "]数据失败", res)
           Toast.fail("查询[" + this.url + "]数据失败:" + res.data || '')
@@ -85,9 +157,14 @@ export default {
       },
       deep: true
     }
+  },
+  created() {
+    this.columnsFilterSort()
   }
 }
 </script>
 <style scoped>
-
+/deep/ .vant-page-comp .van-pagination__item {
+  color: #0070D2
+}
 </style>

package/list/components/table/lambo-table-footer.vue

@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <div class="table-footer" ref="listRowDiv">
-      <div class="footer-cell">
-        <p>{{footerData.label}}</p>
-        <p>{{footerData.value}}</p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'LamboTableFooter',
-  props: {
-    footerData: {
-      type: Object
-    }
-  },
-  data() {
-    return {}
-  },
-}
-</script>
-<style scoped lang="css">
-.table-footer {
-  width: 100%;
-  display: grid;
-  grid-auto-rows: 30px;
-  gap: 1px;
-  align-items: center;
-}
-
-.footer-cell {
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 14px;
-  white-space: nowrap;
-  place-items: center;
-  display: flex;
-  align-items: center;
-}
-</style>
-

package/list/components/table/lambo-table-head.vue

@@ -1,48 +0,0 @@
-<template>
-  <div>
-    <div class="table-header" ref="listRowDiv">
-      <div v-for="(item, index) in columns" :key="index" class="header-cell" :style="{
-        gridColumn: index + 1,
-        textAlign: item.align || 'left' }">
-        {{ item.title }}
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'LamboTableHead',
-  props: {
-    columns: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-}
-</script>
-<style scoped lang="css">
-.table-header {
-  width: 100%;
-  display: grid;
-  grid-auto-rows: 30px;
-  gap: 1px;
-  align-items: end;
-  justify-content: stretch;
-  align-content: start;
-}
-
-.header-cell {
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 14px;
-  white-space: nowrap;
-  place-items: center;
-  display: flex;
-  align-items: center;
-}
-</style>
-

package/list/components/table/lambo-table-row.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="table-row" ref="listRowDiv">
-    <div v-for="(item, index) in columns" :key="index" class="table-cell" :style="{
-      gridColumn: index + 1,
-
-      textAlign: item.align || 'left' }">
-      <p v-if="item?.type === 'index'">{{seq + 1}}</p>
-      <p v-else> {{ data[item.key] }} </p>
-    </div>
-  </div>
-</template>
-<script>
-// width: item.width,
-export default {
-  name: 'LamboTableRow',
-  props: {
-    columns: {
-      type: Array,
-      required: true
-    },
-    data: {
-      type: Object,
-      required: true
-    },
-    seq: {
-      type: Number,
-      required: true
-    }
-  },
-  data() {
-    return {
-      itemWidth: ''
-    }
-  },
-  mounted() {
-    this.setBodyWidth()
-  },
-  methods: {
-    setBodyWidth() {
-      const headerItems = this.$refs.listRowDiv
-      if (headerItems && headerItems.length) {
-        const widths = headerItems.map(item => item.offsetWidth);
-        const maxWidth = Math.max(...widths) + 'px'; // 获取最大宽度
-        this.itemWidth = maxWidth; // 设置表体宽度
-      }
-    }
-  }
-}
-</script>
-<style scoped lang="css">
-.table-row {
-  width: 100%;
-  display: grid;
-  grid-auto-rows: 30px;
-  gap: 1px;
-  align-items: center;
-  justify-content: stretch;
-  align-content: start;
-}
-
-.table-cell {
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 14px;
-/*  white-space: nowrap;*/
-  place-items: center;
-  display: inline-block;
-  align-items: center;
-}
-</style>
-

package/list/lambo-table-list.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="container">
-    <div class="table-head">
-      <div class="table-cell" :style="{'--width': item.width + 'px' || 'auto'}" v-for="(item,index) in columns" :key="index" >{{ item.title }}</div>
-    </div>
-    <van-list ref="vanList1" v-model="loading"
-        :finished="finished" finished-text="没有更多了" @load="onLoad" offset="10">
-      <div class="table-row" v-for="(item,index) in list" :key="index">
-        <template v-for="column in columns">
-          <div v-if="column.type === 'index'" v-bind:key="column.key" class="table-cell table-cell-list" :style="{'--width': column.width + 'px' || 'auto'}">{{index + 1}}</div>
-          <div v-else class="table-cell table-cell-list" v-bind:key="column.key" :style="{'--width': column.width + 'px' || 'auto'}">{{item[column.key]}} </div>
-        </template>
-      </div>
-    </van-list>
-  </div>
-</template>
-<script>
-import {axios} from "../util/axios/index"
-import {Toast} from "vant"
-
-export default {
-  name: "LamboTableList",
-  components: {},
-  props: {
-    heightRatio: {
-      type: Number,
-      default: 0.5,
-    },
-    url: {
-      type: String
-    },
-    searchParams: {
-      type: Object
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      finished: true,
-      finishedTxt: "",
-      pageNum: 1, // 当前页数
-      pageSize: 10, // 每页数据条数
-      listHeight: '100vh', // 默认列表高度为视口高度的80%
-      refreshing: false,
-      offset: 0,
-      limit: 10,
-      list: [],
-    };
-  },
-  mounted() {
-    this.getListHeight();
-  },
-  watch: {
-    searchParams: {
-      handler: function (val, oldVal) {
-        console.log("searchParams -- val,oldVal:", {val, oldVal})
-        console.log("searchParams -- val===oldVal:", val === oldVal)
-        //查询时重置页码
-        this.pageNum = 1
-        this.offset = 0
-        this.limit = 10
-        this.list = []
-
-        this.onLoad()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    onLoad() {
-      if (this.refreshing) {
-        this.list = [];
-        this.refreshing = false;
-      }
-      this.list =  [
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408220001",
-          "carName": "123",
-          "distCtName": "济南烟草卷烟配送中心"
-        },
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408220002",
-          "carName": "1",
-          "distCtName": "济南烟草卷烟配送中心"
-        },
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408290001",
-          "carName": "14",
-          "distCtName": "济南烟草卷烟配送中心"
-        }
-      ]
-
-      // let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
-      // axios.get(this.url, {params}).then(res => {
-      //   console.log("lambo-init-table-list -- onLoad -- loadData:", res)
-      //   if (res && res.code === 1) {
-      //     let pageData = res.data
-      //
-      //     if (pageData && pageData.rows.length > 0) {
-      //       for (let item of pageData.rows) {
-      //         if (this.list.length < pageData.total) {
-      //           this.list.push(item)
-      //           this.finished = false
-      //         } else {
-      //           this.finished = true // 数据加载完毕
-      //         }
-      //       }
-      //       this.offset = this.pageNum * 10
-      //       this.pageNum++;
-      //       this.finishedTxt = "没有更多了"
-      //     } else {
-      //       this.finished = true; // 数据加载完毕
-      //     }
-      //     this.loading = false; // 加载状态结束
-      //   } else {
-      //     console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
-      //     Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
-      //   }
-      // }).catch(err => {
-      //   console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
-      //   Toast.fail("查询[" + this.url + "]数据异常")
-      // })
-    },
-    getListHeight() {
-      const windowHeight = window.innerHeight;
-      this.listHeight = `${windowHeight * this.heightRatio}px`;
-    },
-    onRefresh() {
-      console.log("lambo-init-list -- onRefresh")
-
-      this.finished = false
-      this.pageNum = 1
-      this.offset = 0
-      this.limit = 10
-
-      this.loading = true
-      this.onLoad()
-    }
-  },
-  beforeDestroy() {
-    this.pageNum = 1
-    this.offset = 0
-    this.limit = 10
-    this.list = []
-  },
-};
-</script>
-<style scoped>
-:root {
-  --width: auto
-}
-
-.container {
-  background: var(--scl-white-1);
-}
-
-.table-head {
-  display: flex;
-  margin-bottom: 5px;
-  color: var(--scl-blue);
-}
-
-.table-row {
-  display: flex;
-}
-
-.table-cell {
-  flex: 0 0 var(--width);
-  text-align: center;
-  padding: 5px;
-  min-width: 0;
-  word-wrap: break-word;
-}
-
-.table-cell-list {
-  font-size: var(--ind-font-size-sm);
-}
-</style>

package/list/lambo-table-list2.vue

@@ -1,211 +0,0 @@
-<template>
-  <div>
-    <lambo-table-head :columns="columns"></lambo-table-head>
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" :offset="200" @load="onLoad">
-        <div v-for="(item, index) in list" :key="index">
-          <lambo-table-row :seq="index" v-bind:key="index" :data="item" :columns="columns"></lambo-table-row>
-        </div>
-      </van-list>
-    </van-pull-refresh>
-    <lambo-table-footer v-if="tableFooter" :footer-data="footerData"></lambo-table-footer>
-  </div>
-</template>
-<script>
-import {axios} from "../util/axios/index"
-import {Toast} from "vant"
-import LamboTableHead from "../list/components/table/lambo-table-head.vue";
-import LamboTableRow from "../list/components/table/lambo-table-row.vue";
-import LamboTableFooter from "../list/components/table/lambo-table-footer.vue";
-
-export default {
-  name: "LamboTableList2",
-  components: {
-    LamboTableHead,
-    LamboTableRow,
-    LamboTableFooter
-  },
-  props: {
-    heightRatio: {
-      type: Number,
-      default: 0.5,
-    },
-    url: {
-      type: String
-    },
-    searchParams: {
-      type: Object
-    },
-    testMode: {
-      type: Boolean,
-      default: false
-    },
-    tableFooter: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    footerData: {
-      type: Object,
-      default: () => {
-        return {
-          label: '',
-          value: '',
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      finished: true,
-      finishedTxt: "",
-      pageNum: 1, // 当前页数
-      pageSize: 10, // 每页数据条数
-      refreshing: false,
-      offset: 0,
-      limit: 10,
-      list: [
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部XXXXXX", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部XXXXXXXXXXXXXXXXXXXXX", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-      ]
-    };
-  },
-  mounted() {
-  },
-  watch: {
-    searchParams: {
-      handler: function (val, oldVal) {
-        console.log("searchParams -- val,oldVal:", {val, oldVal})
-        console.log("searchParams -- val===oldVal:", val === oldVal)
-        //查询时重置页码
-        this.pageNum = 1
-        this.offset = 0
-        this.limit = 10
-        this.list = []
-
-        this.onLoad()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    onLoad() {
-      if (this.refreshing) {
-        this.list = [];
-        this.refreshing = false;
-      }
-      if (this.testMode === true) {
-        let arr = [
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        ]
-        this.list.push(...arr)
-        this.finished = false
-        this.offset = this.pageNum * 10
-        this.pageNum++;
-      }else{
-        let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
-        axios.get(this.url, {params}).then(res => {
-          console.log("lambo-list -- onLoad -- loadData:", res)
-          if (res && res.code === 1) {
-            let pageData = res.data
-
-            if (pageData && pageData.rows.length > 0) {
-              for (let item of pageData.rows) {
-                if (this.list.length < pageData.total) {
-                  this.list.push(item)
-                  this.finished = false
-                } else {
-                  this.finished = true // 数据加载完毕
-                }
-              }
-              this.offset = this.pageNum * 10
-              this.pageNum++;
-              this.finishedTxt = "没有更多了"
-            } else {
-              this.finished = true; // 数据加载完毕
-            }
-            this.loading = false; // 加载状态结束
-          } else {
-            console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
-            Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
-          }
-        }).catch(err => {
-          console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
-          Toast.fail("查询[" + this.url + "]数据异常")
-        })
-      }
-    },
-    onRefresh() {
-      console.log("lambo-init-list -- onRefresh")
-
-      this.finished = false
-      this.pageNum = 1
-      this.offset = 0
-      this.limit = 10
-
-      this.loading = true
-      this.onLoad()
-    },
-  },
-  beforeDestroy() {
-    this.pageNum = 1
-    this.offset = 0
-    this.limit = 10
-    this.list = []
-  }
-};
-</script>
-<style scoped>
-@import "../styles/index.less";
-
-/* 设置滚动条轨道颜色 */
-::-webkit-scrollbar-track {
-  background: rgba(231, 242, 250, 0.4);
-  border-radius: 3px;
-}
-
-/* 设置滚动条滑块颜色 */
-::-webkit-scrollbar-thumb {
-  background: rgba(45, 140, 240, 0.6);
-}
-
-/* 设置滚动条宽度 */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-.custom-list {
-  overflow-y: auto;
-  background-color: var(--scl-white-1);
-  padding: 0 8px 0 14px;
-  margin-top: -6px;
-}
-
-.list-item {
-  border-bottom: 1px solid var(--scl-gray-5);
-}
-
-
-
-</style>