feat: 同步2
This commit is contained in:
@ -1,141 +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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user