add src/views/charge/components/OverwriteDetail.vue

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

@@ -0,0 +1,186 @@
+<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="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>