Merge pull request #3 from IceApriler/dev

1.0.7
2019-07-26 11:17:44 +08:00
parent 1db1012298 757f4a6a57
commit 7e8891df69
8 changed files with 7801 additions and 56 deletions
--- a/example/package.json
+++ b/example/package.json
@@ -9,6 +9,6 @@
  "author": "IceApriler",
  "license": "ISC",
  "dependencies": {
-    "miniprogram-picker": "^1.0.5"
+    "miniprogram-picker": "^1.0.7"
  }
 }
--- a/package.json
+++ b/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": {
--- a/src/index.js
+++ b/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,10 +104,10 @@ Component({
      // 源数组更新，则需要更新multiIndex、multiArray
      const multiIndex = []
      const multiArray = []
-      const { countError } = this.checkSourceData(newSourceData)
-      if (countError > 0) {
-        console.warn(`miniprogram-picker: 初始化源数组时检测到有${countError}个错误，为了方便排查修改已经为你做出了相关提示，请修改后再试，务必保证数据源的数据结构无误。`)
-      } else {
+      newSourceData = this.checkSourceData(newSourceData)
+
+      console.warn(newSourceData)
+
      const defaultIndex = this.getDefaultIndex(newSourceData)
      const handle = (source = [], columnIndex = 0) => {
        // 当前遍历Picker的第columnIndex列，
@@ -115,12 +120,12 @@ Component({
            _multiArrayColumn0.push(item[shownFieldName])
          }

-            if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
+          if (isExist(item[shownFieldName]) && index === (defaultIndex[columnIndex] || 0)) {
            // 选中的索引和值，默认取每列的第0个
            multiIndex.push(index)

            if (columnIndex < steps - 1) {
-                if (item[subsetFieldName]) {
+              if (isExist(item[subsetFieldName])) {
                // 开始处理下一维的数据
                const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
                multiArray.push(_subsetArr)
@@ -141,6 +146,9 @@ Component({
        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
-
-        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++
+            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/src/index.wxml
+++ b/src/index.wxml
@@ -1,4 +1,5 @@
 <picker 
+  class="picker picker-class"
  mode="multiSelector"
  bindchange="pickerChange"
  bindcolumnchange="pickerColumnChange"
--- a/src/index.wxss
+++ b/src/index.wxss
@@ -1 +1,5 @@

+.picker {
+  width: 100%;
+  height: 100%;
+}
--- 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
@@ -51,3 +51,19 @@
      当前选择：<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>
--- a/yarn.lock
+++ b/yarn.lock