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