Merge pull request #3 from IceApriler/dev

1.0.7

example/package.json

@@ -9,6 +9,6 @@
   "author": "IceApriler",
   "license": "ISC",
   "dependencies": {
-    "miniprogram-picker": "^1.0.5"
+    "miniprogram-picker": "^1.0.7"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniprogram-picker",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "微信小程序自定义组件Picker。本组件对微信小程序原生Picker组件进行了二次封装，开发者只需要提供固定数据结构的sourceData，再进行一些必要配置，本组件就可以自动帮助开发者处理联动逻辑。",
   "main": "miniprogram_dist/index.js",
   "scripts": {

src/index.js

@@ -1,6 +1,11 @@
 /* 参考文档: https://github.com/IceApriler/miniprogram-picker */
 
+function isExist(field) {
+  return field !== null && field !== undefined
+}
+
 Component({
+  externalClasses: ['picker-class'],
   /**
    * 组件的属性列表
    */
@@ -99,48 +104,51 @@ Component({
       // 源数组更新，则需要更新multiIndex、multiArray
       const multiIndex = []
       const multiArray = []
-      const { countError } = this.checkSourceData(newSourceData)
+      newSourceData = this.checkSourceData(newSourceData)
-      if (countError > 0) {
-        console.warn(`miniprogram-picker: 初始化源数组时检测到有${countError}个错误，为了方便排查修改已经为你做出了相关提示，请修改后再试，务必保证数据源的数据结构无误。`)
-      } else {
-        const defaultIndex = this.getDefaultIndex(newSourceData)
-        const handle = (source = [], columnIndex = 0) => {
-          // 当前遍历Picker的第columnIndex列，
-          // 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
-          const _multiArrayColumn0 = []
 
-          source.forEach((item, index) => {
+      console.warn(newSourceData)
-            if (columnIndex === 0) {
-              // newSourceData的第0维要单独处理，最后unshift到multiArray中
-              _multiArrayColumn0.push(item[shownFieldName])
-            }
 
-            if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
+      const defaultIndex = this.getDefaultIndex(newSourceData)
-              // 选中的索引和值，默认取每列的第0个
+      const handle = (source = [], columnIndex = 0) => {
-              multiIndex.push(index)
+        // 当前遍历Picker的第columnIndex列，
+        // 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
+        const _multiArrayColumn0 = []
 
-              if (columnIndex < steps - 1) {
+        source.forEach((item, index) => {
-                if (item[subsetFieldName]) {
+          if (columnIndex === 0) {
-                  // 开始处理下一维的数据
+            // newSourceData的第0维要单独处理，最后unshift到multiArray中
-                  const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
+            _multiArrayColumn0.push(item[shownFieldName])
-                  multiArray.push(_subsetArr)
+          }
-                  handle(item[subsetFieldName], columnIndex + 1)
+
-                }
+          if (isExist(item[shownFieldName]) && index === (defaultIndex[columnIndex] || 0)) {
+            // 选中的索引和值，默认取每列的第0个
+            multiIndex.push(index)
+
+            if (columnIndex < steps - 1) {
+              if (isExist(item[subsetFieldName])) {
+                // 开始处理下一维的数据
+                const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
+                multiArray.push(_subsetArr)
+                handle(item[subsetFieldName], columnIndex + 1)
               }
             }
-          })
-
-          if (columnIndex === 0) {
-            multiArray.unshift(_multiArrayColumn0)
           }
-        }
-
-        handle(newSourceData)
-
-        this.setData({
-          multiIndex,
-          multiArray
         })
+
+        if (columnIndex === 0) {
+          multiArray.unshift(_multiArrayColumn0)
+        }
+      }
+
+      handle(newSourceData)
+
+      this.setData({
+        multiIndex,
+        multiArray
+      })
+
+      if (this.data.autoSelect) {
+        this.processData()
       }
     },
     /**
@@ -209,34 +217,33 @@ Component({
      */
     checkSourceData(sourceData) {
       const { shownFieldName, subsetFieldName, steps } = this.data
-      let countError = 0
       const handle = (source = [], columnIndex = 0) => {
         // 当前遍历Picker的第columnIndex列，
         // 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
-
+        if (!source.length) {
-        source.forEach((item) => {
+          const temp = {}
-          if (!item[shownFieldName]) {
+          temp[shownFieldName] = ''
-            countError++
+          temp[subsetFieldName] = []
+          source.push(temp)
+        }
+        return source.map((item) => {
+          if (!isExist(item[shownFieldName])) {
             this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${shownFieldName}"字段`))
+            item[shownFieldName] = ''
           }
 
-          if (item[shownFieldName]) {
+          // 有shownFieldName字段才会去遍历subsetFieldName字段
-            // 有shownFieldName字段才会去遍历subsetFieldName字段
+          if (columnIndex < steps - 1) {
-            if (columnIndex < steps - 1) {
+            if (!isExist(item[subsetFieldName])) {
-              if (item[subsetFieldName]) {
+              this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
-                // 开始处理下一维的数据
-                handle(item[subsetFieldName], columnIndex + 1)
-              } else {
-                countError++
-                this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
-              }
             }
+            // 开始处理下一维的数据
+            item[subsetFieldName] = handle(item[subsetFieldName], columnIndex + 1)
           }
+          return item
         })
       }
-
+      return handle(sourceData)
-      handle(sourceData)
-      return { countError }
     },
 
     /**

src/index.wxml

@@ -1,4 +1,5 @@
 <picker 
+  class="picker picker-class"
   mode="multiSelector"
   bindchange="pickerChange"
   bindcolumnchange="pickerColumnChange"

src/index.wxss

@@ -1 +1,5 @@
 
+.picker {
+  width: 100%;
+  height: 100%;
+}

tools/demo/pages/index/index.js

@@ -5,6 +5,7 @@ Page({
   data: {
     result_1: [],
     result_2: [],
+    result_3: [],
     sourceData_1: [
       {
         id: 'id-1',
@@ -54,7 +55,53 @@ Page({
     sourceData_2: [
       { name: '河北', code: '0311', nextLevel: [{ name: '石家庄', code: '031101' }, { name: '保定', code: '031102' }]},
       { name: '北京', code: '0110', nextLevel: [{ name: '朝阳', code: '011001' }, { name: '海淀', code: '011002' }]},
-    ]
+    ],
+    sourceData_3: [{
+      id: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
+      parentId: '0',
+      name: '整形',
+      sonValue: [{
+        id: 'd4b6d3af-2edb-44a5-9851-c8964cf10d2c',
+        parentId: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
+        name: '眼部整形',
+        sonValue: [{
+          id: 'e531e96f-a081-40a7-a133-091be46983a2',
+          parentId: 'd4b6d3af-2edb-44a5-9851-c8964cf10d2c',
+          name: '双眼皮',
+          sonValue: []
+        }]
+      }, {
+        id: '403d93d3-5302-4682-a988-6dbfbe7ff563',
+        parentId: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
+        name: '胸部整形',
+        sonValue: [{
+          id: '46afdd93-c830-4d0d-bd5d-c0751a0c087a',
+          parentId: '403d93d3-5302-4682-a988-6dbfbe7ff563',
+          name: '丰胸',
+          sonValue: [{
+            id: '127a3cda-cd91-48b5-997c-6d56a4a02e80',
+            parentId: '46afdd93-c830-4d0d-bd5d-c0751a0c087a',
+            name: '自体脂肪丰胸',
+            sonValue: []
+          }]
+        }]
+      }]
+    }, {
+      id: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
+      parentId: '0',
+      name: '皮肤',
+      sonValue: [{
+        id: 'dfa5137c-616b-403c-a552-164e05518072',
+        parentId: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
+        name: '脱毛美容',
+        sonValue: []
+      }, {
+        id: 'bfd1eb85-93c1-489e-acba-ac3e783c83f0',
+        parentId: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
+        name: '艺术纹绣',
+        sonValue: []
+      }]
+    }]
   },
   /**
    * Picker用户点击确认时触发
@@ -69,6 +116,7 @@ Page({
     const list = {
       picker_1: 'result_1',
       picker_2: 'result_2',
+      picker_3: 'result_3',
     }
     console.log('多级联动结果:', selectedIndex, selectedArray)
     const change = {}

tools/demo/pages/index/index.wxml

@@ -50,4 +50,20 @@
     <view class="picker">
       当前选择：<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view>
     </view>
+</comp>
+
+<comp
+  sourceData="{{sourceData_3}}"
+  steps="{{4}}"
+  shownFieldName="{{'name'}}"
+  subsetFieldName="{{'sonValue'}}"
+  otherNeedFieldsName="{{['id']}}"
+  initColumnSelectedIndex
+  bindchange="pickerChange"
+  bindcancel="pickerCancel"
+  bindcolumnchange="pickerColumnchange"
+  data-picker="picker_3">
+    <view class="picker">
+      当前选择：<view wx:for="{{result_3}}" wx:key="index">{{item['name']}}</view>
+    </view>
 </comp>