test/src/components/MyComponents/Dict/DictRidioAndSelect.vue

<template>

  <div style="width:100%">
    <!-- radio -->
    <el-radio-group v-model="modelVal" @change="onChange" v-if="props.selectType === 'radio'"
      :disabled="props.disabled">
      <el-radio v-for="(item, i) in props.dictData" :key="i" :label="item.value ? item.value : item.dm"
        :disabled="item.disabled" @click='getlable(item)'>{{ item.label ? item.label : item.zdmc
        }}</el-radio>
    </el-radio-group>
    <!-- select -->
    <el-select class="pxdx_box" v-model="modelVal" clearable :multiple='props.multiple' :disabled="props.disabled"
      :placeholder="props.placeholder" v-else-if="props.selectType === 'select'" @change="onChange" @clear="changeclear"
      style="width:100%" :collapse-tags="collapseTags">
      <el-option v-for="item in props.dictData" :key="item.value" :label="item.label" :value="item.value"
        @click='getlable(item)' :disabled="item.disabled" />
    </el-select>
  </div>

</template>
<script setup>
import { defineProps, defineEmits, watchEffect, watch } from "vue"
const props = defineProps({
  modelValue: String,//选中值 || 回显
  dictData: Array, //数据
  disabled: {
    type: Boolean,
    default: false
  },//禁用
  placeholder: {
    type: String,
    default: "请选择"
  },
  //是否多选
  multiple: {
    type: Boolean,
    default: false
  },
  //选择方式
  selectType: {
    type: String,
    default: "radio" //radio || select
  },
  /** 原生属性 -- 多选时是否将选中值按文字的形式展示 */
  collapseTags: {
    type: Boolean,
    default: undefined,
  },
  //需要禁用的某个或者多个选项
  disabledItem: Array,
  /** 自动清空字典匹配不上的内容(目前仅做单选) */
  autoClear: {
    type: Boolean,
    default: true
  }
})
const modelVal = defineModel()
const emits = defineEmits(["update:modelValue", 'onChange', 'getselect', 'changeclear'])
const onChange = (val) => {
  emits("update:modelValue", val)
  let namearr = []
  if (props.multiple) {
    for (let i = 0; i < val.length; i++) {
      const name = props.dictData && props.dictData.find(item => item.value == val[i])?.label
      namearr.push(name)
    }
    emits("onChange", val, namearr)
  } else {
    const label = props.dictData && props.dictData.find(item => item.value == val)?.label
    emits("onChange", val, label)
  }
}
function getlable(val) {
  if (props.disabled) return
  emits("getselect", val)
}
function changeclear(val) {
  emits("changeclear", val)
}
/** 获取需要的内容 */
const getNeedVal = (val,dictData) => {
  let arr = []
  if (typeof val === 'string' && val) {
    arr = val.split(',')
  } else if (Array.isArray(val)) {
    arr = val.map(item=>item)
  }
  /** 是否有脏数据,即字典没有的数据 */
  const isSomeNotHad = arr.some(value => {
    return !dictData.find(item => item.value == value)
  })
  if (isSomeNotHad) {
    arr = arr.filter(value => {
      const obj = dictData.find(item => item.value == value)
      return obj
    })
  }
  return arr
}
watch([() => props.dictData, () => props.modelValue], ([opt, val]) => {
  if (props.autoClear && opt?.length && val?.length) {
    // 多选
    if (props.multiple) {
      // const newVal = getNeedVal(val,opt)
      // emits("update:modelValue", newVal)
      // 单选
    } else {
      // 清除不存在的项
      let arr = Array.isArray(opt) ? opt : []
      const curr = arr.find(item => item?.value == val)
      if (!curr) emits("update:modelValue", '')
    }
  }
})
watchEffect(() => {
  //处理是否禁用选项
  if (props.dictData?.length) {
    props.dictData.forEach(item => {
      item.disabled = false
    })
    if (props.disabledItem?.length) {
      props.dictData.forEach(item => {
        props.disabledItem.forEach(it => {
          if (item.value == it) {
            item.disabled = true
          }
        })
      })
    } else {
      props.dictData.forEach(item => {
        item.disabled = false
      })
    }
  }
})
</script>
<style>
.el-select-dropdown__item.is-disabled {
  color: #999 !important;
}
</style>