fupin/components/form/form-picker/form-picker.js

const reqInterface = require("../../../api/models");
const {
  findidx,
  isValidJson
} = require("../../../utils/dataHelper");
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    label: {
      type: String,
      value: ''
    },
    dict: {
      type: String,
      value: ''
    },
    list: {
      type: Array,
      value: []
    },
    cols: {
      type: Number,
      value: 1
    },
    value: {
      type: "any",
      value: ""
    },
    transmitData: Array,
    position: {
      type: String,
      value: 'bottom'
    },
    requiredMark: {
      type: Boolean,
      value: true
    },
    activeMode: {
      type: Boolean,
      value: false
    },
  },

  observers: {
    'cols': function (val) {
      let self = this;
      self.setData({
        columns: val
      })
    },
    list(val) {
      let self = this;
      if (val && val.length > 0) {
        self.setData({
          pickerList: val,
          oneValue: val[0].dictKey
        })
        self.triggerEvent('getvalue', {
          val: self.data.oneValue
        })
      }
    },
    'dict': async function (val) {
      let self = this;
      if (val) {
        if (self.data.columns == 1) {
          self.setData({
            dictionary: val,
          })
        } else {
          self.getData(val)
        }
      }
    },
    'label': function (val) {
      let self = this;
      self.setData({
        placeholder: '请选择' + val
      })
    },
    'value': function (val) {
      let self = this;
      // JSON.parse(val)有效
      if ((val && isValidJson(JSON.parse(val))) || (val == 0 && isValidJson(JSON.parse(val)))) {
        if (typeof (JSON.parse(val)) == 'string') {
          self.setData({
            pickerTxt: val ? JSON.parse(val) : '',
            oneValue: val ? JSON.parse(val) : ''
          })
          self.triggerEvent('getvalue', {
            val: self.data.oneValue
          })
        } else {
          if (self.data.pickerList.length > 0) {
            console.log(self.data.pickerList)
            let idx = findidx(self.data.pickerList, val)
            self.data.pickerTxt = (val || val == 0) ? self.data.pickerList[idx].dictValue : ''
            self.setData({
              index: idx,
              pickerTxt: self.data.pickerTxt
            })
          } else {
            if (self.data.dictionary) {
              self.getReq(self.data.dictionary).then(res => {
                self.setData({
                  pickerList: res
                })
                let idx = findidx(self.data.pickerList, val)
                self.data.pickerTxt = (val || val == 0) ? self.data.pickerList[idx].dictValue : ''
                self.setData({
                  index: idx,
                  pickerTxt: self.data.pickerTxt
                })
              })
            }
          }
        }
      } else if ((val && isValidJson(JSON.parse(val))) || (val == 0 && isValidJson(JSON.parse(val)))) {
        if (typeof (JSON.parse(val)) == 'string') {
          self.setData({
            pickerTxt: val ? JSON.parse(val) : ''
          })
        } else {
          self.data.pickerTxt = JSON.parse(val).map(item => item.dictValue ? item.dictValue + '/' : '').filter(part => part);
          if (self.data.pickerTxt.length > 0) {
            self.data.pickerTxt[self.data.pickerTxt.length - 1] = self.data.pickerTxt[self.data.pickerTxt.length - 1].slice(0, -1);
          }
          self.data.pickerTxt = self.data.pickerTxt.join('');
          self.setData({
            pickerTxt: self.data.pickerTxt
          })
        }
      } else {
        self.setData({
          index: 0,
          pickerTxt: ''
        })
      }
    },
  },

  lifetimes: {
    attached() {
      let self = this;
      if (self.data.dictionary) {
        self.getReq(self.data.dictionary).then(res => {
          self.setData({
            pickerList: res,
            oneValue: res[0].dictKey
          })
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    styleCss: 'padding: 20rpx 0; line-height: 36rpx font-size: 28rpx; border-bottom: 1rpx dashed #f0f0f0;',
    dictionary: '',
    pickerList: [],
    index: 0,
    oneValue: 0,
    pickerTxt: '',

    // 多列, 最多四列吧
    columns: 1,
    totalArray: [],
    firstArray: [],
    secondArray: [],
    thirdArray: [],
    fourthArray: [],
    multiIndex: [],
    multiValue: []
  },

  methods: {
    onePickerChange(e) {
      let self = this;
      console.log(e)
      self.setData({
        index: e.detail.value,
        pickerTxt: self.data.pickerList[e.detail.value].dictValue,
        oneValue: self.data.pickerList[e.detail.value].dictKey
      })
      self.triggerEvent('getvalue', {
        val: self.data.oneValue
      })
    },

    multiPickerChange(e) {
      let self = this;
      self.data.multiValue = [];
      for (let i = 0; i < self.data.multiIndex.length; i++) {
        self.data.multiValue.push(self.data.pickerList[i][self.data.multiIndex[i]] ? self.data.pickerList[i][self.data.multiIndex[i]].dictKey : 0)
      }
      self.data.pickerTxt = self.data.multiIndex.map((item, i) => {
        let name = self.data.pickerList[i][self.data.multiIndex[i]] ? self.data.pickerList[i][self.data.multiIndex[i]].dictValue : '';
        return name ? name + '/' : '';
      }).filter(part => part);
      if (self.data.pickerTxt.length > 0) {
        self.data.pickerTxt[self.data.pickerTxt.length - 1] = self.data.pickerTxt[self.data.pickerTxt.length - 1].slice(0, -1);
      }
      self.data.pickerTxt = self.data.pickerTxt.join('')
      self.setData({
        multiValue: self.data.multiValue,
        pickerTxt: self.data.pickerTxt
      })
      self.triggerEvent('getvalue', {
        val: self.data.multiValue,
        label: self.data.pickerTxt
      })
    },

    // 列改变
    bindMultiPickerColumnChange(e) {
      let self = this;
      // 第几列
      let col = e.detail.column;
      // 第几个下标
      let idx = e.detail.value;
      self.data.multiIndex[col] = idx;
      self.setData({
        multiIndex: self.data.multiIndex
      })
      if (col == 0 && self.data.columns == 2) {
        self.data.multiIndex[1] = 0;
        self.data.pickerList[1] = [];
        self.setData({
          secondArray: [],
          multiIndex: self.data.multiIndex,
          pickerList: self.data.pickerList
        })
        // 滑动第一列，请求数据
        self.getReq(self.data.firstArray[idx].dictKey).then(res => {
          self.setData({
            secondArray: res,
          })
          self.data.pickerList[1] = self.data.secondArray;
          self.setData({
            pickerList: self.data.pickerList
          })
        })
      }
      //  四列
      if (self.data.columns == 4) {
        // 滑动第一列，请求数据
        switch (col) {
          case 0:
            self.data.multiIndex[1] = 0;
            self.data.pickerList[1] = [];
            self.data.multiIndex[2] = 0;
            self.data.pickerList[2] = [];
            self.data.multiIndex[3] = 0;
            self.data.pickerList[3] = [];
            self.setData({
              secondArray: [],
              multiIndex: self.data.multiIndex,
              pickerList: self.data.pickerList
            })
            self.getReq(self.data.firstArray[idx].dictKey).then(res => {
              self.setData({
                secondArray: res,
              })
              self.data.pickerList[1] = self.data.secondArray;
              self.setData({
                pickerList: self.data.pickerList,
              })
            })
            break;
          case 1:
            self.getReq(self.data.secondArray[idx].dictKey).then(res => {
              self.data.multiIndex[2] = 0;
              self.data.pickerList[2] = [];
              self.data.multiIndex[3] = 0;
              self.data.pickerList[3] = [];
              self.setData({
                thirdArray: [],
                multiIndex: self.data.multiIndex,
                pickerList: self.data.pickerList
              })
              if (res) {
                self.setData({
                  thirdArray: res,
                })
                self.data.pickerList[2] = self.data.thirdArray;
                self.setData({
                  pickerList: self.data.pickerList,
                })
              } else {
                self.setData({
                  thirdArray: [],
                })
                self.data.pickerList[2] = self.data.thirdArray;
                self.setData({
                  pickerList: self.data.pickerList,
                })
              }
            })
            break;
          case 2:
            self.getReq(self.data.thirdArray[idx].dictKey).then(res => {
              self.data.multiIndex[3] = 0;
              self.data.pickerList[3] = [];
              self.setData({
                fourArray: [],
                multiIndex: self.data.multiIndex,
                pickerList: self.data.pickerList
              })
              if (res) {
                self.setData({
                  fourArray: res,
                })
                self.data.pickerList[3] = self.data.fourArray;
                self.setData({
                  pickerList: self.data.pickerList,
                })
              } else {
                self.setData({
                  fourArray: [],
                })
                self.data.pickerList[3] = self.data.fourArray;
                self.setData({
                  pickerList: self.data.pickerList,
                })
              }
            })
            break;
        }
      }
    },

    async getData(val) {
      let self = this;
      let res = null,
        res2 = null,
        res3 = null,
        res4 = null;
      res = await self.getReq(val)
      if (self.data.columns == 2) {
        self.setData({
          firstArray: res
        })
        res2 = await self.getReq(res[0].dictKey)
        self.setData({
          secondArray: res2,
        })
        self.data.pickerList[0] = self.data.firstArray;
        self.data.pickerList[1] = self.data.secondArray;
        self.setData({
          pickerList: self.data.pickerList,
          multiIndex: [0, 0]
        })
      } else if (self.data.columns != 1) {
        self.setData({
          firstArray: res
        })
        res2 = await self.getReq(res[0].dictKey)
        self.setData({
          secondArray: res2 ? res2 : []
        })
        if (res2) {
          res3 = await self.getReq(res2[0].dictKey)
          self.setData({
            thirdArray: res3 ? res3 : [],
          })
        } else {
          self.setData({
            thirdArray: [],
          })
        }
        if (res3) {
          res4 = await self.getReq(res3[0].dictKey)
          self.setData({
            fourthArray: res4 ? res4 : [],
          })
        } else {
          self.setData({
            fourthArray: [],
          })
        }

        self.data.pickerList[0] = self.data.firstArray;
        self.data.pickerList[1] = self.data.secondArray;
        self.data.pickerList[2] = self.data.thirdArray;
        self.data.pickerList[3] = self.data.fourthArray;
        self.setData({
          pickerList: self.data.pickerList,
          multiIndex: [0, 0, 0, 0]
        })

      }
    },

    getReq(val) {
      let self = this;
      return new Promise((resolve, reject) => {
        reqInterface.GetBladeSystemDictDictionary({
          code: val
        }).then(res => {
          resolve(res)
        }).catch(error => {
          console.error("GetDictDetail请求错误:", error);
          reject(error);
        });
      })
    }
  }
})