报废管理
This commit is contained in:
parent
e1bb664c53
commit
c5f4949678
22
package-lock.json
generated
22
package-lock.json
generated
@ -11,6 +11,8 @@
|
|||||||
"axios": "^1.6.5",
|
"axios": "^1.6.5",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.14",
|
"element-ui": "^2.15.14",
|
||||||
|
"simple-keyboard": "^3.7.45",
|
||||||
|
"simple-keyboard-layouts": "^3.3.55",
|
||||||
"vant": "^2.13.2",
|
"vant": "^2.13.2",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
"vue-router": "^3.5.1",
|
"vue-router": "^3.5.1",
|
||||||
@ -10888,6 +10890,16 @@
|
|||||||
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
|
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/sirv": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",
|
"resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",
|
||||||
@ -21240,6 +21252,16 @@
|
|||||||
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
|
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
|
||||||
"dev": true
|
"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": {
|
"sirv": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",
|
"resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz",
|
||||||
|
@ -11,6 +11,8 @@
|
|||||||
"axios": "^1.6.5",
|
"axios": "^1.6.5",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.14",
|
"element-ui": "^2.15.14",
|
||||||
|
"simple-keyboard": "^3.7.45",
|
||||||
|
"simple-keyboard-layouts": "^3.3.55",
|
||||||
"vant": "^2.13.2",
|
"vant": "^2.13.2",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
"vue-router": "^3.5.1",
|
"vue-router": "^3.5.1",
|
||||||
|
@ -1,60 +1,120 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2024-01-09 13:49:03
|
* @Date: 2024-01-09 13:49:03
|
||||||
* @LastEditTime: 2024-01-09 20:39:57
|
* @LastEditTime: 2024-01-17 17:07:21
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="scrap">
|
<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="">
|
<img class="homeIcon" src="./../assets/home.png" alt="">
|
||||||
</div>
|
</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 :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">
|
||||||
<el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
|
<div class="whiteForm">
|
||||||
</el-select>
|
<el-form-item label="工单选择" prop="workOrderId">
|
||||||
</el-form-item>
|
<el-select v-model="ruleForm.workOrderId" filterable clearable @focus="focusInput($event)" placeholder="请选择工单" style="width: 100%; display: block">
|
||||||
<el-form-item label="报废数量" prop="num">
|
<el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||||
<el-input-Number v-model="ruleForm.num" style="width: 100%; display: block"></el-input-Number>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="报废原因" prop="detName">
|
</div>
|
||||||
<el-checkbox-group v-model="ruleForm.detName" style="width: 100%; display: block; text-align: left">
|
</el-col>
|
||||||
<el-checkbox v-for="(item, index) in scrapList" :key="index" :label="item.content" :name="item.id"></el-checkbox>
|
<el-col :span="12">
|
||||||
</el-checkbox-group>
|
<div class="whiteForm">
|
||||||
</el-form-item>
|
<el-form-item label="报废数量" prop="num">
|
||||||
<el-form-item label="产线" prop="lineId">
|
<el-input v-model="ruleForm.num" @focus="show = true" controls-position="right" :min="0" style="width: 100%; display: block"></el-input>
|
||||||
<el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" style="width: 100%; display: block">
|
</el-form-item>
|
||||||
<el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
|
</div>
|
||||||
</el-select>
|
</el-col>
|
||||||
</el-form-item>
|
</el-row>
|
||||||
<el-form-item label="时间" prop="logTime">
|
<van-number-keyboard
|
||||||
<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker>
|
v-model="ruleForm.num"
|
||||||
</el-form-item>
|
:show="show"
|
||||||
<el-form-item>
|
@blur="show = false"
|
||||||
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
@input="onInput"
|
||||||
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
@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-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>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { workOrderList, scrapDetList, lineList, createScrap } from '@/api/quality'
|
import { workOrderList, scrapDetList, lineList, createScrap } from '@/api/quality'
|
||||||
|
import SimpleKeyboard from './components/simpleKeyboard.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { SimpleKeyboard },
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ruleForm: {
|
ruleForm: {
|
||||||
workOrderId: '',
|
workOrderId: '',
|
||||||
num: 0,
|
num: '',
|
||||||
detId: '',
|
detId: '',
|
||||||
detName: [],
|
detName: [],
|
||||||
lineId: undefined,
|
lineId: undefined,
|
||||||
logTime: new Date()
|
logTime: new Date()
|
||||||
},
|
},
|
||||||
|
show: false,
|
||||||
|
simpleShow: false,
|
||||||
|
input: null,
|
||||||
|
inputEle: null,
|
||||||
|
field: '',
|
||||||
workOrderList: [],
|
workOrderList: [],
|
||||||
lineArray: [],
|
lineArray: [],
|
||||||
scrapList: [],
|
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 () {
|
mounted () {
|
||||||
this.getDict()
|
this.getDict()
|
||||||
this.ruleForm = {
|
this.ruleForm = {
|
||||||
workOrderId: '',
|
workOrderId: '',
|
||||||
num: 0,
|
num: '',
|
||||||
detId: '',
|
detId: '',
|
||||||
detName: [],
|
detName: [],
|
||||||
lineId: undefined,
|
lineId: undefined,
|
||||||
@ -83,6 +154,50 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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 () {
|
goback () {
|
||||||
this.$router.go(-1)
|
this.$router.go(-1)
|
||||||
},
|
},
|
||||||
@ -111,6 +226,9 @@ export default {
|
|||||||
message: '提交成功!',
|
message: '提交成功!',
|
||||||
type: 'success'
|
type: 'success'
|
||||||
})
|
})
|
||||||
|
this.$router.push({
|
||||||
|
path: 'home'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
@ -126,9 +244,58 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</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 {
|
.scrap {
|
||||||
padding: 30px;
|
background-image: url('./../assets/quality-bg.png');
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
padding: 20px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
/* font-size: 20px; */
|
/* font-size: 20px; */
|
||||||
}
|
}
|
||||||
</style>
|
</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