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
parent
bc8258a149
commit
17ff8a6871
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue