TabPicker 组件增加快速选择区

components/tab-picker/README.en-US.md

@@ -23,11 +23,13 @@ Vue.component(TabPicker.name, TabPicker)
 |----|-----|------|------|------|
 |v-model|whether to show tabpicker or not|Boolean|`false`|-|
 |default-value|default values|Array|`[]`|-|
-|data|data source|Array|`[]`|refer to `Appendix` for data format|
+|data|data source|Object|`{}`|refer to `Appendix` for data format|
 |title|the title of tabpicker|String|-|-|
 |describe|the describe of tabpicker|String|-|-|
-|placeholder|default label for each tab pane|String|`请选择`|-|
+|placeholder|default label for each tab pane|String|`please select`|-|
 |mask-closable|if the popup will be closed when clicking on the mask|Boolean|`true`|-|
+|extrasData <sup class="version-after">2.6.1+</sup>|Note: Only default-value attributes are empty or no options are not selected. quickly select the area data source|Object|`{}`|refer to `Appendix` for data format|
+
 
 #### TabPicker Methods
 
@@ -100,6 +102,7 @@ Custom option item slot
 * Data format of cascaded data source
 
 ```javascript
+// property data
 {
   // unique key
   name: '',
@@ -123,4 +126,22 @@ Custom option item slot
     }
   ]
 }
+
+// property extrasData
+{
+  subtitle: 'hot cities',  //quickly select zone title
+  list: [
+    {
+      value: 'pk',
+      label: 'beijing',
+      icon: 'location', // Quickly select the area data item icon type
+      size: 'sm',       // Quickly select the area data item icon size
+      color: 'blue',    // Quickly select the area data item icon color
+    },
+    {
+      value: 'cd',
+      label: 'chengdu',
+    }
+  ],
+}
 ```

components/tab-picker/README.md

@@ -23,11 +23,12 @@ Vue.component(TabPicker.name, TabPicker)
 |----|-----|------|------|------|
 |v-model|控制显示或隐藏|Boolean|`false`| -|
 |default-value|默认值|Array|`[]`|-|
-|data|数据源|Array|`[]`|数据格式参考`附录`|
+|data|数据源|Object|`{}`|数据格式参考`附录`|
 |title|弹窗标题|String|-|-|
 |describe|弹窗描述文本|String|-|-|
 |placeholder|默认提示文本|String|`请选择`|-|
 |mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
+|extrasData <sup class="version-after">2.6.1+</sup>|注：仅default-value属性为空或者未选择任何选项时展示，快速选择区数据源|Object|`{}`|数据格式参考`附录`|
 
 
 #### TabPicker 实例方法
@@ -101,6 +102,7 @@ Vue.component(TabPicker.name, TabPicker)
 * 级联数据源数据格式
 
 ```javascript
+// property data
 {
   // 唯一键名
   name: '',
@@ -124,4 +126,22 @@ Vue.component(TabPicker.name, TabPicker)
     }
   ]
 }
+
+// property extrasData
+{
+  subtitle: '热点城市',  //快速选择区标题
+  list: [
+    {
+      value: 'pk',
+      label: '北京',
+      icon: 'location', // 快速选择区数据项 icon 类型
+      size: 'sm',       // 快速选择区数据项 icon 大小
+      color: 'blue',    // 快速选择区数据项 icon 颜色
+    },
+    {
+      value: 'cd',
+      label: '成都市',
+    }
+  ],
+}
 ```

components/tab-picker/component.js

@@ -3,5 +3,5 @@ export default {
   'text': '底部多级联动选择器',
   'category': 'feedback',
   'description': '',
-  'author': 'moyu <moyuboy@gmail.com>'
+  'author': 'liyulei <liyulei@didiglobal.com>'
 }

components/tab-picker/demo/cases/demo1.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="md-example-child md-example-child-tab-picker md-example-child-tab-picker-0">
+    <md-field title="地址">
+      <md-field-item
+        title="联系地址"
+        arrow="arrow-right"
+        @click="show = !show"
+        placeholder="请选择联系地址"
+        :content="addressStr"
+        solid
+      />
+    </md-field>
+    <md-tab-picker
+      title="请选择"
+      describe="请选择您所在的省份、城市、区县"
+      large-radius
+      :data="data"
+      :extras-data="extrasData"
+      v-model="show"
+      @change="handleChange"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script>import {Field, FieldItem, TabPicker} from 'mand-mobile'
+import data from 'mand-mobile/components/tab-picker/demo/data'
+
+const extrasData = {
+  subtitle: '热点城市',
+  list: [
+    {
+      value: 'pk',
+      label: '北京',
+      icon: 'location',
+      size: 'sm',
+    },
+    {
+      value: 'cd',
+      label: '成都市',
+    },
+    {
+      value: 'jn',
+      label: '金牛区',
+      icon: 'location',
+    },
+    {
+      value: 'jn2',
+      label: '金牛区滴',
+      icon: 'location',
+    },
+    {
+      value: 'jn0',
+      label: '金牛区滴',
+      icon: 'location',
+    },
+    {
+      value: 'jn3',
+      label: '金牛滴',
+      icon: 'location',
+    },
+    {
+      value: 'jn5',
+      label: '金牛滴',
+    },
+  ],
+}
+
+export default {
+  name: 'tab-bar-demo',
+  title: '快速选择区',
+  titleEnUS: 'Quick block',
+  /* DELETE */
+  height: 550,
+  /* DELETE */
+  components: {
+    [Field.name]: Field,
+    [FieldItem.name]: FieldItem,
+    [TabPicker.name]: TabPicker,
+  },
+  data() {
+    return {
+      show: false,
+      address: [],
+      data: data,
+      extrasData: extrasData,
+      defaultValue: ['pk'],
+    }
+  },
+  computed: {
+    addressStr() {
+      return this.address.map(item => item.label).join(' ')
+    },
+  },
+  methods: {
+    handleChange(data) {
+      console.log('demo1 change event', data)
+      const {options} = data
+      this.address = options
+    },
+    handleSelect(item) {
+      console.log('demo1 select event', item)
+    },
+  },
+}
+</script>

components/tab-picker/demo/index.vue

@@ -9,11 +9,11 @@
     </section>
 	</div>
 </template>
-
 <script>import createDemoModule from '../../../examples/create-demo-module'
 import Demo0 from './cases/demo0'
+import Demo1 from './cases/demo1'
 
 export default {
-  ...createDemoModule('tab-bar', [Demo0]),
+  ...createDemoModule('tab-bar', [Demo0, Demo1]),
 }
 </script>

components/tab-picker/index.vue

@@ -19,6 +19,14 @@
         <md-icon name="close" size="lg" slot="cancel" />
       </md-popup-title-bar>
       <div class="md-tab-picker-content">
+          <div class="md-tab-picker-content-quick" v-if="showQuickBlock">
+            <p class="md-tab-picker-content-quick-subtitle">{{extrasData.subtitle}}</p>
+            <div class="md-tab-picker-content-quick-list">
+              <div class="quick-list-item" v-for="item in extrasData.list" :key="item.value" @click="$_onQuickItemClick(item)">
+                <md-icon v-if="item.icon" :name="item.icon" :size="item.size||'sm'"  :color="item.color||'#4280EB'"/>{{item.label}}
+              </div>
+            </div>
+          </div>
           <md-tabs
             v-model="currentTab"
             :key="tabsTmpKey"
@@ -97,6 +105,10 @@ export default {
       type: String,
       default: t('md.tab_picker.choose'),
     },
+    extrasData: {
+      type: Object,
+      default: () => ({}),
+    },
 
     // Mixin Props
     // value: {
@@ -124,6 +136,7 @@ export default {
       currentTab: '',
       oldCurrentTab: '',
       tabsTmpKey: Date.now(),
+      quickSelectdIgnore: false,
     }
   },
 
@@ -163,6 +176,10 @@ export default {
     hasSlot() {
       return !!this.$scopedSlots.default
     },
+    // 是否展示快速选择区域
+    showQuickBlock() {
+      return !(this.defaultValue.length || this.selected.length)
+    },
   },
 
   created() {
@@ -202,6 +219,9 @@ export default {
       }, 100)
     },
     $_onSelectPaneItem(value, index) {
+      if (this.quickSelectdIgnore) {
+        return
+      }
       this.selected.splice(index, this.selected.length - index, value)
       this.$nextTick(() => {
         const nextPane = this.panes[index + 1]
@@ -227,6 +247,41 @@ export default {
         }
       })
     },
+    /**
+     * @description 快速选择子项点击事件
+     * @param {item: object} 点击选择的当前子项
+     * @return {void}
+    */
+    $_onQuickItemClick(item) {
+      const {options} = this.data
+      this.selected = this.getPathValuesByChild(options, data => data.value === item.value)
+      // 忽略快速选择项设置选中时的事件
+      this.quickSelectdIgnore = true
+
+      this.$nextTick(() => {
+        const selectedLastIndex = this.selected.length - 1
+        const panesLastIndex = this.panes.length - 1
+        // 当前选中的面板
+        const currentPane = this.panes[selectedLastIndex]
+        // 请选择的面板
+        const nextPane = this.panes[panesLastIndex]
+
+        this.$emit('select', {
+          index: selectedLastIndex,
+          value: currentPane.value,
+          option: currentPane,
+        })
+
+        if (nextPane.value !== undefined) {
+          this.$emit('change', {
+            values: this.getSelectedValues(),
+            options: this.getSelectedOptions(),
+          })
+          this.hideTabPicker()
+        }
+        this.quickSelectdIgnore = false
+      })
+    },
     // MARK: public methods
     getSelectedValues() {
       return this.selected
@@ -241,6 +296,33 @@ export default {
     hideTabPicker() {
       this.$emit('input', false)
     },
+    /**
+     * @description 根据子节点条件获取所有父节点路径值
+     * @param {treeData: object} 树形结构所有数据源
+     * @param {func: Function} 查找的子节点满足的条件方法
+     * @return {Array} 该子节点上层父节点路径数组，实例：['value1', 'value2', 'value3']
+    */
+    getPathValuesByChild(treeData, func, path = []) {
+      if (!treeData) {
+        return []
+      }
+
+      for (const index in treeData) {
+        path.push(treeData[index].value)
+        if (func(treeData[index])) {
+          return path
+        }
+        // 如果还有子节点，继续查找
+        if (treeData[index].children) {
+          const pathValues = this.getPathValuesByChild(treeData[index].children.options, func, path)
+          if (pathValues.length) {
+            return pathValues
+          }
+        }
+        path.pop()
+      }
+      return []
+    },
   },
 }
 </script>
@@ -278,6 +360,23 @@ export default {
     width 90px !important
 .md-tab-picker-content
   background-color tab-picker-bg
+  &-quick
+    padding 40px tab-picker-h-gap 40px tab-picker-h-gap
+    &-subtitle
+      font-size 28px;
+      color  #858B9C;
+    &-list
+      display flex
+      flex-wrap wrap
+      align-content space-between
+      justify-content flex-start
+      .quick-list-item
+        margin-top 32px
+        flex 0 1 auto
+        overflow hidden
+        white-space nowrap
+        text-overflow ellipsis
+        flex-basis 19.6%
   .md-radio-item.is-selected
     .md-cell-item-body .md-cell-item-title
       color radio-color