详情页面
This commit is contained in:
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col justify-start items-center"
|
||||
style="height: 90%"
|
||||
>
|
||||
<!-- 使用 flex 布局实现整体居中 -->
|
||||
<div class="flex justify-center" style="width: 100%">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="font-bold color-#211F24" style="font-size: 28px">{{ task.name }}</div>
|
||||
<div class="color-#666666 mt-8px">{{ timestampToDayNumber(task.created_at) }}</div>
|
||||
<div class="color-#666666 mt-8px">{{ task.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-24px">
|
||||
<a-button type="outline" @click="handleBack">返回</a-button>
|
||||
<a-button type="outline" class="ml-12px">编辑</a-button>
|
||||
<a-button type="primary" class="ml-12px">去审核</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import router from '@/router';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getTaskSchedulesDetail } from '@/api/all/assignment-management';
|
||||
import DateUtils from '@/utils/DateUtils';
|
||||
const task = ref({});
|
||||
// 时间戳转日期格式,并提取日期数字
|
||||
const timestampToDayNumber = (timestamp: number) => {
|
||||
const date = new Date(timestamp * 1000); // 假设时间戳是秒级
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${month}月${day}日`;
|
||||
};
|
||||
const handleBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const route = useRoute();
|
||||
const noteId = route.params.id; // 从路由参数中获取笔记ID
|
||||
|
||||
if (noteId) {
|
||||
getTaskSchedulesDetail(noteId)
|
||||
.then((response) => {
|
||||
if (response.data) {
|
||||
// 根据API响应结构调整
|
||||
const apiData = response.data.data || response.data;
|
||||
console.log(apiData);
|
||||
task.value = apiData;
|
||||
}
|
||||
})
|
||||
.catch((error) => {});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.management-detail {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.van-card__title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.van-card__desc {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.van-card__price {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 新增样式 */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 添加新的样式规则 */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mt-8px {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user