From 403ce87b79b7f402b8000b95c5b0b9d77bc393d0 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期三, 01 十一月 2023 17:01:35 +0800 Subject: [PATCH] feat: 任务控制弹窗添加状态转换逻辑 --- src/views/dashboard/components/TaskControl.vue | 96 +++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 94 insertions(+), 2 deletions(-) diff --git a/src/views/dashboard/components/TaskControl.vue b/src/views/dashboard/components/TaskControl.vue index 9a69334..47b9945 100644 --- a/src/views/dashboard/components/TaskControl.vue +++ b/src/views/dashboard/components/TaskControl.vue @@ -23,11 +23,30 @@ <template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3"> <BigButton class="btn" bg-color="#ff9933">鎵撳嵃</BigButton> <BigButton class="btn" bg-color="#00cc33">鎶ュ伐</BigButton> - <BigButton class="btn" bg-color="#ff0000">瀹屾垚</BigButton> + <el-popconfirm + width="340" + confirm-button-text="纭畾" + cancel-button-text="鍙栨秷" + :icon="CircleCloseFilled" + icon-color="red" + :hide-after="0" + :teleported="false" + title="璇风‘璁ゆ槸鍚﹀凡瀹屾垚姝ょ敓浜т换鍔�?" + placement="top" + @confirm="finishTaskProduce" + > + <template #reference> + <BigButton class="btn" bg-color="#ff0000">瀹屾垚</BigButton> + </template> + </el-popconfirm> </template> </div> </div> - <TaskControlModal v-model="showTaskControlModal" :task="task"></TaskControlModal> + <TaskControlModal + v-model="showTaskControlModal" + :task="task" + @produce-start="emit('shouldReload', task)" + ></TaskControlModal> </template> <script setup lang="ts"> import type { Task } from '@/api/task' @@ -35,11 +54,18 @@ import BigButton from '@/views/dashboard/components/BigButton.vue' import { useDateFormat } from '@vueuse/core' import TaskControlModal from '@/views/dashboard/components/TaskControlModal.vue' +import { CircleCloseFilled } from '@element-plus/icons-vue' +import { finishTask } from '@/api' +import { ElMessage } from 'element-plus' const props = defineProps<{ task?: Task }>() const { task } = toRefs(props) + +const emit = defineEmits<{ + shouldReload: [task: Task] +}>() const showTaskControlModal = ref(false) @@ -48,6 +74,35 @@ */ function startProduce() { showTaskControlModal.value = true +} + +/** + * 瀹屾垚浠诲姟 + */ +function finishTaskProduce() { + if (task?.value?.Procedure?.ID) { + finishTask({ id: task!.value.Procedure.ID }).then( + (res) => { + ElMessage({ + message: '鎿嶄綔鎴愬姛锛�', + type: 'success' + }) + emit('shouldReload', task.value) + }, + (err) => { + console.error(err) + ElMessage({ + message: '鎿嶄綔澶辫触锛�', + type: 'warning' + }) + } + ) + } else { + ElMessage({ + message: '褰撳墠璁惧娌℃湁宸ュ簭锛�', + type: 'warning' + }) + } } /** @@ -119,4 +174,41 @@ .finish-btn { background-color: #ff0000; } + +:deep(.el-popper) { + background-color: #133f97; + color: #fff; +} +:deep(.el-popconfirm__main) { + font-size: 25px; +} +:deep(.el-popconfirm__icon) { + font-size: 38px; +} +:deep(.el-popconfirm__main) { + margin-bottom: 20px; +} +:deep(.el-popconfirm__action) { + display: flex; + align-items: center; + justify-content: space-around; +} +:deep(.el-popconfirm__action .el-button) { + font-size: 22px; + height: 54px; + width: 140px; + color: #fff; + background-color: #0ae5ec; + &:hover { + background-color: #0ae5ec; + } + &.is-text { + color: #92a1c0; + background-color: #133f97; + border: 1px solid #0ae5ec; + &:hover { + background-color: #133f97; + } + } +} </style> -- Gitblit v1.8.0