init
This commit is contained in:
347
src/components/SearchBox.vue
Normal file
347
src/components/SearchBox.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user