任务取消
This commit is contained in:
WindowBird
parent
79b03cfba2
commit
b139fd23fe
19
api/task.js
19
api/task.js
|
|
@ -174,6 +174,25 @@ export const createTask = (payload) => {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消任务
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} params.id 任务ID
|
||||
* @param {string} params.cancelRemark 取消备注
|
||||
* @returns {Promise} 返回取消结果
|
||||
*/
|
||||
export const cancelTask = ({ id, cancelRemark }) => {
|
||||
return uni.$uv.http.put('/bst/task/cancel', {
|
||||
id: id,
|
||||
cancelRemark: cancelRemark || ''
|
||||
}, {
|
||||
custom: {
|
||||
auth: true, // 启用 token 认证
|
||||
catch: true
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取全部项目列表
|
||||
* @returns {Promise<Array>} 项目列表
|
||||
|
|
|
|||
|
|
@ -194,7 +194,46 @@
|
|||
<uv-button type="primary" size="normal" @click="submitTask">提交任务</uv-button>
|
||||
</view>
|
||||
<view class="btn-wrapper" v-if="showCancelBtn">
|
||||
<uv-button type="error" size="normal" @click="cancelTask">取消任务</uv-button>
|
||||
<uv-button type="error" size="normal" @click="openCancelModal">取消任务</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 取消任务模态框 -->
|
||||
<view v-if="showCancelModal" class="cancel-modal">
|
||||
<view class="modal-mask" @click="closeCancelModal"></view>
|
||||
<view class="modal-panel" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">取消任务</text>
|
||||
<text class="modal-close" @click="closeCancelModal">✕</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">取消备注</text>
|
||||
<view class="input-wrapper">
|
||||
<textarea
|
||||
v-model="cancelRemark"
|
||||
class="cancel-remark-input"
|
||||
placeholder="请输入取消备注"
|
||||
placeholder-style="color: #999;"
|
||||
:maxlength="200"
|
||||
auto-height
|
||||
/>
|
||||
<view class="char-count">{{ cancelRemark.length }}/200</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-actions">
|
||||
<uv-button size="small" @click="closeCancelModal" :disabled="cancelling">取消</uv-button>
|
||||
<uv-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="confirmCancelTask"
|
||||
:loading="cancelling"
|
||||
:disabled="cancelling"
|
||||
>
|
||||
确定
|
||||
</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -207,7 +246,7 @@ import { storeToRefs } from 'pinia';
|
|||
import { getStatusFromTagText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
|
||||
import { useTaskStore } from '@/store/task';
|
||||
import { useUserStore } from '@/store/user';
|
||||
import { getTaskDetail } from '@/api';
|
||||
import { getTaskDetail, cancelTask as cancelTaskApi } from '@/api';
|
||||
|
||||
// 当前激活的标签
|
||||
const activeTab = ref('info');
|
||||
|
|
@ -847,22 +886,77 @@ const applyDelay = () => {
|
|||
});
|
||||
};
|
||||
|
||||
// 取消任务
|
||||
const cancelTask = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消任务吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log("取消任务", task.value.id);
|
||||
uni.showToast({
|
||||
title: '任务已取消',
|
||||
icon: 'success'
|
||||
});
|
||||
// 可以在这里添加取消任务的API调用
|
||||
}
|
||||
}
|
||||
// 取消任务相关状态
|
||||
const showCancelModal = ref(false);
|
||||
const cancelRemark = ref('');
|
||||
const cancelling = ref(false);
|
||||
|
||||
// 打开取消任务模态框
|
||||
const openCancelModal = () => {
|
||||
cancelRemark.value = '';
|
||||
showCancelModal.value = true;
|
||||
};
|
||||
|
||||
// 关闭取消任务模态框
|
||||
const closeCancelModal = () => {
|
||||
if (cancelling.value) return; // 提交中不允许关闭
|
||||
showCancelModal.value = false;
|
||||
cancelRemark.value = '';
|
||||
};
|
||||
|
||||
// 确认取消任务
|
||||
const confirmCancelTask = async () => {
|
||||
if (!task.value.id) {
|
||||
uni.showToast({
|
||||
title: '任务ID不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!cancelRemark.value.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入取消备注',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
cancelling.value = true;
|
||||
uni.showLoading({
|
||||
title: '取消中...'
|
||||
});
|
||||
|
||||
try {
|
||||
await cancelTaskApi({
|
||||
id: task.value.id,
|
||||
cancelRemark: cancelRemark.value.trim()
|
||||
});
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '任务已取消',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 关闭模态框
|
||||
showCancelModal.value = false;
|
||||
cancelRemark.value = '';
|
||||
|
||||
// 刷新任务列表
|
||||
uni.$emit('taskListRefresh');
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
console.error('取消任务失败:', error);
|
||||
// 错误提示已在响应拦截器中统一处理
|
||||
} finally {
|
||||
cancelling.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载任务数据
|
||||
|
|
@ -1512,7 +1606,118 @@ onShow(() => {
|
|||
|
||||
.btn-wrapper {
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
/* 取消任务模态框 */
|
||||
.cancel-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cancel-modal .modal-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.cancel-modal .modal-panel {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.cancel-modal .modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.cancel-modal .modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cancel-modal .modal-close {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-modal .modal-body {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cancel-modal .form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cancel-modal .form-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-modal .input-wrapper {
|
||||
position: relative;
|
||||
border: 1px solid #2885ff;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.cancel-modal .cancel-remark-input {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cancel-modal .char-count {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cancel-modal .modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user