<template>
|
<!-- <div v-if="modelValue"> -->
|
<el-divider content-position="left">选择{{ label }}</el-divider>
|
<div class="select-box">
|
<div>
|
<el-text size="small" type="info">当前选择</el-text>
|
</div>
|
<slot name="selected" :row="modelValue"></slot>
|
</div>
|
<!-- </div> -->
|
<el-divider content-position="left">{{ label }}检索</el-divider>
|
<FYSearchBar @search="search" :loading="loading">
|
<template #options>
|
<FYOptionText
|
label=""
|
:placeholder="placeholder"
|
v-model:value="searchText"
|
:width="searchTextWidth"
|
></FYOptionText>
|
</template>
|
</FYSearchBar>
|
<div>
|
<el-scrollbar v-if="dataList.length > 0" height="38vh" class="item-box">
|
<el-space direction="vertical" alignment="start" fill>
|
<div v-for="(item, index) in dataList" :key="index">
|
<slot :row="item" :click="select"></slot>
|
</div>
|
</el-space>
|
</el-scrollbar>
|
<el-empty v-else description="无记录" />
|
</div>
|
<el-pagination
|
v-if="pageShow && dataList.length > 0"
|
size="small"
|
ref="paginationRef"
|
class="el-pagination"
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="pageSizes"
|
:background="true"
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
/>
|
</template>
|
|
<script>
|
import { usePagination } from '@/composables/pagination';
|
|
/**
|
* 信息检索及选择框
|
*/
|
export default {
|
setup() {
|
// 分页逻辑
|
const { currentPage, pageSize, addPageEvent } = usePagination();
|
return { currentPage, pageSize, addPageEvent };
|
},
|
props: {
|
modelValue: Object,
|
label: {
|
type: String,
|
default: '检索项'
|
},
|
placeholder: {
|
type: String,
|
default: '输入关键字检索'
|
},
|
searchTextWidth: {
|
type: String,
|
default: '200px'
|
},
|
// 是否显示分页
|
pageShow: {
|
type: Boolean,
|
default: true
|
},
|
// 每页可选数量
|
pageSizes: {
|
type: Array,
|
default: () => {
|
return [10, 20, 50, 100];
|
}
|
},
|
// 默认搜索文本
|
defaultText: String
|
},
|
emits: ['search', 'update:modelValue'],
|
data() {
|
return {
|
searchText: '',
|
dataList: [],
|
total: 0,
|
loading: false
|
};
|
},
|
watch: {
|
defaultText: {
|
handler(newVal) {
|
if (newVal) {
|
this.searchText = newVal;
|
setTimeout(() => {
|
this.search();
|
}, 500);
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
search() {
|
this.loading = true;
|
const param = {
|
text: this.searchText,
|
page: this.currentPage,
|
pageSize: this.pageSize
|
};
|
this.$emit('search', param, (res) => {
|
if (res) {
|
this.dataList = res.data;
|
this.total = res.total ? res.total : 0;
|
}
|
this.loading = false;
|
});
|
},
|
select(e) {
|
this.$emit('update:modelValue', e);
|
}
|
},
|
mounted() {
|
this.addPageEvent(this.search);
|
}
|
};
|
</script>
|
<style scoped>
|
.select-box {
|
border: 1px solid var(--el-border-color);
|
border-radius: var(--el-border-radius-base);
|
padding: 0 8px;
|
}
|
.item-box {
|
/* border: 1px solid var(--el-border-color);
|
border-radius: var(--el-border-radius-base);
|
margin-top: 20px; */
|
}
|
.el-pagination {
|
/* background-color: var(--el-color-white); */
|
border-top: 1px solid rgba(0, 0, 0, 0.096);
|
/* background-color: aliceblue; */
|
}
|
</style>
|
