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