test: 1

src/components/MyComponents/Dict/DictRidioAndSelect.vue

@@ -0,0 +1,141 @@
+<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>