mediate-manage-web/src/pages/mediation-page/components/caseMaterialLeft.vue

<template>
  <div>
    <div class="mb-16 flex-row justify-content-between">
      <span class="f-weight500 f22">案件材料</span>
      <span class="cursor-pointer" @click="caseFileVisible={caseId:caseId}">
        <i class="el-icon-plus"></i> 上传案件材料
      </span>
    </div>

    <div class="case-detail-des flex-column mb-16" v-for="(item, index) in tableData" :key="index">
      <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
        <a class="case-img"><img :src="reg_img(item)"/></a>
        <div class="flex-column pl-8">
          <a class="mt-8 f-weight500">{{item.materialType}}</a>
          <a class="color-86909C">{{item.createAt}}</a>
        </div>
      </div>
      <div class="color-86909C mt-8">
        <a class="mr-16 ml-16 cursor-pointer" @click="handlePreview(item)"><i class="el-icon-view"></i>预览</a>
        <a class="mr-16 cursor-pointer" @click="handleDelete(item)"><i class="el-icon-delete"></i>删除</a>
        <a class="mr-16 cursor-pointer" @click="handleDownload(item)"><i class="el-icon-download"></i>下载</a>
      </div>
    </div>

    <!-- 案件材料上传 -->
    <caseFileDialog v-if="caseFileVisible" :eventDialog.sync="caseFileVisible"/>
    <!-- 大图预览 -->
    <dialogPreview v-if="editImgFlag" :visible.sync="editImgFlag" :previewUrl="previewPath" />
    <pdfPreview v-if="editPdfFlag" :visible.sync="editPdfFlag" :previewUrl="previewPath"/>
    <videoPreview v-if="editMp4Flag" :visible.sync="editMp4Flag" :previewUrl="previewPath"/>
  </div>
</template>

<script>
import caseMaterial from "@/services/caseMaterial";
import fetchApi from "@/services/fetchApi";
export default {
  components: {
    caseFileDialog: () => import('./caseFileDialog'),//案件材料上传
    dialogPreview: () => import('@/components/dialogPreview'),
    pdfPreview: () => import('@/components/pdfPreview.vue'),//查看PDF文件
    videoPreview: () => import('@/components/videoPreview.vue'),//查看视频文件
  },
  name: "caseMaterial",
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return{
      caseFileVisible: null,
      tableData: [],
      total: 0,
      editPdfFlag:false,
      editMp4Flag:false,
      editImgFlag: false,
      previewPath:'',
    }
  },
  computed:{
    // 获取抽屉drawer的内容高度
    OfficecontentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 185
    },
  },
  async created() {
    await this.getFileCaseList();
  },
  methods:{
    reg_img(item) {
      if(item.url==null||item.url=='') {
        return item.fullUrl
      }
      // console.log(/.(xls|xlsx)$/.test(fileUrl.toLowerCase()),'111')
      if(/.(pdf)$/.test(item.url.toLowerCase())) {
        return require('@/assets/image/util/pdf_img.jpg')
      }
      else if(/.(xls|xlsx)$/.test(item.url.toLowerCase())) {
        return require('@/assets/image/util/excel_img.jpg')
      }
      else if(/.(doc|docx)$/.test(item.url.toLowerCase())) {
        return require('@/assets/image/util/word_img.jpg')
      }
      else if(/.(zip|rar)$/.test(item.url.toLowerCase())) {
        return require('@/assets/image/util/yswj.jpg')
      }
      else if(/.(m3u8|mp4)$/.test(item.url.toLowerCase())) {
        return require('@/assets/image/util/video_img.jpg')
      }
      else {
        // let previewUrl = `/mediate/minio/preview/${fileUrl}`
        // return service.service.serviceurl+fileUrl
        return item.fullUrl
      }
    },
    // 列表数据
    getFileCaseList() {
      let dataJson = {
        size: 9999,
        current: 1,
        caseId: this.caseId
      }
      caseMaterial.getCaseFileList(dataJson).then(res => {
        if (!res.code) {
          this.tableData = res.records;
          this.total = res.total;
        }
      })
    },
    async handlePreview(item) {
      let previewUrl = `/mediate/minio/preview/${item.fullUrl}`
      if(item.fullUrl.includes('http')){previewUrl = item.fullUrl}
      let analysisType = this.$util.getFileType(item.url);
      if (analysisType === 'image'){
        this.previewPath = previewUrl
        this.editImgFlag = true;
      }else if(analysisType.toLowerCase() === 'mp4' || analysisType.toLowerCase() === 'video'){
        this.previewPath = previewUrl
        this.editMp4Flag = true;
      }else if(analysisType.toLowerCase() === 'pdf'){
        this.previewPath = previewUrl
        this.editPdfFlag = true;
      }else {
        // let res = await commonFun.viewFile2({url: item.url})
        // window.open(`${res}`, '_target')
      }
    },
    handleDelete(item) {
      this.$confirm("请确定是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        let data = {id: item.id}
        caseMaterial.deleteCaseFileById(data).then((res) => {
          this.$message.success("成功");
          this.getFileCaseList()
        });
      }).catch(() => {});
    },
    handleDownload(item) {
      const downloadTask = this.$TrydoFiles.download(item.fullUrl, item.name)
          .build()
          .start();
      // fetchApi.downFile({
      //   path: item.url,
      //   fileName: item.name
      // }).then(res => {
      //   console.log(res)
      //   this.$util.downloadFileByBlob(res, item.name)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.background-color-F5F5F5 {
  background-color: #F5F5F5;
}
.case-materials-person {
  .case-detail-des {
    border: solid 1px #E5E6EB;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;

    span {
      margin: 3px 0;
      padding: 3px 10px;
      // a:first-child{width: 120px;display: inline-block;text-align: right;}
    }

    span:nth-child(even) {
      background-color: #F7F8FA;
    }

    .case-img {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      img {
        max-width: 50px;
        max-height: 50px;
      }
    }
    i {
      margin-right: 4px;
    }
  }
}
</style>