yg-yygl 0.0.1

package/dist/views/sys/msg/components/msg-form.vue

@@ -0,0 +1,959 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { Dialog, Form, RichEditor } from '@udp/component-ui';
+import { useAppConfig } from '@udp/hooks';
+import { useAccessStore } from '@udp/stores';
+import { UdpUpload } from '@udp/ui';
+
+import { Delete, Plus } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import { queryAccountList } from '../../../../api/account';
+import { getDicItemListByDicCode } from '../../../../api/dic';
+import * as MsgApi from '../../../../api/msg';
+import { getCategoryList, getCategoryTree } from '../../../../api/msg';
+import { getRequestClient } from '../../../../api/request';
+import { OrganAccountSelect } from '../../../../components/organ-account-select';
+
+const props = defineProps<{
+  editData?: any;
+}>();
+
+const emit = defineEmits(['success', 'close']);
+const msgTypeList = ref<any[]>([]);
+
+// 所属栏目节点缓存数据
+const categoryNodeCache = ref<any[]>([]);
+
+// 组件状态
+const loading = ref(false);
+const formRef = ref();
+// 代码编辑器相关配置已移除，使用 CodeEditor 组件
+
+// 获取API基础URL和访问令牌
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const accessStore = useAccessStore();
+const uploadUrl = computed(() => `${apiURL}/api/common/upload/file`);
+const accessToken = computed(() => accessStore.accessToken || '');
+
+// 选人相关状态
+const selectUserVisible = ref(false);
+const organAccountSelectRef = ref<typeof OrganAccountSelect>();
+const options = ref<any[]>([]);
+
+// 图片预览相关（已改用 el-image 内置预览）
+// const previewVisible = ref(false);
+// const previewImageUrl = ref('');
+
+// 缩略图 blob URL 管理
+const thumbnailBlobUrl = ref('');
+
+function revokeThumbnailBlob() {
+  if (thumbnailBlobUrl.value) {
+    URL.revokeObjectURL(thumbnailBlobUrl.value);
+    thumbnailBlobUrl.value = '';
+  }
+}
+
+/** 根据文件 ID 获取 blob URL 用于显示 */
+async function fetchThumbnailBlob(id: string) {
+  revokeThumbnailBlob();
+  try {
+    const res = await getRequestClient().get(
+      `/api/common/preview/file?id=${encodeURIComponent(id)}`,
+      { responseType: 'blob', responseReturn: 'raw' },
+    );
+    thumbnailBlobUrl.value = URL.createObjectURL(res.data);
+  } catch {
+    thumbnailBlobUrl.value = '';
+  }
+}
+
+// 保存 bannerShowFlag 的旧值，用于验证失败时恢复
+const previousBannerShowFlag = ref<number>(0);
+
+// 消息表单数据类型定义
+interface MsgFormData {
+  id?: string;
+  msgTitle: string;
+  msgType: string;
+  msgW: number;
+  columnMangerId?: string; // 所属栏目
+  msgContent: string;
+  msgReleaseType: number;
+  msgRange: number;
+  msgIsMustRead?: boolean;
+  msgCron?: string;
+  options: string[];
+  thumbnailUrl: string;
+  isSmsNotice?: number; // 是否短信通知 0否 1是 默认否
+  pinToTop?: number; // 是否置顶 0否 1是
+  bannerShowFlag?: number; // 是否轮播图显示 0否 1是
+}
+
+const formData = ref<MsgFormData>({
+  id: undefined,
+  msgTitle: '',
+  msgType: '001',
+  msgW: 0,
+  columnMangerId: undefined,
+  msgContent: '',
+  msgReleaseType: 1,
+  msgRange: 1,
+  msgIsMustRead: undefined,
+  msgCron: undefined,
+  options: [],
+  thumbnailUrl: '',
+  isSmsNotice: 0, // 默认否
+  pinToTop: 0, // 默认否
+  bannerShowFlag: 0, // 默认否
+});
+
+// 加载栏目树数据
+const loadCategoryNode = (node: any, resolve: (data: any[]) => void) => {
+  // 根据节点级别选择API调用：根节点加载顶级栏目，子节点加载对应子栏目
+  const apiCall =
+    node.level === 0
+      ? getCategoryTree({ id: null })
+      : getCategoryList({ parentId: node.data?.id });
+
+  apiCall
+    .then((res) => {
+      const filteredData =
+        res?.length > 0
+          ? res.map((item: any) => ({
+              id: item.id || item.columnId,
+              columnName: item.columnName || item.name,
+              isLeaf: !item.hasChild,
+              ...item,
+            }))
+          : [];
+      resolve(filteredData);
+    })
+    .catch(() => {
+      resolve([]);
+    });
+};
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'msgTitle',
+    label: '标题',
+    type: 'input',
+    required: true,
+    placeholder: '请输入标题',
+    gridCols: 1,
+    rules: [
+      { required: true, message: '请输入消息标题', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 60,
+        message: '消息标题长度应在 2-60 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'msgType',
+    label: '消息类型',
+    type: 'select',
+    required: true,
+    placeholder: '请选择消息类型',
+    options: msgTypeList,
+    // options: [
+    //   { label: '通知', value: 1 },
+    //   { label: '公告', value: 2 },
+    //   { label: '图片新闻', value: 3 },
+    //   { label: '小黑板', value: 4 },
+    //   { label: '电信信息', value: 5 },
+    //   { label: '决策参考', value: 6 },
+    //   { label: '待办', value: 7 },
+    //   { label: '已办', value: 8 },
+    // ],
+    rules: [{ required: true, message: '请选择消息类型', trigger: ['change'] }],
+  },
+  {
+    prop: 'msgW',
+    label: '权重',
+    type: 'number',
+    required: false,
+    placeholder: '请输入权重',
+    props: {
+      min: 1,
+      max: 9999,
+    },
+    rules: [
+      {
+        type: 'number',
+        min: 1,
+        max: 9999,
+        message: '排序号应在 1-9999 之间',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  // {
+  //   prop: 'columnMangerId',
+  //   label: '所属栏目',
+  //   required: false,
+  //   type: 'tree-select',
+  //   placeholder: '请选择所属栏目',
+  //   slot: 'columnMangerId',
+  //   rules: [{ required: false, message: '请选择所属栏目', trigger: 'change' }],
+  // },
+  {
+    prop: 'msgContent',
+    label: '正文',
+    required: false,
+    gridCols: 1,
+    // rules: [{ required: true, message: '正文不能为空', trigger: ['blur', 'input'] }],
+    slot: 'content',
+  },
+  {
+    prop: 'thumbnailUrl',
+    label: '缩略图',
+    required: true,
+    gridCols: 1,
+    slot: 'thumbnailUrl',
+    rules: [
+      { required: true, message: '请上传缩略图', trigger: ['blur', 'change'] },
+    ],
+  },
+  {
+    prop: 'msgReleaseType',
+    label: '发送方式',
+    type: 'radio',
+    required: true,
+    gridCols: 1,
+    options: [
+      { label: '实时发送', value: 1 },
+      { label: '定时发送', value: 2 },
+    ],
+    rules: [
+      { required: true, message: '发送方式不能为空', trigger: ['change'] },
+    ],
+  },
+  {
+    prop: 'msgCron',
+    label: '定时发送',
+    type: 'datetime',
+    required: false,
+    gridCols: 1,
+    placeholder: '请选择发送时间',
+    props: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    condition: (formData: any) => formData.msgReleaseType === 2,
+    rules: [
+      {
+        required: true,
+        validator: (rule: any, value: any, callback: any) => {
+          if (formData.value.msgReleaseType === 2 && !value) {
+            callback(new Error('定时发送时必须选择发送时间'));
+          } else {
+            callback();
+          }
+        },
+        trigger: ['change', 'blur'],
+      },
+    ],
+  },
+  {
+    prop: 'msgRange',
+    label: '通知范围',
+    type: 'radio',
+    required: true,
+    gridCols: 1,
+    options: [
+      { label: '全部通知', value: 1 },
+      { label: '部分通知', value: 2 },
+    ],
+    rules: [
+      { required: true, message: '通知范围不能为空', trigger: ['change'] },
+    ],
+  },
+  {
+    prop: 'isSmsNotice',
+    label: '短信通知',
+    type: 'radio',
+    required: false,
+    gridCols: 1,
+    options: [
+      { label: '否', value: 0 },
+      { label: '是', value: 1 },
+    ],
+  },
+  {
+    prop: 'pinToTop',
+    label: '置顶',
+    type: 'radio',
+    required: false,
+    gridCols: 1,
+    options: [
+      { label: '否', value: 0 },
+      { label: '是', value: 1 },
+    ],
+  },
+  {
+    prop: 'bannerShowFlag',
+    label: '轮播图显示',
+    type: 'radio',
+    required: false,
+    gridCols: 1,
+    options: [
+      { label: '否', value: 0 },
+      { label: '是', value: 1 },
+    ],
+  },
+  // {
+  //   prop: 'msgIsMustRead',
+  //   label: '是否必读',
+  //   type: 'switch',
+  //   gridCols: 1,
+  //   props: {
+  //     'inline-prompt': true,
+  //     activeText: '是',
+  //     inactiveText: '否',
+  //     activeValue: 1,
+  //     inactiveValue: 0,
+  //   },
+  //   rules: [
+  //     { required: true, message: '是否必读不能为空', trigger: ['change'] },
+  //   ],
+  // },
+  {
+    prop: 'selectedUsers',
+    label: '通知人员',
+    gridCols: 1,
+    condition: (formData: any) => formData.msgRange === 2,
+    slot: 'selectedUsers',
+    rules: [
+      {
+        required: true,
+        validator: (rule: any, value: any, callback: any) => {
+          if (formData.value.msgRange === 2 && options.value.length === 0) {
+            callback(new Error('部分通知时必须选择通知人员'));
+          } else {
+            callback();
+          }
+        },
+        trigger: ['change', 'blur'],
+      },
+    ],
+  },
+]);
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      ElMessage.error('请检查表单数据');
+      return false;
+    }
+
+    // API调用前转换数据类型
+    const submitData = {
+      ...formData.value,
+      // 富文本内容：blob URL → ID 引用，用于保存到后端
+      msgContent:
+        richEditorRef.value?.getContentForSave?.() ?? formData.value.msgContent,
+    };
+
+    // 调试日志：检查msgContent是否有值
+    console.log('提交数据:', submitData);
+    console.log('msgContent值:', submitData.msgContent);
+
+    // API调用
+    if (formData.value.id) {
+      await MsgApi.updateMsg(submitData);
+      ElMessage.success('修改成功!');
+    } else {
+      await MsgApi.createMsg(submitData);
+      ElMessage.success('新增成功!');
+    }
+
+    emit('success');
+    return true;
+  } catch {
+    ElMessage.error('提交失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/**
+ * 验证轮播图显示标志
+ * 当用户尝试将 bannerShowFlag 改为"是"时，需要验证当前轮播图数量是否超过限制
+ */
+const validateBannerShowFlag = async (newValue: number): Promise<boolean> => {
+  // 如果改为"否"，无需验证
+  if (newValue === 0) {
+    return true;
+  }
+
+  // 如果改为"是"，需要调用接口验证
+  try {
+    const count = await MsgApi.listCount({ bannerShowFlag: 1 });
+    if (count >= 5) {
+      ElMessage.warning('轮播图数量已达到上限（5个），无法再设置为轮播图显示');
+      return false;
+    }
+    return true;
+  } catch (error) {
+    console.error('查询轮播图数量失败:', error);
+    ElMessage.error('查询轮播图数量失败，请稍后重试');
+    return false;
+  }
+};
+
+const handleFieldChange = async (prop: string, value: any) => {
+  // 特殊处理：验证 bannerShowFlag 字段
+  // if (prop === 'bannerShowFlag') {
+  //   const isValid = await validateBannerShowFlag(value);
+  //   if (!isValid) {
+  //     // 验证失败，恢复旧值
+  //     nextTick(() => {
+  //       formData.value.bannerShowFlag = previousBannerShowFlag.value;
+  //     });
+  //     return;
+  //   }
+  //   // 验证成功，更新旧值
+  //   previousBannerShowFlag.value = value;
+  // }
+
+  // 更新表单数据（使用类型断言避免TypeScript错误）
+  (formData.value as any)[prop] = value;
+
+  // 使用nextTick确保DOM更新后再清除验证
+  nextTick(() => {
+    if (
+      formRef.value &&
+      value !== undefined &&
+      value !== null &&
+      value !== ''
+    ) {
+      formRef.value.clearValidate(prop);
+    }
+  });
+};
+
+// 处理富文本编辑器内容变化
+const handleContentChange = (value: string) => {
+  formData.value.msgContent = value;
+  // 手动触发表单字段变化事件
+  handleFieldChange('msgContent', value);
+};
+
+// 缩略图上传：通过 UdpUpload 组件的 @success 事件处理
+const thumbnailRequestFn = (url: string, data: any, config: any) =>
+  getRequestClient().post(url, data, config);
+
+const thumbnailUploadRef = ref<InstanceType<typeof UdpUpload>>();
+const richEditorRef = ref<InstanceType<typeof RichEditor>>();
+
+/** 富文本编辑器：文件预览函数（fileId → blob URL） */
+const richEditorPreviewFn = async (fileId: string): Promise<string> => {
+  const res = await getRequestClient().get(
+    `/api/common/preview/file?id=${encodeURIComponent(fileId)}`,
+    { responseType: 'blob', responseReturn: 'raw' },
+  );
+  return URL.createObjectURL(res.data);
+};
+
+const handleThumbnailSuccess = (fileInfo: any) => {
+  const fileId = fileInfo.id;
+  if (!fileId) return;
+
+  formData.value.thumbnailUrl = fileId;
+  fetchThumbnailBlob(fileId);
+  handleFieldChange('thumbnailUrl', fileId);
+  ElMessage.success('缩略图上传成功');
+};
+
+// 旧方式：上传失败回调（UdpUpload 内部 useUpload 已处理）
+// const handleThumbnailError = (error: any, file: any) => { ... };
+
+// 旧方式：处理预览图片点击（已改用 el-image 内置预览）
+// const handlePreviewImage = () => {
+//   if (thumbnailBlobUrl.value) {
+//     previewImageUrl.value = thumbnailBlobUrl.value;
+//     previewVisible.value = true;
+//   }
+// };
+
+// 旧方式：上传前验证（UdpUpload 内部 useUpload 已通过 maxSize + accept 处理）
+// const beforeThumbnailUpload = (file: any) => {
+//   const isImage = file.type.startsWith('image/');
+//   const isLt5M = file.size / 1024 / 1024 < 5;
+//   if (!isImage) { ElMessage.error('只能上传图片文件!'); return false; }
+//   if (!isLt5M) { ElMessage.error('图片大小不能超过 5MB!'); return false; }
+//   return true;
+// };
+
+// 选人相关方法
+const handleSelectUser = () => {
+  selectUserVisible.value = true;
+};
+
+const handleSelectUserConfirm = async () => {
+  try {
+    const selections = organAccountSelectRef.value?.selections() || [];
+    // 确保每个用户对象包含必要的字段
+    options.value = selections.map((user: any) => ({
+      id: user.id,
+      nickname: user.nickname || user.name || user.username,
+      logincode: user.logincode || user.code,
+      departFullName: user.departFullName || user.departmentName || '',
+    }));
+    formData.value.options = options.value.map((user: any) => user.id);
+    selectUserVisible.value = false;
+
+    // 清除验证错误
+    nextTick(() => {
+      formRef.value?.clearValidate('selectedUsers');
+    });
+  } catch (error) {
+    console.error('选择用户失败:', error);
+  }
+};
+
+const handleRemoveUser = (userId: string) => {
+  options.value = options.value.filter((user) => user.id !== userId);
+  formData.value.options = options.value.map((user: any) => user.id);
+};
+
+const handleCancel = () => {
+  ElMessage.info('取消操作');
+  emit('close');
+  return true;
+};
+
+// 重置表单数据
+const resetForm = () => {
+  // 清理缩略图 blob URL
+  revokeThumbnailBlob();
+
+  // 完全重置表单数据
+  formData.value = {
+    id: undefined,
+    msgTitle: '',
+    msgType: '001',
+    msgW: 0,
+    columnMangerId: undefined,
+    msgContent: '',
+    msgReleaseType: 1,
+    msgRange: 1,
+    msgIsMustRead: undefined,
+    msgCron: undefined,
+    options: [],
+    thumbnailUrl: '', // 也要重置缩略图
+    isSmsNotice: 0, // 重置为默认否
+    pinToTop: 0, // 重置为默认否
+    bannerShowFlag: 0, // 重置为默认否
+  };
+
+  // 重置选中用户
+  options.value = [];
+  // 重置栏目缓存
+  categoryNodeCache.value = [];
+  // 重置 bannerShowFlag 旧值
+  previousBannerShowFlag.value = 0;
+
+  // 清除表单验证
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+};
+
+// 缩略图回显
+const restoreThumbnail = (thumbnailUrl: string) => {
+  if (!thumbnailUrl) return;
+  if (thumbnailUrl.startsWith('http')) {
+    thumbnailBlobUrl.value = thumbnailUrl;
+  } else {
+    fetchThumbnailBlob(thumbnailUrl);
+  }
+};
+
+// 预加载栏目信息用于回显
+const loadCategoryCache = async (columnMangerId: string) => {
+  try {
+    const categoryData = await getCategoryTree({ id: columnMangerId });
+    if (categoryData && categoryData.length > 0) {
+      const category = categoryData[0];
+      categoryNodeCache.value = [
+        {
+          id: category.id || category.columnId,
+          columnName: category.columnName || category.name,
+          isLeaf: !category.hasChild,
+        },
+      ];
+    }
+  } catch (error) {
+    console.error('加载栏目信息失败:', error);
+  }
+};
+
+// 初始化选中用户
+const restoreSelectedUsers = async (data: any) => {
+  if (data.selectedUsers && data.selectedUsers.length > 0) {
+    options.value = data.selectedUsers.map((user: any) => ({
+      id: user.id,
+      nickname: user.nickname || user.name || user.username,
+      logincode: user.logincode || user.code,
+      departFullName: user.departFullName || user.departmentName || '',
+    }));
+    return;
+  }
+
+  if (data.msgOptions && data.msgOptions.length > 0) {
+    try {
+      const accountIds = Array.isArray(data.msgOptions)
+        ? data.msgOptions
+        : data.msgOptions.split(',');
+      const accountList = await queryAccountList({
+        accountIds,
+      } as any);
+
+      options.value = accountList.map((account: any) => ({
+        id: account.id,
+        nickname: account.nickname || account.loginCode,
+        logincode: account.loginCode,
+        departFullName: account.departFullName || account.departmentName || '',
+      }));
+
+      formData.value.options = accountIds;
+    } catch (error) {
+      console.error('查询用户信息失败:', error);
+    }
+  }
+};
+
+// 初始化表单数据
+const initFormData = async (data?: any) => {
+  if (!data?.id) {
+    resetForm();
+    return;
+  }
+
+  formData.value = {
+    id: data.id || undefined,
+    msgTitle: data.msgTitle || '',
+    msgType: data.msgType || '001',
+    msgW: data.msgW || 0,
+    columnMangerId: data.columnMangerId || undefined,
+    msgContent: data.msgContent || '',
+    msgReleaseType: data.msgReleaseType || 1,
+    msgRange: data.msgRange || 1,
+    msgIsMustRead: data.msgIsMustRead ?? false,
+    msgCron: data.msgCron || undefined,
+    options: data.selectedUserIds || data.msgOptions || [],
+    thumbnailUrl: data.thumbnailUrl || '',
+    isSmsNotice: data.isSmsNotice ?? 0,
+    pinToTop: data.pinToTop ?? 0,
+    bannerShowFlag: data.bannerShowFlag ?? 0,
+  };
+
+  restoreThumbnail(data.thumbnailUrl);
+  previousBannerShowFlag.value = data.bannerShowFlag ?? 0;
+
+  if (data.columnMangerId) {
+    await loadCategoryCache(data.columnMangerId);
+  }
+
+  await restoreSelectedUsers(data);
+};
+
+const open = async (id?: string) => {
+  // 如果有editData，先用行内数据初始化表单
+  if (props.editData) {
+    initFormData(props.editData);
+  } else {
+    resetForm();
+  }
+
+  // 如果有ID，调用API获取富文本内容
+  if (id) {
+    loading.value = true;
+    try {
+      const res = await MsgApi.getMsgDetail(id);
+
+      // 富文本内容存储在detail字段中
+      // 使用类型断言，因为TypeScript类型定义中可能没有包含detail字段
+      const apiResponse = res as any;
+      if (
+        apiResponse &&
+        apiResponse.detail !== undefined &&
+        apiResponse.detail !== null
+      ) {
+        // 富文本回显：将 ID 引用转为 blob URL，图片才能在编辑器里显示
+        if (richEditorRef.value) {
+          await richEditorRef.value.setPreviewContent(apiResponse.detail);
+        } else {
+          formData.value.msgContent = apiResponse.detail;
+        }
+      }
+    } catch {
+      // 错误处理已在请求客户端中统一处理
+    } finally {
+      loading.value = false;
+    }
+  }
+};
+const loadMsgTypeList = () => {
+  getDicItemListByDicCode({ dicCode: 'msgType', dicAttr: 'base' }).then(
+    (res) => {
+      msgTypeList.value = res.map((item: any) => ({
+        label: item.itemValue,
+        value: item.itemCode,
+      }));
+    },
+  );
+  console.log(msgTypeList.value, 6666);
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  async (newData) => {
+    await initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+// 组件卸载时清理 blob URL
+onBeforeUnmount(() => {
+  revokeThumbnailBlob();
+});
+
+// 生命周期
+onMounted(() => {
+  loadMsgTypeList();
+  // 初始化数据已在watch中处理
+});
+
+defineExpose({
+  handleSubmit,
+  handleCancel,
+  resetForm,
+  initFormData,
+  open,
+});
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItems"
+    v-model="formData"
+    :show-actions="false"
+    label-width="auto"
+    :use-grid="true"
+    :grid-cols="2"
+    :grid-gutter="20"
+    @submit="handleSubmit"
+    @field-change="handleFieldChange"
+  >
+    <template #columnMangerId="{ model }">
+      <el-tree-select
+        v-model="model.columnMangerId"
+        lazy
+        clearable
+        :load="loadCategoryNode"
+        node-key="id"
+        check-strictly
+        :cache-data="categoryNodeCache"
+        :show-arrow="false"
+        :props="{
+          children: 'children',
+          label: 'columnName',
+          value: 'id',
+          isLeaf: 'isLeaf',
+        }"
+        @change="handleFieldChange('columnMangerId', $event)"
+      />
+    </template>
+
+    <template #content>
+      <RichEditor
+        ref="richEditorRef"
+        v-model="formData.msgContent"
+        height="300px"
+        :read-only="false"
+        :upload-url="uploadUrl"
+        :access-token="accessToken"
+        :preview-fn="richEditorPreviewFn"
+        @update:model-value="handleContentChange"
+      />
+    </template>
+
+    <template #thumbnailUrl>
+      <UdpUpload
+        ref="thumbnailUploadRef"
+        class="upload-thumbnail"
+        :request-fn="thumbnailRequestFn"
+        :max-size="5"
+        accept="image/*"
+        :show-file-list="false"
+        :show-success-message="false"
+        @success="handleThumbnailSuccess"
+      >
+        <el-image
+          v-if="thumbnailBlobUrl"
+          :src="thumbnailBlobUrl"
+          class="thumbnail-image"
+          fit="cover"
+          :preview-src-list="[thumbnailBlobUrl]"
+          preview-teleported
+          @click.stop
+        />
+        <el-icon v-else class="thumbnail-placeholder">
+          <Plus />
+        </el-icon>
+
+        <!-- 悬浮操作按钮 -->
+        <div v-if="thumbnailBlobUrl" class="avatar-overlay">
+          <div class="flex gap-3">
+            <el-icon
+              class="action-btn"
+              @click.stop="
+                formData.thumbnailUrl = '';
+                revokeThumbnailBlob();
+                thumbnailUploadRef?.clearFiles();
+              "
+            >
+              <Delete />
+            </el-icon>
+          </div>
+        </div>
+      </UdpUpload>
+    </template>
+
+    <template #selectedUsers>
+      <div class="flex flex-col gap-3">
+        <el-button type="primary" @click="handleSelectUser">
+          选择人员
+        </el-button>
+        <div v-if="options.length > 0" class="mt-2 flex flex-wrap gap-2">
+          <el-tag
+            v-for="user in options"
+            :key="user.id"
+            closable
+            @close="handleRemoveUser(user.id)"
+            class="mb-1 mr-2"
+            :title="`${user.nickname || user.logincode} (${user.departFullName})`"
+          >
+            {{ user.nickname || user.logincode }}
+            <span v-if="user.departFullName" class="ml-1 text-xs text-gray-600">
+              ({{ user.departFullName }})
+            </span>
+          </el-tag>
+        </div>
+        <div v-else class="mt-2 text-sm text-gray-600">暂未选择人员</div>
+      </div>
+    </template>
+  </Form>
+
+  <!-- 选人弹窗 -->
+  <Dialog
+    v-model="selectUserVisible"
+    title="选择通知人员"
+    icon="mdi:user-group"
+    width="800px"
+    @confirm="handleSelectUserConfirm"
+  >
+    <OrganAccountSelect
+      ref="organAccountSelectRef"
+      :has-tab="true"
+      :select-list="options"
+    />
+  </Dialog>
+
+  <!-- 旧方式：图片预览对话框（已改用 el-image 内置预览）
+  <Dialog
+    v-model="previewVisible"
+    title="图片预览"
+    icon="mdi:image"
+    width="60%"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="p-5 text-center">
+      <el-image
+        :src="previewImageUrl"
+        fit="contain"
+        class="w-full rounded-lg shadow-lg"
+        :preview-src-list="[previewImageUrl]"
+        :initial-index="0"
+        preview-teleported
+      />
+    </div>
+  </Dialog>
+  -->
+</template>
+
+<style scoped lang="scss">
+/* 缩略图上传容器 */
+.upload-thumbnail {
+  @apply relative cursor-pointer overflow-hidden rounded-md border border-dashed border-gray-300 transition-all duration-200;
+  width: 120px;
+  height: 65px;
+
+  &:hover {
+    @apply border-primary;
+  }
+}
+
+/* 缩略图图片 */
+.thumbnail-image {
+  @apply block cursor-pointer object-cover;
+  width: 120px;
+  height: 65px;
+}
+
+/* 缩略图占位符 */
+.thumbnail-placeholder {
+  @apply flex items-center justify-center text-center text-2xl text-gray-500;
+  width: 120px;
+  height: 65px;
+}
+
+/* 悬浮操作蒙版 - 复杂动画效果使用SCSS */
+.avatar-overlay {
+  @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0;
+  transition: opacity 0.3s ease;
+}
+
+.upload-thumbnail:hover .avatar-overlay {
+  @apply opacity-100;
+}
+
+.action-btn {
+  @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white bg-opacity-80 text-gray-800;
+  transition: all 0.3s ease;
+
+  &:hover {
+    @apply scale-110 transform bg-white;
+  }
+
+  .el-icon {
+    @apply text-base;
+  }
+}
+</style>