<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:width="400"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
class="cancel-task-dialogs"
|
>
|
<div class="dialog-headers">
|
<img @click="closeClick" src="@/assets/images/task/close.png" alt="" />
|
</div>
|
<div class="dialog-contents">
|
<div class="dialog-text">您确定取消任务？</div>
|
<div class="dialog-btns">
|
<img src="@/assets/images/task/cancel-one.png" @click="handleCancel" alt="" />
|
<img src="@/assets/images/task/cancel-all.png" @click="handleCancelAll" alt="" />
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { cancelJobs } from '@/api/job/task'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps({
|
isShowCancelTask: {
|
type: Boolean,
|
default: false,
|
},
|
rowData: {
|
type: Object,
|
required: true,
|
},
|
})
|
|
const emit = defineEmits(['update:isShowCancelTask', 'refresh'])
|
|
const dialogVisible = computed({
|
get: () => props.isShowCancelTask,
|
set: val => emit('update:isShowCancelTask', val),
|
})
|
|
// 取消本次
|
const handleCancel = () => {
|
submitCancelTask(props.rowData, 1)
|
dialogVisible.value = false
|
}
|
// 取消所有
|
const handleCancelAll = () => {
|
submitCancelTask(props.rowData, 0)
|
dialogVisible.value = false
|
}
|
// 提交取消任务请求
|
const submitCancelTask = (row, isSingle) => {
|
if (!row.wayline_job_info_id) {
|
ElMessage.warning('该任务无法取消，数据未兼容!')
|
return
|
}
|
cancelJobs({
|
jobInfoId: row.wayline_job_info_id,
|
batchNo: row.batch_no,
|
isSingle: isSingle,
|
}).then(res => {
|
if (res.data.code !== 0) return
|
ElMessage.success('取消任务成功')
|
emit('refresh')
|
})
|
}
|
const closeClick = () => {
|
dialogVisible.value = false
|
}
|
|
defineExpose({
|
submitCancelTask,
|
})
|
</script>
|
<style lang="scss">
|
.cancel-task-dialogs {
|
margin: 0;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
padding: 0;
|
// width: 398px;
|
// height: 181px;
|
background: #0f1d33;
|
box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
|
border-radius: 50px 0px 0px 0px;
|
border: 2px solid;
|
border-image: linear-gradient(
|
180deg,
|
rgba(81, 168, 255, 0),
|
rgba(48, 111, 202, 1),
|
rgba(255, 255, 255, 1),
|
rgba(27, 148, 255, 1)
|
)
|
2 2;
|
.el-dialog__header {
|
display: none;
|
}
|
.dialog-headers {
|
width: 100%;
|
height: 60px;
|
background: url('@/assets/images/task/header.png') center no-repeat;
|
background-size: 100% 100%;
|
color: #fff;
|
font-size: 16px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
position: absolute;
|
top: 24px;
|
right: 20px;
|
cursor: pointer;
|
}
|
}
|
|
.dialog-contents {
|
padding: 40px 20px 20px 20px;
|
.dialog-text {
|
color: #fff;
|
font-size: 14px;
|
margin-bottom: 60px;
|
text-align: center;
|
}
|
|
.dialog-btns {
|
display: flex;
|
justify-content: center;
|
gap: 46px;
|
img {
|
width: 96px;
|
height: 32px;
|
cursor: pointer;
|
}
|
// .el-button {
|
// width: 120px;
|
// height: 32px;
|
// border-radius: 2px;
|
|
// &.el-button--primary {
|
// background: #026ad6;
|
// border-color: #026ad6;
|
// }
|
// }
|
}
|
}
|
}
|
</style>
|
