fupin/components/form/form-cascader/form-cascader.js

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

  properties: {
    dict: Number,
    label: String,
    value: String,
    position: {
      type: String,
      value: 'bottom'
    },
    requiredMark: {
      type: Boolean,
      value: true
    },
    activeMode: {
      type: Boolean,
      value: false
    },
  },

  observers: {
    'dict': function (val) {
      let self = this;
      reqInterface.GetDictDetail({
        id: val
      }).then(res => {
        self.setData({
          spinning: false,
          cascaderOption: res.childs
        })
      }).catch(err => {
        self.setData({
          spinning: false,
        })
      })
    },
    'label': function (val) {
      let self = this;
      self.setData({
        placeholder: '请选择' + val
      })
    },
    'value': function (val) {
      let self = this;
      if (val) {
        console.log(val)

        self.setData({
          placeholder: '',
          child_value: val
        })
      }
    },
  },

  data: {
    cascaderOption: [],
    cascaderOptionNames: {
      label: 'name',
      value: 'id',
      children: 'childs'
    },
    child_value: '',
    select_value: [],
    show: false,
    spinning: true
  },

  methods: {
    openPopup() {
      this.setData({
        show: true
      })
    },
    close() {
      this.setData({
        show: false,
        select_value: []
      })
    },
    comfirm() {
      let self = this;
      self.triggerEvent('getvalue', { val: self.data.select_value, label: self.data.child_value})
      self.setData({
        show: false,
        select_value: [],
      })
    },
    onChange(e) {
      let self = this;
      console.log(e)
      self.data.child_value = e.detail.options.map(item => {
        return item.name
      }).join(',')
      self.setData({
        select_value: e.detail.value,
        child_value: self.data.child_value
      })
    },
    onLoadOptions(e) {
      let self = this;
      // self.setData({
      //   spinning: true
      // })
      reqInterface.GetDictDetail({
        id: e.detail.value[e.detail.value.length - 1]
      }).then(res => {
        self.setData({
          spinning: false,
        })
        if(e.detail.value.length == 1) {
          let idx1 = findidx(self.data.cascaderOption, e.detail.value[0]);
          self.data.cascaderOption[idx1].childs = res.childs;
          self.setData({
            cascaderOption: self.data.cascaderOption
          })
        } else if (e.detail.value.length == 2) {
          let idx1 = findidx(self.data.cascaderOption, e.detail.value[0]);
          let idx2 = findidx(self.data.cascaderOption[idx1].childs, e.detail.value[1]);
          self.data.cascaderOption[idx1].childs[idx2].childs = res.childs;
          self.setData({
            cascaderOption: self.data.cascaderOption
          })
        } else if (e.detail.value.length == 3) {
          let idx1 = findidx(self.data.cascaderOption, e.detail.value[0]);
            let idx2 = findidx(self.data.cascaderOption[idx1].childs, e.detail.value[1]);
            let idx3 = findidx(self.data.cascaderOption[idx1].childs[idx2].childs,  e.detail.value[2]);
            self.data.cascaderOption[idx1].childs[idx2].childs[idx3].childs = res.childs;
            self.setData({
              cascaderOption: self.data.cascaderOption
            })
        }
      }).catch(err => {
        self.setData({
          spinning: false,
        })
      })
      self.setData({ select_value: e.detail.value, cascaderOption: self.data.cascaderOption })
    }
  }
})