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 f18">案件材料</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.url)"/></a>
        <div class="flex-column">
          <a class="mt-8 f-weight500">{{item.materialType}}</a>
          <a class="color-86909C">{{item.createBy + ' ' + 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.getList();
  },
  methods:{
    reg_img(fileUrl) {
      if(fileUrl==null||fileUrl=='') {
        return fileUrl
      }
      // console.log(/.(xls|xlsx)$/.test(fileUrl.toLowerCase()),'111')
      if(/.(pdf)$/.test(fileUrl.toLowerCase())) {
        return require('@/assets/image/util/pdf_img.jpg')
      }
      else if(/.(xls|xlsx)$/.test(fileUrl.toLowerCase())) {
        return require('@/assets/image/util/excel_img.jpg')
      }
      else if(/.(doc|docx)$/.test(fileUrl.toLowerCase())) {
        return require('@/assets/image/util/word_img.jpg')
      }
      else if(/.(zip|rar)$/.test(fileUrl.toLowerCase())) {
        return require('@/assets/image/util/yswj.jpg')
      }
      else {
        let previewUrl = `/mediate/minio/preview/${fileUrl}`
        // return service.service.serviceurl+fileUrl
        return previewUrl
      }
    },
    // 列表数据
    getList() {
      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.url}`
      if(item.url.includes('http')){previewUrl = item.url}
      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.getList()
        });
      }).catch(() => {});
    },
    handleDownload(item) {
      fetchApi.downFile({
        path: item.url,
        fileName: item.name
      }).then(res => {
        console.log(res)
        this.$util.downloadFileByBlob(res, item.name)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.width120px {
  width: 140px;
}

.width180px {
  width: 220px;
}
.width200px {
  width: calc(50% - 320px);
}
</style>