字典选择增加简拼搜索
This commit is contained in:
tangw
parent
97039793f0
commit
0aec49b2eb
@ -9,7 +9,6 @@
|
||||
@clear="handleClear"
|
||||
@dblclick="handleDblClick"
|
||||
>
|
||||
<<<<<<< HEAD
|
||||
<template #prefix>
|
||||
<el-icon v-if="isDictLoading" size="16"><Loading /></el-icon>
|
||||
</template>
|
||||
@ -52,55 +51,6 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
=======
|
||||
<template #prefix>
|
||||
<el-icon v-if="isDictLoading" size="16"><Loading /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<el-icon @click="openDictSelector" size="16" class="select-icon">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- 字典选择弹窗（Vue3 中使用 v-model 控制显示） -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="500px"
|
||||
@close="handleDialogClose"
|
||||
>
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
placeholder="搜索字典项..."
|
||||
class="mb-4"
|
||||
clearable
|
||||
@clear="filterDictData"
|
||||
@input="filterDictData"
|
||||
/>
|
||||
|
||||
<el-table
|
||||
:data="filteredDictData"
|
||||
height="300px"
|
||||
border
|
||||
@row-click="selectItem"
|
||||
@row-dblclick="selectItem"
|
||||
>
|
||||
<el-table-column prop="value" label="编码" width="100" />
|
||||
<el-table-column prop="label" label="名称" width="200" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="selectItem(scope.row)"
|
||||
>
|
||||
选择
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -109,7 +59,6 @@
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Loading, ArrowDown } from '@element-plus/icons-vue';
|
||||
|
||||
<<<<<<< HEAD
|
||||
import { getFirstLetter } from '@/api/pinyin.js'; // 引入拼音处理工具
|
||||
// 组件参数
|
||||
const props = defineProps({
|
||||
@ -140,64 +89,6 @@ const displayValue = computed({
|
||||
return labelValue.value || tempValue.value || props.modelValue || '';
|
||||
},
|
||||
set(newValue) {
|
||||
=======
|
||||
// 组件参数（Vue3 语法）
|
||||
const props = defineProps({
|
||||
modelValue: { // 双向绑定的原始值
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
dictType: { // 字典类型
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入或双击选择'
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fetchDict: { // 获取字典的方法（需返回 Promise）
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '选择字典项'
|
||||
}
|
||||
});
|
||||
|
||||
// 组件事件（Vue3 语法）
|
||||
const emit = defineEmits([
|
||||
'update:modelValue', // 同步原始值
|
||||
'update:labelValue', // 同步标签值
|
||||
'select' // 选中事件
|
||||
]);
|
||||
|
||||
// 内部状态（Vue3 ref 响应式）
|
||||
const tempValue = ref(''); // 临时输入值
|
||||
const labelValue = ref(''); // 映射后的标签
|
||||
const dictData = ref([]); // 完整字典数据
|
||||
const filteredDictData = ref([]); // 过滤后的字典数据
|
||||
const isDictLoading = ref(true); // 字典加载状态
|
||||
const dialogVisible = ref(false); // 弹窗显示状态
|
||||
const searchKey = ref(''); // 搜索关键词
|
||||
|
||||
// 显示值计算（Vue3 computed）
|
||||
const displayValue = computed({
|
||||
get() {
|
||||
// 优先显示标签，无则显示原始值
|
||||
return labelValue.value || tempValue.value || props.modelValue || '';
|
||||
},
|
||||
set(newValue) {
|
||||
// 用户输入时更新临时值，并清除旧标签
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
tempValue.value = newValue;
|
||||
if (labelValue.value && newValue !== labelValue.value) {
|
||||
labelValue.value = '';
|
||||
@ -206,7 +97,6 @@ const displayValue = computed({
|
||||
}
|
||||
});
|
||||
|
||||
<<<<<<< HEAD
|
||||
|
||||
|
||||
// 加载字典数据（并添加简拼字段）
|
||||
@ -221,16 +111,6 @@ const loadDictData = async () => {
|
||||
}));
|
||||
|
||||
filteredDictData.value = [...dictData.value];
|
||||
=======
|
||||
// 加载字典数据
|
||||
const loadDictData = async () => {
|
||||
try {
|
||||
isDictLoading.value = true;
|
||||
// 调用父组件传入的字典获取方法
|
||||
const data = await props.fetchDict(props.dictType);
|
||||
dictData.value = data || [];
|
||||
filteredDictData.value = [...dictData.value]; // 初始化过滤数据
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
} catch (error) {
|
||||
console.error(`加载${props.dictType}字典失败:`, error);
|
||||
dictData.value = [];
|
||||
@ -240,7 +120,6 @@ const loadDictData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// 核心搜索逻辑（支持模糊搜索+简拼搜索）
|
||||
const filterDictData = () => {
|
||||
const key = searchKey.value.trim().toLowerCase();
|
||||
@ -260,28 +139,11 @@ const filterDictData = () => {
|
||||
// 满足任一条件即匹配
|
||||
return matchLabel || matchValue || matchPinyin;
|
||||
});
|
||||
=======
|
||||
// 过滤字典数据（搜索功能）
|
||||
const filterDictData = () => {
|
||||
if (!searchKey.value) {
|
||||
filteredDictData.value = [...dictData.value];
|
||||
return;
|
||||
}
|
||||
const key = searchKey.value.toLowerCase();
|
||||
filteredDictData.value = dictData.value.filter(item =>
|
||||
item.label.toLowerCase().includes(key) ||
|
||||
String(item.value).toLowerCase().includes(key)
|
||||
);
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
};
|
||||
|
||||
// 双击事件处理
|
||||
const handleDblClick = () => {
|
||||
if (!props.disabled && !isDictLoading.value) {
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
console.log('双击触发弹窗');
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
};
|
||||
@ -290,19 +152,13 @@ const handleDblClick = () => {
|
||||
const openDictSelector = () => {
|
||||
if (!props.disabled && !isDictLoading.value) {
|
||||
dialogVisible.value = true;
|
||||
<<<<<<< HEAD
|
||||
searchKey.value = '';
|
||||
filterDictData();
|
||||
=======
|
||||
searchKey.value = ''; // 重置搜索
|
||||
filterDictData(); // 重置过滤
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
}
|
||||
};
|
||||
|
||||
// 选择字典项
|
||||
const selectItem = (item) => {
|
||||
<<<<<<< HEAD
|
||||
emit('update:modelValue', item.value);
|
||||
emit('update:labelValue', item.label);
|
||||
emit('select', item);
|
||||
@ -316,60 +172,10 @@ const handleBlur = () => { /* ... */
|
||||
};
|
||||
const handleClear = () => { /* ... */
|
||||
};
|
||||
=======
|
||||
// 同步原始值和标签值到父组件
|
||||
emit('update:modelValue', item.value);
|
||||
emit('update:labelValue', item.label);
|
||||
emit('select', item); // 触发选中事件
|
||||
|
||||
// 更新内部状态
|
||||
tempValue.value = item.value;
|
||||
labelValue.value = item.label;
|
||||
|
||||
// 关闭弹窗
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 失焦时自动映射
|
||||
const handleBlur = () => {
|
||||
const value = tempValue.value.trim() || props.modelValue;
|
||||
if (!value) {
|
||||
emit('update:modelValue', '');
|
||||
emit('update:labelValue', '');
|
||||
labelValue.value = '';
|
||||
tempValue.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 查找匹配的字典项
|
||||
const matched = dictData.value.find(
|
||||
item => String(item.value) === String(value)
|
||||
);
|
||||
|
||||
if (matched) {
|
||||
emit('update:labelValue', matched.label);
|
||||
labelValue.value = matched.label;
|
||||
} else {
|
||||
emit('update:labelValue', value); // 无匹配时用原始值
|
||||
labelValue.value = value;
|
||||
}
|
||||
};
|
||||
|
||||
// 清空输入
|
||||
const handleClear = () => {
|
||||
tempValue.value = '';
|
||||
labelValue.value = '';
|
||||
emit('update:modelValue', '');
|
||||
emit('update:labelValue', '');
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
const handleDialogClose = () => {
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// 监听初始值变化
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
tempValue.value = newVal || '';
|
||||
@ -379,26 +185,6 @@ watch(() => props.modelValue, (newVal) => {
|
||||
emit('update:labelValue', labelValue.value);
|
||||
}
|
||||
}, {immediate: true});
|
||||
=======
|
||||
// 监听父组件传入的初始值
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
if (newVal === tempValue.value) return; // 避免重复更新
|
||||
tempValue.value = newVal || '';
|
||||
|
||||
// 初始值自动映射标签
|
||||
if (newVal && !isDictLoading.value) {
|
||||
const matched = dictData.value.find(
|
||||
item => String(item.value) === String(newVal)
|
||||
);
|
||||
labelValue.value = matched?.label || newVal;
|
||||
emit('update:labelValue', labelValue.value);
|
||||
}
|
||||
},
|
||||
{ immediate: true } // 初始化时执行一次
|
||||
);
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
|
||||
// 组件挂载时加载字典
|
||||
onMounted(async () => {
|
||||
@ -407,10 +193,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<<<<<<< HEAD
|
||||
/* 样式保持不变 */
|
||||
=======
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
.dict-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
@ -419,23 +202,12 @@ onMounted(async () => {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
|
||||
.select-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
=======
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.select-icon:hover {
|
||||
color: #409eff; /* 鼠标悬停变色 */
|
||||
}
|
||||
|
||||
/* 修复输入框后缀图标与清除按钮的间距 */
|
||||
>>>>>>> e1f19883e37f969d4e8ada6a3137ba399ebfc6df
|
||||
:deep(.el-input__suffix) {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user