ChargEco/Strides-Admin/src/views/charge/components/OverwriteDetail.vue

<template>
  <el-dialog
    :visible="visible"
    :before-close="e => hideDialog()"
    title="Overwrite Details"
    custom-class="overwrite-detail-dialog">
    <div class="table-view" v-loading="loading">
      <el-table
        :data="table.list"
        height="100%"
        class="no-border">
        <el-table-column
          align="center"
          label="Latest OCPP Status"
          prop="latestOcppStatus"
          min-width="160"/>
        <el-table-column
          align="center"
          label="Latest OCPI Status"
          prop="latestOcpiStatus"
          min-width="150"/>
        <el-table-column
          align="center"
          label="Current OCPP Status"
          prop="currentOcppStatus"
          min-width="180"/>
        <el-table-column
          align="center"
          label="Current OCPI Status"
          prop="currentOcpiStatus"
          min-width="180"/>
        <el-table-column
          align="center"
          label="Latest OCPI Status Expire Time"
          prop="latestOcpiStatusExpireTime"
          min-width="240"/>
        <el-table-column
          align="center"
          label="Action Type"
          prop="actionType"
          min-width="180"/>
        <el-table-column
          align="center"
          label="Action Reason"
          prop="actionReason"
          min-width="180"/>
        <el-table-column
          align="center"
          label="Create By"
          prop="createBy"
          min-width="150"/>
        <el-table-column
          align="center"
          label="Create On"
          prop="createTime"
          min-width="150"/>
      </el-table>
    </div>
    <div class="center" style="margin-bottom: -20px;">
      <Pagination
        v-show="table.total"
        :total="table.total"
        :page.sync="filter.pageNum"
        :limit.sync="filter.pageSize"
        @pagination="getDetailPages"/>
    </div>
  </el-dialog>
</template>

<script>
import api from '../../../http/api/charge'
import Pagination from '@/components/Pagination'
export default {
  name: "DialogOverwriteDetail",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    }
  },
  components: {Pagination},
  data() {
    return {
      loading: false,
      filter: {
        pageNum: 1,
        pageSize: 10,
        pageCriteria: {
          connectorPk: ''
        }
      },
      table: {
        total: 0,
        list: []
      }
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(value) {
        if (value) {
          this.filter.pageCriteria.connectorPk = value
        }
      }
    },
    visible: {
      immediate: true,
      handler(value) {
        if (value) {
          this.getDetailPages()
        }
      }
    }
  },
  mounted() {
    
  },
  methods: {
    hideDialog() {
      this.$emit("hide");
    },
    getDetailPages() {
      this.loading = true;
      api.getConnectorActionPages(this.filter).then(res => {
        this.loading = false;
        if (res.data.totalRow && res.data.records) {
          this.table.total = res.data.totalRow;
          this.table.list = res.data.records;
        }
      }).catch(err => {
        this.loading = false;
        this.table.total = 0;
        this.table.list = [];
        this.$message.error(err)
      })
    }
  }
}
</script>

<style scoped>
>>> .overwrite-detail-dialog {
  width: 65vw;
  height: 90vh;
  display: flex;
  max-width: 1200px;
  flex-direction: column;
  margin-top: 5vh !important;
}
>>> .overwrite-detail-dialog .el-dialog__header {
  padding: 20px 20px 0;
}
>>> .overwrite-detail-dialog .el-dialog__body {
  flex: 1;
  padding: 20px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
.overwrite-detail-dialog .table-view {
  flex: 1;
  overflow-y: auto;
  padding-top: 10px;
  margin-bottom: -10px;
}
@media screen and (max-width: 1200px) {
  >>> .overwrite-detail-dialog {
    width: 70vw;
  }
}
@media screen and (max-width: 1000px) {
  >>> .overwrite-detail-dialog {
    width: 80vw;
  }
}
@media screen and (max-width: 800px) {
  >>> .overwrite-detail-dialog {
    width: 90vw;
  }
}
@media screen and (max-width: 700px) {
  >>> .overwrite-detail-dialog {
    width: 99vw;
  }
}
@media screen and (max-width: 320px) {
  >>> .overwrite-detail-dialog {
    width: 100%;
    min-width: 300px;
  }
}
</style>