Table，vue3在父组件调用子组件columns列的方法展示弹窗文件预览效果

console.log('npc')2025-12-25 23:11

javascript 复制代码

let previewFileHandler: ((record: any) => void) | null = null;

export const columns = [
 
  {
    title: '文件名称',
    dataIndex: 'technicalName',
    width: 180,
    customRender: ({ text, record }) => {
      return h(
        'a',
        {
          style: {
            color: '#1890ff',
            cursor: 'pointer',
            textDecoration: 'underline',
          },
          onClick: (e) => {
            e.stopPropagation();
            // console.log(record, '文件被点击:');
            if (previewFileHandler) {
              previewFileHandler(record);
            } else {
              console.warn('Preview file handler not registered');
            }
            // 预览
          },
        },
        text
      );
    },
  },
  {
    title: '文件分类',
    dataIndex: 'technicalTypeName',
    width: 140,
  },
  
];


export function registerPreviewHandler(handler: (record: any) => void) {
   previewFileHandler = handler;
}

file.data.ts页面

index.vue父组件页面

javascript 复制代码

<templete>
 <PreviewModal @register="registerPreviewModal" />
<templete>

<script name="File" setup>
import {  registerPreviewHandler } from './File.data';
import PreviewModal from './components/PreviewModal.vue';
import {  getViewById } from './sysFileManage.api';
import { useModal } from '/@/components/Modal';

// 注册弹窗
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();

//文件预览
const previewFile = async (record) => {
  try {
    if (!record || !record.id) {
      console.error('找不到该文件或文件ID缺失');
      message.error('文件信息不完整');
      return;
    }
    
    const res = await getViewById({ id: record.id });
  
    
    if (!res.technicalFiles || res.technicalFiles.length === 0) {
      message.warning('该记录没有可预览的文件');
      return;
    }
    
    let validFile = null;
    for (const item of res.technicalFiles) {
      if (item.filePath || item.fileName) {
        validFile = item;
        break;
      }
    }
    
    if (!validFile) {
      message.warning('缺少文件地址,无法预览');
      return;
    }
    
    openPreviewModal(true, {
      technicalFiles: res.technicalFiles,
    });
  } catch (error) {
    console.error('文件预览失败:', error);
    message.error('文件预览失败，请稍后重试');
  }
};



onMounted(() => {
  registerPreviewHandler(previewFile);

});
</script>