el-draw的文件列表和清单内容布局实现

效果：左中右布局:左侧是清单内容，中间是清单的文件列表，点击文件列表可以预览文件详情，右侧是文件预览效果

el-draw部分：

 <el-drawer :title="showPdfViewer.title" :close-on-click-modal="false" v-model="showPdfViewer.visible" size="100%" append-to-body><div class="shenpi-content"><el-card shadow="hover" style="width: 25%; margin-right: 10px; "><template #header><span style="color: #409EFF;">备案信息</span></template><div class="shenpi-form"><el-form ref="beianShenpiFormRef" :model="form" :rules="rules" label-width="100px"><el-form-item label="技术名称" prop="techName">{{form.techName}}</el-form-item><!--            <el-form-item label="医院名称" prop="hospName">--><!--              {{form.hospName}}--><!--            </el-form-item>--><el-form-item label="申请类型" prop="shenqingLeixing">{{ CaoZuoLeiXingLabelMap[form.shenqingLeixing]  }}</el-form-item><el-form-item label="申请人姓名" prop="shenqingren">{{form.shenqingren}}</el-form-item><el-form-item label="申请日期" prop="shenqingRiqi">{{form.shenqingRiqi}}</el-form-item><el-form-item label="审批人" prop="shenpiRen">{{form.shenqingRiqi}}</el-form-item><el-form-item label="审批时间" prop="shenpiShijian">{{form.shenpiShijian}}</el-form-item><el-form-item label="状态" prop="zhuangtai"><el-tag v-if="form.zhuangtai == '1'" type="warning" effect="light">待审批</el-tag><el-tag v-if="form.zhuangtai == '2'" type="success" effect="light">审批通过</el-tag><el-tag v-if="form.zhuangtai == '3'" type="danger" effect="light">审批驳回</el-tag></el-form-item><el-form-item label="备注" prop="remark">{{form.remark}}</el-form-item><el-form-item label="审批意见" prop="shenpiYijian"><el-input type="textarea" :disabled="form.zhuangtai!=1" :rows="5" v-model="form.shenpiYijian"></el-input></el-form-item><el-form-item label="操作" v-if="form.zhuangtai == '1'"><el-row :gutter="10" style="display: flex; align-items: center;"><el-col :span="12"><el-button type="primary" @click="shenpiTongGuo()" style="width: 100%;">审批通过</el-button></el-col><el-col :span="12"><el-button type="warning" @click="shenpiBohui()" style="width: 100%;">审批驳回</el-button></el-col></el-row></el-form-item></el-form></div></el-card><el-card shadow="hover" style="width:28%; margin-right: 10px;" ><template #header><span style="color: #409EFF;">附件列表</span></template><div class="shenpi-fujians"><div class="file-list" style="max-height: 700px; overflow-y: auto;"><ul class="file-list-ul"><liclass="file-list-item":class="{ selected: showPdfViewer.ossId === item.ossId }":key="item.ossId"@click="handleShowPdfViewer(item)"v-for="item in beianFiles"><span v-if="item.shenQingLeiXing" style="color: red">【{{ CaoZuoLeiXingLabelMap[item.shenQingLeiXing]}}】</span>{{ item.detptAndRenYuanName ? '(' + item.detptAndRenYuanName + ')' + item.cailiaoMingcheng : item.cailiaoMingcheng }}</li></ul></div></div></el-card><div style="height: 100%;width: 70%;" v-if="showPdfViewer.ossId"><oss-pdf-viewer v-if="showPdfViewer.visible" :oss-id="showPdfViewer.ossId"></oss-pdf-viewer></div></div></el-drawer>

style部分：

<style lang="scss">
.shenpi-content {height: 100%;display: flex;gap: 10px;// 表单.shenpi-form {display: flex;}// 附件列表.shenpi-fujians {display: flex;margin-left: 20px;width: 100%;}
}
// 文件列表
.file-list-ul {list-style: none;padding: 0;margin: 0;width: 300px;.file-list-item {width: 100%;padding: 10px;margin-bottom: 5px;background-color: #f9f9f9;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;font-size: 14px;&:hover {background-color: #e0e0e0;}&.selected {background-color: #d1e7dd; /* 选中时的背景颜色 */font-weight: bold; /* 选中时的字体加粗 */}}
}
</style>

 pdf组件预览组件：

proxy?.$download.ossBlod(props.ossId)替换成自己的实际下载方法就行返回Promise<Blob>，我用的是若依框架

预览组件：

<template><!--  {{pdfUrl}}--><iframe :src="pdfUrl" style="border: none; width: 100%; height: 100%;"></iframe><!--    <pdf-viewer :pdf-url="pdfUrl"></pdf-viewer>-->
</template><script setup name="OssPdfViewer" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({ossId: {type: [String , Number],required: true,},
});
const pdfUrl = ref('')
const handleDownload = () => {proxy?.$download.ossBlod(props.ossId).then(data=>{const blob = new Blob([data],{type:'application/pdf'})let url = window.URL.createObjectURL(blob)pdfUrl.value = url})
}
watch(()=>props.ossId,()=>{handleDownload()
})onMounted(()=>{handleDownload()
})
</script>