mali-applet-ui 0.2.63 → 0.2.65

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

@@ -66,9 +66,9 @@ export default {
         return
       }
       if (globalStore.approval && globalStore.approval.record) {
-        const optionMethod = globalStore.approval.record.optionMethod
-        if (optionMethod) {
-          Promise.resolve(optionMethod({
+        const loadOptionMethod = globalStore.approval.record.loadOption
+        if (loadOptionMethod) {
+          Promise.resolve(loadOptionMethod({
             value: this.value,
             code: this.code
           })).then(options => {

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

@@ -37,7 +37,13 @@ export default {
   },
   data () {
     return {
-      flowOptions: []
+      flowOptions: [],
+      approvalData: {
+        flowHandlers: [],
+        module: null,
+        flowSettingCode: null,
+        enableFlag: false
+      }
     }
   },
   watch: {
@@ -47,21 +53,30 @@ export default {
   },
   created () {
     this.flowOptions = this.options || []
+    this.approvalData.module = this.code
+    this.approvalData.flowSettingCode = this.code
     this.load()
   },
   methods: {
-    load () {
+    updateModel () {
+      this.$emit('input', this.approvalData)
+    },
+    async load () {
+      await this.$nextTick()
       if (!this.code) {
         return
       }
       if (globalStore.approval && globalStore.approval.select) {
-        const optionMethod = globalStore.approval.select.optionMethod
-        if (optionMethod) {
-          Promise.resolve(optionMethod({
-            value: this.value,
+        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.flowOptions = res.flowItems
+            this.updateModel()
           })
         }
       }
@@ -133,8 +148,8 @@ export default {
   text-align: center;
   width: 140rpx;
   .ml-approval-select-user-picture {
-    width: 100rpx;
-    height: 100rpx;
+    width: 80rpx;
+    height: 80rpx;
     border-radius: 50%;
     margin: 0 auto;
   }

package/components/ml-chunk-group/ml-chunk-group.vue

@@ -2,10 +2,12 @@
   <view class="ml-chunk-group" :class="[className || '', status ? `ss-${status}` : '', align ? `align-${align}` : '', {'is-status': !!status, 'is-vertical': vertical, 'is-header': title || $slots.title}]">
     <view v-if="title || $slots.title" class="ml-chunk-group-title">
       <slot name="title">
-        <view v-if="prefixIcon" class="ml-chunk-group-left-icon">
-          <ml-icon :className="prefixIcon" :status="status"></ml-icon>
+        <view class="ml-chunk-group-title-warpper">
+          <view v-if="prefixIcon" class="ml-chunk-group-left-icon">
+            <ml-icon :className="prefixIcon" :status="status"></ml-icon>
+          </view>
+          <view class="ml-chunk-group-title-content">{{ title }}</view>
         </view>
-        <text class="ml-chunk-group-title-content">{{ title }}</text>
       </slot>
     </view>
     <view class="ml-chunk-group-body">
@@ -51,11 +53,24 @@ export default {
     height: 80rpx;
     padding: 0 20rpx ;
   }
+  .ml-chunk-group-title-warpper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    overflow: hidden;
+  }
   .ml-chunk-group-left-icon {
+    flex-shrink: 0;
     font-size: 38rpx;
     flex-shrink: 0;
     padding-right: 10rpx;
   }
+  .ml-chunk-group-title-content {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .ml-chunk-group-content {
     display: flex;
     flex-direction: row;

package/components/ml-list-group/ml-list-group.vue

@@ -180,7 +180,9 @@ export default {
       }
     },
     updateStatus () {
-      const isAllChecked = this.selection.length > 0 && this.selection.length === this.itemList.length
+      const disableItems = this.itemList.filter(item => item.disabled)
+      const allSelectSize = this.selection.length + disableItems.length
+      const isAllChecked = allSelectSize > 0 && allSelectSize >= this.itemList.length
       const isAllIndeterminate =  this.selection.length > 0 && this.selection.length < this.itemList.length
       this.$emit('update:isAllChecked', isAllChecked)
       this.$emit('update:isAllIndeterminate', isAllIndeterminate)
@@ -213,14 +215,17 @@ export default {
         labels = [label]
       }
       labels.forEach(val => {
-        if (checked) {
-          if (!this.selection.includes(val)) {
-            this.selection.push(val)
-          }
-        } else {
-          const index = this.selection.indexOf(val)
-          if (index > -1) {
-            this.selection.splice(index, 1)
+        const item = this.itemList.find(item => item.value === val)
+        if (item && !item.disabled) {
+          if (checked) {
+            if (!this.selection.includes(val)) {
+              this.selection.push(val)
+            }
+          } else {
+            const index = this.selection.indexOf(val)
+            if (index > -1) {
+              this.selection.splice(index, 1)
+            }
           }
         }
       })

package/components/ml-list-item/ml-list-item.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="ml-list-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-padding': padding, 'is-vertical': itemVertical}]" :style="styles" @click="clickEvent" @tap="tapEvent">
     <view v-if="itemType === 'checkbox'" class="ml-list-checkbox-icon">
-      <ml-checkbox :value="hasCheckedChecked"></ml-checkbox>
+      <ml-checkbox :value="hasCheckedChecked" :disabled="disabled"></ml-checkbox>
     </view>
     <view v-else-if="itemType === 'radio'" class="ml-list-radio-icon">
-      <ml-radio :value="hasRadioChecked" :label="value"></ml-radio>
+      <ml-radio :value="hasRadioChecked" :label="value" :disabled="disabled"></ml-radio>
     </view>
     <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-item-left-icon">
       <ml-icon :className="prefixIcon"></ml-icon>
@@ -34,8 +34,9 @@ export default {
       default: null
     },
     content: String,
-		prefixIcon: String,
     vertical: Boolean,
+    disabled: Boolean,
+		prefixIcon: String,
 		suffixIcon: {
       type: String,
       default: 'mlicon-arrow-right'
@@ -86,12 +87,21 @@ export default {
       return this.listGroup ? this.listGroup.type : ''
     }
   },
+  watch: {
+    value () {
+      this.updateProp('value')
+    },
+    disabled () {
+      this.updateProp('disabled')
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       if (this.listGroup) {
         this.listGroup.itemList.push({
           mId: this.mId,
           value: this.value,
+          disabled: this.disabled
         })
       }
     })
@@ -102,9 +112,20 @@ export default {
     }
   },
   methods: {
+    updateProp (prop) {
+      if (this.listGroup) {
+        const item = this.listGroup.itemList.find(item => item.mId === this.mId)
+        if (item) {
+          item[prop] = this[prop]
+        }
+      }
+    },
     clickEvent () {
     },
     tapEvent () {
+      if (this.disabled) {
+        return
+      }
       if (this.listGroup) {
         this.listGroup.triggerItemEvent({ value: this.value })
       }

package/components/ml-list-menu-group/ml-list-menu-group.vue

@@ -77,7 +77,9 @@ export default {
   },
   methods: {
     updateStatus () {
-      const isAllChecked = this.selection.length > 0 && this.selection.length === this.itemList.length
+      const disableItems = this.itemList.filter(item => item.disabled)
+      const allSelectSize = this.selection.length + disableItems.length
+      const isAllChecked = allSelectSize > 0 && allSelectSize >= this.itemList.length
       const isAllIndeterminate =  this.selection.length > 0 && this.selection.length < this.itemList.length
       this.$emit('update:isAllChecked', isAllChecked)
       this.$emit('update:isAllIndeterminate', isAllIndeterminate)
@@ -110,14 +112,17 @@ export default {
         labels = [label]
       }
       labels.forEach(val => {
-        if (checked) {
-          if (!this.selection.includes(val)) {
-            this.selection.push(val)
-          }
-        } else {
-          const index = this.selection.indexOf(val)
-          if (index > -1) {
-            this.selection.splice(index, 1)
+        const item = this.itemList.find(item => item.value === val)
+        if (item && !item.disabled) {
+          if (checked) {
+            if (!this.selection.includes(val)) {
+              this.selection.push(val)
+            }
+          } else {
+            const index = this.selection.indexOf(val)
+            if (index > -1) {
+              this.selection.splice(index, 1)
+            }
           }
         }
       })

package/components/ml-list-menu-item/ml-list-menu-item.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="ml-list-menu-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-vertical': itemVertical}]" @click="clickEvent" @tap="tapEvent">
     <view v-if="itemType === 'checkbox'" class="ml-list-menu-checkbox-icon">
-      <ml-checkbox :value="hasCheckedChecked"></ml-checkbox>
+      <ml-checkbox :value="hasCheckedChecked" :disabled="disabled"></ml-checkbox>
     </view>
     <view v-else-if="itemType === 'radio'" class="ml-list-menu-radio-icon">
-      <ml-radio :value="hasRadioChecked" :label="value"></ml-radio>
+      <ml-radio :value="hasRadioChecked" :label="value" :disabled="disabled"></ml-radio>
     </view>
     <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-menu-item-left-icon">
       <ml-icon :className="prefixIcon"></ml-icon>
@@ -39,6 +39,7 @@ export default {
     name: String,
     content: String,
     vertical: Boolean,
+    disabled: Boolean,
 		prefixIcon: String,
 		suffixIcon: {
       type: String,
@@ -82,22 +83,39 @@ export default {
       return this.listMenuGroup ? this.listMenuGroup.type : ''
     }
   },
+  watch: {
+    value () {
+      this.updateProp('value')
+    },
+    disabled () {
+      this.updateProp('disabled')
+    }
+  },
   mounted () {
     this.$nextTick(() => {
-      if (this.listGroup) {
-        this.listGroup.itemList.push({
+      if (this.listMenuGroup) {
+        this.listMenuGroup.itemList.push({
           mId: this.mId,
           value: this.value,
+          disabled: this.disabled
         })
       }
     })
   },
   beforeDestroy () {
-    if (this.listGroup) {
-      XEUtils.remove(this.listGroup.itemList, item => item.mId === this.mId)
+    if (this.listMenuGroup) {
+      XEUtils.remove(this.listMenuGroup.itemList, item => item.mId === this.mId)
     }
   },
   methods: {
+    updateProp (prop) {
+      if (this.listMenuGroup) {
+        const item = this.listMenuGroup.itemList.find(item => item.mId === this.mId)
+        if (item) {
+          item[prop] = this[prop]
+        }
+      }
+    },
     getDotNum (num) {
       return num > 99 ? '99+' : num
     },
@@ -105,6 +123,9 @@ export default {
       // this.$emit('click', {})
     },
     tapEvent () {
+      if (this.disabled) {
+        return
+      }
       if (this.listMenuGroup) {
         this.listMenuGroup.triggerItemEvent({ value: this.value })
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.2.63",
+  "version": "0.2.65",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"