<script setup>
|
import request from "@/utils/request"
|
import {computed, onMounted, ref} from "vue"
|
import PrintFoot from "@/components/sd/order/PrintFoot.vue"
|
import companyInfo from "@/stores/sd/companyInfo"
|
import deepClone from "@/utils/deepClone";
|
import {ElMessage} from "element-plus";
|
import useUserInfoStore from "@/stores/userInfo";
|
import {Bottom, Burger, Food} from "@element-plus/icons-vue";
|
const company = companyInfo()
|
const userStore = useUserInfoStore()
|
const username = userStore.user.userName
|
let dialogVisible = ref(false)
|
|
|
let props = defineProps({
|
orderId:null,
|
})
|
let productId=ref({
|
|
})
|
let data = ref({
|
order:{
|
processingNote:''
|
},
|
orderProductDetail:[]
|
})
|
let productIdData = ref({
|
})
|
const selectedValues = ref([])
|
|
const grossNum = ref({
|
quantity: 0,
|
grossArea: 0,
|
perimeter: 0
|
})
|
const getData = () => {
|
request.get(`/order/printOrderProductDetail/${props.orderId}/${selectedValues.value}`).then(res => {
|
console.log(res.data)
|
data.value= res.data
|
productIdData.value=data.value.orderProductDetail
|
data.value.orderProductDetail.forEach(item => {
|
grossNum.value.quantity += getQuantity(item.productDetail)
|
grossNum.value.grossArea += getArea(item.productDetail)
|
grossNum.value.perimeter += getPerimeter(item.productDetail)
|
stringToJson(item.productDetail)
|
})
|
|
grossNum.value.quantity = parseFloat(grossNum.value.quantity.toFixed(2))
|
grossNum.value.grossArea = parseFloat(grossNum.value.grossArea.toFixed(2))
|
grossNum.value.perimeter = parseFloat(grossNum.value.perimeter.toFixed(2))
|
|
})
|
}
|
|
const handleChange = () => {
|
|
request.get(`/order/printOrderProductDetail/${props.orderId}/${selectedValues.value}`).then(res => {
|
grossNum.value.quantity=0
|
grossNum.value.grossArea=0
|
grossNum.value.perimeter=0
|
data.value= res.data
|
|
data.value.orderProductDetail.forEach(item => {
|
grossNum.value.quantity += getQuantity(item.productDetail)
|
grossNum.value.grossArea += getArea(item.productDetail)
|
grossNum.value.perimeter += getPerimeter(item.productDetail)
|
stringToJson(item.productDetail)
|
})
|
grossNum.value.quantity = parseFloat(grossNum.value.quantity.toFixed(2))
|
grossNum.value.grossArea = parseFloat(grossNum.value.grossArea.toFixed(2))
|
grossNum.value.perimeter = parseFloat(grossNum.value.perimeter.toFixed(2))
|
|
})
|
|
}
|
|
const handleDoubleClick = () => {
|
dialogVisible.value=true
|
}
|
|
onMounted(() => {
|
getData()
|
})
|
|
const stringToJson = (productList) => {
|
productList.forEach(item => {
|
item.otherColumns = JSON.parse(item.otherColumns)
|
})
|
}
|
|
const getQuantity = (productList) => {
|
let quantity = 0
|
productList.forEach(item => {
|
quantity += item.quantity
|
})
|
return parseFloat(quantity.toFixed(2))
|
|
}
|
|
const getArea = (productList) => {
|
let area = 0
|
productList.forEach(item => {
|
area += item.grossArea
|
})
|
return parseFloat(area.toFixed(2))
|
|
}
|
|
const getPerimeter = (productList) => {
|
let perimeter = 0
|
productList.forEach(item => {
|
perimeter += item.perimeter
|
})
|
return parseFloat(perimeter.toFixed(2))
|
}
|
|
const printSheet = () => {
|
}
|
|
|
|
|
defineExpose({
|
printSheet
|
});
|
</script>
|
|
|
<template>
|
|
<div id="sheet" @dblclick="handleDoubleClick" >
|
<table style="border-style: none;" >
|
<thead>
|
<tr class="title-s">
|
<th colspan="9">
|
<h1>
|
{{ company.companyName }}
|
</h1>
|
</th>
|
</tr>
|
|
<tr class="title-s">
|
<th colspan="2" style="width: 30%"></th>
|
<th colspan="5" style="width: 40%;">
|
<h3 >生产任务单(成品)</h3>
|
</th>
|
<th colspan="2" style="width: 30%;">订单编号：<span>{{ data.order.orderId }}</span></th>
|
</tr>
|
<tr>
|
<th style="text-align: left;border:none;font-weight: bold;font-size: 17px;" colspan="4">
|
客户名称：<span>{{ data.order.customerName }}</span></th>
|
<th style="text-align: left;border:none;font-weight: bold;font-size: 17px;" colspan="3">
|
项目名称：<span>{{ data.order.project }}</span></th>
|
<th style="text-align: left;border:none;font-weight: bold;font-size: 17px;" colspan="2">
|
发货日期：<span>{{ data.order.deliveryDate }}</span></th>
|
</tr>
|
<tr>
|
<th style="text-align: left;border:none;font-weight: bold;font-size: 17px;" colspan="7">
|
送货地址：<span>{{ data.order.deliveryAddress }}</span></th>
|
<th style="text-align: left;border:none;font-weight: bold;font-size: 17px;" colspan="2">
|
联系电话：<span><input class="contactNumber" type="text" v-model="data.order.contactNumber"/></span></th>
|
</tr>
|
|
</thead>
|
<tr style="border-style: none">
|
<td colspan="9" style="border-style: none">
|
<table style="border-style: none;width: 100%;height: 100%">
|
<template v-for="(item, index) in data.orderProductDetail" :key="index" >
|
<thead>
|
<tr v-if="index===0">
|
<th style="width: 6%;font-weight: bold;">序</th>
|
<th style="width: 15%;font-weight: bold;" >楼层编号</th>
|
<th style="width: 20%;font-weight: bold;" colspan="3">宽X高</th>
|
<th style="width: 12%;font-weight: bold;">数量</th>
|
<th style="width: 12%;font-weight: bold;">面积</th>
|
<th style="width: 17%;font-weight: bold;" colspan="2">加工要求</th>
|
</tr>
|
|
|
</thead>
|
<tr style="border-style: none">
|
<td style="font-size: 15px;font-weight: bold;text-align: left" colspan="9">
|
产品名称:<span>{{item.productName}}</span>
|
</td>
|
</tr>
|
|
<tr class="day-in" v-for="(items, index1) in item.productDetail" :key="index1">
|
<td>{{items.orderNumber}}</td>
|
<td>{{items.buildingNumber}}</td>
|
<td colspan="3" style="font-size: 20px;font-weight: bold;" v-if="items.otherColumns?.S02">{{items.otherColumns?.S02}}</td>
|
<td colspan="3" style="font-size: 20px;font-weight: bold;" v-else-if="items.differentSize===1 && items.bendRadius==null">
|
<template v-for="(orderGlassDetail, index1) in items.orderGlassDetails" >
|
({{orderGlassDetail.childWidth}}x{{orderGlassDetail.childHeight}})
|
</template>
|
</td>
|
<td colspan="3" style="font-size: 20px;font-weight: bold;" v-else>{{items.width}}x{{items.height}}</td>
|
<td style="font-size: 20px;font-weight: bold;">{{items.quantity}}</td>
|
<td style="font-size: 20px;font-weight: bold;">{{items.grossArea.toFixed(2)}}</td>
|
<td colspan="2">{{items.processingNote}}</td>
|
</tr>
|
<tr class="day-in" >
|
<td style="font-size: 15px;font-weight: bold;" colspan="5">小计:</td>
|
<td style="font-size: 20px;font-weight: bold;">{{getQuantity(item.productDetail)}}</td>
|
<td style="font-size: 20px;font-weight: bold;">{{getArea(item.productDetail)}}</td>
|
<td colspan="2"></td>
|
</tr>
|
|
</template>
|
<tr class="day-in">
|
<td style="font-size: 15px;font-weight: bold;" colspan="5">合计:</td>
|
<td style="font-size: 20px;font-weight: bold;">{{grossNum.quantity}}</td>
|
<td style="font-size: 20px;font-weight: bold;">{{grossNum.grossArea}}</td>
|
<td colspan="2"></td>
|
</tr>
|
<tr class="day-in">
|
<td style="text-align: left;border-width: 0 0 0 0; border-style: solid; border-color: #d3dce6" colspan="9">
|
<template v-for="(item,index) in data.order.processingNote.split('\n')">
|
{{item}}
|
<br>
|
</template>
|
</td>
|
</tr>
|
|
<tfoot style="border: 0">
|
<!-- <el-row :gutter="24">
|
<el-col :span="4"><div style="font-size: 12px" class="bottom">制单员：{{data.order.creator}}<span style="font-size: 10px"></span></div></el-col>
|
<el-col :span="6"><div style="font-size: 12px" class="bottom">制单日期：{{data.order.createTime}}<span style="font-size: 10px"></span></div></el-col>
|
<el-col :span="4"><div style="font-size: 12px" class="bottom">审核员：{{data.order.verifier}}</div></el-col>
|
<el-col :span="6"><div style="font-size: 12px" class="bottom">审核日期：{{data.order.updateTime}}</div></el-col>
|
<el-col :span="4"><div style="font-size: 12px" class="bottom">打印人：{{username}}</div></el-col>
|
|
</el-row>-->
|
<tr class="day-in" style="border: 0;">
|
<td colspan="9" style="border: 0;">
|
<div style="display:flex;">
|
<div style="width: 15%">制单员：{{ data.order.creator }}</div>
|
<div style="width: 25%">制单日期：{{ data.order.createTime }}</div>
|
<div style="width: 15%">审核员：{{ data.order.verifier }}</div>
|
<div style="width: 25%">审核日期：{{ data.order.updateTime }}</div>
|
<div style="width: 15%">打印人：{{ username }}</div>
|
</div>
|
|
|
</td>
|
</tr>
|
</tfoot>
|
</table>
|
</td>
|
</tr>
|
|
|
|
|
|
|
</table>
|
|
<el-dialog v-model="dialogVisible" style="width: 40%;height: 20%;margin-top: 10%" >
|
<el-select v-model="selectedValues" style="width: 100%" @change="handleChange" multiple placeholder="请选择">
|
<el-option
|
v-for="item in productIdData"
|
:key="item"
|
:label='item.productId+" "+item.productName'
|
:value="item.productId">
|
</el-option>
|
</el-select>
|
</el-dialog>
|
|
</div>
|
|
|
</template>
|
|
<style scoped>
|
h1,h3{
|
left:0;
|
right:0;
|
top:0;
|
bottom:0;
|
margin:auto;
|
}
|
h1{
|
font-size: 1.5rem;
|
}
|
h3{
|
font-size: 1.2rem;
|
font-weight: bolder;
|
}
|
|
|
table{
|
border-collapse: collapse;
|
width: 100%;
|
text-align: center;
|
}
|
tr,td,th{
|
border: 1px solid black;
|
}
|
|
th,.no-change-row {
|
white-space: nowrap;
|
}
|
|
.title-1{
|
width: 76px;
|
}
|
.title-s,.title-s th{
|
border:0
|
}
|
|
.hr-border{
|
height: 2px;
|
width: 100%;
|
background-color: black;
|
color: black;
|
}
|
table {
|
border-collapse: collapse;
|
width: 100%;
|
|
}
|
td > table {
|
margin: 0;
|
padding: 0;
|
}
|
.day-in{
|
height: 30px;
|
}
|
.contactNumber{
|
width: 125px;
|
height:20px;
|
border: none;
|
box-shadow: none;
|
font-size: 17px;
|
}
|
|
@media print {
|
@page {
|
margin: 5mm 5mm 10mm 5mm;
|
}
|
}
|
|
|
|
|
</style>
|
