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

廖井涛

8 天以前 a660db06773007b1be690e0674829c00a57aeb7b

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

@@ -10,6 +10,7 @@
import QRCode from "qrcode";
import companyInfo from "@/stores/sd/companyInfo";
import userInfo from "@/stores/userInfo"
import {add,addAuto} from '@/utils/decimal';
//语言获取
const company = companyInfo()
const {t} = useI18n()
@@ -22,38 +23,206 @@
const name1=ref("admin")
const name2=ref("admin")

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



const data = ref({
  printList: []
})

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

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



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

onMounted(() => {
      selectPrint()
  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:"LUOYANG NORTH GLASS TECHNOLOGY CO.,LTD.",
  address:'洛阳国家高新技术开发区张庄',
  phone:'0379-64312861.64331830',
  url:'http://www.northglass.com',
  fax:'0379-64332066',
  email:"luoyang@northglass.com",
  postcode:'471003'

},
  {
    company:'上海北玻玻璃技术工业有限公司',
    companyInfo:"SHANGHAI NORTH GLASS TECHNOLOGY&INDUSTRY CO.,LTD.",
    address:'上海市松江区小昆山镇光华路328号',
    phone:'(021)57858640',
    url:'http://www.northglass.com',
    fax:'(021)57858600',
    email:"sngpzb@163.com",
    postcode:'201614'

  }
])
let companyAddress = ref(companyList.value[0])
watch(props, (newVal, oldVal) => {
  companyAddress.value = companyList.value[props.companyVal-1]
})


onUpdated(() => {
  const element = document.getElementById('my-paragraph');
  if (element) {
    console.log(element.style.height)
    //console.log(element.style.height)
  }
});

const selectPrint = () => {
  request.post(`/finishedGoodsInventory/getSelectPrints`, data.value).then((res) => {
const orderDetailList = ref([])
const customer = ref({})
const selectPrint =async () => {
  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) {
      console.log(res.data.data)
      produceList.value = deepClone(res.data.data)
      customer.value = produceList.value[0].detail[0]
      let height = 0
      let index = 0
      for(let i=0;i<produceList.value.length;i++){
        //换产品就换页
        if(i>0){
          index+=1
        }
        orderDetailList.value[index]=[]
        orderDetailList.value[index].push({
          type:'customer',
          customer:produceList.value[i].detail[0]
        })
        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:'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,
          area:0,
          weight:0
        }
        page.forEach((row)=>{
          if(row.type==='size'){
            sum.quantity +=row.size.quantity
            sum.area =addAuto(row.size.area,sum.area,2)
            sum.weight =addAuto(row.size.weight,sum.weight,2)
          }
        })
        page.push({
          type:'sum',
          sum:sum
        })

      })
    } else {
      ElMessage.warning(res.msg)
      router.push("/login")
@@ -64,123 +233,139 @@
</script>

<template>
  <div>
  <div >
    <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="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>

    <template v-for="(item,id) in produceList"  :key="id">
      <template v-for="(items,id) in count"  :key="id">
        <div  style="width: 46%;" >
          <div  style="height: 100%;width: 100%;">
            <table>
              <thead>
              <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: 18px;font-weight: bold;line-height: 15px;">洛阳北方玻璃技术股份有限公司<br>
                    <span style="font-size: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;LUOYANGNORTHGLASSTECHNOLOGYCO.,LTD.</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="5" style="text-align: center;">
                  <div>(装箱单)</div>
                </td>
              </tr>
              <tr style="width: 100%;" v-for="(itemFlow,index) in item.detail" :key="index">
                <td colspan="5">
                  <div style="display:flex;">
                    <div style="width: 100%"><span style="font-weight: bold;">客户名称</span>：<input class="contactNumber" style="width: 60%;" type="text" v-model="itemFlow.customer_name" /></div>
                  </div>
                  <div style="display:flex;">
                    <div style="width: 100%"><span style="font-weight: bold">工程名称</span>：{{itemFlow.project}}</div>
                  </div>
                  <div style="display:flex;">
                    <div style="width: 50%"><span style="font-weight: bold">订单号</span>：{{itemFlow.order_id}}</div>
                    <div style="width: 50%"><span style="font-weight: bold">装箱单号</span>：{{itemFlow.remarks}}</div>
                  </div>
                  <div style="display:flex;">
                    <div style="width: 50%"><span style="font-weight: bold">包装日期</span>：{{itemFlow.reporting_work_time}}</div>
                    <div style="width: 50%"><span style="font-weight: bold">本架数量</span>：{{itemFlow.quantity}}</div>
                  </div>
                  <div style="display:flex;">
                    <div style="width: 50%"><span style="font-weight: bold">加工班组</span>：{{itemFlow.teams_groups_name2}}</div>
                    <div style="width: 50%"><span style="font-weight: bold">包装班组</span>：{{itemFlow.teams_groups_name}}</div>
                  </div>
                  <div style="display:flex;">
                    <div style="width: 50%"><span style="font-weight: bold">质量检验</span>：<input class="contactNumber" type="text" v-model="name1" /></div>
                    <div style="width: 50%"><span style="font-weight: bold">成品发货</span>：<input class="contactNumber" type="text" v-model="name2" /></div>
                  </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>
                </div>
              </div>

            </td>

          </tr>
          <tr>
            <td colspan="5" style="text-align: center;font-size: 10px">
              <div>(装箱单)</div>
            </td>
          </tr>
          <tr style="width: 100%;font-size: 9px"  >
            <td colspan="5">
              <div style="display:flex;">
                <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%;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%;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%;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%;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%;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>


                </td>
              </tr>
              <tr style="width: 100%;">
                <td style="width: 20%;">编号</td>
                <td style="width: 20%;">宽度</td>
                <td style="width: 20%;">高度</td>
                <td style="width: 20%;">片数</td>
                <td style="width: 20%;">面积(m²)</td>
              </tr>
              <tr style="width: 100%;">
                <td colspan="5" ><hr></td>
              </tr>
              </thead>

              <tbody>
              <template v-for="(itemDatile,index) in item.detailList" :key="index">
                <tr style="width: 100%;">
                  <td colspan="1" style="font-weight: bold">加工品种:</td>
                  <td colspan="4"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"  v-model="itemDatile.product_name"/></td>
                </tr>
                <template v-for="(item,index) in itemDatile.detailList" :key="index">
                  <tr style="width: 100%;margin-top: 20px">
                    <td style="font-size: 10px">{{ item.building_number }}</td>
                    <td style="font-weight: bold">{{ item.width }}</td>
                    <td style="font-weight: bold">{{ item.height }}</td>
                    <td style="font-weight: bold">{{ item.quantity }}</td>
                    <td>{{ item.area }}</td>
                  </tr>
                </template>
              </template>

              <!--        <tr style="width: 100%;" v-for="(itemFlows,index) in item.detail" :key="index">
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td>{{itemFlows.quantity}}</td>
                        <td>{{itemFlows.area}}</td>
                      </tr>-->
              </tbody>
              <tfoot >

              <tr style="border: 0;font-size: 10px">
                <td colspan="5" style="border: 0;">
                  <div style="display:flex;">
                    <div>地址:洛阳国家高新技术开发区张庄</div>&nbsp;&nbsp;&nbsp;&nbsp;
                    <div>电话:0379-64312861.64331830</div>
                  </div>
                  <div style="display:flex;">
                    <div>http://www.northglass.com</div>&nbsp;&nbsp;&nbsp;&nbsp;
                    <div>传真:0379-64332066</div>
                  </div>
                  <div style="display:flex;">
                    <div>E-mail:luoyang@northglass.com</div>&nbsp;&nbsp;&nbsp;&nbsp;
                    <div>邮编：471003</div>
                  </div>

                </td>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <div class="element-to-break-after" v-if="items.id===1" ></div>
        <div class="element-to-breakr" v-if="items.id===2" ></div>
      </template>
            </td>
          </tr>
          <tr style="width: 100%;font-size: 12px">
            <td style="width: 20%;">编号</td>
            <td style="width: 20%;">宽度</td>
            <td style="width: 20%;">高度</td>
            <td style="width: 20%;">片数</td>
            <td style="width: 20%;">面积(m²)</td>
          </tr>
          <tr style="width: 100%;">
            <td colspan="5" ><hr></td>
          </tr>
          </thead>
          <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: 11px">加工品种:</td>
              <td colspan="4">
                <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>
              <td style="font-weight: bold">{{ row.size.width }}</td>
              <td style="font-weight: bold">{{ row.size.height }}</td>
              <td style="font-weight: bold">{{ row.size.quantity }}</td>
              <td>{{ row.size.area }}</td>
            </tr>


    </template>

          </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>{{row.sum.quantity}}</div>&nbsp;&nbsp;&nbsp;
                  <div>面积</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>{{row.sum.area}}(m²)</div>&nbsp;&nbsp;&nbsp;
                  <div>重量</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div>{{row.sum.weight}}(kg)</div>
                </div>
              </td>
            </tr>
          </template>
        </table>
      </div>
    </div>

  </div>

</template>
@@ -190,7 +375,20 @@
  margin: 0;
  padding: 0;
}

.contactNumber{
  width: 40%;
  height:20px;
  border: none;
  box-shadow: none;
  font-size: 15px;
}
.div_1{
  width: 38%;
}
.div_2{
  width: 40%;
  margin-left: 15%;
}
.element-to-break-after {
  width: 8%;
}
@@ -208,47 +406,24 @@
  display: flex;
  flex-wrap: wrap
}

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

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

  }

  thead{
    display: table-header-group;
  }
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
  }


  tfoot {
    display: table-footer-group;
    /* position: fixed;
     width: 50%;
     bottom: 0;
     height: 100px;*/
  }


.textarea{
  --el-border-color: rgba(255,255,255,0.0);
  --el-input-focus-border-color: rgba(255,255,255,0.0);
  --el-input-focus-border-width: 0px;
  --el-input-hover-border-color: rgba(255,255,255,0.0);
  --el-input-hover-border-width: 0px;
}

.contactNumber{
  width: 40%;
  height:20px;
  border: none;
  box-shadow: none;
  font-size: 15px;
}



</style>