<template>
|
<div class="bsb">
|
<div class="bsb_box">
|
<div class="bsb_box_item">
|
<span>设备编码</span>
|
<span>{{info.code}}</span>
|
</div>
|
<div class="bsb_box_item">
|
<span>设备名称</span>
|
<span>{{info.name}}</span>
|
</div>
|
<div class="bsb_box_item">
|
<span>设备型号</span>
|
<span>{{info.model}}</span>
|
</div>
|
<div class="bsb_box_item">
|
<span>关联用户</span>
|
<span>{{store.state.userInfo.realname}}/{{store.state.userInfo.companyUser.dmodel.name}}</span>
|
</div>
|
</div>
|
<div class="bsb_footer">
|
<div class="bsb_footer_jx" @click="continueScanning">重新扫码</div>
|
<div class="bsb_footer_tj" @click="submit">提交</div>
|
</div>
|
<v-ScanCode
|
:openCode="openCode"
|
:infos="['请扫描设备码']"
|
@closePopup="closePopup"
|
@onDecode="onDecode" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, nextTick } from 'vue'
|
import { useRoute, useRouter } from "vue-router"
|
import { useStore } from "vuex"
|
import { QRCodeType } from '@/enum'
|
import { Toast } from 'vant'
|
import { getSbInfo, getBarcodeContent, bindingDevice } from '@/apis/WorkOrderAPI'
|
import vScanCode from '@/components/common/ScanCode.vue'
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
let openCode = ref<boolean>(false)
|
|
let info: any = ref({})
|
|
const closePopup = () => {
|
openCode.value = false
|
}
|
|
// 扫码回调
|
const onDecode = (data: string[]): void => {
|
nextTick(() => {
|
openCode.value = false
|
})
|
getBarcodeContent({
|
barcode: data[0]
|
}).then(res => {
|
if (res.code === 200 && res.data.barcodeType === QRCodeType.SB) {
|
getInfo(res.data.id)
|
} else {
|
Toast({ message: '请扫描正确的设备码' })
|
}
|
})
|
}
|
|
//重新扫码
|
const continueScanning = () => {
|
openCode.value = true
|
}
|
|
// 互殴设备信息
|
const getInfo = (id: string) => {
|
getSbInfo(id)
|
.then(res => {
|
if (res.code === 200) {
|
info.value = res.data
|
}
|
})
|
}
|
|
// 提交
|
const submit = () => {
|
bindingDevice({
|
deviceId: info.value.id,
|
userIds: store.state.userInfo.companyUser.id
|
}).then(res => {
|
if (res.code === 200) {
|
Toast.success({ message: '绑定成功', duration: 2000, forbidClick: true })
|
setTimeout(() => {
|
router.go(-1)
|
}, 2000)
|
}
|
})
|
}
|
|
onMounted(() => {
|
let id: any = route.query.id
|
getInfo(id)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.bsb {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: #F7F7F7;
|
.bsb_box {
|
padding: 0 30px;
|
background: white;
|
.bsb_box_item {
|
height: 98px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #E5E5E5;
|
&:last-child {
|
border: none;
|
}
|
span {
|
&:nth-child(1) {
|
font-size: 30px;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 28px;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
.bsb_footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
padding: 0 30px 68px 30px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.bsb_footer_jx {
|
width: 334px;
|
height: 88px;
|
background: #FFFFFF;
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
|
border-radius: 8px;
|
color: $nav-color;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
font-weight: 500;
|
}
|
.bsb_footer_tj {
|
width: 334px;
|
height: 88px;
|
background: $nav-color;
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
|
border-radius: 8px;
|
font-size: 30px;
|
font-weight: 500;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
