样式修改

廖井涛

2025-12-01 a38b5c6eb3660a8cf614b4d6fa6516445a785270

 north-glass-erp/northglass-erp/src/components/sd/order/PrintSheet2.vue

@@ -1,6 +1,9 @@
<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"
const company = companyInfo()

let props = defineProps({
  orderId:null
@@ -19,11 +22,11 @@
const getData = () => {
  request.get(`/order/printOrderProductGlassDetail/${props.orderId}`).then(res => {
    data.value= res.data
    console.log(data.value)
    res.data.orderDetail.forEach(item => {
    data.value.orderDetail.forEach(item => {
        grossNum.value.quantity += getQuantity(item.productDetail)
        grossNum.value.grossArea += getArea(item.productDetail)
        grossNum.value.perimeter += getPerimeter(item.productDetail)
        stringToJson(item.productDetail)
    })


@@ -37,6 +40,11 @@
onMounted(() => {
  getData()
})
const  stringToJson = (productList) => {
  productList.forEach(item => {
    item.otherColumns = JSON.parse(item.otherColumns)
  })
}

const getQuantity = (productList) => {
  let quantity = 0
@@ -64,194 +72,186 @@
  return parseFloat(perimeter.toFixed(3))
}

const Url = ''
const changeBold = (e) =>{
  if(e.currentTarget.className !=='bold'){
    e.currentTarget.className ='bold'
  }else{
    e.currentTarget.className =''
  }

}

</script>


<template>
  <div id="sheet">
    <table >
      <tr class="title-s">
        <th colspan="17">
          <img src="../../../assets/northGlass.ico" alt="" style="float: left;max-width: 60px;max-height: 60px">
          <h1>
            {{company.companyName}}
          </h1>
        </th>
      </tr>

    <el-row style="margin-bottom: 0.5rem;">
      <img src="../../../assets/northGlass.ico" alt="" style="max-width: 60px;max-height: 60px">
      <h1>天津北玻玻璃工业技术有限公司（THBB-QR7.1-01）</h1>
    </el-row >
    <el-row style="text-align: left">
      <el-col :span="2" ></el-col>
      <el-col :span="8" >地址:天津宝坻区节能环保工业区天兴路西侧宝中道南侧</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="5" >电话:022-59280088</el-col>
      <el-col :span="5" >传真:022-59280066</el-col>
    </el-row>
    <hr>
    <hr class="hr-border">
      <tr class="title-s">
        <th colspan="7">地址:{{company.address}}</th>
        <th colspan="5">电话:{{ company.telephone }}</th>
        <th colspan="5">传真:{{ company.fax }}</th>
      </tr>
      <tr class="title-s" style="height:  30px">
        <th colspan="17" >
          <hr class=".hr-border"/>
          <hr class=".hr-border"/>
        </th>
      </tr>

    <el-row >
      <h3>玻璃加工单</h3>
    </el-row>

    <table>
      <tr class="title-s" >
        <th colspan="17">
          <h3>玻璃加工单({{data.order.orderType}})</h3>
        </th>
      </tr>
      <tr>
        <th class="title-1">客户名称</th>
        <th colspan="3"></th>
        <th colspan="7">{{data.order.customerName}}</th>
        <th class="title-1">工程名称</th>
        <th colspan="3"></th>
        <th colspan="8">{{data.order.project}}</th>
      </tr>
      <tr>
        <th class="title-1">生产单号</th>
        <th></th>
        <th colspan="3"> <el-text>{{data.order.orderId}}<el-text style="font-size: 12px;font-weight: bolder">（对应单号{{data.order.batch}})</el-text></el-text></th>
        <th class="title-1">下单日期</th>
        <th></th>
        <th colspan="3">{{data.order.createTime}}</th>
        <th class="title-1">订单类型</th>
        <th></th>
        <th colspan="4">{{data.order.orderType}}</th>
        <th class="title-1">跟单员</th>
        <th></th>
        <th colspan="3">{{data.order.salesman}}</th>
      </tr>
      <tr>
        <th>磨边</th>
        <th></th>
        <th colspan="3">{{data.order.otherRemarks}}</th>
        <th>完工日期</th>
        <th></th>
        <th colspan="3">{{data.order.deliveryDate}}</th>
        <th>商标</th>
        <th></th>
        <th colspan="4">{{data.order.icon}}</th>
        <th>包装</th>
        <th></th>
        <th colspan="3">{{data.order.packType}}</th>
      </tr>

    </table>
    <table  >
      <thead>
      <tr>
        <th >序号</th>
        <th >图号</th>
        <th>彩釉图号</th>
        <th>编号</th>
        <th>规格（宽W*高H）</th>
        <th>片数</th>
        <th>面积</th>
        <th>延米</th>
        <th>交货日期</th>
        <th>序号</th>
        <th>箱架号</th>
        <th>备注1</th>
        <th>备注2</th>
        <th>磨边/备注/加工内容</th>
      </tr>
      </thead>
        <tr>
          <th >序号</th>
          <th >{{company.columnName}}</th>
          <th>彩釉图号</th>
          <th>编号</th>
          <th>规格（宽W*高H）</th>
          <th>片数</th>
          <th>面积</th>
          <th>延米</th>
          <th>半径</th>
          <th>楼号</th>
          <th>加工要求</th>
          <th colspan="2">备注</th>
          <th>备注1</th>
          <th>备注2</th>
          <th>备注3</th>
          <th>备注4</th>
        </tr>
      <tbody v-for="(item,index) in data.orderDetail" :key="index">
      <tr>
        <td colspan="2" class="no-change-row">产品名称</td>
        <td colspan="8">{{item.productName}}</td>
        <td colspan="10" style="text-align: left">{{item.productName}}</td>
        <td class="no-change-row">产品描述</td>
        <td colspan="3"></td>
        <td colspan="4"></td>
      </tr>
      <template v-for="(item1,index1) in item.productDetail" :key="index1">
        <tr  >
          <td>{{item1.orderNumber}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td class="notChangeRow">{{  item1.otherColumns?.S02}}</td>
          <td>{{  item1.otherColumns?.S03}}</td>
          <td class="notChangeRow">{{  item1.otherColumns?.S01}}</td>
          <td>{{item1.width}}*{{item1.height}}</td>
          <td>{{item1.quantity}}</td>
          <td>{{item1.grossArea}}</td>
          <td>{{item1.perimeter}}</td>
          <td>{{item1.bendRadius}}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>{{item1.buildingNumber}}</td>
          <td>{{item1.processingNote}}</td>
          <td colspan="2">{{item1.remarks}}</td>
          <td>{{((item1.otherColumns?.S04)?item1.otherColumns.S04:'')}}</td>
          <td>{{((item1.otherColumns?.S05)?item1.otherColumns.S05:'')}}</td>
          <td>{{((item1.otherColumns?.S06)?item1.otherColumns.S06:'')}}</td>
          <td>{{((item1.otherColumns?.S07)?item1.otherColumns.S07:'')}}</td>
<!--          {{-->
<!--            ((item1.otherColumns?.S04)?item1.otherColumns.S04:'')+'/'+-->
<!--            ((item1.otherColumns?.S05)?item1.otherColumns.S05:'')+'/'+-->
<!--            ((item1.otherColumns?.S06)?item1.otherColumns.S06:'')+'/'+-->
<!--            ((item1.otherColumns?.S07)?item1.otherColumns.S07:'')-->
<!--          }}-->
        </tr>

        <tr>
        <tr v-if="item1.differentSize || item1.bendRadius">
          <td></td>
          <td>标记</td>
          <td colspan="4">半成品名称</td>
          <td>下料-宽</td>
          <td>弧长</td>
          <td>下料-高</td>
          <td>拱高</td>
          <td>内拱高</td>

          <td colspan="4"></td>
          <td colspan="7"></td>
        </tr>
          <tr  v-for="(item2,index2) in item1.orderGlassDetails" :key="index2" >
        <tr v-if="item1.differentSize || item1.bendRadius" v-for="(item2,index2) in item1.orderGlassDetails" :key="index2" >

            <td></td>
            <td>{{ item2.technologyNumber }}</td>
            <td style="border: 0"></td>
            <td>#{{ item2.technologyNumber }}</td>
            <td colspan="4"> {{item2.glassChild}}</td>
            <td>{{item2.childWidth}}</td>
            <td>{{item1.bendRadius}}</td>
            <td>{{item2.arc}}</td>
            <td>{{item2.childHeight}}</td>
            <td>{{item2.archRise}}</td>
            <td colspan="4"></td>
            <td>{{item2.archRise?item2.archRise:item1.archRise}}</td>
            <td colspan="7"></td>

          </tr>
      </template>














      <tr>
        <td colspan="5">小计</td>
        <td>{{getQuantity(item.productDetail)}}</td>
        <td>{{getArea(item.productDetail)}}</td>
        <td>{{getPerimeter(item.productDetail)}}</td>
        <td colspan="6"></td>
        <td colspan="9"></td>
      </tr>


      </tbody>
      <tfoot>
      <tr>
        <td colspan="5">总计</td>
        <td>{{grossNum.quantity}}</td>
        <td>{{grossNum.grossArea}}</td>
        <td>{{grossNum.perimeter}}</td>
        <td colspan=""></td>
        <td colspan="9"></td>
      </tr>
      <tr>
        <td colspan="14">
          <!--            v-model=""-->
          <el-input
              v-model="data.order.processingNote"
              :rows="2"
              type="textarea"
              placeholder=""
              readonly
              autosize
              resize="none"

          />
        <td colspan="17" style="white-space: pre-wrap;text-align:left ">
          <template v-for="(item,index) in data.order.processingNote.split('\n')">
            <el-text @click="changeBold($event)" v-for="val in item.split('')">{{val}}</el-text>
            <br>
          </template>
        </td>
      </tr>
      </tfoot>
    </table>
    <el-row style="text-align: left ">
      <el-col :span="4">下单员：</el-col>
      <el-col :span="4">审核人：</el-col>
      <el-col :span="4">校对：</el-col>
    </el-row>
    <el-row style="text-align: left ">
      <el-col :span="4">创建时间：</el-col>
      <el-col :span="4">审核时间：</el-col>
      <el-col :span="4">打印时间：</el-col>
    </el-row>
    <print-foot :order='data.order' />
  </div>
</template>

<style scoped>
*{
  font-weight: bold;
}
#sheet{
  width: 100%;
  width: 98%;
  height: 100%;
  text-align: center;
}
@@ -274,10 +274,11 @@

table{
  border-collapse: collapse;
  border: 1px solid black;
  //border: 1px solid black;
  width: 100%;
  text-align: center;
}
table, th, td {
tr, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
@@ -295,5 +296,20 @@
  background-color: black;
  color: black;
}
.title-s,.title-s th{
  border:0
}

.notChangeRow{
  white-space: nowrap;
}
@media print {
  @page {
    margin: 5mm; /* 设置打印页面的边距 */
  }
}
.bold {
  font-weight: bold;
  font-size: 16px;
}
</style>