wl-design-mobile 0.2.9 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
-# wl-design-mobile
-
-## Setup
-```
-npm i wl-design-mobile
-```
+# wl-design-mobile
+
+## Setup
+```
+npm i wl-design-mobile
+```

package/doc/img/styles/css/index.css

@@ -1,3 +1,3 @@
-.img-upload-container {
-    padding: 0px 14px 12px 14px;
-}
+.img-upload-container {
+    padding: 0px 14px 12px 14px;
+}

package/edit/list/styles/css/index.css

@@ -1,39 +1,39 @@
-.coll-div {
-    margin-bottom: 8px;
-}
-
-.indicator-title {
-    display: flex;
-    align-items: center;
-    color: var(--scl-blue);
-    font-size: 14px;
-    font-family: 微软雅黑, serif Regular;
-}
-
-.indicator-title .color-line {
-    width: 3px;
-    height: 14px;
-    margin-right: 8px;
-}
-
-.coll-title-icon {
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-
-/* 覆盖折叠面板的标题的padding */
-/deep/ .van-cell {
-    padding: 12px 10px;
-}
-
-/* 覆盖去掉折叠面板的标题下面的线 */
-/deep/ .van-cell::after {
-    border: none;
-}
-
-/* 覆盖折叠面板的内容的padding */
-/deep/ .van-collapse-item__content {
-    padding: 0px 0px 0px 0px;
-}
-
+.coll-div {
+    margin-bottom: 8px;
+}
+
+.indicator-title {
+    display: flex;
+    align-items: center;
+    color: var(--scl-blue);
+    font-size: 14px;
+    font-family: 微软雅黑, serif Regular;
+}
+
+.indicator-title .color-line {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.coll-title-icon {
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+/* 覆盖折叠面板的标题的padding */
+/deep/ .van-cell {
+    padding: 12px 10px;
+}
+
+/* 覆盖去掉折叠面板的标题下面的线 */
+/deep/ .van-cell::after {
+    border: none;
+}
+
+/* 覆盖折叠面板的内容的padding */
+/deep/ .van-collapse-item__content {
+    padding: 0px 0px 0px 0px;
+}
+

package/package.json

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

package/search/styles/css/index.css

@@ -1,136 +1,136 @@
-.search-top-pop {
-    min-height: 112px;
-    max-height: 33%;
-    background-color: var(--scl-white-1)
-}
-
-.search-body {
-    border-top: none;
-    overflow-y: auto;
-    flex: 1
-}
-
-.search-bottom-btn {
-    padding: 12px 14px 12px 14px;
-    box-shadow: 0 -2px 10px rgba(125, 126, 128, .16);
-    background-color: rgb(255, 255, 255, 1);
-}
-
-/*日期选择*/
-.search-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-    align-items: center;
-    align-content: center;
-    height: 50px;
-    padding: 10px 0;
-    margin: 0 14px;
-    border-bottom: 1px solid var(--scl-white-2);
-    border-top: none;
-}
-
-.search-input-title {
-    height: 16px;
-    font-size: 12px;
-    color: var(--scl-gray-2);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: 12px;
-    width: 76px;
-}
-
-.search-lambo-input {
-    border: none;
-    outline: none;
-    background: none;
-    height: 16px;
-    font-size: 12px;
-    color: var(--scl-gray-1);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: 8px;
-    flex: 1;
-}
-
-/*输入框*/
-.search-lambo-input .van-cell {
-    padding: 10px 0;
-}
-
-/*多选*/
-.search-top-div {
-    display: flex;
-    justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
-    width: 100%;
-    position: fixed;
-    z-index: 2;
-    box-shadow: 0 2px 10px rgba(125, 126, 128, .16);
-    background-color: rgb(255, 255, 255, 1);
-}
-
-.search-cancel-btn {
-    border: none;
-    color: var(--scl-gray-3);
-}
-
-.search-confirm-btn {
-    border: none;
-    color: var(--scl-blue);
-}
-
-.search-select-title {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-radio-group {
-    position: relative;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell-group {
-    padding-top: 44px;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell:first-child {
-    padding-top: 10px;
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar {
-    width: 6px;
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-thumb {
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(45, 140, 240, 0.6);
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(231, 242, 250, 0.4);
-}
-
-.bottom-div {
-    display: flex;
-    flex-direction: column;
-}
-
-.cell-group-div {
-    flex: 1;
-    overflow-y: auto;
-    margin-top: 44px;
-}
-
-
+.search-top-pop {
+    min-height: 112px;
+    max-height: 33%;
+    background-color: var(--scl-white-1)
+}
+
+.search-body {
+    border-top: none;
+    overflow-y: auto;
+    flex: 1
+}
+
+.search-bottom-btn {
+    padding: 12px 14px 12px 14px;
+    box-shadow: 0 -2px 10px rgba(125, 126, 128, .16);
+    background-color: rgb(255, 255, 255, 1);
+}
+
+/*日期选择*/
+.search-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    align-items: center;
+    align-content: center;
+    height: 50px;
+    padding: 10px 0;
+    margin: 0 14px;
+    border-bottom: 1px solid var(--scl-white-2);
+    border-top: none;
+}
+
+.search-input-title {
+    height: 16px;
+    font-size: 12px;
+    color: var(--scl-gray-2);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 12px;
+    width: 76px;
+}
+
+.search-lambo-input {
+    border: none;
+    outline: none;
+    background: none;
+    height: 16px;
+    font-size: 12px;
+    color: var(--scl-gray-1);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 8px;
+    flex: 1;
+}
+
+/*输入框*/
+.search-lambo-input .van-cell {
+    padding: 10px 0;
+}
+
+/*多选*/
+.search-top-div {
+    display: flex;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    width: 100%;
+    position: fixed;
+    z-index: 2;
+    box-shadow: 0 2px 10px rgba(125, 126, 128, .16);
+    background-color: rgb(255, 255, 255, 1);
+}
+
+.search-cancel-btn {
+    border: none;
+    color: var(--scl-gray-3);
+}
+
+.search-confirm-btn {
+    border: none;
+    color: var(--scl-blue);
+}
+
+.search-select-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-radio-group {
+    position: relative;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell-group {
+    padding-top: 44px;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell:first-child {
+    padding-top: 10px;
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar {
+    width: 6px;
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-thumb {
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(45, 140, 240, 0.6);
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(231, 242, 250, 0.4);
+}
+
+.bottom-div {
+    display: flex;
+    flex-direction: column;
+}
+
+.cell-group-div {
+    flex: 1;
+    overflow-y: auto;
+    margin-top: 44px;
+}
+
+

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/lib/main.cjs'
+// 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 {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/title/lambo-title1.vue

@@ -13,6 +13,11 @@
         </div>
       </div>
     </div>
+    <div class="title1-sub-text" v-if="titleSub">
+      <span>
+        {{titleSub}}
+      </span>
+    </div>
     <div class="title1-border-line" v-if="border"></div>
   </div>
 </template>
@@ -30,6 +35,9 @@ export default {
     title: {
       type: String,
     },
+    titleSub: {
+      type: String,
+    },
     marginBottom: {
       type: Boolean,
       default: true,
@@ -61,7 +69,7 @@ export default {
 }
 
 .title1-main {
-  height: 47px;
+  min-height: 47px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -69,12 +77,12 @@ export default {
   align-items: center;
   align-content: center;
   background-color: var(--scl-white-1);
-  padding: 0px 14px;
+  padding: 5px 14px;
 }
 
 .title1-border-line {
   height: 1px;
-  margin: 0px 14px 0px 14px;
+  margin: 0 14px 0 14px;
   background-color: var(--scl-white-2);
 }
 
@@ -91,7 +99,6 @@ export default {
 }
 
 .title1-val {
-  height: 23px;
   padding: 0;
   font-size: 16px;
   border: none;
@@ -107,6 +114,7 @@ export default {
   justify-content: flex-start;
   align-items: center;
   align-content: flex-start;
+  margin-left: auto;
   background-color: var(--scl-white-1);
 }
 
@@ -130,4 +138,9 @@ export default {
 .opt-btn-div > *:last-child {
   margin-right: 0px;
 }
+
+.title1-sub-text{
+  margin: 0 14px 5px 14px;
+  color:var(--scl-gray-3);
+}
 </style>