From 17ff8a687107538863bbf1066757b8e16b5a3fd7 Mon Sep 17 00:00:00 2001
From: Codewoc <947380458@qq.com>
Date: Mon, 23 Mar 2026 13:58:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(meeting):=20=E6=96=B0=E5=A2=9E=20ExpertSel?=
 =?UTF-8?q?ectTable=20=E4=B8=93=E5=AE=B6=E9=80=89=E6=8B=A9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=9B=BF=E4=BB=A3=20el-select=20=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/review/meeting/MeetingEdit.vue      |  19 +--
 .../meeting/components/ExpertSelectTable.vue  | 149 ++++++++++++++++++
 2 files changed, 153 insertions(+), 15 deletions(-)
 create mode 100644 src/views/review/meeting/components/ExpertSelectTable.vue

diff --git a/src/views/review/meeting/MeetingEdit.vue b/src/views/review/meeting/MeetingEdit.vue
index 5f2ff35c6..44d3f0afc 100644
--- a/src/views/review/meeting/MeetingEdit.vue
+++ b/src/views/review/meeting/MeetingEdit.vue
@@ -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
diff --git a/src/views/review/meeting/components/ExpertSelectTable.vue b/src/views/review/meeting/components/ExpertSelectTable.vue
new file mode 100644
index 000000000..5cafac3b7
--- /dev/null
+++ b/src/views/review/meeting/components/ExpertSelectTable.vue
@@ -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>