mali-applet-ui 1.1.78 → 1.1.79

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

@@ -16,13 +16,13 @@
       </view>
     </view>
 
-    <ml-drawer v-model="showPopup" title="请选择" height="500rpx" showConfirmButton showCancelButton @confirm="confirmEvent">
+    <ml-picker-drawer v-model="showPopup" title="请选择" height="500rpx" showConfirmButton showCancelButton @confirm="confirmEvent">
       <picker-view v-if="showPicker" :value="selectIndexs" @change="changeEvent" style="height: 400rpx;text-align: center;">
         <picker-view-column v-for="(num, index) in countLevel" :key="index">
           <view class="ml-cascader-picker-picker-item" v-for="(item, cIndex) in pickerDataMaps[index]" :key="cIndex">{{ item[optLabelField] }}</view>
         </picker-view-column>
       </picker-view>
-    </ml-drawer>
+    </ml-picker-drawer>
   </view>
 </template>
 
@@ -104,7 +104,7 @@ export default {
       }
     },
     countLevel () {
-      let maxLevel = 2
+      let maxLevel = 1
       XEUtils.eachTree(this.options, (item, index, items, path, parent, nodes) => {
         if (maxLevel < nodes.length) {
           maxLevel = nodes.length

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

@@ -30,7 +30,36 @@
 </template>
 
 <script>
-import provinceCity from './province-city.json'
+import provinceCityRegionData from '../ml-provinces-picker/provincesData'
+
+const codeMpas = {}
+const provinceData = []
+const provinceCityData = []
+provinceCityRegionData.forEach(provinceItem => {
+  codeMpas[provinceItem.code] = provinceItem
+  provinceData.push({
+    code: provinceItem.code,
+    name: provinceItem.name
+  })
+  provinceCityData.push({
+    code: provinceItem.code,
+    name: provinceItem.name,
+    children: provinceItem.children
+      ? provinceItem.children.map(cityItem => {
+        codeMpas[cityItem.code] = cityItem
+        if (cityItem.children) {
+          cityItem.children.forEach(regionItem => {
+            codeMpas[regionItem.code] = regionItem
+          })
+        }
+        return {
+          code: cityItem.code,
+          name: cityItem.name
+        }
+      })
+      : []
+  })
+})
 
 export default {
   name: 'MlProvinceCityPicker',
@@ -87,9 +116,9 @@ export default {
     },
     provinceList () {
       if (this.isAll) {
-        return [{ name: '全部', code: '', _all: true }].concat(provinceCity)
+        return [{ name: '全部', code: '', _all: true }].concat(provinceCityData)
       }
-      return provinceCity
+      return provinceCityData
     },
     selectProvinceValue () {
       return this.selectProvinceItem ? this.selectProvinceItem[this.optValueField] : ''

package/lib/components/ml-provinces-picker/ml-provinces-picker.vue

@@ -0,0 +1,167 @@
+<template>
+  <view v-if="isFromReadonly" class="ml-provinces-picker is-readonly">
+    <view class="ml-provinces-picker-readonly-content">{{ selectLabel }}</view>
+  </view>
+  <ml-cascader
+    v-else
+    class="ml-provinces-picker"
+    v-model="selectVals"
+    :options="optList"
+    :optionProps="{value: optValueField, label: optLabelField}"
+    :placeholder="placeholder"
+    @input="modeEvent"
+    @clear="clearEvent"
+    @change="changeEvent">
+  </ml-cascader>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import provinceCityRegionData from './provincesData'
+
+const codeMpas = {}
+const provinceData = []
+const provinceCityData = []
+provinceCityRegionData.forEach(provinceItem => {
+  codeMpas[provinceItem.code] = provinceItem
+  provinceData.push({
+    code: provinceItem.code,
+    name: provinceItem.name
+  })
+  provinceCityData.push({
+    code: provinceItem.code,
+    name: provinceItem.name,
+    children: provinceItem.children
+      ? provinceItem.children.map(cityItem => {
+        codeMpas[cityItem.code] = cityItem
+        if (cityItem.children) {
+          cityItem.children.forEach(regionItem => {
+            codeMpas[regionItem.code] = regionItem
+          })
+        }
+        return {
+          code: cityItem.code,
+          name: cityItem.name
+        }
+      })
+      : []
+  })
+})
+
+export default {
+  name: 'MlProvincesPicker',
+  props: {
+    value: Array,
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    showCity: {
+      type: Boolean,
+      default: true
+    },
+    showRegion: {
+      type: Boolean,
+      default: true
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    optionProps: Object,
+    className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  data () {
+    return {
+      selectVals: []
+    }
+  },
+  computed: {
+    isFromReadonly () {
+      if (XEUtils.isBoolean(this.readonly)) {
+        return this.readonly
+      }
+      return this.form ? this.form.readonly : false
+    },
+    optOptions () {
+      return Object.assign({}, this.optionProps)
+    },
+    optLabelField () {
+      return this.optOptions.label || 'name'
+    },
+    optValueField () {
+      return this.optOptions.value || 'name'
+    },
+    selectLabel () {
+      if (this.optValueField === 'code') {
+        return this.selectVals.map(val => {
+          const item = codeMpas[val]
+          return item ? item[this.optLabelField] : val
+        }).join('/')
+      }
+      return this.selectVals.join('/')
+    },
+    optList () {
+      if (this.showRegion) {
+        return provinceCityRegionData
+      }
+      if (this.showCity) {
+        return provinceCityData
+      }
+      return provinceData
+    }
+  },
+  watch: {
+    value (val) {
+      if (!this.isUdMode) {
+        this.selectVals = this.handleMode(val)
+      }
+      this.isUdMode = false
+    }
+  },
+  created () {
+    this.selectVals = this.handleMode(this.value)
+  },
+  methods: {
+    handleMode  (val) {
+      if (XEUtils.isArray(val)) {
+        return [...val]
+      }
+      return val ? val.split(/[,/\s]/) : []
+    },
+    changeEvent ({ value }) {
+      this.$emit('change', { value })
+    },
+    clearEvent () {
+      const value = []
+      this.$emit('input', value)
+      this.$emit('change', { value })
+      this.$emit('clear', { value })
+    },
+    modeEvent (value) {
+      this.isUdMode = true
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-provinces-picker-readonly-content {
+  padding: 10px;
+}
+</style>