feat: 操作日志完成

src/local/system.js

@@ -41,5 +41,8 @@ export default {
     fail: ['失败', 'Fail'],
     success: ['成功', 'success'],
     'log.userId': ['用户Id', 'UserId'],
-    'log.loginTime': ['登录时间', 'LoginTime']
+    'log.loginTime': ['登录时间', 'LoginTime'],
+    'log.businessModule': ['业务模块', 'Business Module'],
+    'log.operationService': ['操作服务', 'Operation Service'],
+    'log.operateTime': ['操作时间', 'Operate Time'],
 };

src/pages/system/log/operation/form.vue

 <template>
-    <pre>{{ data.operateContent }}</pre>
+    <Wraper :hidden="hidden" noFooter>
+        <pre>{{ row ? row.operateContent : '' }}</pre>
+    </Wraper>
 </template>
 
 <script>
+import { WraperMixins } from '@/components/table';
+
 export default {
-    props: ['data'],
+    mixins: [WraperMixins],
 };
 </script>

src/pages/system/log/operation/index.vue

 <template>
-    <my-table url="/api/v1/logger/operation" rowKey="logId" ref="table">
-        <template #drawer>
-            <Form :data="currentClickRow" />
+    <Table url="/api/v1/logger/operation" rowKey="logId" :buttons="buttons" ref="table">
+        <template #drawer="drawer">
+            <Form v-bind="drawer" />
         </template>
 
-        <template #search="{query}">
-            <my-form-item label="开始时间">
+        <template #search="{ query }">
+            <MoreItem :label="$t('select.startTime')">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.startTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="结束时间">
+            </MoreItem>
+            <MoreItem :label="$t('select.endTime')">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.endTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="操作用户Id">
-                <a-input v-model="query.operatorId" />
-            </my-form-item>
-            <my-form-item label="业务模块">
-                <a-select v-model="query.loginType" allowClear>
-                    <a-select-option value="LOGIN">登录系统</a-select-option>
-                    <a-select-option value="LOGOUT">退出系统</a-select-option>
+            </MoreItem>
+            <MoreItem :label="$t('log.userId')">
+                <a-input v-model="query.operatorId" :placeholder="$t('input.placeholder')" />
+            </MoreItem>
+            <MoreItem :label="$t('log.businessModule')">
+                <a-select v-model="query.loginType" allowClear :placeholder="$t('select.placeholder')">
+                    <a-select-option value="LOGIN">{{ $t('log.login') }}</a-select-option>
+                    <a-select-option value="LOGOUT">{{ $t('log.logout') }}</a-select-option>
                 </a-select>
-            </my-form-item>
-            <my-form-item label="操作服务">
-                <a-select v-model="query.isSuccess" allowClear>
+            </MoreItem>
+        </template>
+        <template #moreSearch="{ query }">
+            <MoreItem :label="$t('log.operationService')">
+                <a-select v-model="query.isSuccess" allowClear :placeholder="$t('select.placeholder')">
                     <a-select-option value="0">失败</a-select-option>
                     <a-select-option value="1">成功</a-select-option>
                 </a-select>
-            </my-form-item>
+            </MoreItem>
         </template>
-        <a-table-column title="用户Id" data-index="operatorId" />
-        <a-table-column title="用户名称" data-index="operatorName" />
-        <a-table-column title="业务模块" data-index="moduleCode" />
-        <a-table-column title="操作服务" data-index="serviceCode" />
-        <a-table-column title="操作时间" data-index="operateTime" />
-        <a-table-column title="操作">
-            <template #default="row">
-                <a @click="() => view(row)">详情</a>
-            </template>
-        </a-table-column>
-    </my-table>
+        <a-table-column :title="$t('log.userId')" data-index="operatorId" />
+        <a-table-column :title="$t('user.name')" data-index="operatorName" />
+        <a-table-column :title="$t('log.businessModule')" data-index="moduleCode" />
+        <a-table-column :title="$t('log.operationService')" data-index="serviceCode" />
+        <a-table-column :title="$t('log.operateTime')" data-index="operateTime" />
+    </Table>
 </template>
 
 <script>
 import Form from './form.vue';
+import { Table, MoreItem } from '@/components/table';
 
 export default {
-    components: { Form },
+    components: { Form, Table, MoreItem },
     data() {
         return {
-            currentClickRow: {},
+            buttons: [
+                {
+                    label: this.$t('table.view'),
+                    click: this.view,
+                },
+            ],
         };
     },
     methods: {
-        showDrawer(type, noFooter) {
-            this.$refs['table'].show({ type, noFooter });
-        },
         view(row) {
-            this.currentClickRow = row;
-            this.showDrawer(2, true);
+            this.$refs['table'].show({ row, title: this.$t('table.view') });
         },
     },
 };