补片标签打印改为选择自定义标签模版打印

chenlu

2024-12-30 679a0536c8e684cee5874b746c766dae4949fcdf

补片标签打印改为选择自定义标签模版打印

 north-glass-erp/northglass-erp/src/components/pp/PrintRepairCustomLabel.vue

@@ -7,6 +7,9 @@
import {changeFilterEvent, filterChanged} from "@/hook"
import {useI18n} from 'vue-i18n'
import deepClone from "@/utils/deepClone";
import companyInfo from "@/stores/sd/companyInfo";

const company = companyInfo()
//语言获取
const {t} = useI18n()
let router = useRouter()
@@ -15,7 +18,7 @@
let titleList = ref([])
let dataList = ref([])
let list = ref([])
let lastList=ref([])
let lastList = ref([])

let filterData = ref({})

@@ -27,30 +30,63 @@
  list:null,//勾选的数据
  faceOrientation:null,//内外面
  type:null,//标签模板
  lableType:null//标签类型
  lableType:null,//标签类型
  titleList:null,//标题
  switch:null,//判断是否为新打印,
  lastList:[],
  detailType:null
})

const {currentRoute} = useRouter()
const route = currentRoute.value
let type = props.type
let faceOrientation = props.faceOrientation
let lableType = props.lableType
data.value.printList = JSON.parse(props.list)

let lableType = props.lableType
let switchType = props.switch
let detailType= props.detailType
data.value.printList = JSON.parse(props.list)
onMounted(() => {

      request.post(`/Replenish/getSelectPrintCustomLabel/${type}/${lableType}`, data.value).then((res) => {
        if (res.code == 200) {

          produceList.value = deepClone(res.data.title)
          list.value = deepClone(res.data.data)
          const data = produceList.value[0].value
          dataList = JSON.parse(`[${data}]`);
          labelList = dataList[0]
          const printElements = dataList[0].panels[0].printElements;
          let a = []
          printElements.forEach(element => {
            if(element.options.field==='table'){
              element.options.columns[0].forEach(elements => {
                if(elements.field){
                  a.push({
                        title: elements.title,
                        name: elements.field
                      }
                  )
                }
              })
            }else{
              a.push({
                title: element.options.title,
                name: element.options.field
              })
            }
          })
          labelList = a
          for (let i = 0; i < list.value.length; i++) {
            let count= list.value[i].data.length
            let count = list.value[i].data.length
            for (let j = 0; j < count; j++) {
              for (let k = 0; k < list.value[i].data[j].quantity; k++){
                lastList.value.push(list.value[i].data[j])
              if (detailType==0){
                for (let k = 0; k < list.value[i].data[j].quantity; k++) {
                  props.lastList.push(list.value[i].data[j])
                }

              }
              else {
                for (let k = 0; k < list.value[i].data[j].quantity; k++) {
                props.lastList.push(list.value[i].data[j])
                }
              }
            }
          }
@@ -65,58 +101,93 @@
)


// 打印方法
const printFlowCard = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("print");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();

  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;
//修改相同产品名称标签
const updateProductName = (event, index,id) => {
  // 创建映射对象
  const propertyMapping = {};
  labelList.forEach(item => {
    propertyMapping[item.name] = item.title;
  });
  // 输入的值
  const newValue = event.target.innerText;
  const parts = newValue.split('：');
  const result = parts[1]; // 获取冒号后的部分
  // 获取映射中所有的键
  const keys = Object.keys(propertyMapping);
  // 根据 index 获取对应的属性名
  const propertyName = keys[index];
  // 如果映射中没有该 index，直接返回
  if (!propertyName) {
    console.warn('Unsupported index:', index);
    return;
  }

  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  style.innerHTML =
      "body>#" +
      printId +
      "{display:none}@media print{body>:not(#" +
      printId +
      "){display:none !important}body>#" +
      printId +
      "{display:block;padding-top:1px}}";
  //
  content.innerHTML = el.outerHTML;
  body.appendChild(style);
  // 遍历 lastList 并更新对应的属性
  props.lastList.forEach(obj => {
    // 获取前缀和 orderId
    const prefix = props.lastList[id].processId.substring(0, 11);
    const orderId = obj.orderId;
    const glassNumber=props.lastList[id].glassNumber
    // 根据 propertyName 更新属性
    if (propertyName === 'productAbbreviation' && prefix === obj.processId.substring(0, 11)) {
      obj.productAbbreviation = result;
    }

  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素，可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
  setTimeout(() => {
    window.print();
    body.removeChild(content);
    body.removeChild(style);
  }, 20);
    if (propertyName === 'project' && orderId === obj.orderId) {
      obj.project = result;
    }
    if (propertyName === 'productName' && prefix === obj.processId.substring(0, 11)){
      obj.productName = result;
    }
    if (propertyName === 'customerName' && orderId === obj.orderId){
      obj.customerName = result;
    }
    if (propertyName === 'orderId' && orderId === obj.orderId){
      obj.orderId = result;
    }
    if (propertyName === 'glassNumber' && glassNumber === obj.glassNumber){
      obj.glassNumber = result;
    }
    if (propertyName === 'width' && glassNumber === obj.glassNumber){
      obj.width = result;
    }
    if (propertyName === 'height' && glassNumber === obj.glassNumber){
      obj.height = result;
    }
    if (propertyName === 'custom1' && orderId === obj.orderId){
      obj.custom1 = result;
    }
    if (propertyName === 'custom2' && orderId === obj.orderId){
      obj.custom2 = result;
    }
    if (propertyName === 'custom3' && orderId === obj.orderId){
      obj.custom3 = result;
    }
    if (propertyName === 'custom4' && orderId === obj.orderId){
      obj.custom4 = result;
    }
    if (propertyName === 'custom5' && orderId === obj.orderId){
      obj.custom5 = result;
    }
  });
}


</script>

<template>
  <div class="printFlowCard_finished" id="print">
    <div v-for="(item1,id) in lastList"   class="entirety_finished">
        <div class="row4">{{faceOrientation}}</div>
        <div v-for="(item,id) in labelList"  class="contentRow">
          <div class="row1" v-if="item1[item.name] != null && item1[item.name] !== ''">{{ item.title }}:</div>
          <div class="row2" v-if="item1[item.name] != null && item1[item.name] !== ''">{{ item1[item.name] }}</div>

        </div>
        <div class="row3">
          <label>W:{{ item1.width }}</label>
          &nbsp;&nbsp;&nbsp;
          <label>H:{{ item1.height }}</label>
        </div>

  <div id="print" :class="company.printLabel.className.custom.printFlowCardName()">
    <div v-for="(item1,index) in props.lastList" :class="company.printLabel.className.custom.entiretyName()">
      <div class="row4">{{ faceOrientation }}</div>
      <div v-for="(item,id) in labelList" :class="company.printLabel.className.custom.contentRowName()">
        <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row1"  contenteditable="true" @input="updateProductName($event, id,index)" v-text="item.title+'：'+item1[item.name]"></div>
        <div v-else class="row1"  contenteditable="true" @input="updateProductName($event, id,index)" v-text="item.title+'：'"></div>
        <!--          <div class="row2" style="width: 100%;"><input class="contentRow2" v-model="item1[item.name]"  @keyup="updataProductName()" style="border: none;"/></div>-->
        <!--          <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row2" style="width: 100%;" contenteditable="true" @input="updateProductName($event, id)" v-text="item1[item.name]"></div>-->
      </div>
      <!--        <div v-html="company.printLabel.custom(item1)"></div>-->
      <div v-if="(id + 1) % 2 === 0" class="pagebreak"></div>
    </div>
  </div>

@@ -220,7 +291,9 @@
.entirety_finished{
  page-break-before: always;
}

  .pagebreak {
    page-break-after: always;
  }
}

</style>

 north-glass-erp/northglass-erp/src/views/pp/replenish/PrintReplenishFlowCard.vue

@@ -14,11 +14,14 @@
import PrintCustomLabel from '@/components/pp/PrintRepairCustomLabel.vue'
import PrintCustomLabelSemi from '@/components/pp/PrintRepairCustomLabelSemi.vue'
import footSum from "@/hook/footSum"
import {Search} from "@element-plus/icons-vue";
import {Search, View} from "@element-plus/icons-vue";
import companyInfo from "@/stores/sd/companyInfo"
import {CircleCheck, Download, Printer} from "@element-plus/icons-vue/global";
import SortDetail from "@/components/pp/SelectSortDetailProcessCard.vue";

import {hiprint} from "vue-plugin-hiprint";
//import PrintCustomLabel from '@/components/pp/PrintCustomLabelDetails.vue'
import QueuePrinter from "@/hook/queue";
import PrintCustomLabelProject from "@/components/pp/PrintCustomLabelProject.vue";
const company = companyInfo()
//语言获取
const {t} = useI18n()
@@ -32,8 +35,18 @@
const xGrid = ref(null)
const xGridDetail =ref(null)

const tags = ref([])


const tag = ref({
  id: null,
  name: null,
  type: 1,
  tagWidth: null,
  tagHeight: null,
  value: null,
  size: null
})
let lastList = ref([])
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' : {
@@ -159,6 +172,9 @@
  id: 'childLabelSemi',
})

onMounted(async () => {
  await getTags();
})

//打印类型
const printType = ref('小片标签')
@@ -456,48 +472,17 @@
          break
        }
        case 'customLabel': {
          if(selectRecords===null ||selectRecords===''||selectRecords.length===0){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
          if (tag.value.name == null || tag.value.name == '') {
            ElMessage.warning(t('请选择标签模板'))
            return
          }
          if (type===null||type===''||type===undefined){
            ElMessage.warning(t('processCard.pleaseSelectCustomPrintLabelStyle'))
            return
          }

          let id = ""
          for (let i = 0; i < selectRecords.length; i++) {
            if (i + 1 === selectRecords.length) {
              id += selectRecords[i].id
            } else {
              id += selectRecords[i].id + "|"
            }
          }
          if (lableTypes==1){

            labelRow.value.list=JSON.stringify(selectRecords)
            labelRow.value.faceOrientation=faceOrientation
            labelRow.value.type=type
            labelRow.value.lableType= lableTypes
            dialogTableVisibleLabel.value=true
            //router.push({path: '/main/processCard/PrintCustomLabel', query: {type:type,faceOrientation:faceOrientation,lableType:lableTypes,  printList: JSON.stringify(selectRecords)}})

          }
          else if (lableTypes==2) {
            labelRow.value.list=JSON.stringify(selectRecords)
            labelRow.value.faceOrientation=faceOrientation
            labelRow.value.type=type
            labelRow.value.lableType= lableTypes
            dialogTableVisibleCustomLabel.value=true
            //router.push({path: '/main/processCard/PrintCustomLabelSemi', query: {type:type,faceOrientation:faceOrientation,lableType:lableTypes,  printList: JSON.stringify(selectRecords)}})

          }else
          if (lableTypes==3) {
            router.push({path: '/main/processCard/PrintLabel1', query: {type:type,faceOrientation:faceOrientation,lableType:lableTypes,  printList: JSON.stringify(selectRecords)}})

          }


          labelRow.value.list = JSON.stringify(selectRecords)
          labelRow.value.type = tag.value.name
          labelRow.value.dataType = 3
          labelRow.value.lableType = lableTypes
          labelRow.value.switch = true
          lastList.value = []
          dialogTableVisibleLabel.value = true
          break
        }
        case 'printLike': {
@@ -673,6 +658,18 @@
  })
}

const getTags = () => {
  request.get('tagStyle/getTagList').then(res => {
    tags.value = res.data
  })
}
let hiprintTemplate = ref()
const changeTag = () => {
  hiprintTemplate.value = new hiprint.PrintTemplate({});
  const json = JSON.parse(tag.value.value)
  hiprintTemplate.value.update(json)
}

// 监听打印完成事件
const printNumber = () =>{

@@ -686,6 +683,10 @@

    }
  })
}

const printObjectProcess = () => {
  hiprintTemplate.value.print(lastList.value)
}

</script>
@@ -709,35 +710,16 @@

      </el-button>
      &nbsp;&nbsp;
      <!--    <el-input clearable :placeholder="$t('processCard.mergePrinting')" v-model="printMerge" style="width: 90px"></el-input>-->
      <!--    &nbsp;-->
      <label>{{$t('processCard.labelStyle')}}：</label>
      <el-select v-model="printType" clearable default-value="default_city" :placeholder="$t('processCard.pleaseSelect')" style="width: 120px">
        <el-option
            v-for="item in titleSelectJson['dataType']"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        />
      </el-select>
      &nbsp;
      <el-select v-model="lableType" class="m-2" :placeholder="lableTypeOptions[0].label" style="width: 140px">
        <el-option
            v-for="item in filteredOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      &nbsp;
      <el-select v-model="stateValue" class="m-2" :placeholder="$t('processCard.pleaseSelect')" clearable allow-create filterable style="width: 140px">
        <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
        标签模板：
        <el-select v-model="tag" placeholder="标签模板列表" style="width: 140px" @change="changeTag">
          <el-option
              v-for="(tag,index) in tags"
              :key="index"
              :label="tag.name"
              :value="tag"
          />
        </el-select>

    </div>
    <div class="main-table">
      <vxe-grid
@@ -802,24 +784,6 @@
                     style="width: 100%;height: 100%" />
    </el-dialog>

    <!--    成品标签-->
    <el-dialog
        id="sizeCustom"
        v-model="dialogTableVisibleLabel"
        destroy-on-close
        :title="$t('processCard.printLabel')"
        style="width: 80%;height:75% ">
      <template #header="{ close, titleId, titleClass }">
        <el-button v-print="printContentLabel"   :icon="Printer" circle />
      </template>
      <print-custom-label id="childLabel"
                          :list="labelRow.list"
                          :faceOrientation="labelRow.faceOrientation"
                          :type="labelRow.type"
                          :lableType="labelRow.lableType"
                          style="width: 100%;height: 100%" />
    </el-dialog>

    <!--   小片标签 -->
    <el-dialog
        id="sizeCustomSemi"
@@ -848,7 +812,26 @@
      <sort-detail id="child"  :processId="editRow.processId" :technologyNumber="editRow.technologyNumber" />
    </el-dialog>


    <el-dialog
        id="sizeCustom"
        v-model="dialogTableVisibleLabel"
        :title="$t('processCard.printLabel')"
        destroy-on-close
        style="width: 80%;height:75% ">
      <template #header="{ close, titleId, titleClass }">
        <el-button :icon="Printer" circle @click="printObjectProcess"/>
      </template>
      <print-custom-label id="childLabel"
                                  :detailType="labelRow.detailType"
                                  :faceOrientation="labelRow.faceOrientation"
                                  :lableType="labelRow.lableType"
                                  :lastList='lastList'
                                  :list="labelRow.list"
                                  :switch="labelRow.switch"
                                  :titleList="labelRow.titleList"
                                  :type="labelRow.type"
                                  style="width: 100%;height: 100%"/>
    </el-dialog>
  </div>
</template>


 north-glass-erp/src/main/java/com/example/erp/service/pp/FlowCardService.java

@@ -252,11 +252,11 @@
        if (!flowCardList.isEmpty()) {
            for (FlowCard flowCard : flowCardList) {
                Map<String, Object> itemmap = new HashMap<>();
                if ("1".equals(inquiryMode)){
                if ("1".equals(inquiryMode)){//合并流程卡
                    itemmap.put("detail", flowCardMapper.selectPrintMp(flowCard.getOrderId()));
                } else if ("3".equals(inquiryMode)) {
                } else if ("3".equals(inquiryMode)) {//合并流程卡不按配置显示
                    itemmap.put("detail", flowCardMapper.selectPrintAllMp(flowCard.getOrderId()));
                } else {
                } else {//非合并流程卡
                    itemmap.put("detail", flowCardMapper.selectPrintNotMp(flowCard.getOrderId()));
                }