mali-applet-ui 0.0.45 → 0.0.48

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

@@ -1,5 +1,9 @@
 <template>
+	<view v-if="isFromReadonly" class="ml-amount-input is-readonly">
+		<view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
+	</view>
 	<input
+		v-else
 		class="ml-amount-input"
 		v-model="inpVal"
 		type="digit"
@@ -14,7 +18,7 @@
 
 <script>
 import XEUtils from 'xe-utils'
-import { toNumMoneyToChinese } from '../../utils'
+import { toAmountString, toWanAmountString } from '../../utils'
 
 export default {
 	name: 'MlAmountInput',
@@ -47,17 +51,29 @@ export default {
 		},
     className: String
 	},
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
 	data () {
 		return {
 			inpVal: ''
 		}
 	},
 	computed: {
+		isFromReadonly () {
+			return this.form ? this.form.readonly : false
+		},
 		currAmountNum () {
 			return this.value === '' ? '' : Number(this.value || 0)
 		},
-		currAmountLabel () {
-			return this.currAmountNum === '' ? '无' : toNumMoneyToChinese(this.currAmountNum)
+		amountLabel () {
+			if (this.simplify) {
+				return toWanAmountString(this.value)
+			}
+			return toAmountString(this.value)
 		},
 		minNum () {
 			if (XEUtils.isNumber(this.min) || this.min) {
@@ -108,8 +124,9 @@ export default {
 			this.$emit('blur')
 		},
 		inputEvent () {
-			this.$emit('input', this.inpVal)
-			this.$emit('change', this.inpVal)
+			const value = this.inpVal
+			this.$emit('input', value)
+			this.$emit('change', { value })
 		}
 	}
 }
@@ -128,4 +145,7 @@ export default {
     border-radius: 10rpx;
 	}
 }
+.ml-amount-input-readonly-content {
+	padding: 20rpx 4rpx;
+}
 </style>

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

@@ -4,13 +4,13 @@
       <view class="ml-approval-record-header-title">审批记录</view>
     </view>
     <view class="ml-approval-record-body">
-      <view class="ml-approval-record-list" v-for="(group, index) in options" :key="index">
+      <view class="ml-approval-record-list" v-for="(group, gIndex) in options" :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, index) in group.users" :key="index">
+          <view class="ml-approval-record-user-item" v-for="(item, uIndex) in group.users" :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>
@@ -70,17 +70,17 @@ export default {
     &::before {
       content: "";
       position: absolute;
-      top: 16rpx;
-      left: -8rpx;
-      width: 20rpx;
-      height: 20rpx;
+      top: 12rpx;
+      left: -10rpx;
+      width: 24rpx;
+      height: 24rpx;
       border-radius: 50%;
       background: #D9D9D9;
     }
   }
   &:first-child {
     .ml-approval-record-flow-line {
-      top: 16rpx;
+      top: 12rpx;
       &::before {
         top: 0;
       }

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

@@ -4,19 +4,19 @@
       <view class="ml-approval-select-header-title">审批流程</view>
     </view>
     <view class="ml-approval-select-body">
-      <view class="ml-approval-select-list" v-for="(group, index) in options" :key="index">
+      <view class="ml-approval-select-list" v-for="(group, gIndex) in options" :key="gIndex">
         <view class="ml-approval-select-item">
           <view class="ml-approval-select-item-title">{{ group.name }}</view>
         </view>
         <view class="ml-approval-select-users">
-          <view class="ml-approval-select-user-item" v-for="(item, index) in group.users" :key="index">
+          <view class="ml-approval-select-user-item" v-for="(item, uIndex) in group.users" :key="uIndex">
             <image class="ml-approval-select-user-picture" :src="item.picture" mode="scaleToFill"></image>
             <view class="ml-approval-select-user-name">{{ item.name }}</view>
             <view class="ml-approval-select-user-remove">
               <ml-icon name="close"></ml-icon>
             </view>
           </view>
-          <view class="ml-approval-select-user-add">
+          <view class="ml-approval-select-user-add" @click="openAddUser">
             <view class="ml-approval-select-user-add-icon">
               <ml-icon name="add"></ml-icon>
             </view>
@@ -24,6 +24,11 @@
         </view>
       </view>
     </view>
+
+    <uni-popup ref="popup" type="bottom">
+      <text>Popup</text>
+      <button @click="close">关闭</button>
+    </uni-popup>
   </view>
 </template>
 
@@ -33,6 +38,11 @@ export default {
   props: {
     value: Array,
     options: Array
+  },
+  methods: {
+    openAddUser () {
+      this.$refs.popup.open()
+    }
   }
 }
 </script>

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

@@ -55,6 +55,6 @@ export default {
 
 <style lang="scss">
 .ml-date-picker-readonly-content {
-	padding: 20rpx;
+	padding: 20rpx 4rpx;
 }
 </style>

package/components/ml-form/ml-form.vue

@@ -1,21 +1,17 @@
 <template>
-  <view class="ml-form" :class="[className || '']">
-    <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
-      <slot>
-        <view v-for="(item, index) in items" :key="index">
-          <ml-form-group v-if="item.children && item.children.length">
-            <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
-          </ml-form-group>
-          <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
-        </view>
-      </slot>
-    </uni-forms>
+  <view class="ml-form" :class="[className || '', {'is-border': border}]">
+    <slot>
+      <view v-for="(item, index) in items" :key="index">
+        <ml-form-group v-if="item.children && item.children.length" :title="item.title">
+          <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
+        </ml-form-group>
+        <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
+      </view>
+    </slot>
   </view>
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
-
 export default {
   name: 'MlForm',
   options: {
@@ -26,6 +22,9 @@ export default {
     data: Object,
     items: Array,
     rules: Object,
+		align: String,
+    titleAlign: String,
+    border: Boolean,
     readonly: Boolean,
     vertical: Boolean,
     labelWidth: String,
@@ -38,43 +37,17 @@ export default {
   },
   data () {
     return {
-      fKey: 1
-    }
-  },
-  computed: {
-    formRules () {
-      const rest = {}
-      XEUtils.each(this.rules, (rules, field) => {
-        rest[field] = {
-          rules: rules.map(item => {
-            return { ...item, errorMessage: item.message }
-          })
-        }
-      })
-      return rest
     }
   },
-  created () {
-    this.$nextTick(() => {
-      this.fKey++
-    })
-  },
   methods: {
-    getProp (item, prop, defultValue) {
-      return (item.itemRender.props ? item.itemRender.props[prop] : null) || defultValue
-    },
     validate () {
-      return this.$refs.uniForm.validate().then(() => {
-        return null
-      }).catch(() => {
-        return {}
+      return new  Promise(resolve => {
+        resolve()
       })
     },
     validateField (fields) {
-      return this.$refs.uniForm.validateField(fields).then(() => {
-        return null
-      }).catch(() => {
-        return {}
+      return new  Promise(resolve => {
+        resolve()
       })
     },
     updateModel ({ field, value }) {

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

@@ -1,6 +1,13 @@
 <template>
   <view class="ml-form-group" :class="className">
-    <slot></slot>
+    <view v-if="title || $slots.title" class="ml-form-group-title">
+      <slot name="title">
+        <text>{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-form-group-content">
+      <slot></slot>
+    </view>
   </view>
 </template>
 
@@ -11,6 +18,7 @@ export default {
     virtualHost: true
   },
   props: {
+    title: String,
     className: String
   }
 }
@@ -18,9 +26,15 @@ export default {
 
 <style lang="scss">
 .ml-form-group {
-  margin: 10rpx 0;
-  padding: 20rpx;
+  margin: 20rpx 0;
   border-radius: 10rpx;
   background: #ffffff;
+  .ml-form-group-title {
+    display: flex;
+    align-items: center;
+    min-height: 80rpx;
+    padding: 0 20rpx;
+    border-bottom: 1px solid #e5e5e5;
+  }
 }
 </style>

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

@@ -1,21 +1,24 @@
 <template>
-  <view class="ml-form-item">
-    <uni-forms-item
-      ref="uniFormItem"
-      :class="className"
-      :label="title"
-      :name="field"
-      :label-width="itemLabelWidth"
-      :label-position="itemVertical">
-      <slot>
-        <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
-        <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
-        <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
-        <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" border @change="modelEvent"></ml-textarea>
-        <ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
-        <view v-else>{{ itemValue }}</view>
+  <view class="ml-form-item" :class="[className, '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical}]">
+    <view class="ml-form-item-title" :style="titleStyle">
+      <slot name="title">
+        <text>{{ title }}</text>
       </slot>
-    </uni-forms-item>
+    </view>
+    <view class="ml-form-item-content">
+      <view class="ml-form-item-content-warpper">
+        <slot>
+          <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
+          <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
+          <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
+          <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" border @change="modelEvent"></ml-textarea>
+          <ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
+          <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" @change="modelEvent"></ml-amount-input>
+          <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
+          <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
+        </slot>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -28,10 +31,9 @@ export default {
   props: {
     title: String,
     field: String,
-    vertical: {
-      type: Boolean,
-       default: null
-    },
+		align: String,
+    titleAlign: String,
+    vertical: Boolean,
     labelWidth: String,
     itemRender: Object,
     className: String
@@ -43,10 +45,16 @@ export default {
     }
   },
   computed: {
+    titleStyle () {
+      return this.itemLabelWidth ? `width:${this.itemLabelWidth};` : ''
+    },
+    isFormBorder () {
+      return this.form ? this.form.border : false
+    },
     isRequired () {
-      if (this.form && this.form.formRules) {
-        const rules = this.form.formRules[this.field]
-        if (rules && rules.some(item => item.required)) {
+      if (this.form && this.form.rules) {
+        const currRules = this.form.rules[this.field]
+        if (currRules && currRules.some(item => item.required)) {
           return true
         }
       }
@@ -61,12 +69,23 @@ export default {
     renderOpts () {
       return this.itemRender || {}
     },
+    itemAlign () {
+      if (this.align) {
+        return this.align
+      }
+      return this.form ? this.form.align : ''
+    },
+    itemTitleAlign () {
+      if (this.titleAlign) {
+        return this.titleAlign
+      }
+      return this.form ? this.form.titleAlign : ''
+    },
     itemVertical () {
-      let vertical = this.vertical
-      if (!vertical) {
-        vertical = this.form ? this.form.vertical : ''
+      if (this.vertical) {
+        return true
       }
-      return vertical ? 'top' : 'left'
+      return this.form ? this.form.vertical : false
     },
     itemLabelWidth () {
       let labelWidth = this.labelWidth
@@ -82,18 +101,8 @@ export default {
   created () {
     this.init()
   },
-  watch: {
-    itemVertical () {
-      this.init()
-    }
-  },
   methods: {
     init () {
-      this.$nextTick(() => {
-        if (this.$refs.uniFormItem) {
-          this.$refs.uniFormItem.localLabelPos = this.itemVertical
-        }
-      })
     },
     matchComponent (name) {
       return this.renderOpts.name === name
@@ -104,3 +113,75 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.ml-form-item {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  font-size: $uni-font-size-base;
+  padding: 10rpx 20rpx;
+  &.is-border {
+    border-bottom: 1px solid #e5e5e5;
+    &:last-child {
+      border: 0;
+    }
+  }
+  .ml-form-item-title {
+    min-height: 70rpx;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  &.is-vertical {
+    flex-direction: column;
+  }
+  &:not(.is-vertical) {
+    .ml-form-item-title {
+      flex-shrink: 0;
+    }
+  }
+  &.title-align-left {
+    .ml-form-item-title {
+      text-align: left;
+    }
+  }
+  &.title-align-center {
+    .ml-form-item-title {
+      text-align: center;
+    }
+  }
+  &.title-align-right {
+    .ml-form-item-title {
+      text-align: right;
+    }
+  }
+  &.align-left {
+    .ml-form-item-content {
+      text-align: left;
+    }
+  }
+  &.align-center {
+    .ml-form-item-content {
+      text-align: center;
+    }
+  }
+  &.align-right {
+    .ml-form-item-content {
+      text-align: right;
+    }
+  }
+  .ml-form-item-title {
+    display: flex;
+    align-items: center;
+    padding-right: 20rpx;
+  }
+}
+.ml-form-item-content {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.ml-form-item-content-warpper {
+  flex-grow: 1;
+  width: 100%;
+}
+</style>

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

@@ -81,10 +81,11 @@ export default {
 
 <style lang="scss">
 .ml-input {
+	flex-grow: 1;
 	display: flex;
 	flex-direction: row;
 	.ml-input-readonly-content {
-		padding: 20rpx;
+		padding: 20rpx 4rpx;
 	}
 	.ml-input-inp {
 		padding: 0 20rpx;

package/components/ml-textarea/ml-textarea.vue

@@ -94,6 +94,8 @@ export default {
 
 <style lang="scss">
 .ml-textarea {
+  display: block;
+  width: 100%;
 	font-size: $uni-font-size-base;
   padding: 20rpx 10rpx 10rpx 20rpx;
   &.is-border {

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

@@ -216,7 +216,7 @@ export default {
 				})
 			).then(res => {
 				uni.hideLoading();
-			}).catch(() => {
+			}).catch((e) => {
 				console.error(e)
 				uni.hideLoading();
 			})

package/package.json

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