提交 标签打印

guoyujie

2025-07-09 1e8e01acee30d971ec2f2a8f05c5635f029054f5

提交 标签打印

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

New file
@@ -0,0 +1,1217 @@
<script setup>
import { hiprint } from "vue-plugin-hiprint"
import {onMounted, ref} from "vue"
import TagStyleSet from "@/hook/tagStyleSet"
import {ElMessage, ElMessageBox} from "element-plus";
import request from "@/utils/request"
import {useI18n} from "vue-i18n"
import {useRouter} from "vue-router";
import deepClone from "@/utils/deepClone";
import companyInfo from "@/stores/sd/companyInfo"
import PrintCustomLabel from '@/components/pp/PrintCustomLabelDetails.vue'
import PrintCustomLabelSemi from '@/components/pp/PrintCustomLabelSemi.vue'
import {Printer} from "@element-plus/icons-vue/global"
import {View} from "@element-plus/icons-vue"
import QueuePrinter from "@/hook/queue"

const { t } = useI18n()
const company = companyInfo()
const dialogTableVisibleLabel = ref(false)
const dialogTableVisibleCustomLabel = ref(false)
let produceList = ref([])
let labelList = ref([])
let dataList = ref([])
let lastList = ref([])
let list = ref([])
//打印机
const printerData = ref()
const printerList = ref()
// 纸张类型
const paperTypes = {
  '成品标签': {
    width: 110,
        height: 110
  },
  '小片标签': {
    width: 112,
        height: 45
  },
}

//标签
let labelRow = ref({
  list: null,//勾选的数据
  faceOrientation: null,//内外面
  type: null,//标签模板
  lableType: null,//标签类型
  titleList:null,//标题列表
  switch:null//判断是否为新打印
})

//室内室外面
const stateValue = ref('')
const stateOptions = [
  {
    value: t('processCard.thisIsTheIndoorSurface'),
    label: t('processCard.thisIsTheIndoorSurface'),
  },
  {
    value: t('processCard.thisSideIsOutsideTheRoom'),
    label: t('processCard.thisSideIsOutsideTheRoom'),
  },
]

const autoPaper = ref({
  width:null,
  height:null
})
const tag = ref({
  id:null,
  name:null,
  type:1,
  tagWidth:null,
  tagHeight:null,
  value:null,
  size:null

})


//标签类型
let filteredOptions = []
const lableType = ref('1')
const lableTypeOptions = [
  {
    value: '1',
    label: t('processCard.finishedProductLabel'),
  },
  /*  {
      value: '2',
      label: t('processCard.halfProductLabel'),
    },*/
  {
    value: `${company.printLabel.labelValue}`,
    label: `${company.printLabel.labelType}`,
  },
  {
    value: `${company.printLabel.labelValue3}`,
    label: `${company.printLabel.labelType3}`,
  },
]
let hidePrintLabels = company.printLabel.hideButton;

if (hidePrintLabels == 'true') {
  filteredOptions = lableTypeOptions.filter((option, index) => index !== 2);
} else {
  filteredOptions = lableTypeOptions;
}

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

let props = defineProps({
  list:null,//勾选的数据
  faceOrientation:null,//内外面
  type:null,//标签模板
  lableType:null//标签类型
})

const printContentLabel = ref({
  id: 'childLabel',
})

const printContentLabelSemi = ref({
  id: 'childLabelSemi',
})

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


const TgaStyleSet = ref([
  {
    tid: '清空', title: '', data: '', type: 'text',
    options: {
      field: '',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "center",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: '此面为室内面', title: '此面为室内面', data: '', type: 'text',
    options: {
      title: '此面为室内面',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "center",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: '此面为室外面', title: '此面为室外面', data: '', type: 'text',
    options: {
      title: '此面为室外面',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "center",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: 'orderId', title: '订单号', data: '', type: 'text',
    options: {
      field: 'orderId',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'project', title: '项目名称', data: '', type: 'text',
    options: {
      field: 'project',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'batch', title: '批次', data: '', type: 'text',
    options: {
      field: 'batch',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'icon', title: '商标', data: '', type: 'text',
    options: {
      field: 'icon',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'orderType', title: '订单类型', data: '', type: 'text',
    options: {
      field: 'orderType',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'customerName', title: '客户', data: '', type: 'text',
    options: {
      field: 'customerName',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'productName', title: '产品', data: '', type: 'text',
    options: {
      field: 'productName',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'processingNote', title: '加工要求', data: '', type: 'text',
    options: {
      field: 'processingNote',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'edgingType', title: '磨边类型', data: '', type: 'text',
    options: {
      field: 'edgingType',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'buildingNumber', title: '楼层编号', data: '', type: 'text',
    options: {
      field: 'buildingNumber',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'customerAbbreviation', title: '客户简称', data: '', type: 'text',
    options: {
      field: 'customerAbbreviation',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'productAbbreviation', title: '产品简称', data: '', type: 'text',
    options: {
      field: 'productAbbreviation',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'processId', title: '流程卡号', data: '', type: 'text',
    options: {
      field: 'processId',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'processIdAD', title: '简易流程卡', data: '', type: 'text',
    options: {
      field: 'processIdAD',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'quantity', title: '订单数量', data: '', type: 'text',
    options: {
      field: 'quantity',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'size', title: '尺寸数量', data: '', type: 'text',
    options: {
      field: 'size',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'numberSize', title: '序尺数', data: '', type: 'text',
    options: {
      field: 'numberSize',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'numberSizeQuantity', title: '序号尺寸', data: '', type: 'text',
    options: {
      field: 'numberSizeQuantity',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'orderNumber', title: '订单序号', data: '', type: 'text',
    options: {
      field: 'orderNumber',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'technologyNumber', title: '小片顺序', data: '', type: 'text',
    options: {
      field: 'technologyNumber',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'process', title: '工艺流程', data: '', type: 'text',
    options: {
      field: 'process',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'color', title: '膜系', data: '', type: 'text',
    options: {
      field: 'color',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'figureNumber', title: '图号', data: '', type: 'text',
    options: {
      field: 'figureNumber',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'colourCeramicGlaze', title: '彩釉图号', data: '', type: 'text',
    options: {
      field: 'colourCeramicGlaze',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'glassNumber', title: '编号', data: '', type: 'text',
    options: {
      field: 'glassNumber',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'remarks', title: '订单备注', data: '', type: 'text',
    options: {
      field: 'remarks',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'remarks1', title: '备注1', data: '', type: 'text',
    options: {
      field: 'remarks1',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'remarks2', title: '备注2', data: '', type: 'text',
    options: {
      field: 'remarks2',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'remarks3', title: '备注3', data: '', type: 'text',
    options: {
      field: 'remarks3',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'remarks4', title: '备注4', data: '', type: 'text',
    options: {
      field: 'remarks4',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'filmNumber', title: '产品备注', data: '', type: 'text',
    options: {
      field: 'filmNumber',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'bendRadius', title: '半径', data: '', type: 'text',
    options: {
      field: 'bendRadius',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'glassChild', title: '单片名称', data: '', type: 'text',
    options: {
      field: 'glassChild',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'glassAddress', title: '片标记', data: '', type: 'text',
    options: {
      field: 'glassAddress',
      testData: '',
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'width', title: '宽', data: '', type: 'text',
    options: {
      field: 'width',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'height', title: '高', data: '', type: 'text',
    options: {
      field: 'height',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'flow_card_sort', title: '工程流程卡编号', data: '', type: 'text',
    options: {
      field: 'flow_card_sort',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'heat_layout_id', title: '炉号', data: '', type: 'text',
    options: {
      field: 'heat_layout_id',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'heat_layout_sort', title: '炉内序号', data: '', type: 'text',
    options: {
      field: 'heat_layout_sort',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'sumQuantity', title: '订单总数', data: '', type: 'text',
    options: {
      field: 'sumQuantity',
      testData: '',
      width:100,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle"
    }
  },
  {
    tid: 'custom1', title: '自定义1', data: '', type: 'text',
    options: {
      title: '自定义1',
      field: 'custom1',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: 'custom2', title: '自定义2', data: '', type: 'text',
    options: {
      title: '自定义2',
      field: 'custom2',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: 'custom3', title: '自定义3', data: '', type: 'text',
    options: {
      title: '自定义3',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: 'custom4', title: '自定义4', data: '', type: 'text',
    options: {
      title: '自定义4',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },
  {
    tid: 'custom5', title: '自定义5', data: '', type: 'text',
    options: {
      title: '自定义5',
      testData: '',
      width:270,
      height: 16,
      fontSize: 11.25,
      textAlign: "left",
      textContentVerticalAlign: "middle",
      type:'custom'
    }
  },

  /*{
    tid: 'table',
    field: 'table',
    title: '自定义表格',
    type: 'table',
    //columns:[[null,null,null,null,null,null]],
    "options": {
      "left": 20,
      "top": 20,
      "height": 56,
      "width": 555,
      "field": "table",
      "tableHeaderRepeat": "none",
      "tableBorder": "noBorder",
      "tableBodyRowBorder": "noBorder",
      "tableBodyCellBorder": "noBorder",
      "fields": [
        {
          "text": "商品名称",
          "field": "orderId"
        },
        {
          "text": "商品编码",
          "field": "orderNumber"
        }
      ],

    },
    "columns": [
      [
        {
          "width": 138.75,
          "title": "商品名称",
          "field": "orderId",
          "checked": true,
          "columnId": "orderId",
          "fixed": false,
          "rowspan": 1,
          "colspan": 1,
          "renderFormatter": "function(value,row,index,options){return `订单号：${row.orderId || '测试商品名'}<br>条码：${row.barcode || '123456'}`}"
        },
      ]
    ]
  }*/

])

const tags = ref([])
const activeName = ref(null)





// 必须在 dom 加载完成之后给刚刚绑定上的元素添加上拖拽事件
onMounted(async  () => {
  let table = {
    tid: 'table',
    field: 'table',
    title: '自定义表格',
    type: 'table',
    "options": {
      "left": 20,
      "top": 20,
      "height": 56,
      "width": 555,
      "field": "table",
      "tableHeaderRepeat": "none",
      "tableBorder": "noBorder",
      "tableBodyRowBorder": "noBorder",
      "tableBodyCellBorder": "noBorder",
      "gridColumnsGutter": 3,
      "fields": [
      ],

    },
    columns:[[null,null,null,null,null,null,null,null]]

  }
  let list = []
  TgaStyleSet.value.forEach(item => {
    let para = {
      text: item.title,
      field: item.options.field || item.options.title,
    }
    if(item.options.type){
      para.type = item.options.type
    }
    list.push(para)
  })
  table.options.fields = list
  TgaStyleSet.value.push(table)
  await getTags()

  await  hiprint.init({
    providers: [new TagStyleSet(TgaStyleSet.value)]
  });


  // 注册默认面板

  await buildDesigner()
})


let hiprintTemplate = ref()
const buildDesigner = () => {
  document.querySelector('#hiprint-printTemplate').innerHTML = ''
  document.querySelector('.hiprintEpContainer').innerHTML = ''
  // 绑定拖拽事件
  hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule')
  // new hiprint.PrintTemplate 的返回值是一个模板的实例
  // 传入的参数各种的配置项
  // settingContainer：属性栏面板
  hiprintTemplate.value = new hiprint.PrintTemplate({
    settingContainer: "#PrintElementOptionSetting"
  });

  // 构建一个设计模板，指定容器，是否开启网格展示
  hiprintTemplate.value.design("#hiprint-printTemplate",{grid:true});
  //未连接 则进行连接打印服务器
  if (!hiprint.hiwebSocket.opened) {
    hiprint.hiwebSocket.setHost("http://localhost:17521")
  }
  //获取打印机列表
  hiprint.refreshPrinterList((list) => {
    // console.log('refreshPrinterList')
    // console.log(list)
    printerList.value=list
  });
};



const changePaperSize = (size,type) => {
  try{
    if(type==='list'){
      hiprintTemplate.value.setPaper(size.width, size.height)
    }else{
      if (autoPaper.value.width==null ||autoPaper.value.width=='' || autoPaper.value.height==null || autoPaper.value.height==''){
        ElMessage.warning("请输入完整宽高")
      }
      else {
        hiprintTemplate.value.setPaper(autoPaper.value.width, autoPaper.value.height)
      }

    }
  }catch (e){

  }
}

const save = (type) => {
  ElMessageBox.prompt( t('components.addNewSignature')+':', {
    confirmButtonText: t('basicData.save'),
    cancelButtonText: t('basicData.cancelButtonText'),
    inputPattern:/^.{1,20}$/,
    inputErrorMessage: t('components.message'),
    inputValue:tag.value.name
  }).then(({ value }) => {
    tag.value.name = value
    let json = $ref(hiprintTemplate.value.getJson())
    const tableFlag = json.panels[0].printElements.filter(item => item.options.field==='table')
    json.panels[0].printElements.forEach((item,index) => {
      if (item.options.field === 'table') {
        const fields = json.panels[0].printElements[index].options.fields.filter(item => item.type)
        const result = Object.fromEntries(
            fields.map(item => [item.field, true]) // 转换成 [key, value] 数组
        )
        let funct = "function(value,row,index,options){return `<div style='width: 6.5cm;height:4.9cm;background-color: #5cadfe'> <br>"
        json.panels[0].printElements[index].options.columns[0].forEach(item => {
          if(item.field && !result[item.field ]){
            if (company.printShowTitle){
              funct += item.title+':${row.'+item.field+' || "" }  <br>'
            }else{
              funct += '${row.'+item.field+' || "" }  <br>'
            }
          }else if(item.field && result[item.field]){
            funct += item.title+'<br>'
          }
        })
        funct+='<br></div>`}'
        json.panels[0].printElements[index].options.columns[0][0].renderFormatter = funct
      }
    })





    if(type === 'save'){
      tag.value.value = JSON.stringify(json)
      request.post('tagStyle/saveTag',tag.value).then(res => {
        if(res.code === '200' && res.data===true){
          ElMessage.success(t('basicData.msg.saveSuccess'))
          getTags()
        }
      })
    }else{
      request.post('tagStyle/addTag',tag.value).then(res => {
        if(res.code === '200' && res.data===true){
          ElMessage.success(t('basicData.msg.saveSuccess'))
          getTags()
        }
      })
    }
    hiprintTemplate.value.update(json)
  })
}


const getTags = () => {
  request.get('tagStyle/getTagList').then(res => {
    tags.value = res.data
  })
}
const changeTag = () => {
  const json = JSON.parse(tag.value.value)
  //json.panels[0].printElements[0].options.fields.push({text: '商标', field: 'icon'})

  hiprintTemplate.value.setPaper(json.panels[0].width, json.panels[0].height)
  hiprintTemplate.value.update(json)
}

const clear = () => {
  hiprintTemplate.value.clear()
}

const deleteTag = () => {
  request.post(`tagStyle/deleteTag/${tag.value.id}`).then(res => {
    if(res.code === '200' && res.data===true){
      ElMessage.success(t('basicData.msg.deleteSuccess'))
      getTags()
      close()
    }
  })
}

const htmlPrint = () => {
  let lableTypes= lableType.value
  let faceOrientation = stateValue.value
  type=tag.value.name
  if (type === null || type === '' || type === undefined) {
    ElMessage.warning(t('processCard.pleaseSelectCustomPrintLabelStyle'))
    return
  }
  const titleList = ref({})
  titleList.value=JSON.parse(JSON.stringify(hiprintTemplate.value.getJson()))
  const printElements = titleList.value.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
          })
    }
  })
  labelRow.value.titleList = a

  labelRow.value.list =props.list
  labelRow.value.faceOrientation = faceOrientation
  labelRow.value.type = type
  labelRow.value.lableType = lableType.value
  labelRow.value.switch=true
  lastList.value = []
  if (lableTypes == 1) {

    if (company.label === 1) {
      dialogTableVisibleLabel.value = true
    }

  } else if (lableTypes == 2) {
    if (company.label === 1) {
      dialogTableVisibleCustomLabel.value = true
    }
  }



}


const printOrder = (type) => {
  const list = hiprintTemplate.value.getJson()

  list.panels[0].printElements.forEach(element => {
    element.options.fontFamily = 'Arial'
    if(element.printElementType.title!==''){
      element.printElementType.title1=element.printElementType.title
      element.options.title1 = element.options.title
    }

    if(type===3 && element.options.field!==''){
      element.printElementType.title=''
      element.options.title=''
    }else{
      element.printElementType.title=element.options.title1
      element.options.title=element.options.title1
    }

  })
  hiprintTemplate.value.update(list)

  let object =  lastList.value
  //判断是否为表格
  let columnsNum = null
  if(list.panels[0].printElements[0].options.field==='table'){
    object = {table:lastList.value}
    columnsNum = (list.panels[0].printElements[0].options.gridColumns || 1)
  }
  let printer=printerData.value
  if(type===1){
    const queuePrinter = new QueuePrinter( object,hiprintTemplate,columnsNum,printer)
    queuePrinter.tick
  }else{
    hiprintTemplate.value.print(object)
  }

}
const closeDialog = () => {
  const list = hiprintTemplate.value.getJson()
  list.panels[0].printElements.forEach(element => {
    element.options.fontFamily = 'Arial'
    if (element.printElementType.title === '') {
      element.printElementType.title = element.printElementType.title1
      element.options.title = element.options.title1
    }
  })
  hiprintTemplate.value.update(list)
}

const selectRecordsData = ref({
  printList: []
})
// 监听打印次数事件
const printNumber = () => {
  selectRecordsData.value.printList = JSON.parse(props.list)
  request.post(`/tagStyle/updatePrintNumber`, selectRecordsData.value).then((res) => {
    if (res.code == 200 && res.data === true) {
    } else {

      ElMessage.warning(t('basicData.msg.saveFail'))

    }
  })
}
</script>

<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 10%;width: 100%;float: left" @change="changePaperSize">
      <el-row>
        <el-col :span="6" >
          <el-button-group  >
            <el-button  v-for="(item,key) in paperTypes"  @click="changePaperSize(item,'list')"  >{{key}}</el-button>
            <el-popover placement="right" :width="250" trigger="click">
              <template #reference>
                <el-button >自定义尺寸</el-button>
              </template>
              <el-input v-model="autoPaper.width" type="number" >
                <template #prepend>宽</template>
                <template #append>mm</template>
              </el-input>
              <el-input v-model="autoPaper.height" type="number"  >
                <template #prepend>高</template>
                <template #append>mm</template>
              </el-input>
              <el-button
                  @click="changePaperSize(null,'other')"
                  style="float: right;margin-top: 0.5rem"
                  type="primary"
              >确定</el-button>
            </el-popover>
          </el-button-group>
        </el-col>
        <el-col :span="6">
            <el-select v-model="tag" @change="changeTag" placeholder="标签模板列表" style="width: 140px" >
              <el-option
                  v-for="(tag,index) in tags"
                  :key="index"
                  :label="tag.name"
                  :value="tag"
              />
            </el-select>

          <el-select v-model="lableType" :placeholder="lableTypeOptions[0].label" class="m-2" style="width: 120px">
            <el-option
                v-for="item in filteredOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="printerData" :placeholder="$t('processCard.pleaseSelect')" clearable default-value="default_city"
                     style="width: 160px">
            <el-option
                v-for="item in printerList"
                :key="item.displayName"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="save('save')">保存</el-button>
          <el-button type="primary" @click="save('copy')">复制</el-button>
          <el-button type="warning" @click="clear">清空</el-button>
          <el-button :disabled="!tag.id" type="danger" @click="deleteTag">删除</el-button>
          <el-button type="primary" @click="htmlPrint">预览</el-button>
        </el-col>
      </el-row>



    </div>
    <div style="height: 90%;width: 10%;float: left;overflow-y: auto" class="hiprintEpContainer"/>
    <div style="height: 90%;width: 60%;overflow: auto;float: left">
      <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-left: 20px;margin-top: 20px"></div>
    </div>
    <div style="height: 90%;width: 30%;float: left;overflow: auto;">
      <div id="PrintElementOptionSetting" class="PrintElementOptionSetting"></div>
    </div>



  </div>

  <!--    成品标签-->
  <el-dialog
      id="sizeCustom"
      v-model="dialogTableVisibleLabel"
      :title="$t('processCard.printLabel')"
      destroy-on-close
      @close="closeDialog"
      style="width: 80%;height:75% ">
    <template #header="{ close, titleId, titleClass }">
      <el-button @click="printOrder(2);printNumber()" :icon="View" circle/>
      <el-button @click="printOrder(1);printNumber()" :icon="Printer" circle/>
      <el-button @click="printOrder(3);printNumber()"  >无标题</el-button>

    </template>
    <print-custom-label id="childLabel"
                        destroy-on-close
                        :lastList = 'lastList'
                        :faceOrientation="labelRow.faceOrientation"
                        :lableType="labelRow.lableType"
                        :list="labelRow.list"
                        :type="labelRow.type"
                        :titleList="labelRow.titleList"
                        :switch="labelRow.switch"
                        style="width: 100%;height: 100%"/>
  </el-dialog>

  <!--   小片标签 -->
  <el-dialog
      id="sizeCustomSemi"
      v-model="dialogTableVisibleCustomLabel"
      :title="$t('processCard.labelStyle')"
      destroy-on-close
      style="width: 80%;height:75% ">
    <template #header="{ close, titleId, titleClass }">
      <el-button v-print="printContentLabelSemi" :icon="Printer" circle/>
    </template>
    <print-custom-label-semi id="childLabelSemi"
                             destroy-on-close
                             :faceOrientation="labelRow.faceOrientation"
                             :lableType="labelRow.lableType"
                             :list="labelRow.list"
                             :type="labelRow.type"
                             :titleList="labelRow.titleList"
                             :switch="labelRow.switch"
                             style="width: 100%;height: 100%"/>
  </el-dialog>

</template>

<style scoped>
:deep(#sizeCustom .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}

:deep(#sizeCustomSemi .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
</style>