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:
@@ -3,7 +3,23 @@
|
||||
<div class="breadcrumb">首页 / 项目管理</div>
|
||||
|
||||
<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.projectNo" 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 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 loading = ref(false)
|
||||
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('导出项目功能开发中') }
|
||||
@@ -627,7 +643,10 @@ const assignForm = reactive({
|
||||
deadlineDays: 30
|
||||
})
|
||||
const sponsorOrgOptions = ref([])
|
||||
const sponsorSearching = ref(false)
|
||||
let _supporterTimer = null
|
||||
let _supporterFilterTimer = null
|
||||
|
||||
|
||||
// 已分配场次合计 (实时)
|
||||
const assignedSessions = computed(() =>
|
||||
@@ -701,6 +720,33 @@ async function loadSponsorOrgs(query) {
|
||||
|
||||
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)
|
||||
function onSponsorOrgPick(userId) {
|
||||
const u = sponsorOrgOptions.value.find(x => x.userId === userId)
|
||||
|
||||
Reference in New Issue
Block a user