feat: 项目选择器增加搜索

This commit is contained in:
砂糖
2025-09-05 17:11:51 +08:00
parent 1d2f7a4112
commit 8db5eb7707

View File

@@ -1,21 +1,30 @@
<template>
<uni-data-select
v-model="innerValue"
:localdata="projectOptions"
:placeholder="placeholder"
:clear="clear"
:filterable="filterable"
@change="onChange"
/>
<view class="project-select-container">
<!-- 搜索输入框 -->
<input
v-model="searchKeyword"
:placeholder="`搜索项目名称、编码或编号...`"
class="search-input"
clearable
/>
<!-- 选择器组件 -->
<uni-data-select
v-model="innerValue"
:localdata="filteredOptions"
:placeholder="placeholder"
:clear="clear"
:filterable="false"
@change="onChange"
/>
</view>
</template>
<script>
import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
import { listProject } from '@/api/oa/project'
export default {
name: 'OaProjectSelect',
components: { uniDataSelect },
props: {
value: [String, Number],
placeholder: {
@@ -33,8 +42,39 @@ export default {
},
data() {
return {
projectOptions: [],
innerValue: this.value
allProjects: [], // 存储所有项目原始数据
innerValue: this.value,
searchKeyword: '' // 搜索关键词
}
},
computed: {
// 根据搜索关键词过滤项目
filteredOptions() {
if (!this.searchKeyword) {
// 如果没有搜索关键词,返回所有项目
return this.allProjects.map(item => ({
text: item.projectName,
value: item.projectId
}))
}
// 转换关键词为小写,方便不区分大小写搜索
const keyword = this.searchKeyword.toLowerCase()
// 过滤出匹配的项目
return this.allProjects
.filter(item => {
// 检查项目名称、编码、编号是否包含关键词
const matchesName = item.projectName?.toLowerCase().includes(keyword)
const matchesCode = item.projectCode?.toLowerCase().includes(keyword)
const matchesNum = item.projectNum?.toString().toLowerCase().includes(keyword)
return matchesName || matchesCode || matchesNum
})
.map(item => ({
text: item.projectName,
value: item.projectId
}))
}
},
watch: {
@@ -51,12 +91,11 @@ export default {
this.getProjectOptions()
},
methods: {
// 获取所有项目数据
getProjectOptions() {
listProject().then(res => {
this.projectOptions = (res.rows || []).map(item => ({
text: item.projectName,
value: item.projectId
}))
// 保存原始数据,用于搜索过滤
this.allProjects = res.rows || []
})
},
onChange(val) {
@@ -65,3 +104,18 @@ export default {
}
}
</script>
<style scoped>
.project-select-container {
width: 100%;
}
.search-input {
width: 100%;
padding: 8px 12px;
margin-bottom: 8px;
border: 1px solid #eee;
border-radius: 4px;
font-size: 14px;
}
</style>