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