update src/components/AuditView.vue

Strides-Admin/src/components/AuditView.vue

@@ -1,38 +1,119 @@
 <template>
   <div
     class="audit-view"
-    v-if="audit && audit.operationUser">
-    <span class="bold">{{audit.operationTime}}</span> UPDATED BY <span class="bold">{{audit.operationUser}}</span>
-    <i class="el-icon-info" :title='"LAST UPDATED BY " + audit.operationUser + " ON " + audit.operationTime'></i>
+    v-if="audit && audit.auditId">
+    <span class="bold" :title='"LAST UPDATED BY " + audit.operationUser + " ON " + audit.operationTime'>{{audit.operationTime}}</span> UPDATED BY <span class="bold">{{audit.operationUser || "System"}}</span>
+    <i class="el-icon-info" v-if="auditTotal > 0" @click="showList"></i>
+    <el-drawer
+      :visible.sync="drawerVisible"
+      title="Audit Data"
+      direction="rtl"
+      size="60%">
+      <div style="margin: 0 10px;border-radius: 6px;overflow-x: hidden;" v-loading="loading">
+        <el-table :data="auditTable" height="80vh">
+          <el-table-column
+            align="center"
+            label="User"
+            prop="operationUser"
+            min-width="100"/>
+          <el-table-column
+            align="center"
+            label="Type"
+            prop="operationType"
+            min-width="90"/>
+          <el-table-column
+            align="center"
+            label="Platform"
+            prop="operationPlatform"
+            min-width="100"/>
+          <el-table-column
+            align="center"
+            label="Data"
+            prop="operationParam"
+            min-width="150"
+            show-overflow-tooltip/>
+          <el-table-column
+            align="center"
+            label="Date Time"
+            prop="createTime"
+            min-width="120"/>
+        </el-table>
+        <div class="right">
+          <Pagination
+            :total="auditTotal"
+            :page.sync="filter.pageNum"
+            :limit.sync="filter.pageSize"
+            @pagination="getAuditData" />
+        </div>
+      </div>
+    </el-drawer>
   </div>
-  <!-- <div class="update-by">
-    <span
-      class="add-text"
-      :title='"CREATED BY " + editForm.createdBy + " ON " + editForm.createdOn'>
-      LAST UPDATED BY {{editForm.updatedBy}} TIMESTAMP: {{editForm.updatedOn}}
-    </span>
-  </div> -->
 </template>
 
 <script>
+import {post} from '../http/http'
+import Pagination from '@/components/Pagination';
 export default {
   name: "AuditView",
   props: {
     audit: {
       type: Object,
       default: () => ({})
+    },
+    url: {
+      type: String,
+      default: ""
+    },
+    params: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     return {
-      
+      drawerVisible: false,
+      loading: false,
+      auditTotal: 0,
+      auditTable: [],
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          
+        }
+      }
     };
   },
+  components: {Pagination},
   mounted() {
-    
+    if (this.url) {
+      if (this.params) {
+        this.filter.pageCriteria = this.params
+      }
+      this.getAuditData();
+    }
   },
   methods: {
-    
+    showList() {
+      this.drawerVisible = true;
+    },
+    getAuditData() {
+      this.loading = true;
+      post(this.url, this.filter).then(res => {
+        if (res.data.totalRow && res.data.records) {
+          this.auditTable = res.data.records
+          this.auditTotal = res.data.totalRow
+        } else {
+          this.auditTable = []
+          this.auditTotal = 0
+        }
+      }).catch(err => {
+        this.auditTable = []
+        this.auditTotal = 0
+      }).finally(() => {
+        this.loading = false;
+      });
+    }
   }
 }
 </script>