From 6d6e4e07f5cccae2311cd94716b45545ef4f99b4 Mon Sep 17 00:00:00 2001 From: qimengjie Date: Wed, 12 Dec 2018 20:43:54 +0800 Subject: [PATCH] Add demo --- src/index.js | 230 ++++++++++++++++++++++++++++-- src/index.wxml | 9 +- tools/demo/pages/index/index.js | 90 +++++++++++- tools/demo/pages/index/index.wxml | 23 ++- tools/demo/project.config.json | 2 +- 5 files changed, 340 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 933dd81..02f1756 100644 --- a/src/index.js +++ b/src/index.js @@ -1,22 +1,232 @@ Component({ + /** + * 组件的属性列表 + */ properties: { - prop: { + // 是否需要填充默认选择结果 + autoSelect: { + type: Boolean, + value: false + }, + // 源数据 + sourceData: { + type: Array, + value: [], + observer: 'sourceDataChange' + }, + // 阶数 + steps: { + type: Number, + value: 0 + }, + // 展示数据的字段名称 + shownFieldName: { type: String, - value: 'index.properties' + value: 'name' + }, + // 子节点名称， + subsetFieldName: { + type: String, + value: 'subset' + }, + // 其他需要返回的字段 + otherNeedFieldsName: { + type: Array, + value: [] }, }, + + /** + * 组件的初始数据 + */ data: { - flag: false, + // 当前所选择的索引数组 + multiIndex: { + type: Array, + value: [], + }, + // 当前所展示的数组 + multiArray: { + type: Array, + value: [], + }, + // 当前所选择的值数组 + selectedArray: { + type: Array, + value: [], + }, }, + + /** + * 组件的方法列表 + */ + methods: { + /** + * 监听源数据更新变化 + * @param {Array} newVal + */ + sourceDataChange(newVal) { + const { shownFieldName, subsetFieldName } = this.data + // 源数据更新，则需要更新multiIndex、multiArray + const multiIndex = [] + const multiArray = [] + + // 无初始选择值，则默认选每列第0条 + const _multiArray = newVal.map((item) => { + if (!item[shownFieldName]) { + console.error(item, new Error(`源数据缺少"${shownFieldName}"`)) + } + return item[shownFieldName] + }) + + const handle = (value = [], columnIndex = 0) => { + // 当前遍历第 columnIndex 列 + value.forEach((item, index) => { + if (item[shownFieldName] && index === 0) { + // 选中的索引和值，默认取每列的第0个 + multiIndex.push(index) + + if (columnIndex < this.data.steps - 1) { + if (item[subsetFieldName]) { + const _arr = item[subsetFieldName].map(i => { + if (!i[shownFieldName]) { + console.error(item[subsetFieldName], new Error(`源数据缺少"${shownFieldName}"`)) + } + return i[shownFieldName] + }) + multiArray.push(_arr) + } else { + console.error(item, new Error(`源数据缺少"${subsetFieldName}"`)) + } + + handle(item[subsetFieldName], columnIndex + 1) + } + } + }) + } + + multiArray.unshift(_multiArray) + handle(newVal) + + this.setData({ + multiIndex, + multiArray + }) + console.log(this.data) + }, + // 点击确定 + bindMultiPickerChange(e) { + console.log('picker发送选择改变，携带值为', e.detail.value) + + this.setData({ + multiIndex: e.detail.value + }) + this.UpdateData() + }, + // 更新数据 + UpdateData() { + const { shownFieldName, subsetFieldName, otherNeedFieldsName } = this.data + const selectedArray = [] + + const handle = (value, columnIndex = 0) => { + value.forEach((item, index) => { + if (index === this.data.multiIndex[columnIndex]) { + const selectedItem = {} + selectedItem[shownFieldName] = item[shownFieldName] + otherNeedFieldsName.forEach(key => { + selectedItem[key] = item[key] + }) + selectedArray.push(selectedItem) + if (columnIndex < this.data.steps - 1) { + handle(item[subsetFieldName], columnIndex + 1) + } + } + }) + } + handle(this.data.sourceData) + + this.setData({ + selectedArray + }) + + const detail = { + multiIndex: this.data.multiIndex, + selectedArray: this.data.selectedArray + } + this.triggerEvent('change', detail) + }, + // 多级联动发生变化 + bindMultiPickerColumnChange(e) { + console.log('修改的列为', e, e.detail.column, '，值为', e.detail.value) + + const { shownFieldName, subsetFieldName } = this.data + // 第column列 + const column = e.detail.column + // 第column列的第changeIndex个 + const changeIndex = e.detail.value + + const data = { + multiArray: this.data.multiArray, + multiIndex: this.data.multiIndex, + + sourceData: this.data.sourceData + } + // multiIndex变化了，所以也要同步更新multiArray + data.multiIndex[column] = changeIndex + + // 每次重置之后的index为0，但是有bug，待定 + // let _multiIndex = [] + // data.multiIndex.map((item, index) => { + // if (column >= index) { + // _multiIndex.push(item) + // }else { + // _multiIndex.push(0) + // } + // }) + // data.multiIndex = _multiIndex + + /** + * 假设 data.multiIndex的数据结构为 [1,2,2]; 三阶 this.data.steps = 3 + */ + + const handle = (value = [], columnIndex = 0) => { + // 当前遍历第 columnIndex 列 + value.forEach((item, index) => { + if (index === data.multiIndex[columnIndex]) { + if (columnIndex < this.data.steps - 1) { + if (!item[subsetFieldName]) { + item[subsetFieldName] = [] + } + const multiArrayItem = item[subsetFieldName].map((item2) => { + if (!item2[shownFieldName]) { + console.error(item[subsetFieldName], new Error(`缺少"${shownFieldName}"`)) + } + return item2[shownFieldName] + }) + data.multiArray[columnIndex + 1] = multiArrayItem + + handle(item[subsetFieldName], columnIndex + 1) + } + } + }) + } + handle(data.sourceData) + + this.setData({ + multiArray: data.multiArray, + multiIndex: data.multiIndex, + }) + + console.log(this.data.multiIndex) + console.log(this.data) + }, + }, + lifetimes: { attached() { - wx.getSystemInfo({ - success: res => { - this.setData({ - flag: true, - }) - } - }) + if (this.data.autoSelect) { + this.UpdateData() + } } } }) diff --git a/src/index.wxml b/src/index.wxml index 7d4c23c..cdb797b 100644 --- a/src/index.wxml +++ b/src/index.wxml @@ -1 +1,8 @@ -{{prop}}-{{flag}} + + + \ No newline at end of file diff --git a/tools/demo/pages/index/index.js b/tools/demo/pages/index/index.js index ba76804..9eeac13 100644 --- a/tools/demo/pages/index/index.js +++ b/tools/demo/pages/index/index.js @@ -1 +1,89 @@ -Page({}) +Page({ + /** + * 页面的初始数据 + */ + data: { + result: [], + steps: 3, + name: 'name', + subset: 'sonValue', + otherFields: ['id', 'city'], + originMultiArray: [ + { + id: '01', + name: '1', + sonValue: [ + { + id: '011', + name: '1.1', + sonValue: [ + { + id: '0111', + name: '1.1.1', + }, + { + id: '0112', + name: '1.1.2', + } + ] + }, + { + id: '012', + name: '1.2', + sonValue: [ + { + id: '0121', + name: '1.2.1', + }, + { + id: '0122', + name: '1.2.2', + } + ] + } + ] + }, + { + id: '02', + name: '2', + sonValue: [ + { + id: '021', + name: '2.1', + sonValue: [ + { + id: '0211', + name: '2.1.1', + }, + { + id: '0212', + name: '2.1.2' + } + ] + }, + { + id: '022', + name: '2.2', + sonValue: [ + { + id: '0221', + name: '2.2.1' + }, + { + id: '0222', + name: '2.2.2' + } + ] + } + ] + } + ] + }, + + mutiPickerChange(e) { + console.log('多级联动结果：', e.detail) + this.setData({ + result: e.detail.selectedArray + }) + } +}) \ No newline at end of file diff --git a/tools/demo/pages/index/index.wxml b/tools/demo/pages/index/index.wxml index ea63c1e..4ed74d8 100644 --- a/tools/demo/pages/index/index.wxml +++ b/tools/demo/pages/index/index.wxml @@ -1 +1,22 @@ - + + + + + 当前选择：{{item[name]}}， + + \ No newline at end of file diff --git a/tools/demo/project.config.json b/tools/demo/project.config.json index 2bdb6ce..7906b63 100644 --- a/tools/demo/project.config.json +++ b/tools/demo/project.config.json @@ -14,7 +14,7 @@ "compileType": "miniprogram", "libVersion": "2.2.3", "appid": "", - "projectname": "miniprogram-demo", + "projectname": "miniprogram-picker", "isGameTourist": false, "condition": { "search": {