<template>
|
<div class="gy">
|
<div class="gy_info">
|
<div class="gy_info_title">物料信息</div>
|
<div class="gy_info_box">
|
<div class="gy_info_box_item">
|
<div class="label">物料编码：</div>
|
<span v-if="desc.mmodel">{{desc.mmodel.code ? desc.mmodel.code : '-'}}</span>
|
</div>
|
<div class="gy_info_box_item">
|
<div class="label">物料名称：</div>
|
<span v-if="desc.mmodel">{{desc.mmodel.name ? desc.mmodel.name : '-'}}</span>
|
</div>
|
<div class="gy_info_box_item">
|
<div class="label">单位：</div>
|
<span v-if="desc.umodel">{{desc.umodel.name ? desc.umodel.name : '-'}}</span>
|
</div>
|
<div class="gy_info_box_item">
|
<div class="label">版本号：</div>
|
<span v-if="desc.mmodel">{{desc.mmodel.attr ? desc.mmodel.attr : '-'}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="gy_gx">工序信息</div>
|
<div class="gy_gxinfo">
|
<div class="gy_gxinfo_item">
|
<div class="label">工序名称：</div>
|
<span>{{desc.procedureName ? desc.procedureName : '-'}}｜{{desc.procedureCode ? desc.procedureCode : '-'}}</span>
|
</div>
|
<div class="gy_gxinfo_item">
|
<div class="label">注意事项：</div>
|
<span>{{desc.tips ? desc.tips : '-'}}</span>
|
</div>
|
<div class="gy_gxinfo_item">
|
<div class="label">工艺文件：</div>
|
<div class="list" v-if="desc.type">
|
<div class="list_item" @click="show = true">
|
<img :src="desc.url" alt="" />
|
</div>
|
</div>
|
<div class="file" v-else>
|
<div class="file_item" @click="jumpPreview(desc.url)">
|
<img src="@/assets/icon/ic_pdf@2x.png" alt="" />
|
<u>{{desc.remark}}</u>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="gy_z"></div>
|
<div class="gy_footer">
|
<button class="gy_footer_sCode" @click="open">扫码</button>
|
</div>
|
<v-ScanCode
|
:openCode="openCode"
|
:infos="['请扫码工装码/工单码']"
|
@closePopup="closePopup"
|
@onDecode="onDecode">
|
</v-ScanCode>
|
<van-image-preview v-model:show="show" :images="images" @change="onChange"></van-image-preview>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { QRCodeType } from '@/enum'
|
import { Toast } from 'vant'
|
import { judgmentType } from '@/utils/utils'
|
import { useRouter, useRoute } from "vue-router"
|
import { getBarcodeContent, getListByWorkOrderId } from '@/apis/WorkOrderAPI'
|
import { queryListByCode } from '@/apis'
|
|
const router = useRouter()
|
const route = useRoute()
|
|
let desc = ref<object>({})
|
|
let openCode = ref<boolean>(false)
|
|
const show = ref(false);
|
const index = ref(1);
|
|
// 预览的图片数据
|
let images = ref<string[]>([])
|
|
const onChange = (newIndex: any) => {
|
index.value = newIndex + 1;
|
};
|
|
// 跳转预览pdf
|
const jumpPreview = (url: string) => {
|
document.location.href = `${process.env.VUE_APP_PDF}?url=${url}`
|
}
|
|
const open = () => {
|
openCode.value = true
|
}
|
|
// 关闭扫码组件
|
const closePopup = (): void => {
|
openCode.value = false
|
}
|
|
// 获取详情
|
const info = (id: string): void => {
|
queryListByCode({
|
dicCode: 'FOLDER',
|
label: 'ROUTE_CARD'
|
}).then(data => {
|
if (data.code === 200) {
|
getListByWorkOrderId({ workOrderId: id })
|
.then(res => {
|
if (res.code === 200) {
|
res.data.url = res.data.resourcePath + data.data[0].code + '/' + res.data.fileurl
|
let index = res.data.fileurl.lastIndexOf('.')
|
let code = res.data.fileurl.substring(index + 1, res.data.fileurl.length)
|
res.data.type = judgmentType(code.toLowerCase())
|
if (res.data.type) {
|
images.value = []
|
images.value.push(res.data.url)
|
}
|
desc.value = res.data
|
}
|
})
|
}
|
})
|
}
|
|
// 获取扫码值
|
const onDecode = (data: string[]): void => {
|
openCode.value = false
|
getBarcodeContent({ barcode: data[0] })
|
.then(res => {
|
if (res.code === 200) {
|
if (res.data.barcodeType !== QRCodeType.GZ && res.data.barcodeType !== QRCodeType.GD) {
|
return Toast.fail({ message: '请扫描正确的工装码/工单码' })
|
}
|
info(res.data.id)
|
}
|
})
|
}
|
|
onMounted(() => {
|
info(route.query.id as string)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.gy {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
.gy_info {
|
padding: 30px;
|
background: white;
|
.gy_info_title {
|
font-size: 32px;
|
font-weight: 500;
|
color: #333333;
|
}
|
.gy_info_box {
|
padding: 24px 30px;
|
background: #F7F7F7;
|
border-radius: 16px;
|
margin-top: 32px;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.gy_info_box_item {
|
width: 100%;
|
display: flex;
|
margin-top: 24px;
|
&:nth-child(1) {
|
margin-top: 0!important;
|
}
|
.label {
|
width: 120px;
|
flex-shrink: 0;
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
}
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.gy_gx {
|
padding: 24px 30px;
|
font-size: 32px;
|
font-weight: 500;
|
color: #222222;
|
}
|
.gy_gxinfo {
|
padding: 30px;
|
background: white;
|
display: flex;
|
flex-direction: column;
|
.gy_gxinfo_item {
|
display: flex;
|
margin-bottom: 30px;
|
&:last-child {
|
margin-bottom: 0!important;
|
}
|
.file {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.file_item {
|
display: flex;
|
align-items: center;
|
margin-top: 30px;
|
&:first-child {
|
margin-top: 0!important;
|
}
|
img {
|
width: 30px;
|
height: 36px;
|
margin-right: 10px;
|
}
|
u {
|
font-size: 26px;
|
font-weight: 400;
|
color: #4275FC;
|
}
|
}
|
}
|
.list {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.list_item {
|
width: 160px;
|
height: 160px;
|
border-radius: 8px;
|
margin-top: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
&:nth-child(1) {
|
margin-top: 0!important;
|
}
|
&:nth-child(2) {
|
margin-top: 0!important;
|
}
|
&:nth-child(3) {
|
margin-top: 0!important;
|
}
|
}
|
}
|
.label {
|
width: 150px;
|
font-size: 26px;
|
font-weight: 400;
|
color: #666666;
|
}
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
.gy_z {
|
height: 168px;
|
}
|
.gy_footer {
|
position: fixed;
|
bottom: 0;
|
left: 30px;
|
padding-bottom: 68px;
|
width: calc(100% - 60px);
|
.gy_footer_sCode {
|
width: 100%;
|
border: none;
|
height: 88px;
|
background: $nav-color;
|
box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
|
border-radius: 8px;
|
font-size: 30px;
|
font-weight: 500;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
