dataease/frontend/src/components/widget/DeWidget/DeSelectGrid.vue

<template>

  <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
    <div class="de-select-grid-search">
      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" :size="size" prefix-icon="el-icon-search" clearable />
    </div>
    <div class="list">

      <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>

        <el-checkbox-group v-model="value" @change="handleCheckedChange">
          <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
        </el-checkbox-group>
      </div>

      <div v-else class="radio-group-container">
        <el-radio-group v-model="value" @change="changeRadioBox">
          <el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
        </el-radio-group>
      </div>

    </div>

  </div>

</template>

<script>
import { multFieldValues } from '@/api/dataset/dataset'
export default {

  props: {
    element: {
      type: Object,
      default: null
    },
    inDraw: {
      type: Boolean,
      default: true
    },
    inScreen: {
      type: Boolean,
      required: false,
      default: true
    },
    size: String
  },
  data() {
    return {
      value: null,
      checked: null,
      defaultProp: {
        id: 'id',
        label: 'text',
        children: 'children'
      },
      keyWord: '',
      allNode: {
        id: (-2 << 16) + '',
        text: this.$t('commons.all'),
        checked: false,
        indeterminate: false
      },
      show: true,
      datas: [],
      isIndeterminate: false,
      checkAll: false
    }
  },
  computed: {
    operator() {
      return this.element.options.attrs.multiple ? 'in' : 'eq'
    },
    defaultValueStr() {
      if (!this.element || !this.element.options || !this.element.options.value) return ''
      return this.element.options.value.toString()
    },
    viewIds() {
      if (!this.element || !this.element.options || !this.element.options.attrs.viewIds) return ''
      return this.element.options.attrs.viewIds.toString()
    }
  },
  watch: {
    'viewIds': function(value, old) {
      if (typeof value === 'undefined' || value === old) return
      this.setCondition()
    },
    'defaultValueStr': function(value, old) {
      if (value === old) return
      this.value = this.fillValueDerfault()
      this.changeValue(value)

      if (this.element.options.attrs.multiple) {
        this.checkAll = this.value.length === this.datas.length
        this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
      }
    },
    'element.options.attrs.fieldId': function(value, old) {
      if (typeof value === 'undefined' || value === old) return
      this.datas = []
      this.element.options.attrs.fieldId &&
      this.element.options.attrs.fieldId.length > 0 &&
      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
        this.datas = this.optionDatas(res.data)
      }) || (this.element.options.value = '')
    },
    'element.options.attrs.multiple': function(value, old) {
      if (typeof old === 'undefined' || value === old) return
      if (!this.inDraw) {
        this.value = value ? [] : null
        this.element.options.value = ''
      }

      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  },
  created() {
    this.initLoad()
  },

  methods: {
    initLoad() {
      this.value = this.element.options.attrs.multiple ? [] : null
      if (this.element.options.attrs.fieldId) {
        multFieldValues(this.element.options.attrs.fieldId.split()).then(res => {
          this.datas = this.optionDatas(res.data)
          if (this.element.options.attrs.multiple) {
            this.checkAll = this.value.length === this.datas.length
            this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
          }
        })
      }
      if (this.element.options.value) {
        this.value = this.fillValueDerfault()
        this.changeValue(this.value)
      }
    },
    changeValue(value) {
      if (!this.inDraw) {
        if (value === null) {
          this.element.options.value = ''
        } else {
          this.element.options.value = Array.isArray(value) ? value.join() : value
        }
      }
      this.setCondition()
      this.styleChange()
    },

    setCondition() {
      const param = {
        component: this.element,
        value: this.formatFilterValue(),
        operator: this.operator
      }
      this.inDraw && this.$store.commit('addViewFilter', param)
    },
    formatFilterValue() {
      if (this.value === null) return []
      if (Array.isArray(this.value)) return this.value
      return this.value.split(',')
    },
    fillValueDerfault() {
      const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
      if (this.element.options.attrs.multiple) {
        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return []
        return defaultV.split(',')
      } else {
        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null
        return defaultV.split(',')[0]
      }
    },

    styleChange() {
      this.$store.commit('recordStyleChange')
    },
    optionDatas(datas) {
      if (!datas) return null
      return datas.filter(item => !!item).map(item => {
        return {
          id: item,
          text: item
        }
      })
    },
    changeRadioBox(value) {
      this.changeValue(value)
    },
    handleCheckAllChange(val) {
      this.value = val ? this.datas.map(item => item.id) : []
      this.isIndeterminate = false
      this.changeValue(this.value)
    },
    handleCheckedChange(values) {
      const checkedCount = values.length
      this.checkAll = checkedCount === this.datas.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length
      this.changeValue(values)
    }

  }
}
</script>

<style lang="scss" scoped>

.de-select-grid-search {
  >>>input {
    border-radius: 0px;
  }
}
.de-select-grid-class {
  .list {
    overflow-y: auto;
    width: 100%;
    position: absolute;
    top: 30px;
    bottom: 0;
  }
}

.radio-group-container > .el-radio-group > label {
    display: block !important;
    margin: 10px !important;
}

.checkbox-group-container{
  label.el-checkbox {
    display: block !important;
    margin: 10px !important;
  }

  .el-checkbox-group > label {
    display: block !important;
    margin: 10px !important;
  }

}

</style>