申请人文件上传接口调试及详情展示

src/views/caseManagement/caseList.vue

         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-check"
-            @click="onsubmitRow(scope.row)"
-            v-hasPermi="['monitor:online:forceLogout']"
-            >提交</el-button
-          > -->
           <el-button
             size="mini"
             type="text"
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-check"
             @click="onsubmitRow(scope.row)"
             v-if="scope.row.caseStatus == 0"
             v-hasPermi="['monitor:online:forceLogout']"
             v-hasPermi="['monitor:online:forceLogout']"
             >立案审查</el-button
           >
-          <!-- <el-popconfirm title="是否进行缴费" @confirm="payStatus(scope.row)"> -->
           <el-button
             size="mini"
             type="text"
             v-hasPermi="['monitor:online:forceLogout']"
             >缴费</el-button
           >
-          <!-- </el-popconfirm> -->
 
           <!-- <el-button
             size="mini"
       :dialogtitle="dialogtitle"
       :getcaseApply="getcaseApply"
       :flag="flag"
+      :caseAttachList="caseAttachList"
       :initpaymentArr="initpaymentArr"
       :initpaymentArr1="initpaymentArr1"
     ></caseentryDialog>
       openPay: false, //缴费弹框
       payTitle: "",
       payForm: {},
+      caseAttachList: [], //案件质证资料
     };
   },
   created() {
     // 是否进行缴费
     payStatus(val) {
       this.getDetail({ id: val.id });
-      this.payTitle = "缴费";
-      this.$modal
-        .confirm("是否进行缴费？")
-        .then()
-        .then(() => {
+      // this.payTitle = "缴费";
           this.openPay = true;
-        })
-        .catch(() => {});
     },
     getDetail(parms) {
       caseApplicationDetail(parms).then((res) => {
             this.initpaymentArr1.push(item);
           }
         });
+        this.caseAttachList = res.data.caseAttachList
       });
     },
     // 删除

src/views/caseManagement/components/caseentryDialog.vue

             <el-form-item
               label="申请人案件证据资料上传："
               prop="applicantEvidence"
+              v-if="flag !== '0'"
             >
               <el-upload
                 class="upload-demo"
-                action="https://jsonplaceholder.typicode.com/posts/"
-                :on-preview="handlePreview"
-                :on-remove="handleRemove"
+                ref="fileupload"
+                :action="UploadUrl()"
+                :on-success="handlSuccess"
                 :before-remove="beforeRemove"
+                :data="filedata"
+                :headers="headers"
                 multiple
                 :limit="3"
                 :on-exceed="handleExceed"
               >
                 <el-button size="small" type="primary">点击上传</el-button>
                 <div slot="tip" class="el-upload__tip">
-                  只能上传jpg/png文件，且不超过500kb
+                  文件支持上传jpg/png、.doc/docx、pdf文件
                 </div>
               </el-upload>
             </el-form-item>
           </el-col>
-          <!-- 仅详情展示 -->
-          <!-- <el-col :span="12">
+          <el-col :span="12">
+            <el-form-item
+              label="申请人案件证据资料："
+              v-if="flag == '0' && caseAttachList.length > 0"
+            >
+              <a href=""></a>
+            </el-form-item>
+          </el-col>
+          <!-- 仅详情展示 案件质证环节以后显示被申请人证据-->
+          <el-col :span="12">
             <el-form-item
-              label="被申请人案件证据资料上传："
+              label="被申请人案件证据资料："
               prop="respondentEvidence"
+              v-if="flag == '0' && caseAttachList.length > 0"
             >
-              <el-upload
+              <a href="#" @click="toFile" style="color: blue">{{
+                caseAttachList[0].annexName
+              }}</a>
+              <!-- <el-upload
                 class="upload-demo"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 :on-preview="handlePreview"
                 <div slot="tip" class="el-upload__tip">
                   只能上传jpg/png文件，且不超过500kb
                 </div>
-              </el-upload>
+              </el-upload> -->
             </el-form-item>
-          </el-col> -->
+          </el-col>
         </el-row>
       </el-form>
       <!-- 申请人主体信息 -->
 
 <script>
 import moment from "moment"; //导入文件
+import { getToken } from "@/utils/auth";
 import { addCaseApply, editCaseApply } from "@/api/caseAccess/caseEntry";
 export default {
   props: [
     "initpaymentArr",
     "initpaymentArr1",
     "queryParams",
+    "caseAttachList",
   ],
   data() {
     return {
       formData: this.form,
+      filedata: {
+        annexType: 2,
+      },
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
       form2: {
         paymentArr: [
           {
     },
   },
   methods: {
-    handleRemove(file, fileList) {console.log('文件列表移除文件时的钩子');},
-    handlePreview(file) {console.log('点击文件列表中已上传的文件时的钩子');},
+    UploadUrl() {
+      return window.location.origin + "/API/evidence/upload";
+    },
+    // 文件上传成功
+    handlSuccess(res, file) {
+      console.log(res, file);
+    },
     // 文件超出个数限制时的钩子
     handleExceed(files, fileList) {
       this.$message.warning(
     },
     // 校验借款开始日期与结束日期
     setStartTime() {
-      if ( this.setTime(this.formData.loanStartDate) >= this.setTime(this.formData.loanEndDate) ) {
-        this.$message.error('借款开始日期应早于借款结束日期');
-        this.formData.loanStartDate = '';
-        this.formData.loanEndDate = '';
+      if (
+        this.setTime(this.formData.loanStartDate) >=
+        this.setTime(this.formData.loanEndDate)
+      ) {
+        this.$message.error("借款开始日期应早于借款结束日期");
+        this.formData.loanStartDate = "";
+        this.formData.loanEndDate = "";
       }
     },
     setEndTime() {
-      if ( this.setTime(this.formData.loanEndDate) <= this.setTime(this.formData.loanStartDate) ) {
-        this.$message.error('借款结束日期应晚于借款开始日期');
-        this.formData.loanStartDate = '';
-        this.formData.loanEndDate = '';
+      if (
+        this.setTime(this.formData.loanEndDate) <=
+        this.setTime(this.formData.loanStartDate)
+      ) {
+        this.$message.error("借款结束日期应晚于借款开始日期");
+        this.formData.loanStartDate = "";
+        this.formData.loanEndDate = "";
       }
     },
     setTime(val) {
-      const date = new Date(val)
-      const time = date.getTime()
-      return time
+      const date = new Date(val);
+      const time = date.getTime();
+      return time;
     },
 
     // 新增申请人主体信息
         }
       });
     },
+    // 详情显示，展示案件文件
+    toFile() {
+      window.open(
+        window.location.origin + "/API" + this.caseAttachList[0].annexPath,
+        "_black"
+      );
+    },
   },
 };
 </script>