homework/picker/picker.js

// picker/picker.js
import { isString,isPlainObject } from './tool';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    scrollType:{
      type: String,
      value: "normal"//"link": scroll间联动  "normal": scroll相互独立
    },
    
    listData: {
      type: Array,
      value: [],
      observer: function(newVal) {
        if (newVal.length === 0 || this._compareDate()) return;
        this._setTempData();
        let tempArr = [...new Array(newVal.length).keys()].map(() => 0)
        // console.log(tempArr,'测试~')
        this.data.lastValue = this.data.tempValue =tempArr;
        console.log(this.data.tempValue,'测试2')
        this._setDefault()

        // let {defaultPickData} = this.properties;
        // if(newVal.length === 0) return;
        //
        // this._setDefault(newVal, defaultPickData)
      }
    },
    defaultPickData:{
      type: Array,
      value: [],
      observer: function (newVal) {
        if (newVal.length === 0 || this._compareDate()) return;
        this._setTempData();
        this._setDefault()
      }
    },
    keyWordsOfShow:{
      type: String,
      value: "name"
    },
    isShowPicker:{
      type: Boolean,
      value: false,
      observer: function(newVal) {
        if (newVal) {
          this.setData({
            donghua:true
          })
          this._openPicker()
        }else{
 
          this._closePicker()

        }
      }
    },
    titleText: {//标题文案
      type: String,
      value: "标题"
    },
    cancelText:{//取消按钮文案
      type: String,
      value: "取消"
    },
    sureText:{//确定按钮文案
      type: String,
      value: "确定"
    },
    pickerHeaderStyle: String,//标题栏样式 view
    sureStyle: String, //标题栏确定样式  text
    cancelStyle: String,//标题栏取消样式 text
    titleStyle: String,//标题栏标题样式  view
    maskStyle: String,//设置蒙层的样式（详见picker-view） view
    indicatorStyle: String,//设置选择器中间选中框的样式（详见picker-view） view
    chooseItemTextStyle: String//设置picker列表文案样式 text
  },

  /**
   * 组件的初始数据
   */
  data: {
    columnsData:[],
    value:[],
    backData:[],
    height:0,
    isOpen: false,
    isUseKeywordOfShow: false,
    scrollEnd : true,//滚动是否结束
    lastValue : [],//上次各个colum的选择索引
    tempValue : [],
    isFirstOpen : true,
    onlyKey : '',
    defaultPickDataTemp: '',
    listDataTemp: '',
  },
  /**
   * 组件的方法列表
   */
  methods: {
    tapModal () {
      this.properties.isShowPicker = false;
      this._closePicker()
    },
    cancle () {
      this.setData({
        donghua:false
      })
      this.triggerEvent('cancle')
      this._closePicker()
    },
    sure () {
      let that=this
      this.setData({
        donghua: false
      })
      setTimeout(function(){

      let { scrollEnd, tempValue} = that.data;
      console.log(scrollEnd,"滚动")
        
        // if (!that.data.scrollEnd) return;
   
    
      let backData = that._getBackDataFromValue(tempValue);
      that.setData({
        backData
      })
      that.triggerEvent('sure', {
        choosedData:backData,
        choosedIndexArr:tempValue
      })
      that._closePicker()

    },900)
    },
    _bindChange (e) {
      console.log(e)
      let {scrollType} = this.properties;
      let { lastValue } = this.data;
      let val = e.detail.value;
      let backData = [];
      switch (scrollType) {
        case "normal":
          this.data.tempValue = val.concat();
          this.data.tempValue = val.concat();
          break;
        case "link":
           //let column_02 = this._getColumnData(this.properties.listData[val[0]].children);
           //let column_03 = this._getColumnData(this.properties.listData[val[0]].children[val[1]].children);
          let tempArray = [];
          if(val.length>1){
            val.slice(0,val.length-1).reduce((t,c,i) => {
              let v = t[c].children;
              tempArray.push(this._getColumnData(v))
              return v
            },this.properties.listData)
          }
          //let columnsData = [this.data.columnsData[0],column_02,column_03];
          let columnsData = [this.data.columnsData[0], ...tempArray];

          //设置value关联
          let compareIndex = this._getScrollCompareIndex(lastValue, val);
          if(compareIndex > -1){
            let tempI = 1;
            while(val[compareIndex+tempI]!==undefined){
              val[compareIndex+tempI] = 0;
              tempI++;
            }
          }
          val = this._validate(val);
          this.data.lastValue = val.concat();
          this.data.tempValue = val.concat();
          this.setData({
            columnsData,
            // value: val
          })
      }

    },
    _validate (val) {
      let { columnsData } = this.data;
      columnsData.forEach((v, i) => {
        if(columnsData[i].length - 1 < val[i]){
          val[i] = columnsData[i].length - 1;
        }
      })
      this.setData({
        value: val
      })
      return val;
    },
    _bindpickend(){
      console.log("滚动结束")
      this.data.scrollEnd = true;
    },
    _bindpickstart(){
      this.data.scrollEnd = false;
      console.log("滚动开始")
    },
    _openPicker () {

      if(!this.data.isFirstOpen){
        if(this.properties.listData.length !== 0){
          this._setDefault(this._computedBackData(this.data.backData))
        }
      }
      this.data.isFirstOpen = false;
      this.setData({
        isOpen: true
      })

    },
    _closePicker () {
     this.setData({
       isOpen: false
     })
    },
    _getColumnData (arr) {
      return arr.map((v) => this._fomateObj(v))
    },
    _fomateObj (o) {
      let tempO = {};
      for(let k in o){
        k !== "children" && (tempO[k] = o[k]);
      }
      return tempO;
    },
    _getScrollCompareIndex (arr1, arr2)  {
      let tempIndex = -1;
      for(let i = 0, len = arr1.length; i<len; i++){
        if(arr1[i] !== arr2[i]){
          tempIndex = i;
          break;
        }
      }
      return tempIndex;
    },
    //根据id获取索引
    _getIndexByIdOfObject (listData,idArr,key,arr) {
      if(!Array.isArray(listData)) return;
      for(let i = 0,len = listData.length; i<len; i++){
       if(listData[i][key] == idArr[arr.length][key]){
         arr.push(i)
         return this._getIndexByIdOfObject(listData[i].children,idArr,key,arr)
       }
      }

    },
    _setDefault (inBackData) {
      let {listData,defaultPickData,scrollType} = this.properties;
      let { lastValue, tempValue, onlyKey } = this.data;
      if(inBackData){
        defaultPickData = inBackData;
      }
      let backData = [];
      switch (scrollType) {
        case "normal":
          if(isPlainObject(listData[0][0])){
            this.setData({
              isUseKeywordOfShow: true
            })
          }
          if(Array.isArray(defaultPickData) && defaultPickData.length>0){
            backData = listData.map((v, i) => v[defaultPickData[i]]);
            this.data.tempValue = defaultPickData;
            this.data.lastValue = defaultPickData;
          }else{
            backData = listData.map((v) => v[0]);
          }
          this.setData({
            columnsData: listData,
            backData: backData,
            value: defaultPickData
          })
          break;
        case "link":
          // let column_01 = this._getColumnData(newVal);
          // let column_02 = this._getColumnData(newVal[0].children);
          // let column_03 = this._getColumnData(newVal[0].children[0].children);
          // let columnsData = [column_01,column_02,column_03];
          let columnsData = [];
          //如果默认值
          if(Array.isArray(defaultPickData) && defaultPickData.length>0 && defaultPickData.every((v, i) => isPlainObject(v))){
            let key = onlyKey = Object.keys(defaultPickData[0])[0];
            let arr = [];
            this._getIndexByIdOfObject(listData, defaultPickData, key, arr);
            defaultPickData = arr;
            let tempI = 0;
            do{
              lastValue.push(defaultPickData[tempI]);
              columnsData.push(this._getColumnData(listData))
              listData = listData[defaultPickData[tempI]].children;
              tempI++;
            }while (listData)
            backData = columnsData.map((v, i) => v[defaultPickData[i]]);
            //如果没有默认值
          }else{
            this.data.onlyKey = this.properties.keyWordsOfShow||'name';
            do{
              lastValue.push(0);
              columnsData.push(this._getColumnData(listData))
              listData = listData[0].children;
            }while (listData)
            backData = columnsData.map((v) => v[0]);
          }
          this.data.tempValue = defaultPickData;
          this.data.lastValue = defaultPickData;
          this.setData({
            isUseKeywordOfShow: true,
            columnsData,
            backData,
          })
          setTimeout(()=>{
            this.setData({
              value: defaultPickData
            })
          },0)
          break;
      }
    },
    _computedBackData(backData) {
      let {scrollType, listData} = this.properties;
      let { onlyKey } = this.data;
      if(scrollType === 'normal'){
        return backData.map((v, i) => listData[i].findIndex((vv, ii) => this._compareObj(v, vv)))
      }else{
        return backData.map((v, i) => {
          let o = {};
          o[onlyKey] = v[onlyKey]
          return o;
        })
      }
    },
    _compareObj (o1, o2) {
      let {keyWordsOfShow} = this.properties;
      if(typeof o1 !== "object"){
        return o1 === o2
      }else{
        return o1[keyWordsOfShow] === o2[keyWordsOfShow]
      }
    },
    _getBackDataFromValue (val) {
      let tempArr = [];
      if(val.length > 0){
        tempArr = this.data.columnsData.reduce((t, v, i) => {
          return t.concat(v[val[i]])
        }, [])
      }else{
        tempArr = this.data.columnsData.map((v, i) => v[0])
      }
      return tempArr
    },
    _compareDate () { //完全相等返回true
      let {defaultPickDataTemp, listDataTemp} = this.data;
      let {defaultPickData, listData}  = this.properties

      return defaultPickDataTemp === defaultPickData && listDataTemp === listData
    },
    _setTempData () {
      let {defaultPickData, listData}  = this.properties;
      this.data.defaultPickDataTemp = defaultPickData;
      this.data.listDataTemp = listData;
    }
  }

  })