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

<template>
  <div>
    <div class="flex-row justify-content-between">
              <span class="btn-communication background-color-fff f-weight500 p-8 border-radius-8 cursor-pointer"
                    @click="caseFileVisible={caseId:caseId}">
                  <i class="el-icon-plus"></i>上传案件材料
              </span>
    </div>
    <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16">
      <span class="width120px f-weight500">材料类型</span>
      <span class="width200px f-weight500">文件</span>
      <span class="width120px f-weight500">操作人</span>
      <span class="width120px f-weight500">操作时间</span>
      <span class="width180px f-weight500">操作</span>
    </div>
    <el-scrollbar :style="'height:'+`${OfficecontentHeight}`+'px'">
      <div class="flex-row justify-content-between background-color-fff p-16 border-radius-8 mt-16"
        v-for="(item, index) in tableData" :key="index">
        <span class="width120px">{{item.materialType}}</span>
        <span class="width200px">{{item.name}}</span>
        <span class="width120px">{{item.createBy}}</span>
        <span class="width120px">{{item.createAt}}</span>
        <span class="width180px flex-row">
          <div class="mr-8 cursor-pointer" @click="handlePreview(item)">预览</div>
          <div v-if="item.materialType != 'VERIFY_IDD'" class="mr-8 cursor-pointer" @click="handleDelete(item)">删除</div>
          <div class="mr-8 cursor-pointer" @click="handleDownload(item)">文件下载</div>
        </span>
      </div>

    </el-scrollbar>

    <!-- 案件材料上传 -->
    <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:{
    // 列表数据
    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.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.getList()
        });
      }).catch(() => {});
    },
    handleDownload(item) {
      const downloadTask = this.$TrydoFiles.download(item.fullUrl, item.name)
            .build()
            .start();
      // let url = item.fullUrl + `&response-content-disposition=attachment;filename="${item.name}"`
      // console.log(url, '---url')
      // this.$util.downloadFileByUrl(url, item.name)
      // 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>