feat(meeting): 新增 ExpertSelectTable 专家选择组件,替代 el-select 多选

- 新增 components/ExpertSelectTable.vue
- 支持搜索(姓名/单位/职称)+ 表格勾选 + 已选标签展示
- v-model 兼容,disabled 时仅展示已选列表
- MeetingEdit.vue 中用 ExpertSelectTable 替换原 el-select multiple

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/874/head
Codewoc 2026-03-23 13:58:19 +08:00
parent bc8258a149
commit 17ff8a6871
2 changed files with 153 additions and 15 deletions

View File

@ -94,21 +94,11 @@
<el-row :gutter="16">
<el-col :span="24">
<el-form-item label="参会专家" prop="expertIds">
<el-select
<ExpertSelectTable
v-model="formData.expertIds"
multiple
filterable
placeholder="请选择参会专家"
style="width: 100%"
:experts="expertOptions"
:disabled="isView"
>
<el-option
v-for="expert in expertOptions"
:key="expert.id"
:label="expertLabel(expert)"
:value="expert.id"
/>
</el-select>
/>
</el-form-item>
</el-col>
</el-row>
@ -168,6 +158,7 @@ import {
} from '@/api/review/meeting'
import { getExpertUserList } from '@/api/system/user/index'
import download from '@/utils/download'
import ExpertSelectTable from './components/ExpertSelectTable.vue'
defineOptions({ name: 'ReviewMeetingEdit' })
@ -224,8 +215,6 @@ const rules: FormRules = {
}
const formRef = ref()
const expertLabel = (e: any) =>
`${e.nickname}${e.title ? `${e.title}` : ''}${e.deptName ? ` ${e.deptName}` : ''}`
const loadDetail = async (id: number) => {
formLoading.value = true

View File

@ -0,0 +1,149 @@
<template>
<div class="expert-select-wrap">
<!-- 已选标签行 -->
<div v-if="selectedExperts.length > 0" class="selected-row">
<span class="selected-label">已选 {{ selectedExperts.length }} </span>
<el-tag
v-for="expert in selectedExperts"
:key="expert.id"
closable
:disable-transitions="false"
class="expert-tag"
@close="removeExpert(expert.id)"
>
{{ expert.nickname }}
</el-tag>
</div>
<!-- 搜索框 -->
<el-input
v-if="!disabled"
v-model="searchKeyword"
placeholder="搜索姓名、单位、职称"
clearable
class="search-input"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<!-- 专家表格 -->
<el-table
v-if="!disabled"
ref="tableRef"
:data="filteredExperts"
border
size="small"
max-height="300"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="姓名" prop="nickname" width="100" />
<el-table-column label="单位" prop="deptName" show-overflow-tooltip />
<el-table-column label="职称" prop="title" width="120" show-overflow-tooltip />
</el-table>
<!-- 查看模式仅展示已选专家列表 -->
<el-table v-if="disabled && selectedExperts.length > 0" :data="selectedExperts" border size="small">
<el-table-column label="姓名" prop="nickname" width="100" />
<el-table-column label="单位" prop="deptName" show-overflow-tooltip />
<el-table-column label="职称" prop="title" width="120" show-overflow-tooltip />
</el-table>
<el-empty v-if="disabled && selectedExperts.length === 0" description="暂无参会专家" :image-size="60" />
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
interface Expert {
id: number
nickname: string
deptName?: string
title?: string
}
const props = defineProps<{
modelValue: number[]
experts: Expert[]
disabled?: boolean
}>()
const emit = defineEmits<{
(e: 'update:modelValue', val: number[]): void
}>()
const tableRef = ref()
const searchKeyword = ref('')
const filteredExperts = computed(() => {
const kw = searchKeyword.value.trim().toLowerCase()
if (!kw) return props.experts
return props.experts.filter(
(e) =>
e.nickname?.toLowerCase().includes(kw) ||
e.deptName?.toLowerCase().includes(kw) ||
e.title?.toLowerCase().includes(kw)
)
})
const selectedExperts = computed(() =>
props.experts.filter((e) => props.modelValue.includes(e.id))
)
//
watch(
() => props.modelValue,
async () => {
await nextTick()
if (!tableRef.value) return
tableRef.value.clearSelection()
filteredExperts.value.forEach((row) => {
if (props.modelValue.includes(row.id)) {
tableRef.value.toggleRowSelection(row, true)
}
})
},
{ immediate: true }
)
const handleSelectionChange = (selected: Expert[]) => {
const selectedIds = selected.map((e) => e.id)
//
const filteredIds = filteredExperts.value.map((e) => e.id)
const keptIds = props.modelValue.filter((id) => !filteredIds.includes(id))
emit('update:modelValue', [...new Set([...keptIds, ...selectedIds])])
}
const removeExpert = (id: number) => {
emit('update:modelValue', props.modelValue.filter((v) => v !== id))
}
</script>
<style scoped>
.expert-select-wrap {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.selected-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.selected-label {
font-size: 13px;
color: var(--el-text-color-secondary);
white-space: nowrap;
}
.expert-tag {
margin: 0;
}
.search-input {
max-width: 320px;
}
</style>