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">
                <li
                  class="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>