案件材料部分内容

src/pages/mediation-page/components/LayoutContent.vue

@@ -208,24 +208,25 @@
 
               <!-- 案件材料 -->
               <div v-if="leftActive == 3" class="case-materials-person">
-                <div class="mb-16 flex-row justify-content-between">
-                  <span class="f-weight500 f18">案件材料</span>
-                  <span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>
-                </div>
-                <div class="case-detail-des flex-column mb-16">
-                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">
-                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>
-                    <div class="flex-column">
-                      <a class="mt-8 f-weight500">起诉状</a>
-                      <a class="color-86909C">张三 2024-09-09</a>
-                    </div>
-                  </div>
-                  <div class="color-86909C mt-8">
-                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>
-                    <a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>
-                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>
-                  </div>
-                </div>
+                <caseMaterialLeft :caseId="caseId" />
+<!--                <div class="mb-16 flex-row justify-content-between">-->
+<!--                  <span class="f-weight500 f18">案件材料</span>-->
+<!--                  <span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>-->
+<!--                </div>-->
+<!--                <div class="case-detail-des flex-column mb-16">-->
+<!--                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">-->
+<!--                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>-->
+<!--                    <div class="flex-column">-->
+<!--                      <a class="mt-8 f-weight500">起诉状</a>-->
+<!--                      <a class="color-86909C">张三 2024-09-09</a>-->
+<!--                    </div>-->
+<!--                  </div>-->
+<!--                  <div class="color-86909C mt-8">-->
+<!--                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>-->
+<!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>-->
+<!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>-->
+<!--                  </div>-->
+<!--                </div>-->
               </div>
 
               <!-- 案件文书 -->
@@ -361,33 +362,7 @@
           </div>
           <!-- 案件材料 -->
           <div v-if="rightActive == 3" class="case-materials-record">
-            <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">
-                <span class="width120px">起诉状</span>
-                <span class="width200px">dsadasdsadada.pdf</span>
-                <span class="width120px">张三</span>
-                <span class="width120px">2024-09-09 12:12:12</span>
-                <span class="width180px flex-row">
-                                    <a>预览</a>
-                                    <a>删除</a>
-                                    <a>文件下载</a>
-                                </span>
-              </div>
-
-            </el-scrollbar>
+            <caseMaterial :caseId="caseId" />
           </div>
           <!-- 案件日志 -->
           <div v-if="rightActive == 5" class="case-log-record">
@@ -420,27 +395,24 @@
     </div>
     <!-- 视频预约 -->
     <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog"/>
-    <!-- 案件材料上传 -->
-    <caseFileDialog v-if="caseFileVisible" :eventDialog.sync="caseFileVisible"/>
   </div>
 
 </template>
 <script>
 import api from "@/services/caseManagement";
-import caseMaterial from "@/services/caseMaterial";
 export default {
   components: {
     uploadFile: () => import('@/components/uploadFile.vue'),//上传
     RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
     RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
     VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
-    caseFileDialog: () => import('./caseFileDialog'),//案件材料上传
+    caseMaterial: () => import('./caseMaterial'),//
+    caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
   },
   data() {
     return {
       VideoDialog: null,
       eventDialog: {caseId: this.$route.query.caseId},
-      caseFileVisible: null,
       leftActive: 1,
       rightActive: 1,
       fileList: [],
@@ -919,6 +891,4 @@ export default {
 
 
 }
-
-
 </style>

src/pages/mediation-page/components/caseFileDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog title="视频预约" :visible="true" width="500px" append-to-body :close-on-click-modal="false"
+    <el-dialog title="上传文件" :visible="true" width="500px" append-to-body :close-on-click-modal="false"
                @close="handleClose">
       <div class="dialog-content dialog-office-batch">
         <div class="p-16 pr-40">
@@ -22,7 +22,7 @@
               <upload-file :file-list="fileList" :max-count="1"
                            :show-file-name="false"
                            uploadName=""
-                           accept=".jpg,.png,.jpeg,.pdf,.docx"
+                           accept=".jpg,.png,.jpeg,.pdf"
                            :span="6"
                            :fileSize="50"
                            @handleUploadFile="handleUploadFile">
@@ -31,7 +31,7 @@
             <el-form-item label="上传要求:">
               <div style="line-height: 20px;padding-top: 10px">
                 <div>请知悉！</div>
-                <div>请上传图片或pdf或word格式材料，单个文件需要在0KB以上，50MB以内;文件名称中请勿包含换行符、空格、tab#&V:?"#*|&"<>%+'等特色字符。</div>
+                <div>请上传图片或pdf材料，单个文件需要在0KB以上，50MB以内;文件名称中请勿包含换行符、空格、tab#&V:?"#*|&"<>%+'等特色字符。</div>
                 <div>文件名称不超过45个字</div>
               </div>
             </el-form-item>
@@ -48,7 +48,6 @@
   </div>
 </template>
 <script>
-import videoTelephone from "@/services/videoTelephone";
 import caseMaterial from "@/services/caseMaterial";
 export default {
   components: {
@@ -109,9 +108,9 @@ export default {
           objectName: item.objectName
         }
       })
-      this.repaymentObj.url = this.fileList.length?this.fileList[0].url : '';
+      this.repaymentObj.url = this.fileList.length?this.fileList[0].fileName : '';
       this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
-      console.log(this.repaymentObj, '---this.repaymentObj', this.fileList)
+      // console.log(this.repaymentObj, '---this.repaymentObj', this.fileList)
     },
     handleClose() {
       this.$emit('update:eventDialog', null)
@@ -122,7 +121,7 @@ export default {
         if (valid) {
           this.repaymentObj.caseId = this.eventDialog.caseId;
           caseMaterial.addCaseFile(this.repaymentObj).then(res => {
-            // this.$parent.getDataList(1)
+            this.$parent.getList()
             this.handleClose()
             this.$message.success("操作成功");
           })

src/pages/mediation-page/components/caseMaterial.vue

@@ -0,0 +1,152 @@
+<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 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.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>

src/pages/mediation-page/components/caseMaterialLeft.vue

@@ -0,0 +1,168 @@
+<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>

src/services/caseMaterial.js

@@ -1,5 +1,5 @@
 import service from "./index";
-const api = '/mediate/cases/caseFile/'
+const api = '/mediate/api/cases/caseFile/'
 // caseMaterial
 const apiCaseMaterial = {
     // 列表

src/services/fetchApi.js

@@ -34,7 +34,14 @@ const fetchApi = {
      getMinioToken(data) {
         return service.service.post(`${apiAdmin}minio/getMinioToken`, data)
     },
-    //========================end::上传相关====================================== 
-    
+    //========================end::上传相关======================================
+    // 文件下载
+    downFile: data => {
+        return service.service.post(`${apiAdmin}upload/down`, data)
+    },
+    // 文件预览
+    viewFile: data => {
+        return service.postFile(`${apiAdmin}upload/view`, data)
+    },
 }
 export default fetchApi;

src/utils/util.js

@@ -15,18 +15,18 @@ const util = {
      * @param filename {String} 文件名称
      */
     downloadFileByBlob: (data, filename) => {
-        console.log(111111)
-        // if (!data) {
-        //     console.log(123)
-        //     return false;
-        // }
+        // console.log(111111)
+        if (!data) {
+            // console.log(123)
+            return false;
+        }
         if (!!window.ActiveXObject || "ActiveXObject" in window) {
             window.navigator.msSaveOrOpenBlob(new Blob([data]), filename);
             console.log(22222)
         } else {
             console.log(33333)
             const url = window.URL.createObjectURL(new Blob([data]));
-            console.log('下载',url)
+            // console.log('下载',url)
             const link = document.createElement("a");
             link.style.display = "none";
             link.href = url;
@@ -169,6 +169,7 @@ const util = {
     },
     // 验证图片类型
     reg_img(fileUrl) {
+        console.log(fileUrl,'---fileUrl')
         if(fileUrl==null||fileUrl=='') {
             return fileUrl
         }