wl-design-mobile 0.3.4 → 0.3.6

package/detail/lambo-detail-grid.vue

@@ -3,7 +3,7 @@
     <van-grid :border="false" :center="false" :column-num="columnNum" class="detail-grid-main">
       <van-grid-item v-for="(row, index) in data" :key="index" class="detail-grid-box">
         <div class="detail-grid-title">{{ row.title }}</div>
-        <div :class="data[index].className">
+        <div class="detail-grid-val">
           {{ row.val }}
         </div>
       </van-grid-item>
@@ -25,24 +25,7 @@ export default {
     }
   },
   created() {
-  },
-  mounted() {
     console.log("LamboDetailGrid -- created -- data:", this.data)
-    this.initData()
-  },
-  methods: {
-    initData() {
-      if (this.columnNum === '1' || this.columnNum === 1) {
-        this.data.forEach(item => { item.className = 'detail-grid-val' })
-      } else  {
-        this.data.forEach((item, index) => {
-          const isLastItem = index === this.data.length - 1;
-          item.className = index % this.columnNum === 0
-              ? (isLastItem ? 'detail-grid-val' : 'detail-grid-val-left')
-              : 'detail-grid-val-right';
-        })
-      }
-    }
   }
 }
 </script>
@@ -71,19 +54,5 @@ export default {
 .detail-grid-val {
   font-size: 14px;
   color: var(--scl-lucency-1);
-  background: var(--scl-white-4);
-  border-radius: 4px;
-}
-.detail-grid-val-left {
-  font-size: 14px;
-  color: var(--scl-lucency-1);
-  background: var(--scl-white-4);
-  border-radius: 4px 0 0 4px;
-}
-.detail-grid-val-right {
-  font-size: 14px;
-  color: var(--scl-lucency-1);
-  background: var(--scl-white-4);
-  border-radius: 0 4px 4px 0;
 }
 </style>

package/package.json

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

package/search/lambo-date-range-page.vue

@@ -11,7 +11,7 @@
       <p class="time">{{ endDate }}</p>
     </div>
     <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate"
-                  type="range" :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
+                  type="range" :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm" get-container="body"/>
   </div>
 </template>
 <script>

package/search/lambo-date-range.vue

@@ -10,7 +10,7 @@
     </div>
     <div>
       <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate" type="range"
-                    :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
+                    :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm" get-container="body"/>
     </div>
   </div>
 </template>

package/search/lambo-multi-select.vue

@@ -7,7 +7,7 @@
       <lambo-vector-icon v-if="icon" :icon="icon" @click="onOpen"></lambo-vector-icon>
     </div>
     <div>
-      <van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
+      <van-popup v-model:show="showBottom" get-container="body" :style="{ height: '31%' }" position="bottom">
         <van-checkbox-group v-model="selectItem.K">
           <div class="bottom-div">
             <div class="search-top-div">

package/search/lambo-single-select.vue

@@ -7,7 +7,7 @@
       <lambo-vector-icon v-if="icon" :icon="icon" @click="onOpen"></lambo-vector-icon>
     </div>
     <div>
-      <van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
+      <van-popup v-model:show="showBottom" get-container="body" :style="{ height: '31%' }" position="bottom">
         <van-radio-group v-model="selectItem.K">
           <div class="bottom-div">
             <div class="search-top-div">

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
@@ -39,7 +39,11 @@ 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"
+
+// 合计行标志
+const TOTAL_ROW_FIELD_KEY = "total_row"
+// 是否下钻标志
+const PAGE_DRILL_FLAG_KEY = "drill"
 
 export default {
   name: 'LamboAgTable',
@@ -77,9 +81,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 +95,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 +176,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 +202,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
 }

package/title/lambo-title1.vue

@@ -13,8 +13,8 @@
         </div>
       </div>
     </div>
-    <div class="title1-sub-text" v-if="titleSub">
-      <span>
+    <div class="title1-sub" v-if="titleSub">
+      <span class="title1-sub-text">
         {{titleSub}}
       </span>
     </div>
@@ -139,10 +139,13 @@ export default {
   margin-right: 0px;
 }
 
+.title1-sub{
+  background-color: var(--scl-white-1);
+}
+
 .title1-sub-text{
   margin: 0 14px 5px 14px;
   color:var(--scl-gray-3);
   font-size: 14px;
-  background-color: var(--scl-white-1);
 }
 </style>

package/util/math.js

@@ -0,0 +1,76 @@
+let math = {};
+//js除法计算
+math.accDiv = function(arg1, arg2) {
+    let t1 = 0,
+        t2 = 0,
+        r1, r2;
+    try {
+        t1 = arg1.toString().split(".")[1].length
+    } catch (e) {
+        console.error('accDiv',e)
+    }
+    try {
+        t2 = arg2.toString().split(".")[1].length
+    } catch (e) {
+        console.error('accDiv',e)
+    }
+    r1 = Number(arg1.toString().replace(".", ""))
+    r2 = Number(arg2.toString().replace(".", ""))
+    return Number(((r1 / r2) * Math.pow(10, t2 - t1)));
+}
+
+//js乘法计算
+math.accMul = function(arg1, arg2) {
+    let m = 0,
+        s1 = arg1.toString(),
+        s2 = arg2.toString();
+    try {
+        m += s1.split(".")[1].length
+    } catch (e) {
+        console.error('accMul',e)
+    }
+    try {
+        m += s2.split(".")[1].length
+    } catch (e) {
+        console.error('accMul',e)
+    }
+    return Number(math.accDiv(Number(s1.replace(".", "")) * Number(s2.replace(".", "")), Math.pow(10, m)));
+}
+
+//js加法计算
+math.accAdd = function(arg1, arg2) {
+    const POW4 = 10000;
+    let r1, r2, m;
+    try {
+        arg1 = math.accDiv(Math.round(arg1 * POW4) , POW4);
+        r1 = arg1.toString().split(".")[1].length
+    } catch (e) {
+        r1 = 0
+    }
+    try {
+        arg2 = math.accDiv(Math.round(arg2 * POW4) , POW4);
+        r2 = arg2.toString().split(".")[1].length
+    } catch (e) {
+        r2 = 0
+    }
+    m = Math.pow(10, Math.max(r1, r2));
+    return Number(math.accDiv((math.accMul(arg1, m) + math.accMul(arg2, m)), m));
+}
+
+//js减法计算
+math.accSub = function(arg1, arg2) {
+    let r1, r2, m;
+    try {
+        r1 = arg1.toString().split(".")[1].length
+    } catch (e) {
+        r1 = 0
+    }
+    try {
+        r2 = arg2.toString().split(".")[1].length
+    } catch (e) {
+        r2 = 0
+    }
+    m = Math.pow(10, Math.max(r1, r2));
+    return Number(math.accDiv((math.accMul(arg1, m) - math.accMul(arg2, m)), m));
+}
+export default math;