归档详情页面开发及接口联调

src/views/caseFiling/components/archiveDetailsDialog.vue

@@ -7,13 +7,25 @@
       :destroy-on-close="true"
       center
     >
-       <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="案件信息" name="first">
-          <caseInfo></caseInfo>
-         </el-tab-pane>
-        <el-tab-pane label="案件日志" name="second">案件日志</el-tab-pane>
-        <el-tab-pane label="快递信息" name="third">快递信息</el-tab-pane>
-      </el-tabs> 
+      <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 :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-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>