✨ feat: 项目选择器增加搜索
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user