src/api/caseFiling/caseFiling.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 档案详情查询
+export function adjudicationArchives(data) {
+  return request({
+    url: '/adjudication/archives',
+    method: 'get',
+    params: data
+  })
+}

src/views/caseFiling/archiveList.vue

@@ -108,6 +108,7 @@
       v-if="showarchiveDetails"
       :showarchiveDetails="showarchiveDetails"
       :detailform="detailform"
+      :flagLoading="flagLoading"
       @cancelpaymentdetails="cancelpaymentdetails"
       @updataList="updataList"
     ></archiveDetailsDialog>
@@ -115,10 +116,8 @@
 </template>
   
 <script>
-import {
+import { caseApplicationList } from "@/api/awardManagement/awardManagement";
-  caseApplicationList,
+import { adjudicationArchives } from "@/api/caseFiling/caseFiling";
-  caseApplicationDetail,
-} from "@/api/awardManagement/awardManagement";
 import archiveDetailsDialog from "./components/archiveDetailsDialog.vue";
 
 export default {
@@ -145,6 +144,7 @@ export default {
       dataList: [],
       detailform: {}, //详情数据
       showarchiveDetails: false, //详情数据弹框
+      flagLoading: true, //详情弹框loading
     };
   },
   created() {
@@ -176,7 +176,7 @@ export default {
     },
     // model框显示
     showDetail(row) {
-      // this.getDetail({ id: row.id });
+      this.getDetail({ id: row.id });
       this.showarchiveDetails = true;
     },
     // 关闭弹窗
@@ -185,8 +185,10 @@ export default {
     },
     /** 查询详情 */
     getDetail(parms) {
-      caseApplicationDetail(parms).then((res) => {
+      this.flagLoading = true;
+      adjudicationArchives(parms).then((res) => {
         this.detailform = res.data;
+        this.flagLoading = false;
       });
     },
   },

src/views/caseFiling/components/archiveDetailsDialog.vue

@@ -7,13 +7,25 @@
       :destroy-on-close="true"
       center
     >
+      <div class="loading" v-if="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-else>
+        <div class="noData" v-if="noData">暂无数据！</div>
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="案件信息" name="first">
-          <caseInfo></caseInfo>
+            <caseInfo :caseApplicationObj="caseApplicationObj"></caseInfo>
+          </el-tab-pane>
+          <el-tab-pane label="案件日志" name="second">
+            <caselogInfo :caselogDataArr="caselogDataArr"></caselogInfo>
+          </el-tab-pane>
+          <el-tab-pane label="快递信息" name="third">
+            <expressDeliveryInfo
+              :deliveryDataArr="deliveryDataArr"
+            ></expressDeliveryInfo>
           </el-tab-pane>
-        <el-tab-pane label="案件日志" name="second">案件日志</el-tab-pane>
-        <el-tab-pane label="快递信息" name="third">快递信息</el-tab-pane>
         </el-tabs>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -23,20 +35,38 @@
 
 <script>
 import caseInfo from "./caseInfo.vue";
+import caselogInfo from "./caselogInfo.vue";
+import expressDeliveryInfo from "./expressDeliveryInfo.vue";
 export default {
-  props: ["showarchiveDetails"],
+  props: ["showarchiveDetails", "detailform", "flagLoading"],
   components: {
     caseInfo,
+    caselogInfo,
+    expressDeliveryInfo,
   },
   data() {
     return {
-      // key: value
       activeName: "first",
+      caseApplicationObj: {}, //案件信息
+      caselogDataArr: [], //案件日志
+      deliveryDataArr: [], //快递信息
+      noData: false,
     };
   },
+  watch: {
+    detailform: {
+      handler(val) {
+        if (val) {
+          this.caseApplicationObj = val.caseApplication;
+          this.caselogDataArr = val.caseLogRecordList;
+          this.deliveryDataArr = val.logisticsInfoVOList;
+        }
+      },
+    },
+  },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
+      // console.log(tab, event);
     },
     cancel() {
       this.$emit("cancelpaymentdetails");
@@ -55,4 +85,24 @@ export default {
   height: 700px !important;
   overflow: auto !important;
 }
+.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>

src/views/caseFiling/components/caseInfo.vue

@@ -81,11 +81,18 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="申请人案件证据资料：">
-            <div v-for="(item, index) in applicateArr" :key="index">
+            <!-- <div v-for="(item, index) in applicateArr" :key="index">
               <a href="#" @click="toFile(item, index)" style="color: blue">
                 {{ item.annexName }}
               </a>
-            </div>
+            </div> -->
+            <p
+              @click="toFile(index, 2)"
+              v-for="(item, index) in applicantFileArr"
+              :key="index"
+            >
+              <a href="#">{{ item }}</a>
+            </p>
           </el-form-item>
         </el-col>
         <!-- 仅详情展示 案件质证环节以后显示被申请人证据-->
@@ -94,19 +101,36 @@
             label="被申请人案件证据资料："
             prop="respondentEvidence"
           >
-            <div v-for="(item, index) in quiltArr" :key="index">
+            <!-- <div v-for="(item, index) in quiltArr" :key="index">
               <a href="#" @click="toFile1(item, index)" style="color: blue">
                 {{ item.annexName }}
               </a>
-            </div>
+            </div> -->
+            <p
+              v-for="(item, index) in respondentFileArr"
+              :key="index"
+              @click="toFile(index, 6)"
+            >
+              <a href="#">{{ item }}</a>
+            </p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="裁决书附件：">
+            <p
+              v-for="(item, index) in awardFileArr"
+              :key="index"
+              @click="toFile(index, 3)"
+            >
+              <a href="#">{{ item }}</a>
+            </p>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <!-- 申请人主体信息 -->
-    <el-form ref="form2" :model="form2" label-width="150px">
+    <el-form ref="form2" :model="form2" label-width="150px" disabled>
-      <!-- <div v-for="(item, index) in form2.paymentArr" :key="index"> -->
+      <div v-for="(item, index) in form2.paymentArr" :key="index">
-      <div>
         <div style="display: flex; justify-content: space-between">
           <div style="display: inline-flex">
             <div class="infoIcon"></div>
@@ -126,14 +150,12 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.name" placeholder="请输入" /> -->
+              <el-input v-model="item.name" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="代码：">
-              <!-- <el-input v-model="item.identityNum" placeholder="请输入" /> -->
+              <el-input v-model="item.identityNum" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -152,8 +174,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.contactTelphone" placeholder="请输入" /> -->
+              <el-input v-model="item.contactTelphone" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -167,8 +188,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.workAddress" placeholder="请输入" /> -->
+              <el-input v-model="item.workAddress" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -182,8 +202,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.workTelphone" placeholder="请输入" /> -->
+              <el-input v-model="item.workTelphone" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -197,8 +216,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.contactAddress" placeholder="请输入" /> -->
+              <el-input v-model="item.contactAddress" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -218,8 +236,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.nameAgent" placeholder="请输入" /> -->
+              <el-input v-model="item.nameAgent" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -239,8 +256,7 @@
                 },
               ]"
             >
-              <!-- <el-input v-model="item.identityNumAgent" placeholder="请输入" /> -->
+              <el-input v-model="item.identityNumAgent" placeholder="请输入" />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -259,11 +275,10 @@
                 },
               ]"
             >
-              <!-- <el-input
+              <el-input
                 v-model="item.contactTelphoneAgent"
                 placeholder="请输入"
-              /> -->
+              />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -277,22 +292,21 @@
                 },
               ]"
             >
-              <!-- <el-input
+              <el-input
                 v-model="item.contactAddressAgent"
                 placeholder="请输入"
-              /> -->
+              />
-              <el-input placeholder="请输入" />
             </el-form-item>
           </el-col>
         </el-row>
       </div>
     </el-form>
-    <el-form ref="form3" label-width="150px" :model="form3">
+    <!-- 被申请人主体信息 -->
-      <!-- <div
+    <el-form ref="form3" label-width="150px" disabled :model="form3">
+      <div
         v-for="(itm, index) in form3.paymentArr1"
         :key="index + form2.paymentArr.length"
-      > -->
+      >
-      <div>
         <div style="display: flex; justify-content: space-between">
           <div style="display: inline-flex">
             <div class="infoIcon"></div>
@@ -304,6 +318,7 @@
           <el-col :span="12">
             <el-form-item
               label="被申请人姓名"
+              :prop="'paymentArr1.' + index + '.name'"
               :rules="[
                 {
                   required: true,
@@ -312,12 +327,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.name" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="身份证号："
+              :prop="'paymentArr1.' + index + '.identityNum'"
               :rules="[
                 {
                   required: true,
@@ -332,12 +348,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.identityNum" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="联系电话："
+              :prop="'paymentArr1.' + index + '.contactTelphone'"
               :rules="[
                 {
                   required: true,
@@ -351,12 +368,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.contactTelphone" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="单位地址："
+              :prop="'paymentArr1.' + index + '.workAddress'"
               :rules="[
                 {
                   required: true,
@@ -365,12 +383,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.workAddress" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="单位电话："
+              :prop="'paymentArr1.' + index + '.workTelphone'"
               :rules="[
                 {
                   required: true,
@@ -379,12 +398,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.workTelphone" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="联系地址："
+              :prop="'paymentArr1.' + index + '.contactAddress'"
               :rules="[
                 {
                   required: true,
@@ -393,7 +413,7 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.contactAddress" placeholder="请输入" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -401,10 +421,12 @@
           <div class="infoIcon"></div>
           <div class="caseInfo2">代理人信息：</div>
         </div>
+        <!-- <p>代理人信息：</p> -->
         <el-row>
           <el-col :span="12">
             <el-form-item
               label="姓名："
+              :prop="'paymentArr1.' + index + '.nameAgent'"
               :rules="[
                 {
                   required: true,
@@ -413,12 +435,14 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.nameAgent" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
+            <!--  -->
             <el-form-item
               label="身份证号："
+              :prop="'paymentArr1.' + index + '.identityNumAgent'"
               :rules="[
                 {
                   required: true,
@@ -433,12 +457,13 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input v-model="itm.identityNumAgent" placeholder="请输入" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="联系电话："
+              :prop="'paymentArr1.' + index + '.contactTelphoneAgent'"
               :rules="[
                 {
                   required: true,
@@ -452,12 +477,16 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input
+                v-model="itm.contactTelphoneAgent"
+                placeholder="请输入"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               label="联系地址："
+              :prop="'paymentArr1.' + index + '.contactAddressAgent'"
               :rules="[
                 {
                   required: true,
@@ -466,7 +495,10 @@
                 },
               ]"
             >
-              <el-input placeholder="请输入" />
+              <el-input
+                v-model="itm.contactAddressAgent"
+                placeholder="请输入"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -477,15 +509,98 @@
 
 <script>
 export default {
+  props: ["caseApplicationObj"],
   data() {
     return {
       formData: {},
       applicateArr: [],
       quiltArr: [],
-      form2: {},
+      initpaymentArr: [],
-      form3: {},
+      initpaymentArr1: [],
+      form2: {
+        paymentArr: [
+          {
+            identityType: 1,
+            name: "",
+            identityNum: "",
+            contactTelphone: "",
+            workAddress: "",
+            workTelphone: "",
+            contactAddress: "",
+            nameAgent: "",
+            contactTelphoneAgent: "",
+            contactAddressAgent: "",
+          },
+        ],
+      }, //申请人主体信息
+      form3: {
+        paymentArr1: [
+          {
+            identityType: 2,
+            name: "",
+            identityNum: "",
+            contactTelphone: "",
+            workAddress: "",
+            workTelphone: "",
+            contactAddress: "",
+            nameAgent: "",
+            contactTelphoneAgent: "",
+            contactAddressAgent: "",
+          },
+        ],
+      }, //被申请人主体信息
+      applicantFileArr: [], //申请人
+      applicantPathArr: [], //申请人
+      respondentFileArr: [], //被申请人
+      respondenPathArr: [], //被申请人
+      awardFileArr: [], //裁决书
+      awardPathArr: [], //裁决书
     };
   },
+  created() {
+    if (this.caseApplicationObj) {
+      this.formData = this.caseApplicationObj;
+    }
+    console.log("this.formData", this.formData);
+    if (this.caseApplicationObj && this.caseApplicationObj.caseAffiliates) {
+      this.caseApplicationObj.caseAffiliates.forEach((item) => {
+        if (item.identityType == 1) {
+          this.initpaymentArr.push(item);
+        } else {
+          this.initpaymentArr1.push(item);
+        }
+        this.form2.paymentArr = this.initpaymentArr;
+        this.form3.paymentArr1 = this.initpaymentArr1;
+      });
+    }
+    if (this.caseApplicationObj && this.caseApplicationObj.caseAttachList) {
+      this.caseApplicationObj.caseAttachList.forEach((item) => {
+        if (item.annexType == 2) {
+          this.applicantFileArr.push(item.annexName);
+          this.applicantPathArr.push(item.annexPath);
+        } else if (item.annexType == 6) {
+          this.respondentFileArr.push(item.annexName);
+          this.respondenPathArr.push(item.annexPath);
+        } else if (item.annexType == 3) {
+          this.awardFileArr.push(item.annexName);
+          this.awardPathArr.push(item.annexPath);
+        }
+      });
+    }
+  },
+  methods: {
+    // 预览文件
+    toFile(index, val) {
+      let headPath = window.location.origin + "/API";
+      if (val == 2) {
+        window.open(headPath + this.applicantPathArr[index], "_blank");
+      } else if (val == 6) {
+        window.open(headPath + this.respondenPathArr[index], "_blank");
+      } else if (val == 3) {
+        window.open(headPath + this.awardPathArr[index], "_blank");
+      }
+    },
+  },
 };
 </script>
 
@@ -506,4 +621,7 @@ export default {
 .el-date-editor {
   width: 100%;
 }
+a {
+  color: blue;
+}
 </style>

src/views/caseFiling/components/caselogInfo.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+      <div class="loading" v-if="flagLoading">
+        <i class="el-icon-loading"></i>
+      </div>
+      <div v-else>
+        <div class="noData" v-if="noData">暂无数据！</div>
+        <el-timeline v-else>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="(index + 1).toString()"
+            placement="top"
+          >
+            <p>{{ activity.content }}</p>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["flagLoading", "caselogDataArr"],
+  data() {
+    return {
+      activities: [],
+      noData: false,
+    };
+  },
+  watch: {
+    caselogDataArr: {
+      handler(val) {
+        if (val && val.length > 0) {
+          this.noData = false;
+          this.activities = val;
+          this.activities.forEach((item) => {
+            item.content = item.content;
+          });
+        } else {
+          this.noData = true;
+        }
+      },
+    },
+  },
+  methods: {
+    cancel() {
+      this.$emit("cancelcaseLog");
+    },
+  },
+};
+</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>

src/views/caseFiling/components/expressDeliveryInfo.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="loading" v-if="flagLoading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div v-else>
+      <div class="deliverName">
+        <span>申请人快递信息：</span>
+        {{ expressOne.company }} {{ expressOne.no }}
+      </div>
+      <el-divider></el-divider>
+      <el-timeline :reverse="reverse">
+        <el-timeline-item
+          v-for="(activity, index) in expressOne.list"
+          :key="index"
+          :timestamp="activity.timestamp"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+
+      <div class="deliverName">
+        <span>被申请人快递信息：</span>
+        {{ expressTwo.company }} {{ expressTwo.no }}
+      </div>
+      <el-divider></el-divider>
+      <el-timeline :reverse="reverse">
+        <el-timeline-item
+          v-for="(activity, index) in expressTwo.list"
+          :key="index"
+          :timestamp="activity.timestamp"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["deliveryDataArr", "flagLoading"],
+  data() {
+    return {
+      reverse: true,
+      applicantdelivery: {}, //申请人物流信息
+      expressOne: {},
+      expressTwo: {},
+    };
+  },
+  created() {
+    console.log(this.deliveryDataArr, "deliveryDataArr");
+    if ((this.deliveryDataArr && this.deliveryDataArr, length > 0)) {
+      this.deliveryDataArr.forEach((item) => {
+        if (item.identityType == 1) {
+          let applicantdata = item.logisticsInfo;
+          this.applicantdelivery = JSON.parse(applicantdata);
+          this.expressOne = this.applicantdelivery;
+          console.log(this.expressOne, "this.expressOne");
+          if (this.expressOne.length > 0) {
+            this.expressOne.list.forEach((item) => {
+              item.content = item.datetime;
+              item.timestamp = item.remark;
+            });
+          }
+        } else {
+          let applicantdata = item.logisticsInfo;
+          this.applicantdelivery = JSON.parse(applicantdata);
+          if (this.applicantdelivery.list) {
+            this.expressTwo = this.applicantdelivery;
+            if (this.expressOne.length > 0) {
+              this.expressTwo.forEach((item) => {
+                item.content = item.datetime;
+                item.timestamp = item.remark;
+              });
+            }
+          }
+        }
+      });
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit("closeDeliveryModel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 600px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+.deliverName {
+  // margin-left: 6%;
+  font-size: 16px;
+  font-weight: 500;
+  span {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+.endbutton {
+  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;
+  }
+}
+</style>