报废管理
This commit is contained in:
helloDy
parent
e1bb664c53
commit
c5f4949678
22
package-lock.json
generated
22
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
<h2>报废管理</h2>
|
||||
<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-select v-model="ruleForm.workOrderId" filterable clearable 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>
|
||||
<el-form-item label="报废数量" prop="num">
|
||||
<el-input-Number v-model="ruleForm.num" style="width: 100%; display: block"></el-input-Number>
|
||||
</el-form-item>
|
||||
<el-form-item label="报废原因" prop="detName">
|
||||
<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>
|
||||
</el-form-item>
|
||||
<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>
|
||||
<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>
|
||||
<el-form-item>
|
||||
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
||||
<el-row :gutter="10">
|
||||
<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 v-model="ruleForm.num" @focus="show = true" controls-position="right" :min="0" style="width: 100%; display: block"></el-input>
|
||||
</el-form-item>
|
||||
</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 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>
|
||||
|
||||
159
src/views/components/simpleKeyboard.vue
Normal file
159
src/views/components/simpleKeyboard.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user