mali-applet-ui 0.2.93 → 0.2.95

package/components/ml-approval-record/ml-approval-record.vue

@@ -4,16 +4,16 @@
       <view class="ml-approval-record-header-title">审批记录</view>
     </view>
     <view class="ml-approval-record-body">
-      <view class="ml-approval-record-list" v-for="(group, gIndex) in flowOptions" :key="gIndex">
+      <view class="ml-approval-record-list" v-for="(group, gIndex) in flowItems" :key="gIndex">
         <view class="ml-approval-record-flow-line"></view>
         <view class="ml-approval-record-item">
           <view class="ml-approval-record-item-title">{{ group.name }}</view>
         </view>
         <view class="ml-approval-record-users">
-          <view class="ml-approval-record-user-item" v-for="(item, uIndex) in group.users" :key="uIndex">
+          <view class="ml-approval-record-user-item" v-for="(item, uIndex) in group.userList" :key="uIndex">
             <view class="ml-approval-record-user-item-info">
               <view class="ml-approval-record-user-item-left">
-                <image class="ml-approval-record-user-picture" :src="item.picture" mode="scaleToFill"></image>
+                <image class="ml-approval-record-user-picture" src="https://csgc.saas.ddqrcode.com/applet/business/image/portrait2.png" mode="scaleToFill"></image>
               </view>
               <view class="ml-approval-record-user-item-content">
                 <view class="ml-approval-record-user-item-top">
@@ -48,31 +48,53 @@ export default {
   },
   data () {
     return {
+      flowItems: [],
+      approvalData: {
+        flowHandlers: [],
+        module: null,
+        flowSettingCode: null,
+        enableFlag: false
+      },
       flowOptions: []
     }
   },
   watch: {
     code () {
-      this.load()
+      this.loadFlow()
     }
   },
   created () {
-    this.flowOptions = this.options || []
-    this.load()
+    this.approvalData.module = this.code
+    this.approvalData.flowSettingCode = this.code
+    this.updateFlowItems(this.options)
+    this.loadFlow()
   },
   methods: {
-    load () {
+    updateModel () {
+      this.$emit('input', this.approvalData)
+    },
+    updateFlowItems (list) {
+      this.flowItems = (list || []).map(item => {
+        item.f = []
+        return item
+      })
+    },
+    async loadFlow () {
+      await this.$nextTick()
       if (!this.code) {
         return
       }
-      if (globalStore.approval && globalStore.approval.record) {
-        const loadOptionMethod = globalStore.approval.record.loadOption
-        if (loadOptionMethod) {
-          Promise.resolve(loadOptionMethod({
-            value: this.value,
+      if (globalStore.approval && globalStore.approval.select) {
+        const loadFlowMethod = globalStore.approval.select.loadFlow
+        if (loadFlowMethod) {
+          Promise.resolve(loadFlowMethod({
             code: this.code
-          })).then(options => {
-            this.flowOptions = options
+          })).then(res => {
+            this.approvalData.enableFlag = res.enableFlag
+            this.approvalData.flowSettingCode = res.flowSettingCode
+            this.approvalData.module = res.module
+            this.updateFlowItems(res.flowItems)
+            this.updateModel()
           })
         }
       }

package/components/ml-cascader-picker/ml-cascader-picker.vue

@@ -5,8 +5,8 @@
   <view v-else class="ml-cascader-picker" :class="[className || '', {'is-border': border, 'is-clear': value.length}]">
     <view class="ml-cascader-picker-warpper" @click="openPopup()">
       <view class="ml-cascader-picker-text">
-        <text v-if="value.length">{{ selectLabel }}</text>
-        <text v-else class="picker-placeholder">{{ placeholder }}</text>
+        <view v-if="value.length" class="ml-cascader-picker-label">{{ selectLabel }}</view>
+        <view v-else class="ml-cascader-picker-placeholder">{{ placeholder }}</view>
       </view>
       <view v-if="clearable && value.length" class="ml-cascader-picker-clear-icon" @click.stop="clearEvent">
         <ml-icon name="delete-filling"></ml-icon>
@@ -211,8 +211,12 @@ export default {
     flex-grow: 1;
     padding-right: 10rpx;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .ml-cascader-picker-label,
+    .ml-cascader-picker-placeholder {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .ml-cascader-picker-clear-icon {
     width: 60rpx;

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

@@ -1,7 +1,18 @@
 <template>
-  <view class="ml-load-more" :class="[className]">
-    <slot></slot>
-    <view v-if="showPage" class="ml-load-more-warpper">
+  <view class="ml-load-more" :class="[className || '', {'not-data': showNotData}]">
+    <view class="ml-load-more-content">
+      <slot></slot>
+    </view>
+    <view v-if="showNotData && !loading" class="ml-load-more-empty">
+      <slot name="empty">
+        <ml-not-data :emptyUrl="emptyUrl" :emptyText="emptyText" :emptyHint="emptyHint">
+          <template #content>
+            <slot name="emptycontent"></slot>
+          </template>
+        </ml-not-data>
+      </slot>
+    </view>
+    <view v-else-if="showPage" class="ml-load-more-warpper">
       <view v-if="loadStatus === 'more'" class="ml-load-more-status-more">上拉显示更多</view>
       <view v-if="loadStatus === 'noMore'" class="ml-load-more-status-no-more">没有更多数据了</view>
     </view>
@@ -19,6 +30,8 @@ export default {
     showPage: Boolean,
     pageProps: Object,
     requestMethod: Function,
+    filterForm: Object,
+    emptyConfig: Object,
     className: String
   },
   inject: {
@@ -34,7 +47,10 @@ export default {
         pageSize: globalStore.loadMore.pageSize,
         currPage: 1,
         total: 0
-      }
+      },
+      emptyUrl: '',
+      emptyText: '',
+      emptyHint: ''
     }
   },
   computed: {
@@ -44,8 +60,23 @@ export default {
       }
       return this.pageVO.pageSize * this.pageVO.currPage < Number(this.pageVO.total) ? 'more' : 'noMore'
     },
+    showNotData () {
+      return !this.value || !this.value.length
+    },
     pagePropOpts () {
       return { ...globalStore.loadMore.pageProp, ...this.pageProps }
+    },
+    hasFilters () {
+      console.log(this.filterForm)
+      for (let key in this.filterForm) {
+        if (this.filterForm[key]) {
+          return true
+        }
+      }
+      return false
+    },
+    emptyOpts () {
+      return Object.assign({}, this.emptyConfig)
     }
   },
   created () {
@@ -119,6 +150,7 @@ export default {
         uni.stopPullDownRefresh()
         console.error(e)
       }
+      this.updateEmptyStatus()
     },
     async loadMore() {
       if (this.showPage && !this.loading && this.loadStatus === 'more') {
@@ -131,12 +163,30 @@ export default {
           console.error(e)
         }
       }
+    },
+    updateEmptyStatus () {
+      if (this.hasFilters) {
+        this.emptyUrl = this.emptyOpts.resultUrl || globalStore.loadMore.notData.resultUrl
+        this.emptyText = XEUtils.template(this.emptyOpts.resultText || globalStore.loadMore.notData.resultText, this.filterForm)
+        this.emptyHint = XEUtils.template(this.emptyOpts.resultHint || globalStore.loadMore.notData.resultHint, this.filterForm)
+      } else {
+        this.emptyUrl = this.emptyOpts.emptyUrl || globalStore.loadMore.notData.emptyUrl
+        this.emptyText = this.emptyOpts.emptyText || globalStore.loadMore.notData.emptyText
+        this.emptyHint = this.emptyOpts.emptyHint || globalStore.loadMore.notData.emptyHint
+      }
     }
   }
 }
 </script>
 
 <style lang="scss">
+.ml-load-more {
+  &.not-data {
+    .ml-load-more-content {
+      display: none;
+    }
+  }
+}
 .ml-load-more-warpper {
   text-align: center;
   .ml-load-more-status-more,

package/components/ml-not-data/ml-not-data.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="ml-not-data">
+    <slot>
+      <view v-if="emptyUrl || $slots.icon" class="ml-not-data-image">
+        <slot name="icon">
+          <image class="ml-not-data-image-icon" :src="emptyUrl" mode="aspectFit"></image>
+        </slot>
+      </view>
+      <view v-if="emptyText || $slots.text" class="ml-not-data-text">
+        <slot name="text">
+          <text>{{ emptyText || '暂无数据！' }}</text>
+        </slot>
+      </view>
+      <view v-if="emptyHint || $slots.hint" class="ml-not-data-hint">
+        <slot name="hint">
+          <text>{{ emptyHint }}</text>
+        </slot>
+      </view>
+      <view class="ml-not-data-contnet">
+        <slot name="contnet"></slot>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+	name: 'MlNotData',
+  props: {
+    emptyUrl: String,
+    emptyText: String,
+    emptyHint: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-not-data {
+  text-align: center;
+  padding-top: 100rpx;
+  .ml-not-data-image-icon {
+    width: 400rpx;
+  }
+  .ml-not-data-text {
+    font-size: 32rpx;
+    font-weight: 700;
+  }
+  .ml-not-data-hint {
+    font-size: 26rpx;
+    padding: 0 60rpx;
+    line-height: 40rpx;
+    color: rgba(0, 0, 0, 0.45);
+  }
+  .ml-not-data-text,
+  .ml-not-data-hint {
+    margin-bottom: 20rpx;
+  }
+}
+</style>

package/components/ml-province-city-picker/ml-province-city-picker.vue

@@ -5,8 +5,8 @@
   <view v-else class="ml-province-city-picker" :class="[className || '', {'is-border': border, 'is-clear': (value ? (value.length || province) : province)}]">
     <view class="ml-province-city-picker-warpper" @click="openPopup()">
       <view class="ml-province-city-picker-text">
-        <text v-if="(value ? (value.length || province) : province)">{{ selectLabel }}</text>
-        <text v-else class="picker-placeholder">{{ placeholder }}</text>
+        <view v-if="(value ? (value.length || province) : province)" class="ml-province-city-picker-label">{{ selectLabel }}</view>
+        <view v-else class="ml-province-city-picker-placeholder">{{ placeholder }}</view>
       </view>
       <view v-if="clearable && (value ? (value.length || province) : province)" class="ml-province-city-picker-clear-icon" @click.stop="clearEvent">
         <ml-icon name="delete-filling"></ml-icon>
@@ -174,8 +174,12 @@ export default {
     flex-grow: 1;
     padding-right: 10rpx;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .ml-province-city-picker-label,
+    .ml-province-city-picker-placeholder {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .ml-province-city-picker-clear-icon {
     width: 60rpx;

package/components/ml-select-picker/ml-select-picker.vue

@@ -5,8 +5,8 @@
   <picker v-else class="ml-select-picker" mode="selector" :value="selectIndex" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
     <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border, 'is-clear': value !== null}]">
       <view class="ml-select-picker-text">
-        <text v-if="value !== null">{{ selectLabel }}</text>
-        <text v-else class="picker-placeholder">{{ placeholder }}</text>
+        <view v-if="value !== null" class="ml-select-picker-label">{{ selectLabel }}</view>
+        <view v-else class="ml-select-picker-placeholder">{{ placeholder }}</view>
       </view>
       <view v-if="clearable && value !== null" class="ml-select-picker-clear-icon" @click.stop="clearEvent">
         <ml-icon name="delete-filling"></ml-icon>
@@ -155,8 +155,12 @@ export default {
 .ml-select-picker-text {
   flex-grow: 1;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  .ml-select-picker-label,
+  .ml-select-picker-placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 .ml-select-picker-clear-icon {
   width: 34rpx;

package/components/ml-tabs/ml-tabs.vue

@@ -74,6 +74,7 @@ export default {
   }
   .ml-tabs-header {
     background: #fff;
+    padding-bottom: 10rpx;
     margin-bottom: 20rpx;
   }
   .ml-tabs-content {
@@ -85,7 +86,7 @@ export default {
   .ml-tabs-nav-item {
     position: relative;
     display: inline-block;
-    padding: 10rpx 20rpx 0 20rpx;
+    padding: 10rpx 10rpx 0 10rpx;
     text-align: center;
     .ml-tabs-nav-title {
       position: relative;

package/components/ml-upload/ml-upload.vue

@@ -39,7 +39,7 @@
 				<view class="ml-upload-file-info">
 					<view class="ml-upload-file-name">{{ item[nameField] }}</view>
 					<view class="ml-upload-file-desc">
-						<ml-button v-if="previewTypes.includes(item[typeField])" status="primary" type="text" @click="previewDocs(item)">预览</ml-button>
+						<ml-button v-if="preview && previewTypes.includes(item[typeField])" status="primary" type="text" @click="previewDocs(item)">预览</ml-button>
 						<ml-button status="primary" type="text" @click="downloadEvent(item)">下载</ml-button>
 					</view>
 				</view>
@@ -54,9 +54,8 @@
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
 import globalStore from '../../config/store'
-import { getFileSuffix } from '../../utils/file'
+import { getFileSuffix, getFileName } from '../../utils/file'
 import { uploadAllFiles, uploadImageFiles } from './file-handle'
 
 export default {
@@ -70,6 +69,10 @@ export default {
 		  type: Array,
 		  default: () => ([])
 		},
+		preview: {
+			type: Boolean,
+			default: true
+		},
 		simpleValue: {
 		  type: Boolean,
 		  default: false
@@ -180,7 +183,7 @@ export default {
 		loadList () {
 			if (this.simpleValue) {
 				this.fileList = (this.urlList && this.urlList.length ? this.urlList : (this.value || [])).map(url => {
-          const name = this.getUrlName(url)
+          const name = getFileName(url)
 					const obj = {
 						id: null,
 						[this.nameField]: name,
@@ -195,9 +198,9 @@ export default {
 						tempPath: this.getUrl(obj)
 					}
 				})
-				this.isUpdate = true
 				if (this.urlList && this.urlList.length) {
-					this.$emit('input', this.fileList)
+					this.isUpdate = true
+					this.$emit('input', [...this.fileList])
 				}
 			} else {
 				this.fileList = (this.value || []).map(item => {
@@ -242,12 +245,11 @@ export default {
         })
       }
       return item[this.urlField]
-    },
-    getUrlName (url) {
-      const urlRest = XEUtils.parseUrl(url)
-      return urlRest.pathname.split('/').slice(-1)[0] || ''
     },
 		previewImageEvent (item, index) {
+			if (!this.preview) {
+				return
+			}
 			if (this.previewStatus) {
 				return
 			}
@@ -354,7 +356,7 @@ export default {
 				}
 			})
 		},
-		chooseEvent () {
+		choose () {
 			if (this.loading) {
 				return
 			}
@@ -394,7 +396,7 @@ export default {
 						}
 					})
 				).then(list => {
-					this.fileList.push(...list)
+					this.fileList = [...this.fileList, ...list].slice(-this.limit)
 					this.isUpdate = true
 					this.updateModel()
 					this.loading = false
@@ -405,6 +407,9 @@ export default {
 			}).catch(e => {
 				console.log(e)
 			})
+		},
+		chooseEvent () {
+			this.choose()
 		}
 	}
 }

package/config/store.js

@@ -47,6 +47,13 @@ const globalStore = {
     resProps: {
       result: 'datas',
       total: 'total'
+    },
+    notData: {
+      emptyUrl: '',
+      emptyText: '暂无记录',
+      resultUrl: '',
+      resultText: '暂无相关结果',
+      resultHint: '请检查输入是否正确'
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.2.93",
+  "version": "0.2.95",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"
@@ -18,7 +18,8 @@
   "main": "index.js",
   "devDependencies": {
     "vuex": "^4.0.2",
-    "xe-utils": "3.5.7"
+    "xe-utils": "3.5.7",
+    "dingtalk-design-miniapp": "^1.9.1"
   },
   "uni-app": {
     "scripts": {

package/utils/file.js

@@ -1,3 +1,5 @@
+import XEUtils from 'xe-utils'
+
 export function getFileSuffix (filename) {
   const pos = filename.lastIndexOf('.')
   let suffix = ''
@@ -7,6 +9,11 @@ export function getFileSuffix (filename) {
   return suffix
 }
 
+export function getFileName (url) {
+  const urlRest = XEUtils.parseUrl(url)
+  return urlRest.pathname.split('/').slice(-1)[0] || ''
+}
+
 /**
  * 下载文件
  * @param {*} url