wl-design-mobile 0.3.4 → 0.3.5

package/package.json

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

package/table/lambo-ag-table.vue

@@ -8,11 +8,11 @@
           :defaultColDef="defaultColDef"
           @grid-ready="onGridReady"
           @sortChanged="onSortChanged"
+          @cell-clicked="onCellClicked"
           :row-selection="isMultiSelect === true ? 'multiple' : false"
           :rowMultiSelectWithClick="isMultiSelect"
           :suppressCellSelection="isMultiSelect"
-          class="ag-theme-balham"
-          style="width: 100%; height: 100%;"
+          class="ag-grid-tb"
       ></ag-grid-vue>
     </div>
     <van-pagination
@@ -38,8 +38,11 @@ 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"
-// import {axios} from "@/util/axios"
+import {axios} from "../util/axios";
+
+// 合计行标志
+const TOTAL_ROW_FIELD_KEY = "total_row"
+const PAGE_DRILL_FLAG_KEY = "drill"
 
 export default {
   name: 'LamboAgTable',
@@ -77,9 +80,9 @@ export default {
         lockPosition: true,
         editable: false,
         sortable: true,
-        resizable: false,
-        filter: false,
-        autoHeight: true
+        autoHeight: true,
+        resizable: true,
+        filter: true
       },
       currentPage: 1,
       offset: 0,
@@ -91,14 +94,21 @@ export default {
   methods: {
     onGridReady(params) {
       this.gridApi = params.api
-      params.api.sizeColumnsToFit()
     },
-    columnsFilterSort() {
+    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'}
+              }
+            }
+          }
         }
       }
     },
@@ -165,6 +175,18 @@ export default {
         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: {
@@ -179,11 +201,16 @@ export default {
     }
   },
   created() {
-    this.columnsFilterSort()
+    this.columnsFilter()
   }
 }
 </script>
 <style scoped>
+.ag-grid-tb {
+  height: 100%;
+  width: 100%;
+}
+
 /deep/ .vant-page-comp .van-pagination__item {
   color: #0070D2
 }