feat: 支持单位筛选改 el-select 多选 (前端)

manager/Projects.vue 顶部筛选区的「支持单位」从 el-input 升级为 el-select multiple + 远程搜索。

改动:
- L6: el-input → el-select (multiple + filterable + remote + clearable + collapse-tags + collapse-tags-tooltip)
  - v-model: q.sponsorOrgName (string) → q.sponsorAdminUserIds (number[])
  - remote-method: searchSponsorOrgsForFilter (新增)
  - loading: sponsorSearching (新增)
  - width: 260px (比输入框宽, 容纳标签)
- L291: q ref 字段重命名 + 改类型
- L341: reset() 同步
- 新增: sponsorSearching ref (loading 指示)
- 新增: _supporterFilterTimer (filter 防抖, 与 assignForm 的 _supporterTimer 分离)
- 新增: searchSponsorOrgsForFilter(query) — 复用 listSponsorOrgs + sponsorOrgOptions
  - 200ms debounce
  - 已选项不在结果里时按 userId 单独拉回 (multi-select 必须保证每个 tag 都有 label)

未做 / 后续:
- 执行方 (execOrgName) 同样可改多选, 沿用本次模式即可, 暂不动
- q.sponsorOrgName 字段已从源消失, 注释提到「sponsorOrgName」的 _self/manager_projects.md 待同步 (下一 commit)
This commit is contained in:
郭庆泰
2026-08-20 22:20:53 +08:00
parent 1b35161722
commit c85370d925
+49 -3
View File
@@ -3,7 +3,23 @@
<div class="breadcrumb">首页 / 项目管理</div> <div class="breadcrumb">首页 / 项目管理</div>
<el-form inline :model="q" class="filter-form"> <el-form inline :model="q" class="filter-form">
<el-form-item label="支持单位:"><el-input v-model="q.sponsorOrgName" placeholder="输入支持单位名称" clearable /></el-form-item> <el-form-item label="支持单位:">
<el-select
v-model="q.sponsorAdminUserIds"
multiple
filterable
remote
:remote-method="searchSponsorOrgsForFilter"
:loading="sponsorSearching"
clearable
collapse-tags
collapse-tags-tooltip
placeholder="输入支持单位名称搜索"
style="width:260px"
>
<el-option v-for="o in sponsorOrgOptions" :key="o.userId" :label="o.orgName" :value="o.userId" />
</el-select>
</el-form-item>
<el-form-item label="服务机构:"><el-input v-model="q.execOrgName" placeholder="输入服务机构" clearable /></el-form-item> <el-form-item label="服务机构:"><el-input v-model="q.execOrgName" placeholder="输入服务机构" clearable /></el-form-item>
<el-form-item label="项目编号:"><el-input v-model="q.projectNo" placeholder="输入项目编号" clearable /></el-form-item> <el-form-item label="项目编号:"><el-input v-model="q.projectNo" placeholder="输入项目编号" clearable /></el-form-item>
<el-form-item label="项目名称:"><el-input v-model="q.projectName" placeholder="输入项目名称" clearable /></el-form-item> <el-form-item label="项目名称:"><el-input v-model="q.projectName" placeholder="输入项目名称" clearable /></el-form-item>
@@ -288,7 +304,7 @@ const userStore = useUserStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const q = ref({ sponsorOrgName: '', execOrgName: '', projectNo: '', projectName: '', projectForm: '', startTime: '', endTime: '', isFinished: '', isSettled: '', managerScore: '' }) const q = ref({ sponsorAdminUserIds: [], execOrgName: '', projectNo: '', projectName: '', projectForm: '', startTime: '', endTime: '', isFinished: '', isSettled: '', managerScore: '' })
const rows = ref([]) const rows = ref([])
const loading = ref(false) const loading = ref(false)
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 }) const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })
@@ -338,7 +354,7 @@ async function doDelete(row) {
} }
} }
function reset() { q.value = { sponsorOrgName:'', execOrgName:'', projectNo:'', projectName:'', projectForm:'', startTime:'', endTime:'', isFinished:'', isSettled:'', managerScore:'' }; page.pageNum = 1; load() } function reset() { q.value = { sponsorAdminUserIds:[], execOrgName:'', projectNo:'', projectName:'', projectForm:'', startTime:'', endTime:'', isFinished:'', isSettled:'', managerScore:'' }; page.pageNum = 1; load() }
// 导出 // 导出
function exportProjects() { ElMessage.info('导出项目功能开发中') } function exportProjects() { ElMessage.info('导出项目功能开发中') }
@@ -627,7 +643,10 @@ const assignForm = reactive({
deadlineDays: 30 deadlineDays: 30
}) })
const sponsorOrgOptions = ref([]) const sponsorOrgOptions = ref([])
const sponsorSearching = ref(false)
let _supporterTimer = null let _supporterTimer = null
let _supporterFilterTimer = null
// 已分配场次合计 (实时) // 已分配场次合计 (实时)
const assignedSessions = computed(() => const assignedSessions = computed(() =>
@@ -701,6 +720,33 @@ async function loadSponsorOrgs(query) {
function searchSponsorOrgs(q) { loadSponsorOrgs(q) } function searchSponsorOrgs(q) { loadSponsorOrgs(q) }
// 顶部筛选区远程搜索 (多选 el-select, 复用 sponsorOrgOptions, 加 loading + 已选项重拉回)
function searchSponsorOrgsForFilter(query) {
if (_supporterFilterTimer) clearTimeout(_supporterFilterTimer)
sponsorSearching.value = true
_supporterFilterTimer = setTimeout(async () => {
try {
const params = {}
if (query) params.orgName = query
const r = await listSponsorOrgs(params)
sponsorOrgOptions.value = r.data || []
// 已选项不在结果里时按 userId 单独拉回 (multi-select 必须保证每个已选 tag 都有 label)
const ids = q.value.sponsorAdminUserIds || []
for (const uid of ids) {
if (!sponsorOrgOptions.value.find(u => u.userId === uid)) {
const r2 = await listSponsorOrgs({ userId: uid })
const sel = (r2.data || []).find(u => u.userId === uid)
if (sel) sponsorOrgOptions.value = [sel, ...sponsorOrgOptions.value]
}
}
} catch (e) {
sponsorOrgOptions.value = []
} finally {
sponsorSearching.value = false
}
}, 200)
}
// 选中支持方后回填 user_name (缓存到 biz_project.sponsor_admin_user_name) // 选中支持方后回填 user_name (缓存到 biz_project.sponsor_admin_user_name)
function onSponsorOrgPick(userId) { function onSponsorOrgPick(userId) {
const u = sponsorOrgOptions.value.find(x => x.userId === userId) const u = sponsorOrgOptions.value.find(x => x.userId === userId)