367 lines
8.6 KiB
Vue
367 lines
8.6 KiB
Vue
<template>
|
||
|
||
<view class="submit-task-page">
|
||
<!-- 自定义导航栏 -->
|
||
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y>
|
||
<view style="padding: 16px">
|
||
|
||
|
||
<!-- 输入提交说明 -->
|
||
<view class="form-item">
|
||
<view class="form-icon"></view>
|
||
<textarea
|
||
v-model="formData.description"
|
||
class="description-input"
|
||
placeholder="输入提交说明"
|
||
placeholder-style="color: #999;"
|
||
:maxlength="500"
|
||
auto-height
|
||
/>
|
||
</view>
|
||
|
||
|
||
|
||
<AttachmentImageUploader v-model="formData.images" />
|
||
<AttachmentFileUploader v-model="formData.files" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 确认提交按钮 -->
|
||
<view class="submit-button-wrapper">
|
||
<uv-button
|
||
type="primary"
|
||
size="normal"
|
||
:disabled="!canSubmit"
|
||
@click="handleSubmit"
|
||
>
|
||
{{ isEditMode ? '确认更新' : '确认提交' }}
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { submitTask } from '@/api';
|
||
import AttachmentImageUploader from '@/components/task/AttachmentImageUploader.vue';
|
||
import AttachmentFileUploader from '@/components/task/AttachmentFileUploader.vue';
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
description: '',
|
||
images: [],
|
||
files: []
|
||
});
|
||
|
||
// 任务ID
|
||
const taskId = ref(null);
|
||
// 编辑模式标识
|
||
const isEditMode = ref(false);
|
||
const editRecordIndex = ref(-1);
|
||
const editRecordData = ref(null);
|
||
|
||
// 是否可以提交
|
||
const canSubmit = computed(() => {
|
||
return formData.value.description.trim() !== '' ||
|
||
formData.value.images.length > 0 ||
|
||
formData.value.files.length > 0;
|
||
});
|
||
|
||
// 页面加载
|
||
onLoad((options) => {
|
||
taskId.value = options.taskId || options.id;
|
||
|
||
// 检查是否是编辑模式
|
||
if (options.mode === 'edit' || options.recordIndex !== undefined) {
|
||
isEditMode.value = true;
|
||
editRecordIndex.value = parseInt(options.recordIndex || -1);
|
||
|
||
// 从存储中获取编辑数据
|
||
const editData = uni.getStorageSync('editSubmitRecord');
|
||
if (editData && editData.record) {
|
||
editRecordData.value = editData.record;
|
||
|
||
// 预填充表单数据
|
||
formData.value.description = editData.record.content || '';
|
||
// 处理附件
|
||
if (editData.record.attachments && editData.record.attachments.length > 0) {
|
||
editData.record.attachments.forEach(attachment => {
|
||
if (attachment.type === 'image' && attachment.path) {
|
||
formData.value.images.push(attachment.path);
|
||
} else if (attachment.type === 'file') {
|
||
formData.value.files.push({
|
||
name: attachment.name || '文件',
|
||
path: attachment.path || '',
|
||
size: attachment.size || 0
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 清除存储的编辑数据
|
||
uni.removeStorageSync('editSubmitRecord');
|
||
}
|
||
}
|
||
});
|
||
|
||
// 取消
|
||
const handleCancel = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消提交吗？未保存的内容将丢失',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 格式化时间为中文格式：年月日星期几时分秒
|
||
const formatTimeToChinese = (date) => {
|
||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const weekday = weekdays[date.getDay()];
|
||
const hour = String(date.getHours()).padStart(2, '0');
|
||
const minute = String(date.getMinutes()).padStart(2, '0');
|
||
const second = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}年${month}月${day}日 ${weekday} ${hour}:${minute}:${second}`;
|
||
};
|
||
|
||
// 提交任务
|
||
const handleSubmit = async () => {
|
||
if (!canSubmit.value) {
|
||
uni.showToast({
|
||
title: '请至少填写提交说明或添加附件',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!taskId.value) {
|
||
uni.showToast({
|
||
title: '任务ID不能为空',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: isEditMode.value ? '更新中...' : '提交中...'
|
||
});
|
||
|
||
try {
|
||
// 合并所有附件URL（图片和文件）
|
||
// 图片和文件都已经上传到七牛云，直接使用URL
|
||
const allAttaches = [
|
||
...formData.value.images, // 图片已经是七牛云URL
|
||
...formData.value.files.map(file => file.path) // 文件已经是七牛云URL
|
||
].filter(url => url && url.trim() !== ''); // 过滤空值
|
||
|
||
// 将附件数组转换为逗号分隔的字符串
|
||
const submitAttaches = allAttaches.join(',');
|
||
|
||
// 调用提交接口
|
||
await submitTask({
|
||
id: taskId.value,
|
||
submitAttaches: submitAttaches,
|
||
submitRemark: formData.value.description.trim()
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
// 提交成功后的处理
|
||
if (isEditMode.value) {
|
||
// 编辑模式：更新现有记录
|
||
const updatedRecord = {
|
||
userName: editRecordData.value?.userName || '当前用户', // 保持原用户名
|
||
time: formatTimeToChinese(new Date()), // 更新时间
|
||
content: formData.value.description.trim() || '',
|
||
attachments: [
|
||
...formData.value.images.map(img => ({ type: 'image', path: img })),
|
||
...formData.value.files.map(file => ({ type: 'file', name: file.name, path: file.path }))
|
||
],
|
||
canEdit: true, // 保持可编辑权限
|
||
showDelayBtn: editRecordData.value?.showDelayBtn || false
|
||
};
|
||
|
||
// 将更新的记录存储到本地，供任务详情页使用
|
||
uni.setStorageSync('updatedSubmitRecord', {
|
||
recordIndex: editRecordIndex.value,
|
||
record: updatedRecord
|
||
});
|
||
|
||
uni.showToast({
|
||
title: '更新成功',
|
||
icon: 'success'
|
||
});
|
||
} else {
|
||
// 新建模式：添加新记录
|
||
const submitRecord = {
|
||
userName: '当前用户', // TODO: 从用户信息获取
|
||
time: formatTimeToChinese(new Date()),
|
||
content: formData.value.description.trim() || '',
|
||
attachments: [
|
||
...formData.value.images.map(img => ({ type: 'image', path: img })),
|
||
...formData.value.files.map(file => ({ type: 'file', name: file.name, path: file.path }))
|
||
],
|
||
canEdit: true,
|
||
showDelayBtn: false
|
||
};
|
||
|
||
// 将提交记录存储到本地，供任务详情页使用
|
||
uni.setStorageSync('newSubmitRecord', submitRecord);
|
||
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
|
||
// 延迟返回，让用户看到成功提示
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('提交任务失败:', error);
|
||
uni.showToast({
|
||
title: error.message || '提交失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.submit-task-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
/* 自定义导航栏 */
|
||
.custom-navbar {
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.navbar-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
height: 44px;
|
||
}
|
||
|
||
.nav-btn {
|
||
font-size: 20px;
|
||
color: #333;
|
||
padding: 4px 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-placeholder {
|
||
width: 36px;
|
||
}
|
||
|
||
/* 内容滚动区域 */
|
||
.content-scroll {
|
||
flex: 1;
|
||
|
||
}
|
||
|
||
/* 表单项 */
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.clickable-item {
|
||
cursor: pointer;
|
||
|
||
&:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
|
||
.form-icon {
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.form-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.form-value {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-placeholder {
|
||
font-size: 15px;
|
||
color: #999;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 20px;
|
||
color: #999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.description-input {
|
||
flex: 1;
|
||
min-height: 80px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 图片预览 */
|
||
/* 提交按钮 */
|
||
.submit-button-wrapper {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 16px;
|
||
background-color: #fff;
|
||
border-top: 1px solid #eee;
|
||
z-index: 100;
|
||
}
|
||
</style>
|
||
|