订单首页流程卡新增楼层编号显示

廖井涛

7 天以前 a660db06773007b1be690e0674829c00a57aeb7b

 north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue

@@ -23,6 +23,9 @@
const name1=ref("admin")
const name2=ref("admin")

const printStyle = ref(null);
const title = ref({})



const data = ref({
@@ -31,22 +34,86 @@

let props = defineProps({
  printList: null,
  companyVal: null
  companyVal: null,
  printPage: null
})

const {currentRoute} = useRouter()
const route = currentRoute.value



data.value.printList = JSON.parse(props.printList)

onMounted(() => {
  clearPrintStyles()
  addPrintStyles()
  selectPrint()
})
onUnmounted(() => {
  clearPrintStyles()
})

const clearPrintStyles = () => {
  // 2. 清除所有样式表中包含@media print的规则（适用于全局样式）
  Array.from(document.styleSheets).forEach(styleSheet => {
    try {
      // 遍历样式规则
      const rules = styleSheet.cssRules || styleSheet.rules;
      if (!rules) return;

      // 从后往前删除，避免索引错乱
      for (let i = rules.length - 1; i >= 0; i--) {
        const rule = rules[i];
        // 检查是否为打印媒体查询规则
        if (rule.media && rule.media.mediaText.includes('print')) {
          styleSheet.deleteRule(i);
        }
      }
    } catch (e) {
      // 跨域样式表可能无法访问，忽略错误
      console.log('无法清理跨域样式表:', e);
    }
  });


};


const addPrintStyles = () => {
  printStyle.value = document.createElement('style');
  printStyle.value.id = 'dynamic-print-style';
  printStyle.value.textContent = `
    @media print {
  @page {
    margin: 7.5mm 8mm 3.5mm 8mm ;

  }

  .pages{
    height: 94vh;
  }
  #footsum{
    position: absolute;
    bottom: 0cm;
    width: 100%; /* 或者设置成具体的宽度 */
  }
  #sticky-footer {
    position: fixed;
    bottom: 0.5cm;
    width: 100%; /* 或者设置成具体的宽度 */
  }

}
  `;
  document.head.appendChild(printStyle.value);

};


const companyList = ref([{
  company:'洛阳北方玻璃技术股份有限公司',
  companyInfo:"LUOYANGNORTHGLASSTECHNOLOGYCO.,LTD.",
  companyInfo:"LUOYANG NORTH GLASS TECHNOLOGY CO.,LTD.",
  address:'洛阳国家高新技术开发区张庄',
  phone:'0379-64312861.64331830',
  url:'http://www.northglass.com',
@@ -82,43 +149,61 @@
const orderDetailList = ref([])
const customer = ref({})
const selectPrint =async () => {
  request.post(`/finishedGoodsInventory/getSelectPrints`, data.value).then((res) => {
  const page1 = props.printPage==='storageRecordPint'?`/finishedGoodsInventory/getSelectPrints`:'/finishedGoodsInventory/getInventoryPrints'
  const value = props.printPage==='storageRecordPint'?data.value:data.value.printList
  request.post(page1, value).then((res) => {
    if (res.code == 200) {
      produceList.value = deepClone(res.data.data)
      customer.value = produceList.value[0].detail[0]
      let height = 0
      let index = 0

      produceList.value[0].detailList.forEach(order => {
        if(orderDetailList.value[index]===undefined){
          orderDetailList.value[index]=[]
        }
        height+=50
        //判断高度是否超过350，则换页
        if(height>=500){
          height=0
      for(let i=0;i<produceList.value.length;i++){
        //换产品就换页
        if(i>0){
          index+=1
          orderDetailList.value[index]=[]
        }
        orderDetailList.value[index]=[]
        orderDetailList.value[index].push({
          type:'product',
          productName:order.product_name
          type:'customer',
          customer:produceList.value[i].detail[0]
        })


        order.detailList.forEach(item => {
          height+=30
        produceList.value[i].detailList.forEach(order => {
          height+=50
          //判断高度是否超过350，则换页
          if(height>=500){
            height=0
            index+=1
            orderDetailList.value[index]=[]

            orderDetailList.value[index].push({
              type:'customer',
              customer:produceList.value[i].detail[0]
            })
          }
          orderDetailList.value[index].push({
            type:'size',
            size:item
            type:'product',
            productName:order.product_name
          })


          order.detailList.forEach(item => {
            height+=30
            if(height>=500){
              height=0
              index+=1
              orderDetailList.value[index]=[]
              orderDetailList.value[index].push({
                type:'customer',
                customer:produceList.value[i].detail[0]
              })
            }
            orderDetailList.value[index].push({
              type:'size',
              size:item
            })
          })
        })
      })
      }
      orderDetailList.value.forEach((page,index)=>{
        let sum = {
          quantity:0,
@@ -136,8 +221,8 @@
          type:'sum',
          sum:sum
        })
      })

      })
    } else {
      ElMessage.warning(res.msg)
      router.push("/login")
@@ -149,57 +234,63 @@

<template>
  <div >
    <div :class="'div_'+n " style="width: 46%;position: relative;" v-for="n in 2" >
        <table v-for="page in orderDetailList" :key="page" style="width: 100%">
          <thead>
    <div :class="'div_'+n "  v-for="n in 2" >
      <div class="pages" v-for="page in orderDetailList" :key="page" style="width: 100%;position: relative;" >
        <table >
          <thead style="width: 100%">
          <tr>
            <td colspan="1" style="text-align: center;font-weight: bolder;">
              <div style="width: 60px;height: 60px">
                <img id="img-pic" style="width:100%;height: 100%" src="@/assets/northGlass.ico" alt="">
              </div>
            </td>
            <td colspan="4" style="font-weight: bolder">
              <div style="font-size: 15px;font-weight: bold;line-height: 15px;">
                <p
                    style="font-size: 15px;
            <td colspan="5" >
              <div style="text-align: center;font-weight: bolder;display: flex">
                <div style="width: 35px;height: 35px">
                  <img id="img-pic" style="width:100%;height: 100%" src="@/assets/northGlass.ico" alt="">
                </div>

                <div style="font-size: 15px;font-weight: bold;line-height: 15px;width: 300px">
                  <p
                      style="font-size: 15px;
                             font-weight: bold;
                             line-height: 15px;"
                >{{companyAddress.company}}</p>
                <span style="font-size: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;{{companyAddress.companyInfo}}</span>
                  >{{companyAddress.company}}</p>
                  <span style="font-size: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;{{companyAddress.companyInfo}}</span>
                </div>
              </div>

            </td>

          </tr>
          <tr>
            <td colspan="5" style="text-align: center;">
            <td colspan="5" style="text-align: center;font-size: 10px">
              <div>(装箱单)</div>
            </td>
          </tr>
          <tr style="width: 100%;font-size: 12px"  >
          <tr style="width: 100%;font-size: 9px"  >
            <td colspan="5">
              <div style="display:flex;">
                <div style="width: 100%"><span style="font-weight: bold;">客户名称</span>：
                  <input class="contactNumber" style="width: 60%;font-size: 12px" type="text"
                         v-model="customer.customer_name" />
                <div style="width: 100%"><span style="font-weight: bold;font-size: 10px">客户名称</span>：
                  <input class="contactNumber" style="width: 80%;font-size: 10px" type="text"
                         v-model="page[0].customer.customer_name" />
                </div>
              </div>
              <div style="display:flex;">
                <div style="width: 100%"><span style="font-weight: bold">工程名称</span>：{{customer.project}}</div>
                <div style="width: 100%;font-size: 10px;display:flex;">
                  <span style="font-weight: bold">工程名称</span>：<div style="width: 75%;">{{page[0].customer.project}}({{page[0].customer.batch}})</div>
                </div>
              </div>
              <div style="display:flex;">
                <div style="width: 50%"><span style="font-weight: bold">订单号</span>：{{customer.order_id}}</div>
                <div style="width: 50%"><span style="font-weight: bold">装箱单号</span>：{{customer.remarks}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">订单号</span>：{{page[0].customer.order_id}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">装箱单号</span>：{{page[0].customer.remarks}}</div>
              </div>
              <div style="display:flex;">
                <div style="width: 50%"><span style="font-weight: bold">包装日期</span>：{{customer.reporting_work_time}}</div>
                <div style="width: 50%"><span style="font-weight: bold">本架数量</span>：{{customer.quantity}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">包装日期</span>：{{page[0].customer.reporting_work_time}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">本架数量</span>：{{page[0].customer.quantity}}</div>
              </div>
              <div style="display:flex;">
                <div style="width: 50%"><span style="font-weight: bold">加工班组</span>：{{customer.teams_groups_name}}</div>
                <div style="width: 50%"><span style="font-weight: bold">包装班组</span>：{{customer.teams_groups_name2}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold;font-size: 10px">加工班组</span>：{{page[0].customer.teams_groups_name2}}</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold;font-size: 10px">包装班组</span>：{{page[0].customer.teams_groups_name}}</div>
              </div>
              <div style="display:flex;">
                <div style="width: 50%"><span style="font-weight: bold">质量检验</span>：刘化菊</div>
                <div style="width: 50%"><span style="font-weight: bold">成品发货</span>：</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">质量检验</span>：刘化菊</div>
                <div style="width: 50%;font-size: 10px"><span style="font-weight: bold">成品发货</span>：郑珊珊</div>
              </div>


@@ -219,9 +310,9 @@
          <tbody>
          <template v-for="(row,index) in page" :key="row">
            <tr v-if="row.type==='product'" style="width: 100%;height: 100px" >
              <td colspan="1" style="font-weight: bold;font-size: 13px">加工品种:</td>
              <td colspan="1" style="font-weight: bold;font-size: 11px">加工品种:</td>
              <td colspan="4">
                <textarea style="resize: none;width: 100%;height: 100px;border: 0" class="textarea" type="textarea" v-model="row.productName" /></td>
                <textarea style="resize: none;width: 90%;height: 100px;border: 0;word-break:break-all;" class="textarea" type="textarea" v-model="row.productName" /></td>
            </tr>
            <tr v-else-if="row.type==='size'" style="width: 100%;height: 30px">
              <td style="font-size: 10px">{{ row.size.building_number }}</td>
@@ -231,10 +322,37 @@
              <td>{{ row.size.area }}</td>
            </tr>

            <tr id="footsum" v-else style="border: 0;font-size: 10px">


          </template>
          </tbody>
          <tfoot id="sticky-footer">
          <tr style="border: 0;font-size: 8px">
            <td colspan="5" style="border: 0;">
              <div style="display:flex;">
                <div>地址:{{companyAddress.address}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                <div>电话:{{companyAddress.phone}}</div>
              </div>
              <div style="display:flex;">
                <div>{{companyAddress.url}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                <div>传真:{{companyAddress.fax}}</div>
              </div>
              <div style="display:flex;">
                <div>E-mail:{{companyAddress.email}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                <div>邮编：{{companyAddress.postcode}}</div>
              </div>

            </td>
          </tr>
          </tfoot>
        </table>

        <table  id="footsum">
          <template v-for="(row,index) in page" :key="index">
            <tr  v-if="row.type==='sum'" style="border: 0;font-size: 10px">
              <td colspan="5" style="border: 0;">
                <div style="display:flex;">
                  <div>本架数量</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>本页数量</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>{{row.sum.quantity}}</div>&nbsp;&nbsp;&nbsp;
                  <div>面积</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>{{row.sum.area}}(m²)</div>&nbsp;&nbsp;&nbsp;
@@ -243,30 +361,11 @@
                </div>
              </td>
            </tr>

          </template>
          </tbody>
          <tfoot id="sticky-footer">
            <tr style="border: 0;font-size: 8px">
              <td colspan="5" style="border: 0;">
                <div style="display:flex;">
                  <div>地址:{{companyAddress.address}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>电话:{{companyAddress.phone}}</div>
                </div>
                <div style="display:flex;">
                  <div>{{companyAddress.url}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>传真:{{companyAddress.fax}}</div>
                </div>
                <div style="display:flex;">
                  <div>E-mail:{{companyAddress.email}}</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>邮编：{{companyAddress.postcode}}</div>
                </div>

              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

  </div>

</template>
@@ -283,8 +382,12 @@
  box-shadow: none;
  font-size: 15px;
}
.div_1{
  width: 38%;
}
.div_2{
  margin-left: 6%;
  width: 40%;
  margin-left: 15%;
}
.element-to-break-after {
  width: 8%;
@@ -303,49 +406,18 @@
  display: flex;
  flex-wrap: wrap
}

table{
.pages{
  width: 100%;
  page-break-after: always;
}

@media print {
  @page {
    size: auto;  /* auto is the initial value */
    margin: 4mm 5mm 0mm 5mm  /* this affects the margin in the printer settings */

  }
  #footsum{
    position: fixed;
    bottom: 2cm;
    width: 100%; /* 或者设置成具体的宽度 */
  }
  #sticky-footer {
    position: fixed;
    bottom: 1cm;
    width: 100%; /* 或者设置成具体的宽度 */
  }
/*    thead{
    display: table-header-group;
    page-break-inside: avoid;
  }
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
  }


  tfoot {
    display: table-footer-group;
    page-break-inside: avoid;
  }*/

table{
  width: 100%;
}





.textarea{
  --el-border-color: rgba(255,255,255,0.0);
  --el-input-focus-border-color: rgba(255,255,255,0.0);