70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
import { Descriptions } from 'ant-design-vue';
|
|
|
|
|
|
|
|
const gridApi = ref();
|
|
const data = ref({});
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
fullscreenButton: false,
|
|
draggable: true,
|
|
onCancel() {
|
|
modalApi.close();
|
|
},
|
|
onConfirm: async () => {
|
|
modalApi.close();
|
|
},
|
|
onOpenChange(isOpen: boolean) {
|
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
|
if (isOpen) {
|
|
const { values } = modalApi.getData<Record<string, any>>();
|
|
if (values) {
|
|
data.value = values;
|
|
}
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<Modal class="w-[80%] md:w-[50%] lg:w-[30%] h-[60%]" title="操作日志详情">
|
|
<div class="flex flex-col gap-4">
|
|
<Descriptions
|
|
:column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
|
|
bordered
|
|
>
|
|
<Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
|
|
<Descriptions.Item label="管理员ID">{{ data.admin_id }}</Descriptions.Item>
|
|
<Descriptions.Item label="理员名称">{{ data.old_admin?.username || data.admin?.nick_name }}</Descriptions.Item>
|
|
<Descriptions.Item label="类型">{{ data.type }}</Descriptions.Item>
|
|
<Descriptions.Item label="内容">
|
|
<pre>{{ JSON.parse(data.content) }}</pre>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="模式">
|
|
{{ data.mold_txt }}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="操作时间">
|
|
{{ data.operate_time }}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="创建时间">{{ data.created_at }}</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ant-descriptions-item-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|