laws-sinotruk-mobile/src/components/PickerDictCheckboxField.vue

<!-- form表单中下拉框样式的组件-->
<template>
  <div>
    <van-field
      readonly
      :class="readonly ? 'field-readonly' : 'not-field-readonly'"
      clickable
      name="picker"
      :value="showValue"
      v-bind="$attrs"
      v-on="childListeners"
      @click="showPickerFunc"
    />
    <van-popup class="dict-checkbox-field-popup" v-model="showPicker" position="bottom">
      <div class="item-ope">
        <span class="van-picker__cancel" @click="onCancel">取消</span>
        <span class="van-picker__confirm" @click="onConfirm">确认</span>
      </div>
      <van-checkbox-group class="dict-checkbox-group" v-model="checkedArr" ref="checkboxGroup">
<!--        <div  :key="item[valueKey]">-->
          <van-checkbox
            v-for="(item) in columnData"
            :key="item[valueKey]"
            :name="item[valueKey]"
            shape="square"
          >
            {{item[showKey]}}
          </van-checkbox>
<!--        </div>-->
      </van-checkbox-group>
<!--      <van-picker-->
<!--        show-toolbar-->
<!--        :columns="columnData"-->
<!--        @confirm="onConfirm"-->
<!--        @cancel="showPicker = false"-->
<!--        :value-key="showKey"-->
<!--      />-->
    </van-popup>
  </div>
</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'

export default {
  name: 'PickerDictCheckboxField',
  props: {
    value: {
      type: [String, Number, Object],
      required: false
    },
    dictCode: {
      type: String,
      required: false,
      default: ''
    },
    // 默认是否有其他值
    valueKey: {
      type: String,
      required: false,
      default: 'value'
    },
    // picker中显示的key值
    showKey: {
      type: String,
      required: false,
      default: 'text'
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      showPicker: false,
      showValue: '',
      columnData: [],
      checkedArr: []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function () {
        this.initVal()
      }
    },
    dictCode: {
      immediate: true,
      handler () {
        this.initDictData()
      }
    }
  },
  computed: {
    // 透传给下级组件的事件，需要排除本组件使用的change事件
    childListeners () {
      // const vm = this
      const result = Object.assign({},
        this.$listeners
      )
      delete result.change
      return result
    }
  },
  methods: {
    showPickerFunc () {
      if (this.readonly) return
      this.initVal()
      this.showPicker = true
    },
    initVal () {
      if (this.value) {
        this.checkedArr = this.value.split(',')
        const showArr = []
        this.checkedArr.map(item => {
          const column = this.columnData.find(tt => (tt[this.valueKey] + '') === (item + ''))
          if (column) {
            showArr.push((column || {})[this.showKey])
          }
          this.showValue = showArr.join('，')
        })
      } else {
        this.showValue = ''
        this.checkedArr = []
      }
    },
    initDictData () {
      // 优先从缓存中读取字典配置
      if (getDictItemsFromCache(this.dictCode)) {
        this.columnData = getDictItemsFromCache(this.dictCode)
        return
      }
      // 根据字典Code, 初始化字典数组
      ajaxGetDictItems(this.dictCode, null).then((res) => {
        if (res.success) {
          this.columnData = res.result
        }
      })
    },
    onConfirm () {
      if (this.checkedArr.length === 0) {
        this.$toast('请至少选择一条数据')
        return
      }
      this.showPicker = false
      this.$emit('change', this.checkedArr.join())
    },
    onCancel () {
      // this.checkedArr = []
      this.showPicker = false
    }
  },
  // created() {
  //   this.initDictData()
  // },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

/deep/.dict-checkbox-field-popup{
  height: 308px;
  font-size: 16px;
  .item-ope{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
  }
  .dict-checkbox-group{
    padding: @pad-base;
    height: calc(100% - 44px - 2 * @pad-base);
    overflow: auto;
    div + div{
      margin-top: @pad-base;
    }
  }
}

.not-field-readonly {
  /deep/ .van-field__control{
    color: #1D2129 !important;
  }
}

.field-readonly {
  /deep/ .van-field__control{
    color: #969799 !important;
  }
}

</style>