haoxuan
2023-11-01 8c84c7277018b259f5b99f26cbfd14603bc4e4c0
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>