Update

2019-07-25 20:58:45 +08:00
parent 70c9ef512d
commit 5dd27477e0
3 changed files with 122 additions and 56 deletions
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,9 @@
 /* 参考文档: https://github.com/IceApriler/miniprogram-picker */

+function isExist(field) {
+  return field !== null && field !== undefined
+}
+
 Component({
  /**
   * 组件的属性列表
@@ -99,53 +103,52 @@ Component({
      // 源数组更新，则需要更新multiIndex、multiArray
      const multiIndex = []
      const multiArray = []
-      const { countError } = 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 = []
+      newSourceData = this.checkSourceData(newSourceData)

-          source.forEach((item, index) => {
-            if (columnIndex === 0) {
-              // newSourceData的第0维要单独处理，最后unshift到multiArray中
-              _multiArrayColumn0.push(item[shownFieldName])
-            }
+      console.warn(newSourceData)

-            if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
-              // 选中的索引和值，默认取每列的第0个
-              multiIndex.push(index)
+      const defaultIndex = this.getDefaultIndex(newSourceData)
+      const handle = (source = [], columnIndex = 0) => {
+        // 当前遍历Picker的第columnIndex列，
+        // 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
+        const _multiArrayColumn0 = []

-              if (columnIndex < steps - 1) {
-                if (item[subsetFieldName]) {
-                  // 开始处理下一维的数据
-                  const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
-                  multiArray.push(_subsetArr)
-                  handle(item[subsetFieldName], columnIndex + 1)
-                }
+        source.forEach((item, index) => {
+          if (columnIndex === 0) {
+            // newSourceData的第0维要单独处理，最后unshift到multiArray中
+            _multiArrayColumn0.push(item[shownFieldName])
+          }
+
+          if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
+            // 选中的索引和值，默认取每列的第0个
+            multiIndex.push(index)
+
+            if (columnIndex < steps - 1) {
+              if (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 (this.data.autoSelect) {
-          this.processData()
+        if (columnIndex === 0) {
+          multiArray.unshift(_multiArrayColumn0)
        }
      }
+
+      handle(newSourceData)
+
+      this.setData({
+        multiIndex,
+        multiArray
+      })
+
+      if (this.data.autoSelect) {
+        this.processData()
+      }
    },
    /**
     * 获取默认值index
@@ -213,34 +216,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
-
-        source.forEach((item) => {
-          if (!item[shownFieldName]) {
-            countError++
+        if (!source.length) {
+          const temp = {}
+          temp[shownFieldName] = ''
+          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字段
-            if (columnIndex < steps - 1) {
-              if (item[subsetFieldName]) {
-                // 开始处理下一维的数据
-                handle(item[subsetFieldName], columnIndex + 1)
-              } else {
-                countError++
-                this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
-              }
+          // 有shownFieldName字段才会去遍历subsetFieldName字段
+          if (columnIndex < steps - 1) {
+            if (!isExist(item[subsetFieldName])) {
+              this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
            }
+            // 开始处理下一维的数据
+            item[subsetFieldName] = handle(item[subsetFieldName], columnIndex + 1)
          }
+          return item
        })
      }
-
-      handle(sourceData)
-      return { countError }
+      return handle(sourceData)
    },

    /**
--- a/tools/demo/pages/index/index.js
+++ b/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 = {}
--- a/tools/demo/pages/index/index.wxml
+++ b/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>