质量
This commit is contained in:
helloDy
förälder
4d87bcbd5b
incheckning
3e7ba1f519
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-20 11:05:00
|
||||
* @LastEditTime: 2024-01-29 16:51:45
|
||||
* @LastEditTime: 2024-04-22 09:03:11
|
||||
* @LastEditors: DY
|
||||
* @Description: 质量和报废
|
||||
*/
|
||||
@ -70,6 +70,15 @@ export function createInspection (data) {
|
||||
})
|
||||
}
|
||||
|
||||
// 撤销质量检查信息
|
||||
export function deleteByCancel (query) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/deleteByCancel',
|
||||
method: 'delete',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有报废日志列表
|
||||
export function scrapLogList (data) {
|
||||
return request({
|
||||
@ -87,3 +96,12 @@ export function authList (data) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 重置按钮
|
||||
export function resetBtn (data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/resetBtn',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
Binär
src/assets/1.png
Normal file
Binär
src/assets/1.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 14 KiB |
Binär
src/assets/2.png
Normal file
Binär
src/assets/2.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 14 KiB |
Binär
src/assets/cancel.png
Normal file
Binär
src/assets/cancel.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 374 B |
Binär
src/assets/cancel1.png
Normal file
Binär
src/assets/cancel1.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 1.2 KiB |
Binär
src/assets/cancel2.png
Normal file
Binär
src/assets/cancel2.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 1.2 KiB |
Binär
src/assets/refresh.png
Normal file
Binär
src/assets/refresh.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 336 B |
Binär
src/assets/reset.png
Normal file
Binär
src/assets/reset.png
Normal file
Binary file not shown.
|
Efter Bredd: | Höjd: | Storlek: 349 B |
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-20 11:02:29
|
||||
* @LastEditTime: 2024-01-30 14:45:55
|
||||
* @LastEditTime: 2024-04-22 09:39:49
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
@ -14,7 +14,8 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: 'http://192.168.0.33:48082/admin-api',
|
||||
// baseURL: 'http://10.70.2.2:8080/admin-api',
|
||||
// baseURL: 'http://192.168.1.104:48082/admin-api',
|
||||
// baseURL: 'http://192.168.1.78:48082/admin-api',
|
||||
timeout: 30000,
|
||||
withCredentials: false
|
||||
})
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-28 11:21:53
|
||||
* @LastEditTime: 2024-01-31 10:38:46
|
||||
* @LastEditTime: 2024-04-10 11:10:56
|
||||
* @LastEditors: DY
|
||||
* @Description: 登陆
|
||||
-->
|
||||
<template>
|
||||
<div class="login">
|
||||
<van-row style="width: 100%; height: 40px; padding-top: 5px" type="flex" justify="space-between">
|
||||
<van-row style="width: 100%; height: 15px; padding-top: 5px" type="flex" justify="space-between">
|
||||
<van-col span="20"></van-col>
|
||||
<van-col span="4" style="text-align: right">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/back.png" alt="">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-09 13:48:42
|
||||
* @LastEditTime: 2024-03-28 11:13:01
|
||||
* @LastEditTime: 2024-04-22 09:33:28
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -15,7 +15,7 @@
|
||||
<img class="homeIcon" @click="toHome" src="./../assets/home.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row gutter="20" style="margin-top: -20px;">
|
||||
<van-row gutter="10" style="margin-top: -20px;">
|
||||
<van-col span="12">
|
||||
<van-dropdown-menu >
|
||||
<van-dropdown-item v-model="listQuery.productionLineId" :options="lineArray" @change="getSection" />
|
||||
@ -27,33 +27,64 @@
|
||||
</van-dropdown-menu>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<div class="count">
|
||||
本班次合计数量：{{ count }}
|
||||
</div>
|
||||
<div class="content" v-for="(item, index) in typeList" :key="index">
|
||||
<van-row type="flex" align="center" style="margin-left: -20px">
|
||||
<van-col span="1">
|
||||
<img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row type="flex">
|
||||
<van-col span="6" v-for="it in item" :key="it.id">
|
||||
<div :class=" it.active ? 'flexActive' : 'flexItem'">
|
||||
<!-- <div> -->
|
||||
<div class="contain">
|
||||
<div class="leftDiv">{{ it.count }}</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- <div> -->
|
||||
<div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<!-- <div class="count"> -->
|
||||
<van-row gutter="10">
|
||||
<van-col span="12">
|
||||
<div class="count">本班次合计数量：{{ count }}</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-row gutter="10" style="font-size: 9px">
|
||||
<van-col span="8">
|
||||
<div class="count" @click="getQuality">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/refresh.png" alt="">
|
||||
<span style="margin-left: 10px">刷 新</span>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="count" :style="[{ background: isCancel ? '#FFA927' : '#FFFFFF' }]" @click="isCancel = !isCancel">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/cancel.png" alt="">
|
||||
<span style="margin-left: 10px">撤 销</span>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div v-show="showReset" class="count" @click="reset">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/reset.png" alt="">
|
||||
<span style="margin-left: 10px">重 置</span>
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<el-scrollbar class="scollbar" ref="scrollbar" style="height: 100%" >
|
||||
<el-backtop target=".scollbar .el-scrollbar__wrap" :visibility-height="10" :bottom="20">
|
||||
<i class="el-icon-caret-top" />
|
||||
</el-backtop>
|
||||
<div class="content" v-for="(item, index) in typeList" :key="index">
|
||||
<van-row type="flex" align="center" style="margin-left: -20px">
|
||||
<van-col span="1">
|
||||
<img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row type="flex">
|
||||
<van-col span="6" v-for="it in item" :key="it.id">
|
||||
<div :class=" isCancel ? 'flexCancelItem' : 'flexItem'">
|
||||
<!-- <div class="flexItem"> -->
|
||||
<!-- <div> -->
|
||||
<div class="contain">
|
||||
<div class="leftDiv">{{ it.count }}</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- <div> -->
|
||||
<div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- <div class="ext"></div> -->
|
||||
<!-- <el-backtop target=".quality" :visibility-height="10" :bottom="10">
|
||||
<i class="el-icon-caret-top" />
|
||||
@ -62,13 +93,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { qualityManage, createInspection, authList } from '@/api/quality'
|
||||
import { qualityManage, createInspection, deleteByCancel, authList, resetBtn } from '@/api/quality'
|
||||
import { getUserId } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'Quality',
|
||||
data () {
|
||||
return {
|
||||
isCancel: false,
|
||||
lineArray: [],
|
||||
sectionArray: [],
|
||||
listQuery: {
|
||||
@ -76,34 +108,75 @@ export default {
|
||||
sectionId: ''
|
||||
},
|
||||
count: 0,
|
||||
typeList: []
|
||||
typeList: [],
|
||||
showReset: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getLine()
|
||||
},
|
||||
methods: {
|
||||
reset () {
|
||||
resetBtn(this.listQuery).then(res => {
|
||||
if (res.data.data === true) {
|
||||
this.typeList.forEach(item => {
|
||||
item.forEach(it => {
|
||||
it.count = 0
|
||||
})
|
||||
})
|
||||
this.count = 0
|
||||
this.$message.success('重置完成！')
|
||||
} else {
|
||||
this.typeList = []
|
||||
this.count = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
addRecord (value) {
|
||||
const now = new Date() // 创建一个表示当前时间的Date对象
|
||||
const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
|
||||
// console.log(formattedTime)
|
||||
createInspection({
|
||||
...this.listQuery,
|
||||
inspectionDetId: value.detId,
|
||||
checkTime: formattedTime
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.typeList.forEach(element => {
|
||||
element.forEach(el => {
|
||||
el.active = false
|
||||
})
|
||||
if (!this.isCancel) {
|
||||
createInspection({
|
||||
...this.listQuery,
|
||||
inspectionDetId: value.detId,
|
||||
checkTime: formattedTime
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
// this.typeList.forEach(element => {
|
||||
// element.forEach(el => {
|
||||
// el.active = false
|
||||
// })
|
||||
// })
|
||||
// value.active = true
|
||||
// this.$set(value, 'active', true)
|
||||
value.count++
|
||||
this.count++
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (value.count > 0) {
|
||||
deleteByCancel({
|
||||
...this.listQuery,
|
||||
inspectionDetId: value.detId,
|
||||
checkTime: formattedTime
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
// this.typeList.forEach(element => {
|
||||
// element.forEach(el => {
|
||||
// el.active = false
|
||||
// })
|
||||
// })
|
||||
// value.active = true
|
||||
// this.$set(value, 'active', true)
|
||||
value.count--
|
||||
this.count--
|
||||
}
|
||||
})
|
||||
value.active = true
|
||||
// this.$set(value, 'active', true)
|
||||
value.count++
|
||||
this.count++
|
||||
} else {
|
||||
this.$message.warning('数量小于0，不可操作')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
toHome () {
|
||||
this.$router.push({
|
||||
@ -111,10 +184,14 @@ export default {
|
||||
})
|
||||
},
|
||||
getQuality () {
|
||||
// qualityManage().then(res => {
|
||||
qualityManage(this.listQuery).then(res => {
|
||||
if (JSON.stringify(res.data.data) !== '{}') {
|
||||
this.typeList = Object.values(res.data.data)
|
||||
this.count = this.typeList[0][0].sunCount
|
||||
if (this.typeList[0][0]?.resetMethod === 1) {
|
||||
this.resetMethod = true
|
||||
}
|
||||
} else {
|
||||
this.typeList = []
|
||||
this.count = 0
|
||||
@ -173,7 +250,27 @@ export default {
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
background-color: #FFFFFF;
|
||||
/* background-color: #FFFFFF; */
|
||||
background-image: url('./../assets/2.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
.flexItem:active {
|
||||
background-image: url('./../assets/1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.flexCancelItem {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
/* background-color: #FFFFFF; */
|
||||
background-image: url('./../assets/cancel1.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
.flexCancelItem:active {
|
||||
background-image: url('./../assets/cancel2.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.flexActive {
|
||||
display: flex;
|
||||
@ -181,7 +278,9 @@ export default {
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
background-color: #456DFF;
|
||||
/* background-color: #456DFF; */
|
||||
background-image: url('./../assets/1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.rightDiv {
|
||||
border-radius: 7px;
|
||||
@ -209,12 +308,12 @@ export default {
|
||||
height: 72px;
|
||||
width: 80px;
|
||||
line-height: 72px;
|
||||
background-color: #FFFFFF;
|
||||
/* background-color: #FFFFFF; */
|
||||
/* margin: 5px 0 5px 0; */
|
||||
}
|
||||
.leftDiv {
|
||||
border-radius: 7px 36px 36px 7px;
|
||||
background-color: #456DFF;
|
||||
/* background-color: #456DFF; */
|
||||
height: 72px;
|
||||
width: 77px;
|
||||
color: white;
|
||||
@ -240,6 +339,8 @@ export default {
|
||||
margin-top: 7px;
|
||||
padding: 0 20px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
/* overflow: scroll;
|
||||
height: 100%; */
|
||||
}
|
||||
.count {
|
||||
width: 100%;
|
||||
@ -265,7 +366,7 @@ export default {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 20px 20px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-09 13:49:03
|
||||
* @LastEditTime: 2024-03-29 08:46:18
|
||||
* @LastEditTime: 2024-04-22 09:36:10
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -13,6 +13,10 @@
|
||||
<div style="height: 60px;">
|
||||
<h2>报废管理</h2>
|
||||
</div> -->
|
||||
<!-- <van-row type="flex" class="search" justify="center">
|
||||
<el-input v-model="form.data" @focus="onInputFocus('form.data',form.data)" ref="searchInput" placeholder="请输入关键词" >
|
||||
</el-input>
|
||||
</van-row> -->
|
||||
<van-row type="flex" justify="space-between">
|
||||
<van-col span="5" style="text-align: left">
|
||||
<h2>报废管理</h2>
|
||||
@ -178,6 +182,7 @@
|
||||
:input="inputValue3"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<!-- <KeysInput ref="keysInput" @input="updateInputValue" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -185,11 +190,15 @@
|
||||
import { workOrderList, scrapDetList, createScrap, authList } from '@/api/quality'
|
||||
import SimpleKeyboard from './components/simpleKeyboard.vue'
|
||||
import { getUserId } from '@/utils/auth'
|
||||
// import KeysInput from './components/keyboard'
|
||||
|
||||
export default {
|
||||
components: { SimpleKeyboard },
|
||||
data () {
|
||||
return {
|
||||
// form: {
|
||||
// data: '11'
|
||||
// },
|
||||
ruleForm: {
|
||||
workOrderId: '',
|
||||
num: '',
|
||||
@ -293,6 +302,28 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInputFocus (event, value) {
|
||||
// 当前input获取焦点时，显示键盘
|
||||
console.log('122', event, value)
|
||||
this.$refs.keysInput.showKeyboard = true
|
||||
// 传入绑定值（字符串）
|
||||
this.$refs.keysInput.key = event
|
||||
// 传入当前值
|
||||
this.$refs.keysInput.setKeyboardInput(value)
|
||||
},
|
||||
updateInputValue (value) {
|
||||
console.log('123232', value)
|
||||
// 根据key 回写input值
|
||||
const parameter = value.key.split('.')
|
||||
console.log('122', parameter)
|
||||
if (parameter.length === 1) {
|
||||
value.key = value.value
|
||||
} else {
|
||||
// let par0 = parameter[0]
|
||||
// let par1 = parameter[1]
|
||||
// par0.par1 = value.value
|
||||
}
|
||||
},
|
||||
refresh () {
|
||||
this.ruleForm.logTime = new Date().getTime()
|
||||
},
|
||||
|
||||
176
src/views/components/SKeyboard.vue
Normal file
176
src/views/components/SKeyboard.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<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
|
||||
},
|
||||
maxLength: { default: '' }
|
||||
},
|
||||
data: () => ({
|
||||
keyboard: null,
|
||||
displayDefault: {
|
||||
'{bksp}': 'backspace',
|
||||
'{lock}': '切换',
|
||||
'{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.$emit('on-change', input) // 输入值向外传递
|
||||
},
|
||||
// 重写清空按钮
|
||||
onChangeKey () {
|
||||
this.keyboard.setInput('')
|
||||
this.$emit('empty')
|
||||
},
|
||||
// @focus 触发时赋值 封装组件调用
|
||||
onChangeFocus (value) {
|
||||
this.keyboard.setInput(value)
|
||||
},
|
||||
// 点击键盘
|
||||
onKeyPress (button, $event) {
|
||||
// 点击关闭
|
||||
if (button === '{close}') {
|
||||
// 子组件调用父组件的关闭按钮方法
|
||||
this.$parent.closekeyboard()
|
||||
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.onChangeKey()
|
||||
} 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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less"> //这块样式可以根据自己的需求调整
|
||||
@deep: ~'>>>';
|
||||
.hg-candidate-box{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
font-size: 42px;
|
||||
background: rgba(256, 256, 256);
|
||||
z-index: 9999;
|
||||
.hg-candidate-box-list{
|
||||
.hg-candidate-box-list-item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.hg-rows{
|
||||
width: 100% !important;
|
||||
.hg-row {
|
||||
height: 50px;
|
||||
.hg-button{
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.hg-theme-default {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
.hg-button {
|
||||
&.hg-red {
|
||||
background: #3e87db;
|
||||
color: white;
|
||||
&.close {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
&.change {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
74
src/views/components/keyboard.vue
Normal file
74
src/views/components/keyboard.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-04-03 15:01:04
|
||||
* @LastEditTime: 2024-04-07 15:14:39
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div v-show="showKeyboard" >
|
||||
<SimpleKeyboard ref="refSimpleKeyboard" class="Keyboard" @onChange="onChangeKeyboard" @empty="empty" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SimpleKeyboard from './SKeyboard.vue'
|
||||
export default {
|
||||
name: 'Keyboard',
|
||||
components: {
|
||||
SimpleKeyboard
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showKeyboard: false, // 键盘默认隐藏
|
||||
value: '',
|
||||
key: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
key (val) {
|
||||
this.key = val
|
||||
if (this.showKeyboard) {
|
||||
this.showKeyboard = false
|
||||
setTimeout(() => {
|
||||
this.showKeyboard = true
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// inpuit获取焦点显示虚拟键盘
|
||||
onInputFocus (res) {
|
||||
this.showKeyboard = true
|
||||
},
|
||||
// 给输入框赋值
|
||||
onChangeKeyboard (input) {
|
||||
this.$emit('input', { value: input, key: this.key })
|
||||
},
|
||||
// 隐藏键盘 父组件调用
|
||||
closeInputFocus () {
|
||||
this.showKeyboard = false
|
||||
},
|
||||
// 隐藏键盘 子组件调用
|
||||
closekeyboard () {
|
||||
this.showKeyboard = false
|
||||
},
|
||||
// 清空输入框
|
||||
empty () {
|
||||
this.$emit('input', { value: '', key: this.key })
|
||||
},
|
||||
// 给虚拟键盘赋当前输入框的值
|
||||
setKeyboardInput (input) {
|
||||
console.log('给虚拟键盘赋当前输入框的值', input)
|
||||
this.$refs.refSimpleKeyboard.onChangeFocus(input)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 键盘样式
|
||||
.Keyboard{
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
Laddar…
Referens i nytt ärende
Block a user