perf: 优化操作日志详情界面

src/i18n/langs/en.json

@@ -302,6 +302,7 @@
     "PasswordOrToken": "Password / Token"
   },
   "audits": {
+    "ChangeField": "Change field",
     "OperateRecord": "Operating record",
     "Hosts": "Host",
     "RunUser": "Run user",

src/i18n/langs/ja.json

@@ -303,6 +303,7 @@
     "PasswordOrToken": "パスワード/トークン"
   },
   "audits": {
+    "ChangeField": "フィールドを変更します",
     "OperateRecord": "操作記録です",
     "Hosts": "本体",
     "RunUser": "実行ユーザー",

src/i18n/langs/zh.json

@@ -402,6 +402,7 @@
     "PasswordOrToken": "密码 / 令牌"
   },
   "audits": {
+    "ChangeField": "变更字段",
     "OperateRecord": "操作记录",
     "Hosts": "主机",
     "RunUser": "运行用户",

src/views/audits/OperateLogList.vue

@@ -8,9 +8,9 @@
     <el-dialog
       :title="this.$tc('route.OperateLog')"
       :visible.sync="logDetailVisible"
-      width="70%"
+      width="80%"
     >
-      <TwoTabFormatter :row="rowObj" />
+      <OperateLogDetail :row="rowObj" />
     </el-dialog>
   </div>
 </template>
@@ -18,13 +18,13 @@
 <script>
 import GenericListPage from '@/layout/components/GenericListPage'
 import { getDaysAgo, getDaysFuture } from '@/utils/common'
-import TwoTabFormatter from '@/components/TableFormatters/TwoTabFormatter'
+import OperateLogDetail from './components/OperateLogDetail'
 import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
     GenericListPage,
-    TwoTabFormatter
+    OperateLogDetail
   },
   data() {
     const vm = this
@@ -33,10 +33,8 @@ export default {
     const dateTo = getDaysFuture(1, now).toISOString()
     return {
       rowObj: {
-        left: '',
-        right: '',
-        leftTitle: vm.$t('audits.BeforeChange'),
-        rightTitle: vm.$t('audits.AfterChange')
+        diff: '',
+        title: vm.$t('audits.AfterChange')
       },
       logDetailVisible: false,
       loading: false,
@@ -82,8 +80,7 @@ export default {
                     vm.$axios.get(
                       `/api/v1/audits/operate-logs/${row.id}/?type=action_detail`,
                     ).then(res => {
-                      vm.rowObj.left = res.before
-                      vm.rowObj.right = res.after
+                      vm.rowObj.diff = res.diff
                       vm.logDetailVisible = true
                     }).finally(() => {
                       vm.loading = false

src/views/audits/components/OperateLogDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div v-if="isEmpty()" style="text-align: center">
+      {{ this.$tc('common.NoContent') }}
+    </div>
+    <div v-else>
+      <el-table
+        :data="row.diff"
+        style="width: 100%"
+        height="500"
+      >
+        <el-table-column
+          prop="field"
+          :label="this.$tc('audits.ChangeField')"
+          width="100"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="before"
+          :label="this.$tc('audits.BeforeChange')"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="after"
+          :label="this.$tc('audits.AfterChange')"
+          show-overflow-tooltip
+        />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'OperateLogDetail',
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {},
+  methods: {
+    isEmpty() {
+      const content = this.row.diff
+      return !content || JSON.stringify(content) === '{}'
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+  .el-tag{
+    width: 100%;
+    white-space: normal;
+    height:auto;
+}
+</style>