Files
xk-admin/apps/web-antd/src/views/log/old-api-log/components/modal.vue

85 lines
2.6 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="Api访问日志详情">
<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.user_id }}</Descriptions.Item>
<Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
<Descriptions.Item label="IP">{{ data.ip === '127.0.0.1' ? '本地' : data.ip }}</Descriptions.Item>
<Descriptions.Item label="参数">
<pre>{{ JSON.parse(JSON.parse(data.param)) }}</pre>
</Descriptions.Item>
<Descriptions.Item label="结果">
<pre>{{ JSON.parse(JSON.parse(data.result)) }}</pre>
</Descriptions.Item>
<Descriptions.Item label="类型">{{ data.type === 0 ? '访问成功' : '访问失败' }}</Descriptions.Item>
<Descriptions.Item label="返回结果代码">
{{ data.result_code }}
</Descriptions.Item>
<Descriptions.Item label="平台类型">
{{ data.platform_type === 0 ? '平台' : '诊所' }}
</Descriptions.Item>
<Descriptions.Item label="平台">
{{ data.platform_id === 0 ? '萧康医药' : data?.old_admin?.username || '获取失败' }}
</Descriptions.Item>
<Descriptions.Item label="设备">{{ data.equipment }}</Descriptions.Item>
<Descriptions.Item label="浏览器">{{ data.browser }}</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ data.created_at }}
</Descriptions.Item>
<Descriptions.Item label="管理员名称">
{{ data?.old_admin?.username || '获取失败' }}
</Descriptions.Item>
</Descriptions>
</div>
</Modal>
</template>
<style scoped>
.ant-descriptions-item-label {
font-weight: bold;
}
pre {
padding: 8px;
border-radius: 4px;
overflow-x: auto;
}
</style>