报废管理

package-lock.json

@@ -11,6 +11,8 @@
         "axios": "^1.6.5",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.14",
+        "simple-keyboard": "^3.7.45",
+        "simple-keyboard-layouts": "^3.3.55",
         "vant": "^2.13.2",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -10888,6 +10890,16 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-keyboard": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.7.45.tgz",
+      "integrity": "sha512-53BSay9h99V8GuHvBmiUiNesG4oFwTJpMcE/nf3VXWYX95njPJeLdhDzgFljIITjZ6nKXe8E2Lp7OMArI+R/Cw=="
+    },
+    "node_modules/simple-keyboard-layouts": {
+      "version": "3.3.55",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.55.tgz",
+      "integrity": "sha512-IV3NE1OuVME4vkpXhiXlB+CRR0SLU8/dW8+JsGIzLLAlxteYSquT/gle+ldeKrx7iiJnCJGRr47oP2KfBGqKEQ=="
+    },
     "node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",
@@ -21240,6 +21252,16 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-keyboard": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.7.45.tgz",
+      "integrity": "sha512-53BSay9h99V8GuHvBmiUiNesG4oFwTJpMcE/nf3VXWYX95njPJeLdhDzgFljIITjZ6nKXe8E2Lp7OMArI+R/Cw=="
+    },
+    "simple-keyboard-layouts": {
+      "version": "3.3.55",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.55.tgz",
+      "integrity": "sha512-IV3NE1OuVME4vkpXhiXlB+CRR0SLU8/dW8+JsGIzLLAlxteYSquT/gle+ldeKrx7iiJnCJGRr47oP2KfBGqKEQ=="
+    },
     "sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",

package.json

@@ -11,6 +11,8 @@
     "axios": "^1.6.5",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
+    "simple-keyboard": "^3.7.45",
+    "simple-keyboard-layouts": "^3.3.55",
     "vant": "^2.13.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/views/Scrap.vue

@@ -1,60 +1,120 @@
 <!--
  * @Author: Do not edit
  * @Date: 2024-01-09 13:49:03
- * @LastEditTime: 2024-01-09 20:39:57
+ * @LastEditTime: 2024-01-17 17:07:21
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div class="scrap">
-    <div style="float: right" type="primary" size="small" plain @click="goback()">
+    <!-- <div style="float: right" type="primary" size="small" plain @click="goback()">
       <img class="homeIcon" src="./../assets/home.png" alt="">
     </div>
+    <div style="height: 60px;">
       <h2>报废管理</h2>
+    </div> -->
+    <van-row type="flex" justify="space-between">
+      <van-col span="5" style="text-align: left">
+        <h2>报废管理</h2>
+      </van-col>
+      <van-col span="4" style="text-align: right">
+        <img class="homeIcon" @click="goback" src="./../assets/home.png" alt="">
+      </van-col>
+    </van-row>
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-      <el-form-item label="工单" prop="workOrderId">
+      <el-row :gutter="10">
-        <el-select v-model="ruleForm.workOrderId" filterable clearable placeholder="请选择工单" style="width: 100%; display: block">
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="工单选择" prop="workOrderId">
+              <el-select v-model="ruleForm.workOrderId" filterable clearable @focus="focusInput($event)" placeholder="请选择工单" style="width: 100%; display: block">
                 <el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
               </el-select>
             </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="whiteForm">
             <el-form-item label="报废数量" prop="num">
-        <el-input-Number v-model="ruleForm.num" style="width: 100%; display: block"></el-input-Number>
+              <el-input v-model="ruleForm.num" @focus="show = true" controls-position="right" :min="0" style="width: 100%; display: block"></el-input>
             </el-form-item>
-      <el-form-item label="报废原因" prop="detName">
+          </div>
+        </el-col>
+      </el-row>
+      <van-number-keyboard
+        v-model="ruleForm.num"
+        :show="show"
+        @blur="show = false"
+        @input="onInput"
+        @delete="onDelete"
+      />
+      <el-form-item label="报废原因" prop="detName" class="reson">
+        <br>
+        <div class="resonDiv">
           <el-checkbox-group v-model="ruleForm.detName" style="width: 100%; display: block; text-align: left">
             <el-checkbox v-for="(item, index) in scrapList" :key="index" :label="item.content" :name="item.id"></el-checkbox>
           </el-checkbox-group>
+        </div>
       </el-form-item>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <div class="whiteForm">
             <el-form-item label="产线" prop="lineId">
               <el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" style="width: 100%; display: block">
                 <el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
               </el-select>
             </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="whiteForm">
             <el-form-item label="时间" prop="logTime">
               <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker>
             </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
         <el-form-item>
-        <el-button @click="resetForm('ruleForm')">取消</el-button>
+          <!-- <el-button @click="resetForm('ruleForm')">取消</el-button> -->
           <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
         </el-form-item>
+      </el-row>
     </el-form>
+    <SimpleKeyboard
+      v-show="simpleShow"
+      v-model="inputValue"
+      ref="keyboardClass"
+      keyboardClass="keyboardClass"
+      @on-change="onChange"
+      @on-key-press="onKeyPress"
+      @close="simpleShow = false"
+      :input="inputValue"
+      :maxLength="10"
+    />
   </div>
 </template>
 
 <script>
 import { workOrderList, scrapDetList, lineList, createScrap } from '@/api/quality'
+import SimpleKeyboard from './components/simpleKeyboard.vue'
 
 export default {
+  components: { SimpleKeyboard },
   data () {
     return {
       ruleForm: {
         workOrderId: '',
-        num: 0,
+        num: '',
         detId: '',
         detName: [],
         lineId: undefined,
         logTime: new Date()
       },
+      show: false,
+      simpleShow: false,
+      input: null,
+      inputEle: null,
+      field: '',
       workOrderList: [],
       lineArray: [],
       scrapList: [],
@@ -71,11 +131,22 @@ export default {
       }
     }
   },
+  computed: {
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.ruleForm.workOrderId = value
+        // this.$emit('inputChange', value, this.field)
+      }
+    }
+  },
   mounted () {
     this.getDict()
     this.ruleForm = {
       workOrderId: '',
-      num: 0,
+      num: '',
       detId: '',
       detName: [],
       lineId: undefined,
@@ -83,6 +154,50 @@ export default {
     }
   },
   methods: {
+    // formItemChange (val, formItemField) {
+    //   this.form[formItemField] = val
+    //   this.validataForm(formItemField)
+    // },
+    setWorkOrder (value) {
+      console.log('1111', value)
+    },
+    inputChange () {
+      // this.field =
+      // this.$emit('input-change')
+    },
+    inputFun () {
+      this.$emit('input')
+    },
+    focusInput (e) {
+      this.inputEle = e.srcElement
+      // 关闭所有keyboard
+      // const arr = document.querySelectorAll('.hg-theme-default')
+      // arr.forEach((ele) => {
+      //   ele.style.visibility = 'hidden'
+      // })
+      // // 打开当前输入框的keyboard
+      // const currentKeyborad = this.$refs[this.keyboardClass]
+      // currentKeyborad.$el.style.visibility = 'visible'
+      this.simpleShow = true
+      // this.$emit('focus')
+    },
+    onChange (input) {
+      this.inputValue = input
+      this.$set(this.ruleForm, 'workOrderId', input)
+      console.log('输出', input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle.focus()
+    },
+    onKeyPress (button) {
+      console.log('onKeyPress', button)
+    },
+    onInput (value) {
+      // Toast(value);
+      console.log('value', value, this.ruleForm.num)
+    },
+    onDelete () {
+      // Toast('删除');
+    },
     goback () {
       this.$router.go(-1)
     },
@@ -111,6 +226,9 @@ export default {
                 message: '提交成功！',
                 type: 'success'
               })
+              this.$router.push({
+                path: 'home'
+              })
             }
           })
         } else {
@@ -126,9 +244,58 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+.el-checkbox {
+  background: #EDF0FD;
+  box-shadow: 0px 6px 8px 0px #D2D9E8, inset 0px 6px 6px 0px #FFFFFF;
+  width: 216px;
+  height: 56px;
+  border-radius: 7px;
+  line-height: 56px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.reson {
+  background-color: #FFFFFF;
+  border-radius: 8px;
+  margin-bottom: 8px !important;
+  padding-bottom: 15px;
+}
+.resonDiv {
+  display: flex;
+  width: 100%;
+}
+.whiteForm {
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+.el-input__inner {
+  border: none;
+}
+.el-form-item {
+  margin: 0;
+}
+.demo-ruleForm .reson .el-form-item__label {
+  border: none;
+}
+.demo-ruleForm .el-form-item__label {
+  color: #276BFF;
+  border-right: 1px solid #000000;
+  height: 18px;
+  line-height: 18px;
+  margin: 11px 0;
+}
+.homeIcon {
+  width: 84px;
+  height: 84px;
+}
 .scrap {
-  padding: 30px;
+  background-image: url('./../assets/quality-bg.png');
+  height: 100vh;
+  width: 100vw;
+  padding: 20px 24px;
+  box-sizing: border-box;
   /* font-size: 20px; */
 }
 </style>

src/views/components/simpleKeyboard.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
+
+export default {
+  name: 'SimpleKeyboard',
+  props: {
+    keyboardClass: {
+      default: 'simple-keyboard',
+      type: String
+    },
+    input: {
+      default: ''
+    },
+    maxLength: { default: '' }
+  },
+  data: () => ({
+    keyboard: null,
+    displayDefault: {
+      '{bksp}': 'backspace',
+      '{lock}': 'caps',
+      '{enter}': '> enter',
+      '{tab}': 'tab',
+      '{shift}': 'shift',
+      '{change}': '英文',
+      '{space}': ' ',
+      '{clear}': '清空',
+      '{close}': '关闭'
+    }
+  }),
+  mounted () {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layoutCandidates: layout.layoutCandidates,
+      layout: {
+        // 默认布局
+        default: [
+          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+          '{tab} q w e r t y u i o p [ ] \\',
+          "{lock} a s d f g h j k l ; ' {enter}",
+          '{shift} z x c v b n m , . / {clear}',
+          '{change} {space} {close}'
+        ],
+        // shift布局
+        shift: [
+          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+          '{tab} Q W E R T Y U I O P { } |',
+          '{lock} A S D F G H J K L : " {enter}',
+          '{shift} Z X C V B N M < > ? {clear}',
+          '{change} {space} {close}'
+        ]
+      },
+      // 按钮展示文字
+      display: this.displayDefault,
+      // 按钮样式
+      buttonTheme: [
+        {
+          class: 'hg-red close',
+          buttons: '{close}'
+        },
+        {
+          class: 'change',
+          buttons: '{change}'
+        }
+      ],
+      // 输入限制长度
+      maxLength: this.maxLength
+    })
+  },
+  methods: {
+    onChange (input) {
+      this.keyboard.setInput(input)
+      this.$emit('on-change', input)
+      console.log('nihc', input)
+    },
+    // 点击键盘
+    onKeyPress (button, $event) {
+      // 点击关闭
+      if (button === '{close}') {
+        // const keyboard = $event.path[3]
+        // keyboard.style.visibility = 'hidden'
+        this.$emit('close')
+        return false
+      } else if (button === '{change}') {
+        // 切换中英文输入法
+        if (this.keyboard.options.layoutCandidates !== null) {
+          this.$set(this.displayDefault, '{change}', '中文')
+          // 切换至英文
+          this.keyboard.setOptions({
+            layoutCandidates: null,
+            display: this.displayDefault
+          })
+        } else {
+          // 切换至中文
+          this.$set(this.displayDefault, '{change}', '英文')
+          this.keyboard.setOptions({
+            layoutCandidates: layout.layoutCandidates,
+            display: this.displayDefault
+          })
+        }
+      } else if (button === '{clear}') {
+        this.keyboard.clearInput()
+      } else {
+        const value =
+          $event.target.offsetParent.parentElement.children[0].children[0]
+            .value
+        // 输入框有默认值时，覆写
+        if (value) {
+          this.keyboard.setInput(value)
+        }
+        this.$emit('on-key-press', button)
+      }
+      if (button === '{shift}' || button === '{lock}') this.handleShift()
+    },
+    // 切换shift/默认布局
+    handleShift () {
+      const currentLayout = this.keyboard.options.layoutName
+      const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      })
+    }
+  },
+  watch: {
+    input (input) {
+      this.keyboard.setInput(input)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@deep: ~'>>>';
+.hg-theme-default {
+  width: 100%;
+  margin-top: 50px;
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  .hg-button {
+    &.hg-red {
+      background: #db3e5d;
+      color: white;
+      &.close {
+        max-width: 200px;
+      }
+    }
+    &.change {
+      max-width: 200px;
+    }
+  }
+}
+</style>