wl-design-mobile 0.8.13 → 0.8.15

package/table/lambo-ag-table.vue

@@ -1,227 +1,228 @@
-<template>
-  <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"
-          @cell-clicked="onCellClicked"
-          :row-selection="isMultiSelect === true ? 'multiple' : false"
-          :rowMultiSelectWithClick="isMultiSelect"
-          :suppressCellSelection="isMultiSelect"
-          class="ag-grid-tb"
-          :overlay-no-rows-template="overlayNoRowsTemplate"
-      ></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/lib/main.cjs.js'
-/**
- * 本地运行的时候，把这一行放开，上面的一行注释掉
- * import {AgGridVue} from 'ag-grid-vue'
- */
-import {Toast} from "vant"
-import {axios} from "../util/axios"
-
-// 合计行标志
-const TOTAL_ROW_FIELD_KEY = "total_row"
-// 是否下钻标志
-const PAGE_DRILL_FLAG_KEY = "drill"
-
-export default {
-  name: 'LamboAgTable',
-  components: {AgGridVue},
-  props: {
-    tableHeight: {
-      type: String,
-      default: '381px', // 默认10行的高度
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    columns: {
-      type: Array,
-      required: true
-    },
-    searchParams: {
-      type: Object
-    },
-    isPage: {
-      type: Boolean,
-      default: false
-    },
-    isMultiSelect: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      rowData: null,
-      sumData: null,
-      defaultColDef: {
-        lockPosition: true,
-        editable: false,
-        sortable: true,
-        autoHeight: true,
-        resizable: true,
-        filter: true
-      },
-      currentPage: 1,
-      offset: 0,
-      limit: 10,
-      total: 0,
-      gridApi: null,
-      overlayNoRowsTemplate:'<span>没有可显示的数据</span>',
-    }
-  },
-  methods: {
-    onGridReady(params) {
-      this.gridApi = params.api
-    },
-    columnsFilter() {
-      if (this.columns && this.columns.length > 0) {
-        for (const item of this.columns) {
-          if (item && item.hasOwnProperty("field")) {
-            item['comparator'] = this.preventComparator
-          }
-          if (item.hasOwnProperty(PAGE_DRILL_FLAG_KEY) && item[PAGE_DRILL_FLAG_KEY] === '1') {
-            item.cellStyle= (params) => {
-              console.log("lambo-ag-grid columnsFilter params:", params)
-              if (params.hasOwnProperty("data") && !(params.data.hasOwnProperty(TOTAL_ROW_FIELD_KEY) && params.data[TOTAL_ROW_FIELD_KEY] === '1')) {
-                return {color: '#0070D2'}
-              }
-            }
-          }
-        }
-      }
-    },
-    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() {
-      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:", res)
-        if (res && res.code === 1) {
-          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 || '')
-        }
-      }).catch(err => {
-        console.error("lambo-ag-table onLoad 查询[" + this.title + "]异常:", err)
-        Toast.fail("查询[" + this.url + "]数据异常")
-      })
-    },
-    getSelectedRows() {
-      let selData = []
-      if (this.gridApi) {
-        const selectedNodes = this.gridApi.getSelectedNodes()
-        if (selectedNodes) {
-          selData = selectedNodes.map(node => node.data)
-        }
-        console.log('lambo-ag-grid getSelectedRows:', selData);
-      }
-      return selData
-    },
-    onCellClicked(event) {
-      console.log('lambo-ag-grid onCellClicked event:', event);
-      if (event && event.hasOwnProperty("colDef") && event.colDef.hasOwnProperty("field") && event.hasOwnProperty("data")) {
-        let detailField = event.colDef.field
-        let rowData = event.data
-        if (!(rowData.hasOwnProperty(TOTAL_ROW_FIELD_KEY) && rowData[TOTAL_ROW_FIELD_KEY] === '1')) {
-          this.$emit('on-cell-click', detailField, event.value, rowData);
-        }
-      } else {
-        console.error("lambo-ag-grid onCellClicked event异常无法点击")
-      }
-    }
-  },
-  watch: {
-    searchParams: {
-      handler: function (val, oldVal) {
-        console.log(`lambo-ag-table watch searchParams val,oldVal:`, {val, oldVal}, `val===oldVal:`, val === oldVal)
-        this.rowData = []
-        this.sumData = []
-        this.dataRefresh()
-      },
-      deep: true
-    }
-  },
-  created() {
-    this.columnsFilter()
-  }
-}
-</script>
-<style scoped>
-.ag-grid-tb {
-  height: 100%;
-  width: 100%;
-}
-
-/deep/ .vant-page-comp .van-pagination__item {
-  color: #0070D2
-}
-</style>
+<template>
+  <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"
+          @cell-clicked="onCellClicked"
+          :row-selection="isMultiSelect === true ? 'multiple' : false"
+          :rowMultiSelectWithClick="isMultiSelect"
+          :suppressCellSelection="isMultiSelect"
+          class="ag-grid-tb"
+          :overlay-no-rows-template="overlayNoRowsTemplate"
+      ></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/lib/main.cjs.js'
+ */
+
+/**
+ * 本地运行的时候，把这一行放开，上面的一行注释掉
+ * 
+ */
+import {AgGridVue} from 'ag-grid-vue'
+import {Toast} from "vant"
+import {axios} from "../util/axios"
+
+// 合计行标志
+const TOTAL_ROW_FIELD_KEY = "total_row"
+// 是否下钻标志
+const PAGE_DRILL_FLAG_KEY = "drill"
+
+export default {
+  name: 'LamboAgTable',
+  components: {AgGridVue},
+  props: {
+    tableHeight: {
+      type: String,
+      default: '381px', // 默认10行的高度
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    columns: {
+      type: Array,
+      required: true
+    },
+    searchParams: {
+      type: Object
+    },
+    isPage: {
+      type: Boolean,
+      default: false
+    },
+    isMultiSelect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      rowData: null,
+      sumData: null,
+      defaultColDef: {
+        lockPosition: true,
+        editable: false,
+        sortable: true,
+        autoHeight: true,
+        resizable: true,
+        filter: true
+      },
+      currentPage: 1,
+      offset: 0,
+      limit: 10,
+      total: 0,
+      gridApi: null,
+      overlayNoRowsTemplate:'<span>没有可显示的数据</span>',
+    }
+  },
+  methods: {
+    onGridReady(params) {
+      this.gridApi = params.api
+    },
+    columnsFilter() {
+      if (this.columns && this.columns.length > 0) {
+        for (const item of this.columns) {
+          if (item && item.hasOwnProperty("field")) {
+            item['comparator'] = this.preventComparator
+          }
+          if (item.hasOwnProperty(PAGE_DRILL_FLAG_KEY) && item[PAGE_DRILL_FLAG_KEY] === '1') {
+            item.cellStyle= (params) => {
+              console.log("lambo-ag-grid columnsFilter params:", params)
+              if (params.hasOwnProperty("data") && !(params.data.hasOwnProperty(TOTAL_ROW_FIELD_KEY) && params.data[TOTAL_ROW_FIELD_KEY] === '1')) {
+                return {color: '#0070D2'}
+              }
+            }
+          }
+        }
+      }
+    },
+    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() {
+      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:", res)
+        if (res && res.code === 1) {
+          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 || '')
+        }
+      }).catch(err => {
+        console.error("lambo-ag-table onLoad 查询[" + this.title + "]异常:", err)
+        Toast.fail("查询[" + this.url + "]数据异常")
+      })
+    },
+    getSelectedRows() {
+      let selData = []
+      if (this.gridApi) {
+        const selectedNodes = this.gridApi.getSelectedNodes()
+        if (selectedNodes) {
+          selData = selectedNodes.map(node => node.data)
+        }
+        console.log('lambo-ag-grid getSelectedRows:', selData);
+      }
+      return selData
+    },
+    onCellClicked(event) {
+      console.log('lambo-ag-grid onCellClicked event:', event);
+      if (event && event.hasOwnProperty("colDef") && event.colDef.hasOwnProperty("field") && event.hasOwnProperty("data")) {
+        let detailField = event.colDef.field
+        let rowData = event.data
+        if (!(rowData.hasOwnProperty(TOTAL_ROW_FIELD_KEY) && rowData[TOTAL_ROW_FIELD_KEY] === '1')) {
+          this.$emit('on-cell-click', detailField, event.value, rowData);
+        }
+      } else {
+        console.error("lambo-ag-grid onCellClicked event异常无法点击")
+      }
+    }
+  },
+  watch: {
+    searchParams: {
+      handler: function (val, oldVal) {
+        console.log(`lambo-ag-table watch searchParams val,oldVal:`, {val, oldVal}, `val===oldVal:`, val === oldVal)
+        this.rowData = []
+        this.sumData = []
+        this.dataRefresh()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.columnsFilter()
+  }
+}
+</script>
+<style scoped>
+.ag-grid-tb {
+  height: 100%;
+  width: 100%;
+}
+
+/deep/ .vant-page-comp .van-pagination__item {
+  color: #0070D2
+}
+</style>

package/tag/lambo-tag.vue

@@ -1,23 +1,23 @@
-<template>
-  <div>
-    <van-tag :class="tagClass">{{ title }}</van-tag>
-  </div>
-</template>
-<script>
-export default {
-  name: "LamboTag",
-  props: {
-    tagClass: {
-      type: String,
-      default: "tag-blue-half-opacity"
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-  }
-}
-</script>
-<style scoped>
-
-</style>
+<template>
+  <div>
+    <van-tag :class="tagClass">{{ title }}</van-tag>
+  </div>
+</template>
+<script>
+export default {
+  name: "LamboTag",
+  props: {
+    tagClass: {
+      type: String,
+      default: "tag-blue-half-opacity"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+  }
+}
+</script>
+<style scoped>
+
+</style>