mali-applet-ui 1.0.1 → 1.0.2

package/README.md

@@ -25,7 +25,7 @@ npm install mali-applet-ui
   "easycom": {
     "autoscan": true,
     "custom": {
-      "^ml-(.*)": "mali-applet-ui/components/ml-$1/ml-$1.vue"
+      "^ml-(.*)": "mali-applet-ui/lib/components/ml-$1/ml-$1.vue"
     }
   },
   // 此为本身已有的内容

package/config/index.js

@@ -6,4 +6,4 @@ function config (options) {
   return globalStore
 }
 
-export default config
+export default config

package/index.js

@@ -15,7 +15,7 @@ const MaliUI = {
 }
 
 export {
-	MaliUtils,
+  MaliUtils,
   MaliToast,
   MaliModal,
   MaliLoading,

package/lib/components/ml-amount-input/ml-amount-input.vue

@@ -0,0 +1,282 @@
+<template>
+  <view v-if="isFromReadonly" class="ml-amount-input is-readonly" :class="[className || '', {'is-right': align === 'right'}]">
+    <view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
+  </view>
+  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-amount-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
+    <view class="ml-amount-input-simulate">
+      <text v-if="inpVal">{{ inpVal }}</text>
+      <text v-else class="ml-amount-input-placeholder">{{ placeholder }}</text>
+    </view>
+  </view>
+  <view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled, 'is-clear': clearable && inpVal}, className]">
+    <view v-if="showTip" class="ml-amount-tip">
+      <view>首位：</view>
+      <view class="ml-amount-tip-label">{{ firstNumLabel }}</view>
+    </view>
+    <input
+      v-model="inpVal"
+      type="digit"
+      class="ml-amount-input-inp"
+      autocomplete="off"
+      :placeholder="placeholder"
+      :maxlength="maxLength"
+      :disabled="disabled"
+      @blur="blurEvent"
+      @input="inputEvent" />
+    <view v-if="clearable && !disabled && inpVal" class="ml-amount-input-clear-icon" @click.stop="clearEvent">
+      <ml-icon name="delete-filling"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import { getPlatformEnv, toAmountString, toWanAmountString } from '../../../utils'
+
+function eqEmptyNull (value) {
+  return value === '' || XEUtils.eqNull(value)
+}
+
+export default {
+  name: 'MlAmountInput',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [String, Number],
+    align: String,
+    border: Boolean,
+    min: [Number, String],
+    max: {
+      type: [Number, String],
+      default: 9999999999
+    },
+    maxLength: {
+      type: Number,
+      default: 12
+    },
+    negative: Boolean,
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    showTip: Boolean,
+    clearable: Boolean,
+    className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  data () {
+    return {
+      platformEnv: getPlatformEnv(),
+      inpVal: ''
+    }
+  },
+  computed: {
+    isFromReadonly () {
+      return this.form ? this.form.readonly : false
+    },
+    currAmountNum () {
+      return this.value === '' ? '' : Number(this.value || 0)
+    },
+    amountLabel () {
+      if (this.simplify) {
+        return toWanAmountString(this.value)
+      }
+      return toAmountString(this.value)
+    },
+    minNum () {
+      if (XEUtils.isNumber(this.min) || this.min) {
+        return Number(this.min || 0)
+      }
+      if (this.negative) {
+        return -9999999999
+      }
+      return 0
+    },
+    maxNum () {
+      if (XEUtils.isNumber(this.max) || this.max) {
+        return Number(this.max)
+      }
+      return null
+    },
+    firstNumLabel () {
+      const numVal = XEUtils.toNumber(this.value)
+      if (numVal > 999999999999) {
+        return '万亿'
+      } else if (numVal > 99999999999) {
+        return '千亿'
+      } else if (numVal > 9999999999) {
+        return '百亿'
+      } else if (numVal > 999999999) {
+        return '十亿'
+      } else if (numVal > 99999999) {
+        return '亿'
+      } else if (numVal > 9999999) {
+        return '千万'
+      } else if (numVal > 999999) {
+        return '百万'
+      } else if (numVal > 99999) {
+        return '十万'
+      } else if (numVal > 9999) {
+        return '万'
+      } else if (numVal > 999) {
+        return '千'
+      } else if (numVal > 99) {
+        return '百'
+      } else if (numVal > 9) {
+        return '十'
+      }
+      return '-'
+    }
+  },
+  watch: {
+    value (val) {
+      if (!this.updateModel) {
+        this.inpVal = val
+      }
+      this.updateModel = false
+    },
+    min () {
+      this.checkValue()
+    },
+    max () {
+      this.checkValue()
+    }
+  },
+  created () {
+    this.updateValue(this.value)
+  },
+  methods: {
+    updateValue (value) {
+      this.inpVal = eqEmptyNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), 2)
+    },
+    checkValue  () {
+      // 如果是空值，则不处理
+      if (eqEmptyNull(this.inpVal) && eqEmptyNull(this.value)) {
+        return { status: false, value: this.inpVal }
+      }
+      const numVal = XEUtils.toNumber(this.inpVal)
+      if (this.minNum !== null && (numVal < this.minNum)) {
+        this.$emit('input', this.minNum)
+        return { status: false, value: this.minNum }
+      }
+      if (this.maxNum !== null && (numVal > this.maxNum)) {
+        this.$emit('input', this.maxNum)
+        return { status: false, value: this.maxNum }
+      }
+      const val = XEUtils.floor(numVal, 2)
+      if (`${val}` !== `${this.value}`) {
+        this.$emit('input', val)
+        return { status: false, value: val }
+      }
+      return { status: true, value: numVal }
+    },
+    blurEvent () {
+      const rest = this.checkValue()
+      this.updateModel = rest.status
+      if (rest.status) {
+        this.$nextTick(() => {
+          this.updateValue(rest.value)
+        })
+      }
+      this.$emit('blur', { value: this.inpVal })
+    },
+    inputEvent () {
+      const value = this.inpVal
+      this.$emit('input', value)
+      this.$emit('change', { value })
+    },
+    clearEvent () {
+      this.inpVal = ''
+      this.inputEvent()
+      this.$emit('clear', { value: this.inpVal })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-amount-input {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  .ml-amount-input-placeholder {
+    color: $uni-text-color-placeholder;
+  }
+  .ml-amount-input-readonly-content {
+    padding: 20rpx 4rpx;
+  }
+  .ml-amount-input-simulate {
+    padding: 0 10rpx;
+    height: 70rpx;
+    line-height: 70rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: #ffffff;
+  }
+  &.is-right {
+    .ml-amount-input-inp,
+    .ml-amount-input-simulate {
+      text-align: right;
+    }
+  }
+  &.is-border {
+    .ml-amount-input-inp,
+    .ml-amount-input-simulate {
+      border: 1px solid #e5e5e5;
+      border-radius: $ml-border-radius;
+    }
+  }
+  .ml-amount-tip {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    top: -60rpx;
+    right: 10rpx;
+    z-index: 1;
+    .ml-amount-tip-label {
+      min-width: 60rpx;
+      text-align: right;
+    }
+  }
+  .ml-amount-input-inp {
+    outline: 0;
+  }
+  .ml-amount-input-inp,
+  .ml-amount-input-simulate {
+    font-size: $uni-font-size-base;
+    width: 100%;
+    height: 70rpx;
+    padding: 0 10rpx;
+  }
+  .ml-amount-input-inp::-webkit-outer-spin-button,
+  .ml-amount-input-inp::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+  .ml-amount-input-clear-icon {
+    width: 60rpx;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    color: #c0c4cc;
+    border-radius: 0 $ml-border-radius $ml-border-radius 0;
+  }
+}
+</style>

package/lib/components/ml-amount-text/ml-amount-text.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="ml-amount-text" :class="[className || '', status ? `ss-${status}` : '', {'is-underline': underline}]">
+    <slot name="symbol">
+      <view v-if="symbol" class="amount-flag">￥</view>
+    </slot>
+    <slot>
+      <view class="amount-num">{{ amountLabel }}</view>
+    </slot>
+    <slot name="unit">
+      <view v-if="unit" class="amount-unit">{{ amountUnit }}</view>
+    </slot>
+  </view>
+</template>
+
+<script>
+import { toAmountString, toWanAmountString } from '../../../utils'
+
+export default {
+  name: 'MlAmountText',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [String, Number],
+    simplify: Boolean,
+    status: String,
+    symbol: {
+      type: Boolean,
+      default: false
+    },
+    unit: Boolean,
+    underline: Boolean,
+    className: String
+  },
+  computed: {
+    amountUnit () {
+      if (this.simplify) {
+        return '万元'
+      }
+      return '元'
+    },
+    amountLabel () {
+      if (this.simplify) {
+        return toWanAmountString(this.value)
+      }
+      return toAmountString(this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-amount-text {
+  display: inline;
+  padding: 0 4rpx;
+  &.is-underline {
+    text-decoration: underline;
+  }
+  .amount-flag,
+  .amount-num,
+  .amount-unit {
+    display: inline;
+  }
+  .amount-unit {
+    padding-left: 5rpx;
+  }
+  &.ss-primary {
+    color: $uni-color-primary;
+  }
+  &.ss-success {
+    color: $uni-color-success;
+  }
+  &.ss-info {
+    color: #909399;
+  }
+  &.ss-warning {
+    color: $uni-color-warning;
+  }
+  &.ss-danger {
+    color: $uni-color-error;
+  }
+  &.ss-gray {
+    color: $ml-gray-color;
+  }
+  &.ss-blue {
+    color: $ml-blue-color;
+  }
+  &.ss-green {
+    color: $ml-green-color;
+  }
+  &.ss-pink {
+    color: $ml-pink-color;
+  }
+  &.ss-orange {
+    color: $ml-orange-color;
+  }
+  &.ss-purple {
+    color: $ml-purple-color;
+  }
+}
+</style>

package/{components → lib/components}/ml-approval-record/ml-approval-record.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import globalStore from '../../config/store'
+import globalStore from '../../../config/store'
 
 export default {
   name: 'MlApprovalRecord',
@@ -188,9 +188,9 @@ export default {
     display: inline-block;
     vertical-align: middle;
     max-width: 150rpx;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     margin-right: 10rpx;
     color: rgba(0, 0, 0, 0.85);
   }

package/{components → lib/components}/ml-approval-select/ml-approval-select.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import globalStore from '../../config/store'
+import globalStore from '../../../config/store'
 
 export default {
   name: 'MlApprovalSelect',

package/{components → lib/components}/ml-approval-type/ml-approval-type.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import globalStore from '../../config/store'
+import globalStore from '../../../config/store'
 
 export default {
   name: 'MlApprovalType',
@@ -27,8 +27,8 @@ export default {
       return this.selectItem ? this.selectItem.label : ''
     },
     styles () {
-      const colStys = this.selectItem && this.selectItem.background? `background:${this.selectItem.background};` : ''
-      const bgStys = this.selectItem && this.selectItem.color? `color:${this.selectItem.color};` : ''
+      const colStys = this.selectItem && this.selectItem.background ? `background:${this.selectItem.background};` : ''
+      const bgStys = this.selectItem && this.selectItem.color ? `color:${this.selectItem.color};` : ''
       return `${bgStys}${colStys}`
     }
   }
@@ -42,4 +42,4 @@ export default {
   border-radius: $ml-border-radius;
   font-size: 24rpx;
 }
-</style>
+</style>

package/{components → lib/components}/ml-button/ml-button.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-	name: 'MlButton',
+  name: 'MlButton',
   options: {
     virtualHost: true
   },
@@ -29,7 +29,7 @@ export default {
   },
   computed: {
     styles () {
-      const wStyle =  this.width ? `width:${this.width};` : ''
+      const wStyle = this.width ? `width:${this.width};` : ''
       const hStyle = this.height ? `height:${this.height};line-height:${this.height};` : ''
       return `${wStyle}${hStyle}`
     }
@@ -68,7 +68,7 @@ export default {
     line-height: 1.5;
     vertical-align: middle;
     background: transparent;
-	  font-size: $uni-font-size-base;
+    font-size: $uni-font-size-base;
     &.is-underline {
       text-decoration: underline;
     }
@@ -113,7 +113,7 @@ export default {
     line-height: 76rpx;
     border: 1px solid #e5e5e5;
     border-radius: $ml-border-radius;
-	  font-size: 32rpx;
+    font-size: 32rpx;
     &+.ml-button {
       margin-left: $ml-button-interval-margin;
     }
@@ -207,4 +207,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/{components → lib/components}/ml-cascader-picker/ml-cascader-picker.vue

@@ -1,7 +1,7 @@
 <template>
-	<view v-if="isFromReadonly" class="ml-cascader-picker is-readonly">
-		<view class="ml-cascader-picker-readonly-content">{{ selectLabel }}</view>
-	</view>
+  <view v-if="isFromReadonly" class="ml-cascader-picker is-readonly">
+    <view class="ml-cascader-picker-readonly-content">{{ selectLabel }}</view>
+  </view>
   <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">
@@ -59,14 +59,14 @@ export default {
         2: [],
         3: [],
         4: [],
-        5: [],
+        5: []
       }
     }
   },
   computed: {
-		isFromReadonly () {
-			return this.form ? this.form.readonly : false
-		},
+    isFromReadonly () {
+      return this.form ? this.form.readonly : false
+    },
     optOptions () {
       return Object.assign({}, this.optionProps)
     },
@@ -145,9 +145,9 @@ export default {
         let prevItem = null
         if (prevOpts) {
           prevItem = prevOpts[this.selectIndexs[i - 1]]
-          if (!prevItem) {
-            prevItem = prevOpts.find(item => item[this.optValueField] === prevValue)
-          }
+          // if (!prevItem) {
+          //   prevItem = prevOpts.find(item => item[this.optValueField] === prevValue)
+          // }
         }
         if (prevItem) {
           const currList = prevItem[this.optChildrenField] || []
@@ -177,8 +177,8 @@ export default {
       this.selectIndexs.slice(0, this.countLevel).forEach((valIndex, colIndex) => {
         const item = this.pickerDataMaps[colIndex][valIndex]
         selection.push(item || null)
-        value.push(item ? item[this.optValueField] : null) 
-        labels.push(item ? item[this.optLabelField] : '') 
+        value.push(item ? item[this.optValueField] : null)
+        labels.push(item ? item[this.optLabelField] : '')
       })
       this.$emit('input', value)
       this.$emit('change', { value, labels, selection })

package/{components → lib/components}/ml-checkbox/ml-checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-checkbox" :class="[className || '', {'is-vertical': vertical, 'is-checked': checked, 'is-half': indeterminate, 'is-disabled': disabled}]" @tap="tapEvent">
+  <view class="ml-checkbox" :class="[className || '', {'is-vertical': vertical, 'is-checked': checked, 'is-half': indeterminate, 'is-disabled': disabled}]" @tap="tapEvent">
     <view class="ml-checkbox-icon">
       <ml-icon :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
     </view>
@@ -13,12 +13,12 @@
 
 <script>
 export default {
-	name: 'MlCheckbox',
+  name: 'MlCheckbox',
   options: {
     virtualHost: true
   },
-	props: {
-		value: [Boolean, Number, String],
+  props: {
+    value: [Boolean, Number, String],
     label: {
       type: [Boolean, Number, String],
       default: null
@@ -28,7 +28,7 @@ export default {
     vertical: Boolean,
     content: String,
     className: String
-	},
+  },
   computed: {
     checked () {
       if (this.label === null) {
@@ -37,8 +37,8 @@ export default {
       return this.label === this.value
     }
   },
-	methods: {
-		tapEvent () {
+  methods: {
+    tapEvent () {
       if (this.disabled) {
         return
       }
@@ -48,10 +48,10 @@ export default {
       } else {
         value = this.checked ? null : this.label
       }
-			this.$emit('input', value)
-			this.$emit('change', { value, label: this.label, checked: !this.checked })
-		}
-	}
+      this.$emit('input', value)
+      this.$emit('change', { value, label: this.label, checked: !this.checked })
+    }
+  }
 }
 </script>
 
@@ -93,4 +93,4 @@ export default {
 .ml-checkbox-content {
   flex-grow: 1;
 }
-</style>
+</style>

package/{components → lib/components}/ml-checkbox-button/ml-checkbox-button.vue

@@ -1,41 +1,41 @@
 <template>
-	<view class="ml-checkbox-button" :class="[className || '', {'is-disabled': disabled}]">
+  <view class="ml-checkbox-button" :class="[className || '', {'is-disabled': disabled}]">
     <view class="ml-checkbox-button-item" v-for="(item, index) in optionList" :class="{'is-disabled': disabled, 'is-active': value.includes(item.value)}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
   </view>
 </template>
 
 <script>
 export default {
-	name: 'MlCheckboxButton',
+  name: 'MlCheckboxButton',
   options: {
     virtualHost: true
   },
-	props: {
-		value: Array,
+  props: {
+    value: Array,
     isAll: Boolean,
     options: Array,
     disabled: Boolean,
     className: String
-	},
+  },
   computed: {
     optionList () {
       return this.options || []
     }
   },
-	methods: {
-		changeEvent (option) {
+  methods: {
+    changeEvent (option) {
       if (this.disabled) {
         return
       }
       const checked = !this.value.includes(option.value)
-      let value = this.value.filter(val => val !== option.value)
+      const value = this.value.filter(val => val !== option.value)
       if (checked) {
         value.push(option.value)
       }
-			this.$emit('input', value)
-			this.$emit('change', { value, option })
-		}
-	}
+      this.$emit('input', value)
+      this.$emit('change', { value, option })
+    }
+  }
 }
 </script>
 
@@ -65,4 +65,4 @@ export default {
     color: rgba(0,0,0,0.25);
   }
 }
-</style>
+</style>