From d517e5eacb38b075ae7cdffc011fc84401e587a8 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期三, 08 十一月 2023 10:12:50 +0800 Subject: [PATCH] feat: 添加报工输入弹窗 --- src/views/dashboard/components/ReportProductionModal.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/dashboard/components/TaskControl.vue | 13 ++++++ 2 files changed, 117 insertions(+), 1 deletions(-) diff --git a/src/views/dashboard/components/ReportProductionModal.vue b/src/views/dashboard/components/ReportProductionModal.vue new file mode 100644 index 0000000..f48da66 --- /dev/null +++ b/src/views/dashboard/components/ReportProductionModal.vue @@ -0,0 +1,105 @@ +<template> + <div class="report-production-modal"> + <BaseModal v-model="modelData" :wider="true" @close="closeModal"> + <template #title> 鐢熶骇鎶ュ伐 </template> + <div class="report-content"> + <div class="numbers">{{ inputNumber }}</div> + <div class="buttons"> + <BigButton + v-for="item in btnList" + :key="item" + class="btn" + :bg-color="getBtnColor(item).bgColor" + :color="getBtnColor(item).color" + @click="clickBtn(item)" + >{{ item }}</BigButton + > + </div> + </div> + </BaseModal> + </div> +</template> + +<script setup lang="ts"> +import { useVModel } from '@vueuse/core' +import BigButton from './BigButton.vue' +import { ref, watch } from 'vue' +const props = withDefaults(defineProps<{ modelValue: boolean }>(), { + modelValue: false +}) +const emit = defineEmits<{ + 'update:modelValue': [show: boolean] + submit: [inputNumber: number] + close: [] +}>() +const modelData = useVModel(props, 'modelValue', emit) +function closeModal() { + emit('close') +} + +const btnList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '娓呴櫎', '0', '纭畾'] +function getBtnColor(item: string) { + if (item === '娓呴櫎') { + return { + color: '#ffffff', + bgColor: '#f44336' + } + } else if (item === '纭畾') { + return { + color: '#ffffff', + bgColor: '#2196f3' + } + } else { + return { + color: '#1a73ff', + bgColor: '#f2f2f2' + } + } +} +const inputNumber = ref('') +function clickBtn(input: string) { + if (input === '娓呴櫎') { + inputNumber.value = '' + } else if (input === '纭畾') { + emit('submit', +inputNumber.value) + } else if (inputNumber.value === '0' && input === '0') { + return + } else if (inputNumber.value === '0' && input !== '0') { + inputNumber.value = input + } else { + inputNumber.value += input + } +} +watch(modelData, () => { + if (modelData.value) { + inputNumber.value = '' + } +}) +</script> + +<style scoped lang="scss"> +.report-content { + padding: 60px 0 0 230px; + height: 520px; +} +.numbers { + height: 80px; + border: 1px solid #fff; + padding: 0 6px; + width: 400px; + margin-bottom: 20px; + line-height: 80px; + text-align: right; + font-size: 40px; + color: #fff; +} +.buttons { + width: 420px; +} +.btn { + margin-right: 20px; + margin-bottom: 20px; + width: 120px; + height: 70px; +} +</style> diff --git a/src/views/dashboard/components/TaskControl.vue b/src/views/dashboard/components/TaskControl.vue index 3d22b64..6791ac2 100644 --- a/src/views/dashboard/components/TaskControl.vue +++ b/src/views/dashboard/components/TaskControl.vue @@ -22,7 +22,7 @@ </BigButton> <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="#00cc33" @click="openReportModal">鎶ュ伐</BigButton> <el-popconfirm width="340" confirm-button-text="纭畾" @@ -43,6 +43,11 @@ </div> </div> <TaskControlModal v-model="showTaskControlModal" :task="task" @produce-start="onProduceStart"></TaskControlModal> + <ReportProductionModal + v-model="showReportModal" + @close="showReportModal = false" + @submit="showReportModal = false" + ></ReportProductionModal> </template> <script setup lang="ts"> import type { Task } from '@/api/task' @@ -53,6 +58,7 @@ import { CircleCloseFilled } from '@element-plus/icons-vue' import { finishTask } from '@/api' import { ElMessage } from 'element-plus' +import ReportProductionModal from '@/views/dashboard/components/ReportProductionModal.vue' const props = defineProps<{ task?: Task @@ -116,6 +122,11 @@ const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' }) return time.value } +// 鎶ュ伐 +const showReportModal = ref(false) +function openReportModal() { + showReportModal.value = true +} </script> <style scoped lang="scss"> $title-text-color: #9599af; -- Gitblit v1.8.0