证据清单页面的开发

src/views/caseManagement/caseList.vue

           <el-button size="mini" type="text" icon="el-icon-tickets" @click="payStatus(scope.row)" v-if="scope.row.caseStatus == 2 &&
             checkPermi(['caseManagement:list:pay']) && btnStatus
             ">缴费</el-button>
-
+          <el-button size="mini" type="text" icon="el-icon-tickets" @click="evidenceListS(scope.row)" >证据清单</el-button>
           <!-- <el-button
             size="mini"
             type="text"
     <caseCompressionPackage :openCompressedPackages="openCompressedPackages" :queryParams="queryParams" @cancelCompreess="cancelCompreess"
       :getcaseApply="getcaseApply">
     </caseCompressionPackage>
+    <!-- 证据清单 -->
+    <evidenceList :evidenceListD ="evidenceListD" @cancelevidenceList="cancelevidenceList" :caseAttachListR ="caseAttachListR"></evidenceList>
     
   </div>
 </template>
 import timeDialog from './components/timeDialog.vue';
 import operateDialog from './components/operateDialog.vue';
 import uploadCaseDialog from './components/uploadCaseDialog.vue';
-import caseCompressionPackage from './components/caseCompressionPackage.vue'
+import caseCompressionPackage from './components/caseCompressionPackage.vue';
+import evidenceList from './components/evidenceList.vue'
 // 秘书审核页面
 import caseentryExamineDialog from './components/caseentryExamine.vue';
 import { caseApplicationDetail } from "@/api/pay/pay";
     operateDialog,
     uploadCaseDialog,
     caseentryExamineDialog,
-    caseCompressionPackage
+    caseCompressionPackage,
+    evidenceList
   },
   data() {
     return {
       payForm: {},
       caseAttachList: [], //案件质证资料
       showcaseLog: false, //案件日志弹框显示
+      evidenceListD:false,//证据清单弹框显示
+      caseAttachListR:[], //证据清单
       flagLoading: true, //案件日志弹框loading
       caselogDataArr: [],
       options: [], //机构数据
       this.showcaseLog = true;
       this.caseLogRecordListFn(row);
     },
+    // 证据清单
+    evidenceListS(row){
+      this.evidenceListD = true;
+      this.getInfo(row);
+    },
     // 查询案件日志信息
     caseLogRecordListFn(val) {
       this.flagLoading = true;
     cancelViewProcess() {
       this.processVisable = false;
     },
+    // 关闭案件详情
+    cancelevidenceList(){
+      this.evidenceListD = false;
+    },
     // 修改
     editRow(row) {
       this.flag = "1";
         version: row.version
       }
       selectCaseApply(params).then((res) => {
+        // 证据清单
+        this.caseAttachListR = res.data.caseAttachList;
         // this.visible = true;
         // this.formData = res.data;
         this.form.caseName = res.data.caseName;
           }
         });
         this.caseAttachList = res.data.caseAttachList;
-        console.log(this.caseAttachList,"caseAttachList")
+        // console.log(this.caseAttachList,"caseAttachList")
         this.form.requestRule = res.data.requestRule;
         this.form.properPreser = res.data.properPreser;
       });

src/views/caseManagement/components/evidenceList.vue

+<template>
+  <div>
+    <el-dialog
+      title="证据清单"
+      :visible="evidenceListD"
+      :caseAttachListR = "caseAttachListR"
+      @close="cancel"
+      center
+      :distroy-on-close="true"
+    >
+      <div class="loading" v-if ="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-for="item in this.caseAttachListR" style="margin-top:10px;">
+          <el-link target="_blank" type="primary" v-if="item.annexType == 2 || item.annexType == 6" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel" class="endbutton1"
+          ><span>取 消</span></el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["evidenceListD", "flagLoading", "caseAttachListR"],
+  data() {
+    return {
+      fileURL: window.location.origin + "/API",
+      myData:[]
+    };
+  },
+  created(){
+    // 获取组件传值监听
+    // this.$watch('caseAttachListR',(newVal)=>{
+    //   this.myData = newVal;
+    //   console.log(this.myData)
+    // })
+  },
+  methods: {
+  
+    cancel() {
+      this.$emit("cancelevidenceList");
+    } 
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 500px !important;
+  overflow: auto !important;
+}
+::v-deep .el-dialog {
+  width: 800px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.endbutton1 {
+  width: 154px;
+  height: 37px;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-radius: 19px;
+  span {
+    width: 31px;
+    height: 13px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #959595;
+  }
+}
+.loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-icon-loading {
+    font-size: 50px;
+  }
+}
+.noData {
+  width: 100%;
+  height: 400px;
+  font-size: 30px;
+  font-weight: 700;
+  color: #959595;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>