Arbitrate-Frontend/src/views/caseFiling/components/archiveDetailsDialog.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>