FileManagerUI/src/views/h5/filelist/index.vue

<template>
  <div class="content">
    <van-sticky :offset-top="0">
      <van-nav-bar title="项目文件" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="filterclick"> </van-nav-bar>
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell-group v-for="item in list" :key="item" inset style="margin-top: 10px">
          <van-cell @click="previewfile(item)">
            <div style="display: flex;justify-content: space-between;">
              <div style="display: flex;">
                <img style="width: 25px;height:25px" :src="gettypeicon(item.fileSuffix)" />
                <div style="max-width: 50vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">{{ item.originalName }}</div>
              </div>
              <div style="font-size: 10px;">
                {{ item.createTime }}
              </div>
            </div>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>

    <el-dialog v-model="pdfviewshow" :title="`文件预览`" width="90vw">
      <div style="position: relative;min-height:78vh">
        <pdfview :src="currentfile.url"></pdfview>
      </div>
      <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
      </div> -->

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pdfviewshow = false">关闭</el-button>

          <el-button v-hasPermi="['filemanager.project.file.download']" type="primary" @click="downloadfile(currentfile)"> 下载 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {
  listArchives,
  addArchives,
  updateArchives,
  delArchives,
  getArchive_files,
  saveArchive_files
} from "@/api/archives/index";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_area, sys_project_status } = toRefs<any>(
  proxy?.useDict("sys_area", "sys_project_status")
);
import { listByIds,delOss } from "@/api/system/oss";
import _ from "lodash";
const list = ref([]);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const router = useRouter();
const route = useRoute();

const currentfile = ref({ url: "" })
const pdfviewshow = ref(false);

const onClickLeft = () => {
  router.replace({ path: '/h5/project' });
}

onMounted(() => {
  if (route.query.id == undefined) {
    router.replace({ path: '/h5/project' });
  }
})

const onLoad = () => {
  getArchive_files(route.query.id).then((res) => {
    loading.value = false;
     list.value = res.data
     finished.value = true;
  });
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  refreshing.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const previewfile = (file) => {
  currentfile.value = file;
   listByIds(file.ossId).then((res) => {
    currentfile.value.url = res.data[0].url;
    pdfviewshow.value = true;
  });
}
const downloadfile = (file) => {
   proxy?.$download.oss(file.ossId)
}


import txticon from '@/assets/icons/svg/txt.svg'
import picicon from '@/assets/icons/svg/pic.svg'
import pdficon from '@/assets/icons/svg/pdf1.svg'
import docicon from '@/assets/icons/svg/doc.svg'
import xlsicon from '@/assets/icons/svg/xls.svg'
import ppticon from '@/assets/icons/svg/ppt.svg'
import mp4icon from '@/assets/icons/svg/mp4.svg'
import cadicon from '@/assets/icons/svg/cad.svg'
import unknownicon from '@/assets/icons/svg/unknown.svg'

const gettypeicon = (type) => {
  if (type.indexOf('png') != -1 || type.indexOf('jp') != -1) {
    return picicon;
  }
  if (type.indexOf('ppt') != -1 ) {
    return ppticon;
  }
   if (type.indexOf('xl') != -1 ) {
    return xlsicon;
   }
   if (type.indexOf('doc') != -1 ) {
    return docicon;
   }
  if (type.indexOf('txt') != -1 ) {
    return txticon;
  }
  if (type.indexOf('ca') != -1 ) {
    return cadicon;
  }
  if (type.indexOf('mp4') != -1 ) {
    return mp4icon;
  }
  if (type.indexOf('pdf') != -1 ) {
    return pdficon;
  }
  return unknownicon
}
</script>
<style lang="scss" scoped>
.content {
  text-align: center;
  position: relative;
  min-height: 100vh;
  background: #eff2f5;
  .filtercss{


  }
}
</style>
<style lang="scss">
.filtercss{
   .el-drawer{
    background: rgb(236, 235, 235);
    .el-drawer__body{
      padding:0
    }
   }

  }
</style>