From c713c05133f442b8a11bd9fdaf364a75575baffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Wed, 11 Dec 2024 16:47:35 +0800
Subject: [PATCH] 1

---
 .../touchScreen/components/scanInput.vue      |  36 +-
 src/views/touchScreen/main/index.vue          |  24 +-
 src/views/touchScreen/report/index.vue        | 355 ++++++++++++------
 src/vuetify-theme.json                        |  16 +-
 4 files changed, 302 insertions(+), 129 deletions(-)

diff --git a/src/views/touchScreen/components/scanInput.vue b/src/views/touchScreen/components/scanInput.vue
index bd9306e..76de8ef 100644
--- a/src/views/touchScreen/components/scanInput.vue
+++ b/src/views/touchScreen/components/scanInput.vue
@@ -1,10 +1,19 @@
 <template>
     <div class="scanInput">
-        <el-input ref="inputRef" v-model="input" type="password" placeholder="请扫码" @blur="doInputBlur"
+        <!-- <el-input ref="inputRef" v-model="input" type="password" placeholder="请扫码" @blur="doInputBlur"
             @change="doInputChange">
-        </el-input>
-        <div style="width: 10%;"></div>
-        <el-button icon="FullScreen" type="primary" @click="doInputChange(input)">手动提交</el-button>
+        </el-input> -->
+        <v-text-field prepend-inner-icon="mdi-line-scan" type="password" ref="inputRef" autofocus label="请扫码"
+            v-model="input" variant="solo-inverted" @keydown="handleKeyPress">
+            <template v-slot:append>
+                <v-btn class="bg-blue-darken-1" size="x-large" prepend-icon="mdi-line-scan"
+                    @click="doInputChange(input)">
+                    扫码
+                </v-btn>
+            </template>
+        </v-text-field>
+
+        <!-- <el-button icon="FullScreen" type="primary" @click="doInputChange(input)">手动提交</el-button> -->
     </div>
 </template>
 
@@ -21,11 +30,17 @@ function autoInputFocus() {
         })
     }
 }
+// 回车确认提交
+const handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+        doInputChange(input.value);
+    }
+};
 // 失去焦点时，重新聚焦
 function doInputBlur() {
-    setTimeout(() => {
-        autoInputFocus()
-    }, 500)
+    // setTimeout(() => {
+    //     autoInputFocus()
+    // }, 500)
 }
 // 输入框变化时，重新聚焦
 function doInputChange(value) {
@@ -35,9 +50,9 @@ function doInputChange(value) {
         return
     }
     input.value = ''
-    setTimeout(() => {
-        autoInputFocus()
-    }, 500)
+    // setTimeout(() => {
+    //     autoInputFocus()
+    // }, 500)
     proxy.$emit('scanInput', _value)
 }
 
@@ -55,6 +70,7 @@ onUnmounted(() => {
 
 <style scoped>
 .scanInput {
+    width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/views/touchScreen/main/index.vue b/src/views/touchScreen/main/index.vue
index 22e80fb..f1cf535 100644
--- a/src/views/touchScreen/main/index.vue
+++ b/src/views/touchScreen/main/index.vue
@@ -30,7 +30,14 @@
             <v-fade-transition>
                 <Report v-if="menuActivated === '报工'"></Report>
             </v-fade-transition>
+            <!-- 底部logo -->
+            <v-footer class="footer-center" app>
+                <el-link type="info" style="font-size: larger" href="http://www.doan-tech.com/"
+                    target="_blank">版权所有：苏州道安自动化技术有限公司
+                </el-link>
+            </v-footer>
         </v-main>
+
     </v-layout>
 </template>
 
@@ -45,11 +52,11 @@ const goBack = () => {
 }
 // 右侧菜单
 const listItems = ref([
-    { title: '报工', value: '报工', icon: 'mdi-account' },
-    { title: '质量', value: '质量', icon: 'mdi-account' },
-    { title: '报警', value: '报警', icon: 'mdi-account' },
-    { title: '打印', value: '打印', icon: 'mdi-account' },
-    { title: '设置', value: '设置', icon: 'mdi-account' },
+    { title: '报工', value: '报工', icon: 'mdi-clipboard-file-outline' },
+    { title: '质量', value: '质量', icon: 'mdi-application-edit' },
+    { title: '报警', value: '报警', icon: 'mdi-bell-alert' },
+    { title: '打印', value: '打印', icon: 'mdi-printer' },
+    { title: '设置', value: '设置', icon: 'mdi-tools' },
 ])
 const menuActivated = ref('报工')
 function selectItem(val) {
@@ -96,6 +103,13 @@ onMounted(() => {
     height: 100vh;
 }
 
+.footer-center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .header {
     background-color: #006B8C;
     padding: 20px;
diff --git a/src/views/touchScreen/report/index.vue b/src/views/touchScreen/report/index.vue
index 8ab71f7..5138d61 100644
--- a/src/views/touchScreen/report/index.vue
+++ b/src/views/touchScreen/report/index.vue
@@ -1,147 +1,280 @@
 <template>
-    <el-row>
-        <!-- Left Part -->
-        <el-col :span="18">
-            <div class="left-content">
-                <v-card>
+    <v-container fluid class="bg-indigo-darken-4">
+        <v-row>
+            <v-col cols="8">
+                <v-card color="blue-darken-4" class="left-content">
+                    <v-tabs v-model="tab" bg-color="primary">
+                        <v-tab value="报工">报工</v-tab>
+                        <v-tab value="历史报工记录">历史报工记录</v-tab>
+                    </v-tabs>
                     <v-card-text>
-                        123
+                        <v-fade-transition>
+                            <v-tabs-window v-model="tab">
+                                <v-tabs-window-item value="报工">
+                                    <el-card v-if="formData.workorder" class="mt-4">
+                                        <v-text-field type="number" :label="processId === 10 ? '报工数' : '完成数'"
+                                            v-model="formData.finishNum"></v-text-field>
+                                        <v-text-field type="number" label="不良数"
+                                            v-model="formData.badNum"></v-text-field>
+                                        <v-text-field v-if="processId === 10" label="炉号"
+                                            v-model="formData.stoveCode"></v-text-field>
+                                        <v-text-field v-if="processId === 10" label="进料单"
+                                            v-model="formData.feedOrder"></v-text-field>
+                                        <v-text-field v-if="processId === 90" label="客户定单"
+                                            v-model="formData.customerOrder"></v-text-field>
+                                        <div class="d-flex justify-end">
+                                            <v-btn class="bg-blue-darken-1" @click="submit">{{ getButtonName()
+                                                }}</v-btn>
+                                        </div>
+                                    </el-card>
+                                </v-tabs-window-item>
+                                <v-tabs-window-item value="历史报工记录">
+                                    <el-card v-if="formData.workorder" class="mt-4">
+                                        <v-list lines="two" class="bg-transparent">
+                                            <v-list-item v-for="(item, index) in reportWorkerOrderList" :key="index"
+                                                :title="item.processName">
+                                                <v-list-item-subtitle class="d-flex justify-space-between">
+                                                    <span class="text-subtitle-1">
+                                                        {{
+                                                            `完成数:${item.finishNum} 不良数:${item.badNum}`
+                                                        }}
+                                                    </span>
+                                                    <span>{{ `作业员:${item.worker} 提交时间:${item.jobDate}` }}</span>
+                                                </v-list-item-subtitle>
+                                            </v-list-item>
+                                        </v-list>
+                                    </el-card>
+                                </v-tabs-window-item>
+                            </v-tabs-window>
+                        </v-fade-transition>
                     </v-card-text>
-                    <v-card-actions>
-                        <v-btn>提交</v-btn>
-                    </v-card-actions>
                 </v-card>
-            </div>
-        </el-col>
-
-        <!-- Right Part -->
-        <el-col :span="6">
-            <div class="right-content">
-                <el-form :model="formData" label-width="auto" label-suffix=":">
-                    <el-form-item label="工序选择">
-                        <el-select v-model="processId" class="form-input">
-                            <el-option v-for="item in processOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="标签扫码">
-                        <scanInput @scanInput="handleScanInput"></scanInput>
-                    </el-form-item>
-                    <el-card class="form-input">
-                        <el-form-item label="工单号">
-                            <el-text class="formItem">{{ formData.workorder }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="主体型号">
-                            <el-text class="formItem">{{ formData.productionCode }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="主体品名">
-                            <el-text class="formItem">{{ formData.productionName }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="计划数量">
-                            <el-text class="formItem">{{ formData.planNum }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="主体图号">
-                            <el-text class="formItem">{{ formData.drawingCode }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="版本号">
-                            <el-text class="formItem">{{ formData.version }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="材料编号">
-                            <el-text class="formItem">{{ formData.materialCode }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="材料型号">
-                            <el-text class="formItem">{{ formData.materialName }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="材质">
-                            <el-text class="formItem">{{ formData.materialtextureCode }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="工单日期">
-                            <el-text class="formItem">{{ formData.workorderDate }}</el-text>
-                        </el-form-item>
-                        <el-form-item label="指示日期">
-                            <el-text class="formItem">{{ formData.instructionDate }}</el-text>
-                        </el-form-item>
-                    </el-card>
-                </el-form>
-            </div>
-        </el-col>
-    </el-row>
+            </v-col>
+            <v-col cols="4">
+                <v-card color="blue-darken-4" class="right-content">
+                    <v-select variant="solo-filled" v-model="processId" label="工序选择" :items="processOptions">
+                    </v-select>
+                    <scanInput @scanInput="handleScanInput"></scanInput>
+                    <v-fade-transition>
+                        <el-card v-if="formData.workorder" class="mt-4">
+                            <el-form :model="formData" label-width="auto" label-suffix=":">
+                                <el-form-item label="工单号">
+                                    <el-text class="formItem text-big">{{ formData.workorder }}</el-text>
+                                </el-form-item>
+                                <el-form-item v-if="processId !== 10" label="炉号">
+                                    <el-text class="formItem">{{ formData.stoveCode }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="主体型号">
+                                    <el-text class="formItem">{{ formData.productionCode }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="主体品名">
+                                    <el-text class="formItem">{{ formData.productionName }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="计划数量">
+                                    <el-text class="formItem">{{ formData.planNum }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="主体图号">
+                                    <el-text class="formItem">{{ formData.drawingCode }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="版本号">
+                                    <el-text class="formItem">{{ formData.version }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="材料编号">
+                                    <el-text class="formItem">{{ formData.materialCode }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="材料型号">
+                                    <el-text class="formItem">{{ formData.materialName }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="材质">
+                                    <el-text class="formItem">{{ formData.materialtextureCode }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="工单日期">
+                                    <el-text class="formItem">{{ formData.workorderDate }}</el-text>
+                                </el-form-item>
+                                <el-form-item label="指示日期">
+                                    <el-text class="formItem">{{ formData.instructionDate }}</el-text>
+                                </el-form-item>
+                            </el-form>
+                        </el-card>
+                    </v-fade-transition>
+                </v-card>
+            </v-col>
+        </v-row>
+        <!-- 反馈框 -->
+        <v-dialog v-model="dialog.show" width="auto">
+            <v-card :class="dialog.class" min-width="400" :prepend-icon="dialog.icon" :text="dialog.text"
+                :title="dialog.title">
+                <template v-slot:actions>
+                    <v-btn class="ms-auto" text="确认" @click="dialog.show = false"></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </v-container>
 </template>
 
 <script setup>
-// Importing necessary components from Element Plus
+const { proxy } = getCurrentInstance()
+import * as ReportApi from '@/api/reportFlow/index'
 import scanInput from '../components/scanInput.vue'
-
 const processOptions = [
     {
         value: 10,
-        label: '物料领用',
+        title: '物料领用',
     },
     {
         value: 20,
-        label: '机械加工',
+        title: '机械加工',
     },
     {
         value: 30,
-        label: '中间检查',
+        title: '中间检查',
     },
     {
         value: 40,
-        label: '手工研磨',
+        title: '手工研磨',
     },
     {
         value: 50,
-        label: '机研磨',
+        title: '机研磨',
     },
     {
         value: 60,
-        label: '精研磨',
+        title: '精研磨',
     },
     {
         value: 70,
-        label: '入库检查',
+        title: '入库检查',
     },
     // {
     //     value: 80,
-    //     label: '出厂',
+    //     title: '出厂',
     // },
     {
         value: 90,
-        label: '出货',
+        title: '出货',
     },
 ]
+const tab = ref('报工')
 const processId = ref(10)
+function getButtonName() {
+    if (processId.value === 10) {
+        return '确认领用'
+    } else if (processId.value === 90) {
+        return '确认出货'
+    } else {
+        return '确认报工'
+    }
 
-
-const formData = reactive({
-    id: null,
-    workorder: '工单号',
-    planNum: 0,
-    finishNum: 0,
-    productionName: '产品名称',
-    productionCode: '产品编码',
-    unit: '单位',
-    planNum: '计划数量',
-    sort: '排序',
-    workorderDate: '工单日期',
-    priority: '优先级',
-    beat: '节拍',
-    status: '状态',
-    instructionDate: '指导日期',
-    materialName: '材料名称',
-    materialtextureCode: '材质编码',
-    materialCode: '材料编码',
-    drawingCode: '图纸编码',
-    version: '版本',
-    stoveCode: '炉子编码',
-    workshopCode: '车间编码',
-    routeCode: '路线编码',
-    groupCode: '组编码'
+}
+const dialog = reactive({
+    show: false,
+    icon: 'mdi-alert',
+    class: 'bg-amber',
+    title: '提示',
+    text: '这是一段反馈'
 })
 
+const formData = ref({
+    id: null,
+    workorder: '',
+    instructionDate: '',
+    workorderDate: '',
+    planNum: 0,
+    finishNum: 0,
+    // productionName: '产品名称',
+    // productionCode: '产品编码',
+    // unit: '单位',
+    // planNum: '计划数量',
+    // sort: '排序',
+    // workorderDate: '工单日期',
+    // priority: '优先级',
+    // beat: '节拍',
+    // status: '状态',
+    // instructionDate: '指导日期',
+    // materialName: '材料名称',
+    // materialtextureCode: '材质编码',
+    // materialCode: '材料编码',
+    // drawingCode: '图纸编码',
+    // version: '版本',
+    // stoveCode: '炉子编码',
+    // workshopCode: '车间编码',
+    // routeCode: '路线编码',
+    // groupCode: '组编码'
+})
+
+const reportWorkerOrderList = ref([])
+
 function handleScanInput(val) {
-    console.log(val)
+    getFormData(val)
 }
+
+function getFormData(workorder) {
+    ReportApi.GetWorkOrderDetail({ workorder }).then(res => {
+        if (res.code == 200) {
+            if (res.data) {
+                formData.value = res.data
+                ReportApi.GetWorkOrderReportWorkList({ workorder, processId: processId.value }).then(res => {
+                    if (res.code == 200) {
+                        reportWorkerOrderList.value = res.data
+                    }
+                })
+            } else {
+                dialog.show = true
+                dialog.text = '没有找到该工单'
+            }
+        }
+    })
+}
+
+function submit() {
+    proxy.$confirm('确定提交数据吗？').then(() => {
+        let params = {
+            workorder: formData.value.workorder,
+            processId: processId.value,
+            // 参数填写
+            bad_num: formData.value.badNum,
+            finish_num: formData.value.finishNum,
+            feed_order: formData.value.feedOrder,
+            stove_code: formData.value.stoveCode,
+            customer_order: formData.value.customerOrder,
+            // worker: formData.value.worker
+        };
+        // 领料
+        if (processId.value === 10) {
+            ReportApi.FeedProcessReportwork(params).then(res => {
+                if (res.code == 200) {
+                    dialog.show = true
+                    dialog.class = 'bg-green'
+                    dialog.text = '领料成功'
+                }
+            })
+        }
+        // 出货
+        else if (processId.value === 90) {
+            ReportApi.ShipmentProcessReportwork(params).then(res => {
+                if (res.code == 200) {
+                    dialog.show = true
+                    dialog.class = 'bg-green'
+                    dialog.text = '出货成功'
+                }
+            }
+            )
+        }
+        // 报工
+        else {
+            ReportApi.ProcessReportWork(params).then(res => {
+                if (res.code == 200) {
+                    dialog.show = true
+                    dialog.class = 'bg-green'
+                    dialog.text = '报工成功'
+                }
+            }
+            )
+        }
+    }).catch(err => {
+    })
+}
+
 </script>
 
 <style scoped>
@@ -150,6 +283,19 @@ function handleScanInput(val) {
     margin-right: 10px;
 }
 
+.text-big {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.flex {
+    display: flex;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
 :deep(.el-form-item__label) {
     color: #000000;
 }
@@ -163,15 +309,12 @@ function handleScanInput(val) {
 }
 
 .left-content {
-    min-height: 90vh;
-    /* Adjust the height as needed */
-    background-color: #00949D;
+    min-height: 88vh;
     padding: 20px;
 }
 
 .right-content {
-    min-height: 90vh;
-    background-color: #46547F;
+    min-height: 88vh;
     padding: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/vuetify-theme.json b/src/vuetify-theme.json
index d8c6465..ed95088 100644
--- a/src/vuetify-theme.json
+++ b/src/vuetify-theme.json
@@ -2,15 +2,15 @@
   "dark": false, 
   "colors": {
     "background": "#3F51B5", 
-    "surface": "#303F9F", 
-    "surface-bright": "#3D5AFE", 
-    "surface-light": "#5C6BC0", 
-    "surface-variant": "#303F9F", 
+    "surface": "#3949AB", 
+    "surface-bright": "#9FA8DA", 
+    "surface-light": "#7986CB", 
+    "surface-variant": "#7986CB", 
     "on-surface-variant": "#E8EAF6",
-    "primary": "#3F51B5", 
-    "primary-darken-1": "#303F9F", 
-    "secondary": "#E8EAF6", 
-    "secondary-darken-1": "#B39DDB", 
+    "primary": "#1E88E5", 
+    "primary-darken-1": "#1565C0", 
+    "secondary": "#9FA8DA", 
+    "secondary-darken-1": "#7986CB", 
     "error": "#D32F2F", 
     "info": "#2196F3", 
     "success": "#4CAF50",