✨ feat: 项目选择器增加搜索
This commit is contained in:
@@ -1,21 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<uni-data-select
|
<view class="project-select-container">
|
||||||
v-model="innerValue"
|
<!-- 搜索输入框 -->
|
||||||
:localdata="projectOptions"
|
<input
|
||||||
:placeholder="placeholder"
|
v-model="searchKeyword"
|
||||||
:clear="clear"
|
:placeholder="`搜索项目名称、编码或编号...`"
|
||||||
:filterable="filterable"
|
class="search-input"
|
||||||
@change="onChange"
|
clearable
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- 选择器组件 -->
|
||||||
|
<uni-data-select
|
||||||
|
v-model="innerValue"
|
||||||
|
:localdata="filteredOptions"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:clear="clear"
|
||||||
|
:filterable="false"
|
||||||
|
@change="onChange"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
|
|
||||||
import { listProject } from '@/api/oa/project'
|
import { listProject } from '@/api/oa/project'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'OaProjectSelect',
|
name: 'OaProjectSelect',
|
||||||
components: { uniDataSelect },
|
|
||||||
props: {
|
props: {
|
||||||
value: [String, Number],
|
value: [String, Number],
|
||||||
placeholder: {
|
placeholder: {
|
||||||
@@ -33,8 +42,39 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
projectOptions: [],
|
allProjects: [], // 存储所有项目原始数据
|
||||||
innerValue: this.value
|
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: {
|
watch: {
|
||||||
@@ -51,12 +91,11 @@ export default {
|
|||||||
this.getProjectOptions()
|
this.getProjectOptions()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 获取所有项目数据
|
||||||
getProjectOptions() {
|
getProjectOptions() {
|
||||||
listProject().then(res => {
|
listProject().then(res => {
|
||||||
this.projectOptions = (res.rows || []).map(item => ({
|
// 保存原始数据,用于搜索过滤
|
||||||
text: item.projectName,
|
this.allProjects = res.rows || []
|
||||||
value: item.projectId
|
|
||||||
}))
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onChange(val) {
|
onChange(val) {
|
||||||
@@ -65,3 +104,18 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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