xk-admin/apps/web-antd/src/views/log/op-log/components/modal.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%] h-[80%]" 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>