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