发货单打印新增一行两列

廖井涛

2025-11-06 3a88cf5e9b44669d35deecc2e689e7871a416dfa

发货单打印新增一行两列

 north-glass-erp/northglass-erp/src/components/sd/delivery/PrintSheet3.vue

New file
@@ -0,0 +1,453 @@
<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 {add,multiply,multiplyAuto,divideAuto} from '@/utils/decimal';


/*一行两列发货单打印*/

const company = companyInfo()
let produceList = ref([])
let otherMoney = []
let otherMoney1 = []
let delivery = ref([])
let money = ref("")
let otherMoneys = 0
let sumMoney = 0
let takeCare =ref("注意:请妥善保管好我司的玻璃架，如有丢失或损坏，按1500元只赔偿。谢谢配合!")
let remark =ref(company.deliveryRemark)



let props = defineProps({
  deliveryId:null
})
const form = ref({
})
let produceList2 = ref([])



const getData = () => {
  if(props.deliveryId===null  || props.deliveryId===undefined || props.deliveryId===''){
    return
  }
  form.value.deliveryId=props.deliveryId
  form.value.type=company.productName


  request.post(`/delivery/getSelectDeliveryPrinting`,form.value).then((res) => {
    if(res.code==200){
      produceList.value = deepClone(res.data)
      for(let i=0;i<produceList.value.length;i++){
        let produceList1= ({
          data:null,
          otherMoney:null,
          otherMoney1:null,
          delivery:null,
          money:null,
          otherMoneys:0,
          sumMoney:0
        })
        produceList1.data=produceList.value[i].data
        produceList1.delivery=produceList.value[i].delivery
        produceList1.money=produceList.value[i].money
        produceList1.otherMoney=produceList.value[i].otherMoney
        for(let j=0;j<produceList1.data.length;j++){
          produceList1.sumMoney+=produceList1.data[j].DeliveryDetail.money
        }
        otherMoney1=[]
        for(let i=0;i<produceList1.otherMoney.length;i++){
          if(produceList1.otherMoney[i].DeliveryDetailOtherMoney.monery!=null){
            produceList1.otherMoneys+=produceList1.otherMoney[i].DeliveryDetailOtherMoney.monery
            if(otherMoney1.length===0){
              otherMoney1.push(produceList1.otherMoney[i])
            }
            else{
              for(let s=0;s<otherMoney1.length;s++){
                if(produceList1.otherMoney[i].DeliveryDetailOtherMoney.alias===otherMoney1[s].DeliveryDetailOtherMoney.alias){

                  otherMoney1[s].DeliveryDetailOtherMoney.count=add(produceList1.otherMoney[i].DeliveryDetailOtherMoney.count,otherMoney1[s].DeliveryDetailOtherMoney.count)
                  otherMoney1[s].DeliveryDetailOtherMoney.monery =add(produceList1.otherMoney[i].DeliveryDetailOtherMoney.monery,otherMoney1[s].DeliveryDetailOtherMoney.monery)
                  break
                }
                if(s+1===otherMoney1.length){
                  otherMoney1.push(produceList1.otherMoney[i])
                  break
                }
              }

            }

          }

        }
        produceList1.otherMoney1=otherMoney1
        produceList2.value.push(produceList1)
      }
      for(let j=0;j<produceList2.value.length;j++){

        if(produceList2.value[j].delivery.money.toFixed(0)!==(produceList2.value[j].otherMoneys
            +produceList2.value[j].sumMoney+produceList2.value[j].delivery.freight).toFixed(0)){
          console.log(produceList2.value[j])
          console.log(produceList2.value[j].delivery.money)
          console.log((produceList2.value[j].otherMoneys
              +produceList2.value[j].sumMoney).toFixed(0))
          console.log(produceList2.value[j].delivery.deliveryId)
        }

      }

    }else{
      ElMessage.warning(res.msg)
      router.push("/login")
    }
  })
}

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(3))

}

const getArea = (productList) => {
  let area = 0
  productList.forEach(item => {
    area += item.grossArea
  })
  return parseFloat(area.toFixed(3))

}

const getPerimeter = (productList) => {
  let perimeter = 0
  productList.forEach(item => {
    perimeter += item.perimeter
  })
  return parseFloat(perimeter.toFixed(3))
}

const printSheet = () => {
}


const groupedData = computed(() => {
  // 分组函数：将数组按每2条拆分
  const groupArray = (arr, size) => {
    const result = [];
    for (let i = 0; i < arr.length; i += size) {
      result.push(arr.slice(i, i + size));
    }
    return result;
  };

  // 对每个item的DeliveryDetailList进行分组
  return produceList2.value.map(produce => {
    const groupedDetails = produce.data.map(item => ({
      ...item,
      // 对当前item的明细进行分组（每2条一组）
      groupedDeliveryDetails: groupArray(item.DeliveryDetailList, 2)
    }));
    return { ...produce, data: groupedDetails };
  });
});



defineExpose({
  printSheet
});
</script>

<template>
  <div id="sheet">
    <table class="pages" v-for="(itme1, index) in groupedData" :key="index" >
      <thead>
      <tr class="title-s">
        <th colspan="11">
          <h1>
            {{company.companyName}}
          </h1>
        </th>
      </tr>

      <tr  class="title-s">
        <th colspan="2" style="width: 20%"></th>
        <th colspan="7" style="width: 60%;">
          <h4 v-if="!company.showDeliveryCreator" >金华市乐动智能科技有限公司</h4>
          <h3>销售发货单</h3>
        </th>
        <th colspan="2" style="width: 20%;text-align: left;">发货单号：<span>{{itme1.delivery.deliveryId}}</span></th>
      </tr>
      <tr>
        <th style="text-align: left;border:none;" colspan="3">客户名称：<span>{{itme1.delivery.customerName}}</span></th>
        <th style="text-align: left;border:none;" colspan="6">项目名称：<span>{{itme1.delivery.project}}</span></th>
        <th style="text-align: left;border:none;" colspan="2">联系人：<span>{{itme1.delivery.contacts}}</span></th>
      </tr>
      <tr>
        <th style="text-align: left;border:none;" colspan="9">送货地址：<span>{{itme1.delivery.deliveryAddress}}</span></th>
        <th style="text-align: left;border:none;" colspan="2">联系电话：<span>{{itme1.delivery.contactNumber}}</span></th>
      </tr>


      </thead>
      <tr style="border-style: none">
        <td colspan="11" style="border-style: none">
          <table style="border-style: none;width: 100%;height: 100%;">
            <template v-for="(item, index) in itme1.data" :key="index" >
              <thead>
              <tr v-if="index===0">
                <th style="width: 14%;" colspan="1">宽X高</th>
                <th style="width: 8%;">数量</th>
                <th style="width: 9%;">面积</th>
                <th style="width: 9%;">单价</th>
                <th style="width: 9.5%;">金额</th>
                <th style="width: 1%;"></th>
                <th style="width: 14%;" colspan="1">宽X高</th>
                <th style="width: 8%;">数量</th>
                <th style="width: 9%;">面积</th>
                <th style="width: 9%;">单价</th>
                <th style="width: 9.5%;">金额</th>
              </tr>


              </thead>
              <tr>
                <td style="font-size: 15px;text-align: left" colspan="5">产品名称:<span>{{item.DeliveryDetail.orderDetail.productName}}</span></td>
                <td></td>
                <td v-if="company.showDeliveryCreator" style="font-size: 15px;text-align: left" colspan="2">订货日期:<span>{{item.DeliveryDetail.order.contractId}}</span></td>
                <td style="font-size: 15px;text-align: left" colspan="3">订单编号:<span>{{item.DeliveryDetail.orderDetail.orderId}}</span></td>
              </tr>

              <tr class="day-in" v-for="(group, groupIndex) in item.groupedDeliveryDetails" :key="groupIndex">
                <!-- 第一列数据（组内第一条） -->
                <td style="font-size: 15px;font-weight: bold;">
                  {{ group[0].parsedOtherColumns?.S02 ? `(${group[0].parsedOtherColumns.S02})` : '' }}
                  {{ group[0].width }}x{{ group[0].height }}
                </td>
                <td>{{ group[0].quantity }}</td>
                <td>{{ group[0].area }}</td>
                <td>{{ group[0].price }}</td>
                <td>{{ group[0].money }}</td>
                <td></td> <!-- 分隔列 -->

                <!-- 第二列数据（组内第二条，若存在） -->
                <td style="font-size: 15px;font-weight: bold;" v-if="group[1]">
                  {{ group[1].parsedOtherColumns?.S02 ? `(${group[1].parsedOtherColumns.S02})` : '' }}
                  {{ group[1].width }}x{{ group[1].height }}
                </td>
                <td v-if="group[1]">{{ group[1].quantity }}</td>
                <td v-if="group[1]">{{ group[1].area }}</td>
                <td v-if="group[1]">{{ group[1].price }}</td>
                <td v-if="group[1]">{{ group[1].money }}</td>

                <!-- 若组内只有一条数据，第二列留空 -->
                <td v-else colspan="5"></td>
              </tr>
              <tr class="day-in" >
                <td style="font-size: 15px;" colspan="7">小计:</td>
                <td>{{item.DeliveryDetail.quantity}}</td>
                <td>{{item.DeliveryDetail.area}}</td>
                <td></td>
                <td>{{item.DeliveryDetail.money}}</td>
              </tr>

            </template>
            <tr class="day-in">
              <td style="font-size: 15px;" colspan="7">合计:</td>
              <td>{{itme1.delivery.quantity}}</td>
              <td>{{itme1.delivery.area}}</td>
              <td></td>
              <td>{{parseFloat(itme1.sumMoney.toFixed(2))}}</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">
                <div style="display: flex;font-size: 10px;text-align: center;">
                  <span style="width: 25%;font-weight: bold;font-size: 12px">加工费用</span>&nbsp;
                  <span  style="width: 25%;font-weight: bold;font-size: 12px">单价</span>&nbsp;
                  <span  style="width: 25%;font-weight: bold;font-size: 12px">数量</span>&nbsp;
                  <span  style="width: 25%;font-weight: bold;font-size: 12px">金额</span>
                </div>
              </td>
              <td style="text-align: left;border:none;font-size: 15px;" colspan="5">总金额:&nbsp;&nbsp;&nbsp;&nbsp;{{itme1.delivery.money}}</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" >
                <div style="display: flex;font-size: 10px;text-align: center" v-for="(item, index2) in itme1.otherMoney1" :key="index2">
                  <span style="width: 25%">{{item.DeliveryDetailOtherMoney.alias}}</span>&nbsp;
                  <span  style="width: 25%">{{item.DeliveryDetailOtherMoney.price}}</span>&nbsp;
                  <span  style="width: 25%">{{item.DeliveryDetailOtherMoney.count}}</span>&nbsp;
                  <span  style="width: 25%">{{parseFloat(item.DeliveryDetailOtherMoney.monery).toFixed(2)}}</span>
                </div>
                <div style="display: flex;font-size: 10px;text-align: center" v-if="itme1.delivery.freight>0">
                  <span style="width: 25%">运费</span>&nbsp;
                  <span  style="width: 25%">{{itme1.delivery.freightPrice}}</span>&nbsp;
                  <span  style="width: 25%">{{itme1.delivery.freightQuantity}}</span>&nbsp;
                  <span  style="width: 25%">{{itme1.delivery.freight}}</span>
                </div>
              </td>
              <td style="text-align: left;border:none;font-size: 15px;" colspan="5">大写金额:&nbsp;&nbsp;&nbsp;&nbsp;{{itme1.money}}</td>
            </tr>


            <!--      <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;" v-if="company.showDeliveryCreator">
              <td colspan="11" style="border: 0">
                <div style="display:flex;text-align: left"  class="bottom">
                  <div style="width: 15%">制单员：{{ itme1.delivery.creator }}</div>
                  <div style="width: 25%">制单日期：{{ itme1.delivery.createTime }}</div>
                  <div style="width: 10%">发货员：</div>
                  <div style="width: 10%">司机：</div>
                  <div style="width: 15%">客户签字：</div>
                  <div style="width: 15%">签收日期：</div>
                </div>
              </td>
            </tr>
            <tr class="day-in" style="border: 0;" v-if="company.showDeliveryCreator">
              <td colspan="11" style="border: 0;">
                <div style="display:flex;" class="bottom">
                  架子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;只&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  {{takeCare}}
                </div>
              </td>
            </tr>
            <tr class="day-in" style="border: 0;">
              <td colspan="11" style="border: 0;">
                <div style="display:flex;text-align: left;border: 0;margin-top: 10px " class="bottom" >
                  <el-input type="textarea" :autosize="{ minRows: 7, maxRows: 20 }" v-model="remark"/>
                </div>

              </td>
            </tr>

            <tr class="day-in" style="border: 0" v-if="!company.showDeliveryCreator">
              <td colspan="11" style="border: 0">
                <div style="width: 100%;height: 50px"></div>
              </td>
            </tr>
            <tr class="day-in" style="border: 0" v-if="!company.showDeliveryCreator">
              <td colspan="11" style="border: 0">
                <div style="display:flex;text-align: left"  class="bottom">
                  <div style="width: 15%">制单员：{{ itme1.delivery.creator }}</div>
                  <div style="width: 15%">制单日期：{{ itme1.delivery.createTime1 }}</div>
                  <div style="width: 15%">发货员：</div>
                  <div style="width: 15%">司机：</div>
                  <div style="width: 15%">客户签字：</div>
                  <div style="width: 15%">签收日期：</div>
                </div>
              </td>
            </tr>

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

    </table>



  </div>


</template>




<style scoped>
@media print {
  @page {
    margin: 12mm 10mm 20mm 10mm !important;
  }
  .pages {
    page-break-after: always;
  }

  @page {
    @top-right {
      margin-top: 50px;
      content: "第 " counter(page)  " 页"; /* 使用counter添加页码 */
    }
  }
}
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;
}



</style>

 north-glass-erp/northglass-erp/src/views/sd/delivery/SelectDelivery.vue

@@ -18,6 +18,7 @@
import useOrderInfoStore from "@/stores/sd/order/orderInfo";
import { saveAs } from "file-saver"
import companyInfo from "@/stores/sd/companyInfo";
import PrintSheet3 from "@/components/sd/delivery/PrintSheet3.vue";

//语言获取
const { t } = useI18n()
@@ -421,6 +422,39 @@

          break
        }
        case 'sheet7': {
          const selectRecords = $grid.getCheckboxRecords()
          if (selectRecords.length === 0) {
            if(rowClickIndex.value.deliveryState>0){
              ElMessage.warning(t('order.printingNumber')+rowClickIndex.value.printingNumber)
              let delivery=([])
              delivery.push(rowClickIndex.value)
              flowData.value.delivery=delivery
              dialogTableVisible.value = true
              sheetIndex.value=7
            }else{
              ElMessage.warning(t('order.orderNotApproved'))
            }
          }else{
            let a=0
            selectRecords.forEach((item) => {
              if(item.deliveryState==0){
                ElMessage.warning(t('order.orderNotApproved'))
                a=1
              }
            })
            if(a==0){
              flowData.value.delivery=selectRecords
              dialogTableVisible.value = true
              sheetIndex.value=7
            }


          }

          break

        }
      }
    }
  },
@@ -467,6 +501,7 @@
          { code: 'sheet4', name: t('delivery.print1')+ t('delivery.noMoney'), prefixIcon: 'vxe-icon-file-txt', visible: false},
          { code: 'sheet5', name: t('delivery.print2'), prefixIcon: 'vxe-icon-file-txt', visible: false},
          { code: 'sheet6', name: t('delivery.print2')+ t('delivery.noMoney'), prefixIcon: 'vxe-icon-file-txt', visible: false},
          { code: 'sheet7', name: t('打印一行俩列'), prefixIcon: 'vxe-icon-file-txt', visible: true},
        ]
      ]
    }
@@ -663,7 +698,7 @@
        <el-button @click="exportFile" :icon="Download" circle />
        <el-select
            v-model="optionVal"
            v-if="sheetIndex>2"
            v-if="sheetIndex>2&&sheetIndex<7"
            style="width: 120px">
          <el-option
              v-for="n in 8"
@@ -679,6 +714,7 @@
      <print-sheet-luoyang id="child"  v-if="sheetIndex===4" :deliveryId="flowData.delivery" :type="2" :optionVal='optionVal'/>
      <print-sheet-luoyang-details id="child"  v-if="sheetIndex===5" :deliveryId="flowData.delivery" :type="3" :optionVal='optionVal'/>
      <print-sheet-luoyang-details id="child"  v-if="sheetIndex===6" :deliveryId="flowData.delivery" :type="4" :optionVal='optionVal'/>
      <print-sheet3 id="child"  v-if="sheetIndex===7" :deliveryId="flowData.delivery" />

    </el-dialog>
  </div>