chenlu
2024-09-10 ed3ce5c8f6e1f7ac1aad3218ab5e518fc95cdb0f
north-glass-erp/northglass-erp/src/components/sd/order/PrintSheet4.vue
@@ -6,14 +6,18 @@
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:{
@@ -21,15 +25,19 @@
  },
  orderProductDetail:[]
})
let productIdData = ref({
})
const selectedValues = ref([])
const grossNum = ref({
  quantity: 0,
  grossArea: 0,
  perimeter: 0
})
const getData = () => {
  request.get(`/order/printOrderProductDetail/${props.orderId}`).then(res => {
    console.log(res.data)
  request.get(`/order/printOrderProductDetail/${props.orderId}/${selectedValues.value}`).then(res => {
    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)
@@ -37,11 +45,37 @@
      stringToJson(item.productDetail)
    })
    grossNum.value.quantity = parseFloat(grossNum.value.quantity.toFixed(3))
    grossNum.value.grossArea = parseFloat(grossNum.value.grossArea.toFixed(3))
    grossNum.value.perimeter = parseFloat(grossNum.value.perimeter.toFixed(3))
    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(() => {
@@ -59,7 +93,7 @@
  productList.forEach(item => {
    quantity += item.quantity
  })
  return parseFloat(quantity.toFixed(3))
  return parseFloat(quantity.toFixed(2))
}
@@ -68,7 +102,7 @@
  productList.forEach(item => {
    area += item.grossArea
  })
  return parseFloat(area.toFixed(3))
  return parseFloat(area.toFixed(2))
}
@@ -77,7 +111,7 @@
  productList.forEach(item => {
    perimeter += item.perimeter
  })
  return parseFloat(perimeter.toFixed(3))
  return parseFloat(perimeter.toFixed(2))
}
const printSheet = () => {
@@ -93,86 +127,139 @@
<template>
  <div id="sheet">
    <table border="1" >
  <div id="sheet" @dblclick="handleDoubleClick" >
    <table style="border-style: none;" >
      <thead>
      <tr class="title-s">
        <th colspan="13">
        <th colspan="9">
          <h1>
            {{company.companyName}}
            {{ company.companyName }}
          </h1>
        </th>
      </tr>
      <tr  class="title-s">
        <th colspan="2"></th>
        <th colspan="5">
          <h3>生成任务单(成品)</h3>
      <tr class="title-s">
        <th colspan="2" style="width: 30%"></th>
        <th colspan="5" style="width: 40%;">
          <h3 >生成任务单(成品)</h3>
        </th>
        <th colspan="2" style="text-align: left;font-weight: bold;">订单编号:<span>{{data.order.orderId}}</span></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;" colspan="4">客户名称:<span>{{data.order.customerName}}</span></th>
        <th style="text-align: left;border:none;font-weight: bold;" colspan="3">项目名称:<span>{{data.order.project}}</span></th>
        <th style="text-align: left;border:none;font-weight: bold;" colspan="2">发货日期:<span>{{data.order.deliveryDate}}</span></th>
        <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;" colspan="7">送货地址:<span>{{data.order.project}}</span></th>
        <th style="text-align: left;border:none;font-weight: bold;" colspan="2">联系电话:<span>{{data.order.project}}</span></th>
        <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>{{ data.order.contactNumber }}</span></th>
      </tr>
      <tr>
        <th style="width: 6%;font-weight: bold;">序</th>
        <th style="width: 20%;font-weight: bold;">楼层编号</th>
        <th style="width: 20%;font-weight: bold;" colspan="2">宽(弧度)*高</th>
        <th style="width: 10%;font-weight: bold;">数量</th>
        <th style="width: 10%;font-weight: bold;">面积</th>
        <th style="width: 12%;font-weight: bold;" colspan="2">加工要求</th>
      </tr>
      <template v-for="(item, index) in data.orderProductDetail" :key="index" >
        <tr>
          <td style="font-size: 15px;font-weight: bold;text-align: left" colspan="8">产品名称:<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="2" style="font-size: 15px;font-weight: bold;">{{items.width}}x{{items.height}}</td>
          <td>{{items.quantity}}</td>
          <td>{{items.grossArea}}</td>
          <td colspan="2">{{items.processingNote}}</td>
        </tr>
        <tr class="day-in" >
          <td style="font-size: 15px;font-weight: bold;" colspan="3">小计:</td>
          <td>{{getQuantity(item.productDetail)}}</td>
          <td>{{getArea(item.productDetail)}}</td>
          <td></td>
        </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>
      </template>
      <tr class="day-in">
        <td style="font-size: 15px;font-weight: bold;" colspan="3">合计:</td>
        <td>{{grossNum.quantity}}</td>
        <td>{{grossNum.grossArea}}</td>
        <td></td>
      </tr>
      <tr class="day-in">
        <td style="text-align: left;border-width: 0 1px 0 0; border-style: solid; border-color: #d3dce6" colspan="6">
          <template v-for="(item,index) in data.order.processingNote.split('\n')">
            {{item}}
            <br>
          </template>
              </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>{{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-row :gutter="20">
      <el-col :span="4"><div class="bottom">制单员:{{data.order.creator}}<span style="font-size: 10px"></span></div></el-col>
      <el-col :span="4"><div class="bottom">制单日期:{{data.order.createTime}}<span style="font-size: 10px"></span></div></el-col>
      <el-col :span="4"><div class="bottom">审核员:{{data.order.verifier}}</div></el-col>
      <el-col :span="3"><div class="bottom">审核日期:{{data.order.updateTime}}</div></el-col>
      <el-col :span="4"><div class="bottom">打印人:{{username}}</div></el-col>
    </el-row>
    </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>
@@ -222,6 +309,26 @@
  background-color: black;
  color: black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td > table {
  margin: 0;
  padding: 0;
}
.day-in{
  height: 30px;
}
@media print {
  @page {
    margin: 5mm 5mm 10mm 5mm;
  }
}
</style>