119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<template>
|
|
<el-input v-model="keyword" style="width:100%;height: 100%" @input="changeInput" :disabled="disabled"
|
|
placeholder="诊断选择" ref="inputRef"></el-input>
|
|
|
|
<el-popover placement="bottom-start" trigger="click" :width="props.width" ref="popoverRef" @before-enter="beforeShow" :virtual-ref="inputRef" @hide ="afterShow">
|
|
|
|
<div class="container" v-if="searchList.length > 0">
|
|
<el-table :data="searchList" style="width: 100%" @row-click="clickRow" :show-header="props.showHeader"
|
|
max-height="200px">
|
|
<el-table-column v-for="item in showConfig" :prop="item.prop" :label="item.label"
|
|
show-overflow-tooltip></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref, unref, watch} from "vue";
|
|
import {post} from "@/utils/request.ts";
|
|
|
|
const keyword = ref("");
|
|
const popoverRef = ref();
|
|
|
|
interface showConfig {
|
|
prop: string;
|
|
label: string;
|
|
}
|
|
|
|
const props = defineProps({
|
|
requestApi: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 1000
|
|
|
|
},
|
|
showConfig: {
|
|
type: Array as () => showConfig[],
|
|
default: () => []
|
|
},
|
|
showHeader: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const inputRef = ref();
|
|
|
|
|
|
|
|
const searchList = ref([]);
|
|
const changeInput = (inputStr: string) => {
|
|
unref(popoverRef).popperRef?.delayHide?.()
|
|
if (!props.requestApi || props.requestApi === "") {
|
|
return
|
|
}
|
|
let tempList = inputStr.split(",");
|
|
let searchKeyword = tempList[tempList.length - 1];
|
|
nameList.value = []
|
|
selectList.value = selectList.value ? selectList.value.slice(0, tempList.length) : []
|
|
let updateKeyword = false
|
|
for (let i = selectList.value.length - 1; i >= 0; i--) {
|
|
if (!tempList.includes(selectList.value[i].name)) {
|
|
selectList.value.splice(i, 1);
|
|
updateKeyword = true
|
|
} else {
|
|
nameList.value.push(selectList.value[i].name)
|
|
}
|
|
}
|
|
if (updateKeyword) {
|
|
keyword.value = nameList.value.length > 0 ? nameList.value.join(",") + "," : "";
|
|
}
|
|
post(props.requestApi, {keyword: searchKeyword}).then((res: any) => {
|
|
searchList.value = res;
|
|
})
|
|
}
|
|
const emit = defineEmits(['selectedCallBack'])
|
|
const clickRow = (row: any) => {
|
|
selectList.value.push(row)
|
|
nameList.value.push(row.name)
|
|
keyword.value = nameList.value.join(",") + ","
|
|
|
|
searchList.value = []
|
|
popoverRef.value.hide()
|
|
}
|
|
const beforeShow = () => {
|
|
if (searchList.value.length === 0) {
|
|
popoverRef.value.hide()
|
|
}
|
|
}
|
|
const afterShow = () => {
|
|
if (nameList.value.length === 0){
|
|
keyword.value = ""
|
|
}else {
|
|
keyword.value = nameList.value.join(",") + ","
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const selectList = ref<any>()
|
|
const nameList = ref<any>([]);
|
|
watch(selectList, (newVal, oldVal) => {
|
|
emit('selectedCallBack', newVal)
|
|
}, {deep: true});
|
|
const init = (list: any, nList: any) => {
|
|
selectList.value = list;
|
|
nameList.value = nList;
|
|
keyword.value = nameList.value.join(",") + ","
|
|
}
|
|
defineExpose({init})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
</style> |