| | |
| | | <template> |
| | | <el-collapse v-model="activeName" accordion> |
| | | <el-collapse-item |
| | | v-for="item in dbAuditLogs" |
| | | :key="item.createdTime" |
| | | name="1" |
| | | style="overflow: auto; max-height: 600px" |
| | | <AppContainer> |
| | | <ProTableV2 |
| | | :columns="columns" |
| | | :show-pagination="false" |
| | | :table-data="dbAuditLogs" |
| | | :column-render-map="columnsRenderProps" |
| | | > |
| | | <ProForm :model="item" is-read> |
| | | <ProFormItemV2 label="tableName:"> |
| | | {{ item.tableName }} |
| | | </ProFormItemV2> |
| | | <ProFormItemV2 label="primaryKey:">{{ item.primaryKey }} </ProFormItemV2> |
| | | <ProFormItemV2 label="operate:"> {{ EnumDbAuditOperateText[item.operate] }}</ProFormItemV2> |
| | | <ProFormItemV2 label="oldValues:" label-position="top"> |
| | | <json-viewer |
| | | :copyable="true" |
| | | :boxed="true" |
| | | :value="JSON.parse(item.oldValues)" |
| | | ></json-viewer> |
| | | </ProFormItemV2> |
| | | <ProFormItemV2 label="newValues:" label-position="top"> |
| | | <json-viewer |
| | | :copyable="true" |
| | | :boxed="true" |
| | | :value="JSON.parse(item.newValues)" |
| | | ></json-viewer> |
| | | </ProFormItemV2> |
| | | <ProFormItemV2 label="createdUser:"> |
| | | <json-viewer |
| | | :copyable="true" |
| | | :boxed="true" |
| | | :value="JSON.parse(JSON.stringify(item.createdUser))" |
| | | ></json-viewer> |
| | | </ProFormItemV2> |
| | | <ProFormItemV2 label="createdTime:"> |
| | | {{ format(item.createdTime, 'YYYY-MM-DD HH:mm:ss') }}</ProFormItemV2 |
| | | <template #oldValues="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | link |
| | | @click="handleAdd({ json: { oldValues: JSON.parse(row.oldValues) } })" |
| | | >查看</el-button |
| | | > |
| | | </ProForm> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | </template> |
| | | <template #newValues="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | link |
| | | @click="handleAdd({ json: { newValues: JSON.parse(row.newValues) } })" |
| | | >查看</el-button |
| | | > |
| | | </template> |
| | | <template #createdUser="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | link |
| | | @click="handleAdd({ json: { createdUser: JSON.parse(JSON.stringify(row.createdUser)) } })" |
| | | >查看</el-button |
| | | > |
| | | </template> |
| | | </ProTableV2> |
| | | <JsonViewerDialog v-bind="dialogProps" /> |
| | | </AppContainer> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ProForm, ProFormItemV2 } from '@bole-core/components'; |
| | | import { EnumDbAuditOperateText } from '@/constants'; |
| | | import JsonViewer from 'vue-json-viewer'; |
| | | |
| | | import { format } from '@/utils'; |
| | | import { |
| | | AppContainer, |
| | | ProTableV2, |
| | | defineColumns, |
| | | ProTableV2Props, |
| | | useFormDialog, |
| | | defineOperationBtns, |
| | | } from '@bole-core/components'; |
| | | import JsonViewerDialog from './JsonViewerDialog.vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'DbAuditLogsView', |
| | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | dbAuditLogs: () => [] as API.GetDbAuditLogsQueryResultItem[], |
| | | }); |
| | | |
| | | const columns = defineColumns( |
| | | [ |
| | | 'tableName', |
| | | 'primaryKey', |
| | | 'operate', |
| | | 'oldValues', |
| | | 'newValues', |
| | | 'createdUser', |
| | | 'createdTime', |
| | | ].map((x, index) => ({ |
| | | id: index + '', |
| | | enCode: x, |
| | | name: x, |
| | | })) |
| | | ); |
| | | |
| | | const operationBtns = defineOperationBtns([ |
| | | { |
| | | data: { |
| | | enCode: 'detailBtn', |
| | | name: '查看', |
| | | }, |
| | | emits: { |
| | | onClick: (role) => openDialog(role), |
| | | }, |
| | | }, |
| | | ]); |
| | | |
| | | const columnsRenderProps: ProTableV2Props['columnRenderMap'] = { |
| | | operate: { type: 'enum', valueEnum: EnumDbAuditOperateText }, |
| | | createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' }, |
| | | }; |
| | | |
| | | const { dialogProps, handleAdd } = useFormDialog({ |
| | | defaultFormParams: { |
| | | json: null, |
| | | }, |
| | | }); |
| | | |
| | | function openDialog(row: API.GetDbAuditLogsQueryResultItem) { |
| | | handleAdd({ |
| | | json: { |
| | | oldValues: JSON.parse(row.oldValues), |
| | | newValues: JSON.parse(row.newValues), |
| | | createdUser: JSON.parse(JSON.stringify(row.createdUser)), |
| | | }, |
| | | }); |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |