108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog
|
||
title="归档详情"
|
||
:visible="showarchiveDetails"
|
||
@close="cancel"
|
||
: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 :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>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import caseInfo from "./caseInfo.vue";
|
||
import caselogInfo from "./caselogInfo.vue";
|
||
import expressDeliveryInfo from "./expressDeliveryInfo.vue";
|
||
export default {
|
||
props: ["showarchiveDetails", "detailform", "flagLoading"],
|
||
components: {
|
||
caseInfo,
|
||
caselogInfo,
|
||
expressDeliveryInfo,
|
||
},
|
||
data() {
|
||
return {
|
||
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);
|
||
},
|
||
cancel() {
|
||
this.$emit("cancelpaymentdetails");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-dialog {
|
||
width: 1000px;
|
||
background: #ffffff;
|
||
border-radius: 20px;
|
||
}
|
||
::v-deep .el-dialog__body {
|
||
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> |