证据上传，证据列表

src/views/caseManagement/components/addCase.vue

@@ -70,6 +70,27 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="申请人案件证据资料上传：" prop="applicantEvidence">
+                            <el-upload class="upload-demo" ref="fileupload" accept=".png,.jpg,.doc,.docx,.txt,.pdf"
+                                :action="UploadUrl()" :on-success="handlSuccess" :on-remove="handleRemove"
+                                :on-preview="handlePreview" :before-remove="beforeRemove" :data="filedata"
+                                :headers="headers" multiple :limit="50" :on-exceed="handleExceed" :file-list="fileList">
+                                <el-button size="small" type="primary">点击上传</el-button>
+                                <div slot="tip" class="el-upload__tip">
+                                    文件支持上传.jpg，png，.doc，docx，.txt，.pdf文件
+                                </div>
+                            </el-upload>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24" v-if="modelFlag">
+                        <el-form-item label="证据">
+                            <div v-for="(item, index) in formData.caseAttachList" :key="index">
+                                <div style="color: blue;cursor: pointer;" @click="fileDetil(item.annexPath)">{{
+                                    item.annexName }}</div>
+                            </div>
+                        </el-form-item>
+                    </el-col>
                     <el-col :span="24">
                         <div style="display: inline-flex">
                             <div class="infoIcon"></div>
@@ -303,6 +324,7 @@ import {
 import {
     getTemplate,
 } from "@/api/officialSeal/officialSeal.js";
+import { getToken } from "@/utils/auth";
 export default {
     props: ["addVisable", "queryParams", "caseData", "caseDisabled"],
     dicts: ["case_built_type"],
@@ -317,7 +339,15 @@ export default {
                 caseAttachList: []
             },
             templateList: [],
-            modelFlag:false,
+            modelFlag: false,
+            fileURL: window.location.origin + "/API",
+            fileList: [],
+            filedata: {
+                annexType: 2,
+            },
+            headers: {
+                Authorization: "Bearer " + getToken(),
+            },
         };
     },
     watch: {
@@ -372,6 +402,42 @@ export default {
                 this.templateList = res.rows;
             })
         },
+        /** 查看证据 */
+        fileDetil(val) {
+            window.open(this.fileURL + val)
+        },
+        /** 文件上传地址 */
+        UploadUrl() {
+            return window.location.origin + "/API/common/upload";
+        },
+        /**文件上传成功*/
+        handlSuccess(res, file) {
+            this.formData.caseAttachList.push(
+                {
+                    annexId:res.annexId,
+                }
+            );
+        },
+        /**文件超出个数限制时的钩子*/
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
+                } 个文件`
+            );
+        },
+        // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${file.name}？`);
+        },
+        handleRemove(file, fileList) {
+            this.caseAttachListArr = this.caseAttachListArr.filter(item => item.annexId != file.annexId)
+        },
+        handlePreview(file) {
+            window.open(
+                window.location.origin + "/API" + file.certificatePath,
+                "_blank"
+            );
+        },
         // 提交form表单
         submitForm() {
             this.$refs['ruleForm'].validate((valid) => {