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>
|
<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)
|
||||||
|
|||||||
Reference in New Issue
Block a user