444 lines
10 KiB
Vue
444 lines
10 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view v-if="loading" class="state-box">
|
|
<text class="state-text">加载中...</text>
|
|
</view>
|
|
<template v-else-if="item">
|
|
<view class="detail-card">
|
|
<view class="head-block">
|
|
<view class="head-row">
|
|
<text class="head-text" :class="{ done: item.completed }">{{ headText }}</text>
|
|
<view class="head-tags">
|
|
<u-tag
|
|
v-if="priorityLabel !== '普通'"
|
|
:text="priorityLabel"
|
|
:type="Number(item.priority) === 2 ? 'error' : 'warning'"
|
|
size="mini"
|
|
plain
|
|
/>
|
|
<u-tag
|
|
:text="item.completed ? '已完成' : '待办'"
|
|
:type="item.completed ? 'success' : 'primary'"
|
|
size="mini"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text v-if="extraContent" class="head-extra">{{ extraContent }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">日期</text>
|
|
<text class="info-value">{{ dayLabel(item.timestamp) }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="info-label">时间</text>
|
|
<text class="info-value">{{ timeRangeText }}</text>
|
|
</view>
|
|
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">优先级</text>
|
|
<text class="info-value">{{ priorityLabel }}</text>
|
|
</view> -->
|
|
|
|
<view
|
|
v-if="item.images?.length || item.completed"
|
|
class="image-block"
|
|
>
|
|
<view class="image-head">
|
|
<text class="info-label">任务资料</text>
|
|
<text v-if="item.images?.length" class="image-hint">长按图片可删除</text>
|
|
</view>
|
|
<view class="image-grid">
|
|
<image
|
|
v-for="(img, index) in item.images"
|
|
:key="img.id || index"
|
|
class="image-item"
|
|
:src="img.url"
|
|
mode="aspectFill"
|
|
@click="previewImage(index)"
|
|
@longpress="onRemoveImage(index)"
|
|
/>
|
|
<view v-if="item.completed" class="image-add" @tap="onUploadMaterial">
|
|
<FaIcon name="plus" color="#94a3b8" :size="20" />
|
|
<text>{{ uploading ? '上传中...' : '上传' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="meta-row">
|
|
<text>创建于 {{ formatTime(item.create_time) }}</text>
|
|
<text v-if="item.update_time">更新于 {{ formatTime(item.update_time) }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view v-if="item" class="footer">
|
|
<view class="footer-btn">
|
|
<u-button
|
|
:type="item.completed ? 'info' : 'primary'"
|
|
:icon="item.completed ? 'reload' : 'checkmark'"
|
|
:text="item.completed ? '反审核' : '标记完成'"
|
|
:plain="item.completed"
|
|
@click="onToggleComplete"
|
|
/>
|
|
</view>
|
|
<template v-if="!item.completed">
|
|
<view class="footer-btn">
|
|
<u-button type="primary" plain icon="edit-pen" text="编辑" @click="openEdit" />
|
|
</view>
|
|
<view class="footer-btn">
|
|
<u-button type="error" plain icon="trash" text="删除" @click="onDelete" />
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import {
|
|
getOaSchedule,
|
|
deleteOaSchedule,
|
|
toggleOaScheduleComplete,
|
|
uploadOaScheduleImage,
|
|
setOaScheduleImages,
|
|
getOaPriorityLabel
|
|
} from '@/api/oaSchedule.js'
|
|
import { dayLabel, formatDate } from '@/utils/date.js'
|
|
|
|
const scheduleId = ref('')
|
|
const item = ref(null)
|
|
const loading = ref(false)
|
|
const uploading = ref(false)
|
|
|
|
const priorityLabel = computed(() => {
|
|
if (!item.value) return ''
|
|
return getOaPriorityLabel(item.value.priority)
|
|
})
|
|
|
|
/** 标题即内容：标题作为正文主文本展示 */
|
|
const headText = computed(() => {
|
|
if (!item.value) return ''
|
|
return (item.value.title || '').trim() || '无标题'
|
|
})
|
|
|
|
/** content 与标题相同（或为空）时不重复展示，仅在有额外内容时补充显示 */
|
|
const extraContent = computed(() => {
|
|
if (!item.value) return ''
|
|
const c = (item.value.content || '').trim()
|
|
if (!c || c === (item.value.title || '').trim()) return ''
|
|
return c
|
|
})
|
|
|
|
const timeRangeText = computed(() => {
|
|
if (!item.value) return ''
|
|
if (item.value.allDay) return '全天'
|
|
const start = item.value.start_time || ''
|
|
const end = item.value.end_time || ''
|
|
if (!start) return '未设置'
|
|
return end ? `${start} - ${end}` : start
|
|
})
|
|
|
|
onLoad((query) => {
|
|
if (query?.id) {
|
|
scheduleId.value = query.id
|
|
loadDetail()
|
|
}
|
|
})
|
|
|
|
onShow(() => {
|
|
if (scheduleId.value) loadDetail()
|
|
})
|
|
|
|
/** 后端时间字段可能为 "YYYY-MM-DD HH:mm:ss" 格式，iOS 需转 T 分隔 */
|
|
function formatTime(value) {
|
|
if (!value) return ''
|
|
return formatDate(new Date(String(value).replace(' ', 'T')), true)
|
|
}
|
|
|
|
async function loadDetail() {
|
|
loading.value = true
|
|
try {
|
|
const data = await getOaSchedule(scheduleId.value)
|
|
if (!data) {
|
|
uni.showToast({ title: '日程不存在', icon: 'none' })
|
|
setTimeout(() => uni.navigateBack(), 800)
|
|
return
|
|
}
|
|
item.value = data
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function previewImage(index) {
|
|
const urls = (item.value?.images || []).map(img => img.url).filter(Boolean)
|
|
if (!urls.length) return
|
|
uni.previewImage({ urls, current: urls[index] || urls[0] })
|
|
}
|
|
|
|
/** 上传资料图片：选图 → 逐张上传 → 引用写回日程 */
|
|
function onUploadMaterial() {
|
|
if (uploading.value) return
|
|
uni.chooseImage({
|
|
count: 9,
|
|
success: async (res) => {
|
|
const paths = res.tempFilePaths || []
|
|
if (!paths.length) return
|
|
uploading.value = true
|
|
try {
|
|
const uploaded = []
|
|
for (const p of paths) {
|
|
uploaded.push(await uploadOaScheduleImage(p))
|
|
}
|
|
const saved = await setOaScheduleImages(
|
|
scheduleId.value,
|
|
[...(item.value.images || []), ...uploaded]
|
|
)
|
|
item.value.images = saved
|
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
|
} catch (e) {
|
|
// 上传/请求封装已提示错误
|
|
} finally {
|
|
uploading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
/** 长按删除资料图片（仅移除引用，不动文件管理里的文件） */
|
|
function onRemoveImage(index) {
|
|
const img = item.value?.images?.[index]
|
|
if (!img || uploading.value) return
|
|
uni.showModal({
|
|
title: '删除资料',
|
|
content: `确定删除「${img.name || '该图片'}」吗？`,
|
|
success: async (res) => {
|
|
if (!res.confirm) return
|
|
try {
|
|
const saved = await setOaScheduleImages(
|
|
scheduleId.value,
|
|
item.value.images.filter((_, i) => i !== index)
|
|
)
|
|
item.value.images = saved
|
|
uni.showToast({ title: '已删除', icon: 'none' })
|
|
} catch (e) {
|
|
// request 封装已提示错误
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function openEdit() {
|
|
uni.navigateTo({ url: `/pages/tools/schedule/edit?id=${scheduleId.value}` })
|
|
}
|
|
|
|
async function onToggleComplete() {
|
|
if (!item.value) return
|
|
const wasCompleted = item.value.completed
|
|
try {
|
|
const res = await toggleOaScheduleComplete(item.value.id)
|
|
item.value = { ...item.value, completed: res.completed, status: res.status }
|
|
uni.showToast({
|
|
title: wasCompleted ? '已反审核' : '已标记完成',
|
|
icon: 'none'
|
|
})
|
|
} catch (e) {
|
|
// request 封装已弹出服务端错误提示
|
|
}
|
|
}
|
|
|
|
function onDelete() {
|
|
const summary = item.value?.title || '该日程'
|
|
uni.showModal({
|
|
title: '删除日程',
|
|
content: `确定删除「${summary}」吗？`,
|
|
success: async (res) => {
|
|
if (!res.confirm) return
|
|
try {
|
|
await deleteOaSchedule(scheduleId.value)
|
|
uni.showToast({ title: '已删除', icon: 'success' })
|
|
setTimeout(() => uni.navigateBack(), 400)
|
|
} catch (e) {
|
|
// request 封装已弹出服务端错误提示
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
padding: 24rpx $page-padding-x;
|
|
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.detail-card {
|
|
@include card;
|
|
padding: 32rpx 28rpx;
|
|
}
|
|
|
|
.head-block {
|
|
padding-bottom: 24rpx;
|
|
}
|
|
|
|
.head-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.head-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 30rpx;
|
|
color: $color-text;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
|
|
&.done {
|
|
color: $color-text-muted;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.head-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.head-extra {
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
font-size: 28rpx;
|
|
color: $color-text-secondary;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid $color-divider;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: $color-text-muted;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: $color-text;
|
|
text-align: right;
|
|
}
|
|
|
|
.image-block {
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid $color-divider;
|
|
}
|
|
|
|
.image-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.image-hint {
|
|
font-size: 22rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.image-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.image-item {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: $radius-md;
|
|
background: $color-bg-page;
|
|
}
|
|
|
|
.image-add {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border: 1rpx dashed $color-border;
|
|
border-radius: $radius-md;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6rpx;
|
|
font-size: 22rpx;
|
|
color: $color-text-muted;
|
|
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.meta-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
padding-top: 24rpx;
|
|
margin-top: 8rpx;
|
|
border-top: 1rpx solid $color-divider;
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
gap: 16rpx;
|
|
padding: 20rpx $page-padding-x;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
background: $color-card;
|
|
border-top: 1rpx solid $color-border;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.footer-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.state-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 160rpx 0;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 28rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
</style>
|