mali-applet-ui 1.0.75 → 1.0.77

package/config/store.js

@@ -56,6 +56,25 @@ const globalStore = {
       resultHint: '请检查输入是否正确'
     }
   },
+  // 分页器
+  pager: {
+    pageSize: 30,
+    pageProp: {
+      pageSize: 'limit',
+      currentPage: 'page'
+    },
+    resProps: {
+      result: 'datas',
+      total: 'total'
+    },
+    notData: {
+      emptyUrl: '',
+      emptyText: '暂无记录',
+      resultUrl: '',
+      resultText: '暂无相关结果',
+      resultHint: '请检查输入是否正确'
+    }
+  },
   notData: {
     emptyUrl: '',
     emptyText: '暂无记录'

package/lib/components/ml-load-more/ml-load-more.vue

@@ -29,6 +29,7 @@ import globalStore from '../../../config/store'
 import XEUtils from 'xe-utils'
 
 export default {
+  name: 'MlLoadMore',
   props: {
     value: Array,
     autoload: Boolean,

package/lib/components/ml-pager/ml-pager.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="ml-pager" :class="[className || '', {'not-data': showNotData}]">
+    <view class="ml-pager-content">
+      <slot></slot>
+    </view>
+    <view v-if="showNotData && !loading" class="ml-pager-empty">
+      <slot name="empty">
+        <ml-not-data :emptyUrl="emptyUrl" :emptyText="emptyText" :emptyHint="emptyHint"></ml-not-data>
+        <view class="ml-pager-empty-content">
+          <slot name="emptycontent"></slot>
+        </view>
+      </slot>
+    </view>
+    <ml-fixed-footer>
+      <ml-button>上一页</ml-button>
+      <ml-button @click="openPageEvent">{{ pageVO.currPage }}/{{ pageCount }}</ml-button>
+      <ml-button>下一页</ml-button>
+    </ml-fixed-footer>
+
+    <ml-modal v-model="showPopup" title="跳往页码" showConfirmButton showCancelButton>
+      <view>自定义内容</view>
+      <ml-number-input v-model="val3" border controls />
+    </ml-modal>
+  </view>
+</template>
+
+<script>
+import globalStore from '../../../config/store'
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'MlPager',
+  props: {
+    value: Array,
+    autoload: Boolean,
+    pageProps: Object,
+    requestMethod: Function,
+    filterForm: Object,
+    emptyConfig: Object,
+    className: String
+  },
+  inject: {
+    currVM: {
+      from: '$pageVM',
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      pageVO: {
+        pageSize: globalStore.pager.pageSize,
+        currPage: 1,
+        total: 0
+      },
+      showPopup: false,
+      emptyUrl: '',
+      emptyText: '',
+      emptyHint: ''
+    }
+  },
+  computed: {
+    pageCount () {
+      return Math.floor(this.pageVO.pageSize / this.pageVO.total) + 1
+    },
+    loadStatus () {
+      if (this.loading) {
+        return 'loading'
+      }
+      return this.pageVO.pageSize * this.pageVO.currPage < Number(this.pageVO.total) ? 'more' : 'noMore'
+    },
+    showNotData () {
+      return !this.value || !this.value.length
+    },
+    pagePropOpts () {
+      return { ...globalStore.pager.pageProp, ...this.pageProps }
+    },
+    hasFilters () {
+      const fields = this.emptyOpts.fields || []
+      for (const key in this.filterForm) {
+        const itemValue = this.filterForm[key]
+        if (fields.includes(key) && (XEUtils.isArray(itemValue) ? itemValue.length : itemValue)) {
+          return true
+        }
+      }
+      return false
+    },
+    emptyOpts () {
+      return Object.assign({}, this.emptyConfig)
+    }
+  },
+  created () {
+    this.$nextTick(() => {
+      if (this.autoload && this.requestMethod) {
+        this.reload()
+      }
+    })
+  },
+  methods: {
+    getParams () {
+      return {
+        pageObj: this.pageVO,
+        data: {
+          [this.pagePropOpts.currentPage || 'page']: this.pageVO.currPage,
+          [this.pagePropOpts.pageSize || 'limit']: this.pageVO.pageSize
+        }
+      }
+    },
+    getList () {
+      if (this.requestMethod) {
+        this.loading = true
+        return Promise.resolve(
+          this.requestMethod.call(this.currVM, this.getParams())
+        ).then(res => {
+          let data = []
+          if (XEUtils.isFunction(globalStore.pager.resProps.result)) {
+            data = globalStore.pager.resProps.result({ response: res }) || []
+          } else {
+            data = Array.isArray(res) ? res : XEUtils.get(res, globalStore.pager.resProps.result || 'datas')
+          }
+          if (XEUtils.isFunction(globalStore.pager.resProps.total)) {
+            this.pageVO.total = XEUtils.toNumber(globalStore.pager.resProps.total({ response: res }))
+          } else {
+            this.pageVO.total = XEUtils.toNumber(XEUtils.get(res, globalStore.pager.resProps.total || 'total'))
+          }
+          this.loading = false
+          return data
+        }).catch((e) => {
+          console.error(e)
+          console.error('请检查是否在容器组件 <PageLayout ...> 或 <ViewContainer ...> 下使用')
+          this.loading = false
+          return []
+        })
+      }
+      return Promise.resolve([])
+    },
+    reload () {
+      this.pageVO.currPage = 1
+      return this.load()
+    },
+    async load () {
+      if (this.$loading) {
+        this.$loading.show()
+      }
+      try {
+        const data = await this.getList()
+        if (this.$loading) {
+          this.$loading.hide()
+        }
+        this.$emit('input', data)
+      } catch (e) {
+        if (this.$loading) {
+          this.$loading.hide()
+        }
+        console.error(e)
+      }
+      this.updateEmptyStatus()
+    },
+    updateEmptyStatus () {
+      this.$nextTick(() => {
+        if (this.hasFilters) {
+          this.emptyUrl = this.emptyOpts.resultUrl || globalStore.pager.notData.resultUrl || ''
+          this.emptyText = XEUtils.template(this.emptyOpts.resultText || globalStore.pager.notData.resultText, this.filterForm) || ''
+          this.emptyHint = XEUtils.template(this.emptyOpts.resultHint || globalStore.pager.notData.resultHint, this.filterForm) || ''
+        } else {
+          this.emptyUrl = this.emptyOpts.emptyUrl || globalStore.pager.notData.emptyUrl || ''
+          this.emptyText = this.emptyOpts.emptyText || globalStore.pager.notData.emptyText || ''
+          this.emptyHint = this.emptyOpts.emptyHint || globalStore.pager.notData.emptyHint || ''
+        }
+      })
+    },
+    openPageEvent () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-pager {
+  &.not-data {
+    .ml-pager-content {
+      display: none;
+    }
+  }
+  .ml-pager-empty-content {
+    text-align: center;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "码里云小程序组件库",
   "files": [
     "lib",