348 lines
9.5 KiB
Vue
348 lines
9.5 KiB
Vue
|
<template>
|
||
|
|
<section class="search-wrap">
|
||
|
|
<div class="fxcol">
|
||
|
|
<input
|
||
|
|
ref="input"
|
||
|
|
class="search-input"
|
||
|
|
v-if="!dropDown"
|
||
|
|
type="search"
|
||
|
|
:value="value"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:disabled = "disabled"
|
||
|
|
@input="$emit('input', $event.target.value)"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
ref="input"
|
||
|
|
class="search-input"
|
||
|
|
v-if="dropDown"
|
||
|
|
type="text"
|
||
|
|
:value="value"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:disabled = "disabled"
|
||
|
|
@input="$emit('input', $event.target.value)"
|
||
|
|
@keyup="$emit('dropdownInput')"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<a v-if="scanShow" class="icon-scan" @click="jumpQRCode"></a>
|
||
|
|
<div v-if="scanShow && searchShow" class="spacing"></div>
|
||
|
|
<div v-if="searchShow" class="icon-search" @click="$emit('toSearch')"></div>
|
||
|
|
<div v-if="carryShow" class="spacing"></div>
|
||
|
|
<div v-if="carryShow" class="search-carrier" @click="$emit('newCarrier')">新载具</div>
|
||
|
|
<div v-if="bildShow" class="spacing"></div>
|
||
|
|
<div v-if="bildShow" class="search-carrier" @click="$emit('tobild')">绑定</div>
|
||
|
|
<div v-if="clearShow" class="search-cancel" @click="$emit('clearUp')">取消</div>
|
||
|
|
<div v-show="dropDownLay" class="dropdown" :style="{'height': dheight}">
|
||
|
|
<ul>
|
||
|
|
<li v-for="(e, i) in arr" :key="i" @click="$emit('carrSearch', e.carrier_no)">{{e.carrier_no}}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'SearchBox',
|
||
|
|
props: {
|
||
|
|
dropDown: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
dropHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
dropDownLay: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
value: String,
|
||
|
|
placeholder: String,
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
scanShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
searchShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
qrcodeUrl: {
|
||
|
|
type: String,
|
||
|
|
// default: 'loadBarCode'
|
||
|
|
default: 'loadQRCode' // 照相机扫码
|
||
|
|
},
|
||
|
|
carryShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
bildShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
clearShow: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
liDisable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
focus: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
qrType: String,
|
||
|
|
arr: Array
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dheight: 'auto',
|
||
|
|
qrcode: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.dheight = (document.body.clientHeight / (100 * (document.documentElement.clientWidth / 750)) - this.dropHeight) + 'rem'
|
||
|
|
if (this.focus) this.autoFocus()
|
||
|
|
let _this = this
|
||
|
|
window.lxqrcode = ''
|
||
|
|
Object.defineProperty(window, 'lxqrcode', {
|
||
|
|
get () {
|
||
|
|
return ''
|
||
|
|
},
|
||
|
|
set (val) {
|
||
|
|
if (val !== '') {
|
||
|
|
_this.qrcode = val
|
||
|
|
_this.handQRCode()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
destroyed () {
|
||
|
|
window.lxqrcode = ''
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 输入框获取焦点
|
||
|
|
autoFocus () {
|
||
|
|
this.$refs.input.focus()
|
||
|
|
this.$refs.input.select()
|
||
|
|
},
|
||
|
|
handQRCode () {
|
||
|
|
let qrcode = this.qrcode
|
||
|
|
let qrcodeArr = qrcode.split('#')
|
||
|
|
switch (this.qrType) {
|
||
|
|
case '01,04':
|
||
|
|
if (qrcodeArr[0] === '01' || qrcodeArr[0] === '04') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的载具或者物料二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '02,03':
|
||
|
|
if (qrcodeArr[0] === '02' || qrcodeArr[0] === '03') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的班组号或货位号')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '03,04':
|
||
|
|
if (qrcodeArr[0] === '03' || qrcodeArr[0] === '04') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的货位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '04,05':
|
||
|
|
if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的点位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case 'Discharge':// 04,05
|
||
|
|
if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcode)
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的点位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '02,04,05':
|
||
|
|
if (qrcodeArr[0] === '02' || qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case 'qr':
|
||
|
|
if (this.qrType === 'qr') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcode)
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
if (qrcodeArr[0] === this.qrType) {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
jumpQRCode () {
|
||
|
|
let passData = (event) => {
|
||
|
|
let qrcode = event.data.lxqrcode
|
||
|
|
let qrcodeArr = qrcode.split('#')
|
||
|
|
switch (this.qrType) {
|
||
|
|
case '01,04':
|
||
|
|
if (qrcodeArr[0] === '01' || qrcodeArr[0] === '04') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的载具或者物料二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '02,03':
|
||
|
|
if (qrcodeArr[0] === '02' || qrcodeArr[0] === '03') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的班组号或货位号')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '03,04':
|
||
|
|
if (qrcodeArr[0] === '03' || qrcodeArr[0] === '04') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的货位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '04,05':
|
||
|
|
if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的点位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case 'Discharge':// 04,05
|
||
|
|
if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcode)
|
||
|
|
} else {
|
||
|
|
this.toast('请扫描正确的点位或者载具二维码')
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case '02,04,05':
|
||
|
|
if (qrcodeArr[0] === '02' || qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case 'qr':
|
||
|
|
if (this.qrType === 'qr') {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcode)
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
if (qrcodeArr[0] === this.qrType) {
|
||
|
|
this.$emit('input', qrcode)
|
||
|
|
this.$emit('qrSearch', qrcodeArr[1])
|
||
|
|
} else {
|
||
|
|
this.toast(`请扫描正确的${this.placeholder}二维码`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.removeEventListener('qrcodeEvent', passData)
|
||
|
|
}
|
||
|
|
window.addEventListener('qrcodeEvent', passData)
|
||
|
|
window.location.href = this.qrcodeUrl
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus">
|
||
|
|
@import '~@style/mixin'
|
||
|
|
.search-wrap
|
||
|
|
position relative
|
||
|
|
_wh(100%,.93rem)
|
||
|
|
_fj()
|
||
|
|
padding: .2rem .26rem
|
||
|
|
background-color: #ffffff
|
||
|
|
border-radius: 3px
|
||
|
|
.dropdown
|
||
|
|
position absolute
|
||
|
|
z-index 10000000
|
||
|
|
top 1rem
|
||
|
|
left 0
|
||
|
|
background-color: #ffffff
|
||
|
|
width 100%
|
||
|
|
border-radius: .15rem
|
||
|
|
overflow-y auto
|
||
|
|
ul
|
||
|
|
width 100%
|
||
|
|
padding .1rem 0
|
||
|
|
li
|
||
|
|
_font(.28rem, .53rem, #929292)
|
||
|
|
margin 0 .26rem
|
||
|
|
border-bottom 1px solid #eeeeee
|
||
|
|
.liDisable
|
||
|
|
background-color #dcdfe6
|
||
|
|
.search-input
|
||
|
|
width 5rem
|
||
|
|
max-width 5rem
|
||
|
|
margin-right: .15rem
|
||
|
|
_font(.28rem,.53rem,#929292)
|
||
|
|
background: #ffffff
|
||
|
|
&:disabled
|
||
|
|
cursor: not-allowed
|
||
|
|
.icon-scan
|
||
|
|
flex 0 0 .42rem
|
||
|
|
_bis('../images/saoma.png',.42rem)
|
||
|
|
.icon-search
|
||
|
|
flex 0 0 .38rem
|
||
|
|
_bis('../images/search.png',.38rem)
|
||
|
|
.search-carrier
|
||
|
|
flex 0 0 1rem
|
||
|
|
_font(.28rem,.38rem,#929292,,center)
|
||
|
|
border 1px solid #d1d1d1
|
||
|
|
border-radius 5px
|
||
|
|
padding 2px
|
||
|
|
.spacing
|
||
|
|
flex 0 0 1px
|
||
|
|
height .38rem
|
||
|
|
background-color #d1d1d1
|
||
|
|
margin 0 .15rem
|
||
|
|
.search-wrap_1
|
||
|
|
border: 1px solid #dcdfe6
|
||
|
|
padding: 0 0.15rem
|
||
|
|
height: 0.6rem
|
||
|
|
.search-input
|
||
|
|
font-size: 0.26rem
|
||
|
|
color: #606266
|
||
|
|
.search-wrap_2
|
||
|
|
background-color: #f5f7fa
|
||
|
|
border: 1px solid #e4e7ed
|
||
|
|
padding: 0 0.15rem
|
||
|
|
height: 0.6rem
|
||
|
|
.search-input
|
||
|
|
font-size: 0.26rem
|
||
|
|
color: #c0c4cc
|
||
|
|
background-color #f5f7fa
|
||
|
|
</style>
|