2 changed files with 372 additions and 0 deletions
@ -0,0 +1,262 @@ |
|||||
|
<!--扫描组件--> |
||||
|
<template> |
||||
|
<!-- <page-meta root-font-size="18px"></page-meta> --> |
||||
|
<view> |
||||
|
<view class="pop_tab"> |
||||
|
<view class="tab_info"> |
||||
|
<view class="conbox"> |
||||
|
<textarea inputmode="none" v-model="scanMsg" trim="all" maxlength="1000" |
||||
|
style="margin-left: 5px;width: 90%;" :focus="boxfocus" :placeholder="placeholderValue" |
||||
|
@focus="getfocus" @blur="losefocus" @input="handelScanMsg" :cursor="cursorIndex"></textarea> |
||||
|
</view> |
||||
|
<view class="uni-flex uni-row space-between u-col-center"> |
||||
|
<view class="uni-flex"> |
||||
|
<button class="clean_scan_btn" @click="clearScanValue()">清空</button> |
||||
|
<button class="scan_btn" @click="clickScanMsg()">扫描</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view style="width: 100%;"> |
||||
|
<view style="width: 100%;" v-if="scanList.length>0&&isShowHistory"> |
||||
|
<view class="uni-flex uni-row space-between u-col-center"> |
||||
|
<view class="" style="padding: 10rpx;"> |
||||
|
历史记录 |
||||
|
</view> |
||||
|
<view class="" style="padding-right: 10rpx;"> |
||||
|
<u-icon :name="expendIcon" size="35rpx" @click="expands()"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-line class='line_color' style='padding-top: 10rpx;padding-bottom: 20rpx;'></u-line> |
||||
|
<scroll-view scroll-y="true" class="scroll-view" v-if="expand&&scanList.length>0" |
||||
|
style="height: 70px;"> |
||||
|
<view class="uni-flex u-col" v-for="(item,index) in scanList"> |
||||
|
<view style="width: 100%;max-height: 100px;"> |
||||
|
<view class="uni-flex u-row space-between u-col-center" @click="showItem(item)"> |
||||
|
<view class="text_ellipsis" style="padding: 15rpx;"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<u-icon name="arrow-right"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-line class='line_color'></u-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<comMessage ref="comMessage"></comMessage> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
getLabelInfo |
||||
|
} from '../../common/label.js'; |
||||
|
|
||||
|
export default { |
||||
|
name: "winComScan", |
||||
|
emits: ["getResult"], |
||||
|
components: {}, |
||||
|
props: { |
||||
|
placeholder: { |
||||
|
type: String, |
||||
|
default: '请扫描标签' |
||||
|
}, |
||||
|
clearResult: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
boxFocus: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
isShowHistory: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
headerType: { |
||||
|
type: String, |
||||
|
default: 'HPQ' //HLB HMQ HCQ HPQ |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// scanMsg: "HPQ;V1.0;ICE115F11161AG;PP20230427000027;B20230427002;Q100", |
||||
|
scanMsg: "", |
||||
|
boxfocus: false, |
||||
|
placeholderValue: '', |
||||
|
scanResult: {}, |
||||
|
scanList: [], |
||||
|
expand: true, |
||||
|
expendIcon: 'arrow-down', |
||||
|
cursorIndex: 0 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.boxfocus = true; |
||||
|
uni.hideKeyboard(); |
||||
|
|
||||
|
// #ifdef H5 |
||||
|
if (document.querySelector('textarea') != null) { |
||||
|
document.querySelector('textarea').setAttribute('inputmode', 'none') |
||||
|
} |
||||
|
// #endif |
||||
|
this.hide() |
||||
|
// #ifdef APP-PLUS |
||||
|
|
||||
|
// #endif |
||||
|
}, |
||||
|
watch: { |
||||
|
placeholder() { |
||||
|
this.placeholderValue = '请扫描' + this.placeholder; |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.placeholderValue = '请扫描' + this.placeholder; |
||||
|
}, |
||||
|
methods: { |
||||
|
hide() { |
||||
|
// #ifdef APP-PLUS |
||||
|
// 只是解决软键盘的闪现 |
||||
|
var interval = setInterval(function() { |
||||
|
uni.hideKeyboard(); //隐藏软键盘 |
||||
|
console.log('刷新') |
||||
|
}, 5); |
||||
|
setTimeout(() => { |
||||
|
clearInterval(interval); |
||||
|
console.log('停止刷新') |
||||
|
}, 1000); |
||||
|
// #endif |
||||
|
}, |
||||
|
getValue() { |
||||
|
return this.scanMsg |
||||
|
}, |
||||
|
setValue(val) { |
||||
|
this.scanMsg = val |
||||
|
}, |
||||
|
clearScanValue() { |
||||
|
this.scanMsg = '' |
||||
|
this.getfocus(); |
||||
|
}, |
||||
|
clickScanMsg() { |
||||
|
this.scanMsg = this.scanMsg + "\n"; |
||||
|
this.handelScanMsg(); |
||||
|
}, |
||||
|
handelScanMsg() { |
||||
|
let that = this; |
||||
|
setTimeout(() => { |
||||
|
that.losefocus(); |
||||
|
// let content = uni.$u.trim(that.scanMsg) |
||||
|
let content = that.scanMsg; |
||||
|
if (content == "") { |
||||
|
that.getfocus(); |
||||
|
this.$refs.comMessage.showErrorMessage("扫描内容为空,请重新扫描", res => { |
||||
|
if (res) { |
||||
|
that.scanMsg = "" |
||||
|
that.getfocus(); |
||||
|
} |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (that.isShowHistory) { |
||||
|
that.scanList.unshift(content); |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
let itemCode = content.substr(0, 10); |
||||
|
let productDate = content.substr(10, 8); |
||||
|
let batch = content.substr(18, 3); |
||||
|
let order = content.substr(21, 8); |
||||
|
|
||||
|
let scanResult = { |
||||
|
itemCode: itemCode, |
||||
|
productDate: productDate, |
||||
|
batch: batch, |
||||
|
order: order, |
||||
|
qty: 1, |
||||
|
content: content, |
||||
|
success: true, |
||||
|
}; |
||||
|
that.clear(); |
||||
|
that.$emit("getResult", scanResult); |
||||
|
} catch (e) { |
||||
|
this.$refs.comMessage.showErrorMessage('解析错误', res => { |
||||
|
if (res) { |
||||
|
that.getfocus(); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, 500); |
||||
|
}, |
||||
|
getfocus() { |
||||
|
let that = this; |
||||
|
this.$nextTick(r => { |
||||
|
that.boxfocus = true; |
||||
|
}); |
||||
|
this.hide() |
||||
|
}, |
||||
|
losefocus() { |
||||
|
let that = this; |
||||
|
this.$nextTick(r => { |
||||
|
that.boxfocus = false; |
||||
|
}); |
||||
|
}, |
||||
|
clear() { |
||||
|
this.cursorIndex = 0; |
||||
|
this.scanMsg = '' |
||||
|
}, |
||||
|
iconClick(type) { |
||||
|
this.$emit("clearResult", this.scanMsg); |
||||
|
}, |
||||
|
expands() { |
||||
|
this.expand = !this.expand; |
||||
|
this.expendIcon = this.expand == true ? "arrow-down" : "arrow-up" |
||||
|
}, |
||||
|
scanClick() { |
||||
|
this.handelScanMsg(); |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
this.clear(); |
||||
|
this.getfocus(); |
||||
|
}, |
||||
|
showItem(item) { |
||||
|
this.$refs.comMessage.showMessage(item, res => { |
||||
|
if (res) { |
||||
|
// this.$refs.modal.cancelClose(); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
scanQRCode() { |
||||
|
let that = this; |
||||
|
uni.scanCode({ |
||||
|
onlyFromCamera: true, |
||||
|
success: (res) => { |
||||
|
that.scanMsg = res.result; |
||||
|
that.$emit("getResult", res.result); |
||||
|
console.log('扫描二维码成功,结果:' + res.result); |
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
that.showItem('扫描出现错误:' + res.result); |
||||
|
console.log('扫描出现错误:' + res.result); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<script module="textarea" lang="renderjs"> |
||||
|
export default { |
||||
|
mounted() { |
||||
|
document.querySelector('textarea').setAttribute('inputmode', 'none') |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<uni-popup ref="popup" @change="change" @maskClick="closeScanPopup()"> |
||||
|
<view class="popup_box"> |
||||
|
<view class="pop_title uni-flex space-between"> |
||||
|
<view class="" style="font-size: 35rpx;"> |
||||
|
扫描{{title}} |
||||
|
</view> |
||||
|
|
||||
|
<view class=""> |
||||
|
<image class="fr icons_scan_close" src="/static/icons/icons_scan_close.svg" |
||||
|
@click="closeScanPopup()"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view class=""> |
||||
|
<win-com-scan-fg ref="comscan" :placeholder="title" @getResult="getScanResult" |
||||
|
:headerType="headerType" :isShowHistory="isShowHistory" |
||||
|
:clearResult="true"></win-com-scan-fg> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
<comMessage ref="comMessage" @afterClose="getfocus"></comMessage> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import winComScanFg from '@/mycomponents/scan/winComScanFg.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'winScanFGLabel', |
||||
|
components: { |
||||
|
winComScanFg, |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '成品标签' |
||||
|
}, |
||||
|
isShowHistory: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
openScanPopup() { |
||||
|
setTimeout(res => { |
||||
|
this.$refs.popup.open('bottom') |
||||
|
}, 200) |
||||
|
}, |
||||
|
|
||||
|
closeScanPopup() { |
||||
|
this.$refs.popup.close(); |
||||
|
this.$emit("close", ''); |
||||
|
}, |
||||
|
|
||||
|
scanClick() { |
||||
|
this.$refs.comscan.clickScanMsg(); |
||||
|
}, |
||||
|
|
||||
|
cancelClick() { |
||||
|
this.$refs.comscan.clearScanValue(); |
||||
|
}, |
||||
|
|
||||
|
getScanResult(result) { |
||||
|
if (result.success) { |
||||
|
this.$emit("getResult", result); |
||||
|
} else { |
||||
|
this.showMessage(result.message) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getfocus() { |
||||
|
if (this.$refs.comscan != undefined) { |
||||
|
this.$refs.comscan.getfocus(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
losefocus() { |
||||
|
if (this.$refs.comscan != undefined) { |
||||
|
this.$refs.comscan.losefocus(); |
||||
|
} |
||||
|
}, |
||||
|
showMessage(message) { |
||||
|
this.$refs.comMessage.showMessage(message); |
||||
|
}, |
||||
|
change(e) { |
||||
|
this.show = e.show |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.scroll-view { |
||||
|
overflow-y: scroll; |
||||
|
height: auto; |
||||
|
max-height: 300rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue