106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<el-input
|
|
ref="inputRef0"
|
|
:value-on-clear="null"
|
|
style="display: none"
|
|
v-model="inputValue"
|
|
>
|
|
</el-input>
|
|
<el-input
|
|
:value-on-clear="null"
|
|
:readonly="true"
|
|
ref="inputRef"
|
|
suffix-icon="el-icon-search"
|
|
v-model="inputLabel"
|
|
>
|
|
</el-input>
|
|
<div v-if="edit">
|
|
<el-popover
|
|
v-model:visible="showPopover"
|
|
trigger="click"
|
|
virtual-triggering
|
|
:virtual-ref="inputRef"
|
|
:width="tableWidth"
|
|
>
|
|
<el-input
|
|
v-model="keyword"
|
|
placeholder="关键词查找"
|
|
@keyup.enter="handleQuery"
|
|
></el-input>
|
|
<div style="height: 2px"></div>
|
|
<scTable
|
|
ref="table"
|
|
:apiObj="apiObj"
|
|
:params="params"
|
|
:query="query"
|
|
:height="tableHeight"
|
|
row-key="id"
|
|
stripe
|
|
@row-click="rowClick"
|
|
:hidePagination="hidePagination"
|
|
paginationLayout="prev, pager, next"
|
|
hideDo
|
|
>
|
|
<slot></slot>
|
|
</scTable>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
edit: { type: Boolean, default: true },
|
|
hidePagination: { type: Boolean, default: false },
|
|
tableWidth: { type: Number, default: 600 },
|
|
tableHeight: { type: Number, default: 400 },
|
|
apiObj: { type: Object, default: () => {}, required: true },
|
|
params: { type: Object, default: () => {} },
|
|
label: { type: String, default: "" },
|
|
modelValue: { type: String, default: null },
|
|
labelField: { type: String, default: "name" },
|
|
valueField: { type: String, default: "id" },
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue", "update:label"]);
|
|
|
|
// 控制 popover 显示与隐藏的状态
|
|
const showPopover = ref(false);
|
|
const inputRef = ref();
|
|
const inputRef0 = ref();
|
|
const table = ref();
|
|
const inputLabel = computed({
|
|
get() {
|
|
return props.label;
|
|
},
|
|
set(val) {
|
|
emit("update:label", val);
|
|
},
|
|
});
|
|
const inputValue = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(val) {
|
|
emit("update:modelValue", val);
|
|
},
|
|
});
|
|
|
|
const keyword = ref("");
|
|
const query = ref({ search: "" });
|
|
|
|
const handleQuery = () => {
|
|
query.value.search = keyword.value;
|
|
table.value.queryData(query.value);
|
|
};
|
|
|
|
const rowClick = (row) => {
|
|
inputLabel.value = row[props.labelField];
|
|
inputValue.value = row[props.valueField];
|
|
showPopover.value = false;
|
|
};
|
|
</script>
|