78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="detail-container">
|
||
|
|
<a-descriptions :column="2" bordered>
|
||
|
|
<a-descriptions-item label="ID">{{ record.id }}</a-descriptions-item>
|
||
|
|
<a-descriptions-item label="名称">{{ record.name }}</a-descriptions-item>
|
||
|
|
<a-descriptions-item label="描述" :span="2">{{ record.description || '-' }}</a-descriptions-item>
|
||
|
|
<a-descriptions-item label="启用状态">
|
||
|
|
<a-tag :color="record.enabled ? 'green' : 'gray'">
|
||
|
|
{{ record.enabled ? '已启用' : '已禁用' }}
|
||
|
|
</a-tag>
|
||
|
|
</a-descriptions-item>
|
||
|
|
<a-descriptions-item label="创建时间">{{ formatTime(record.created_at) }}</a-descriptions-item>
|
||
|
|
<a-descriptions-item label="更新时间">{{ formatTime(record.updated_at) }}</a-descriptions-item>
|
||
|
|
</a-descriptions>
|
||
|
|
|
||
|
|
<div class="actions">
|
||
|
|
<a-space>
|
||
|
|
<a-button type="primary" @click="handleEdit">
|
||
|
|
<template #icon>
|
||
|
|
<icon-edit />
|
||
|
|
</template>
|
||
|
|
编辑
|
||
|
|
</a-button>
|
||
|
|
<a-button status="danger" @click="handleDelete">
|
||
|
|
<template #icon>
|
||
|
|
<icon-delete />
|
||
|
|
</template>
|
||
|
|
删除
|
||
|
|
</a-button>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { IconEdit, IconDelete } from '@arco-design/web-vue/es/icon'
|
||
|
|
import type { {{Module}}Item } from '@/api/ops/{{module}}'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
record: {{Module}}Item
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'edit'): void
|
||
|
|
(e: 'delete'): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const formatTime = (time?: string) => {
|
||
|
|
if (!time) return '-'
|
||
|
|
const date = new Date(time)
|
||
|
|
const year = date.getFullYear()
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleEdit = () => {
|
||
|
|
emit('edit')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = () => {
|
||
|
|
emit('delete')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.detail-container {
|
||
|
|
.actions {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid var(--color-border);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|