chenlu
8 天以前 4b2d55c8bde56676b4afdb41436a24763e0f8cca
north-glass-erp/northglass-erp/src/views/pp/processCard/PrintFlowCardDetails.vue
New file
@@ -0,0 +1,1151 @@
<script setup>
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import {ElCheckbox, ElDatePicker, ElMessage} from "element-plus"
import {nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue"
import {useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {changeFilterEvent, filterChanged} from "@/hook"
import {VXETable} from "vxe-table";
import {addListener, toolbarButtonClickEvent} from "@/hook/mouseMove";
import PrintProcess from '@/components/pp/PrintProcess.vue'
import PrintLabel from '@/views/pp/processCard/PrintLabel.vue'
import PrintCustomLabel from '@/components/pp/PrintCustomLabelDetails.vue'
import PrintCustomLabelSemi from '@/components/pp/PrintCustomLabelSemi.vue'
import PrintCustomLabelXJ from '@/components/pp/PrintCustomLabelTwo.vue'
import PrintCustomLabelXJTwo from '@/components/pp/PrintCustomLabelXJTwo.vue'
import SortDetail from '@/components/pp/SelectSortDetailProcessCard.vue'
import footSum from "@/hook/footSum"
import companyInfo from "@/stores/sd/companyInfo"
import {CircleCheck, Download, Printer} from "@element-plus/icons-vue/global";
import TagStyleDesigner from "@/components/pp/TagStyleDesigner.vue";
import {hiprint} from "vue-plugin-hiprint";
import {createTemplate} from "@/hook/createTemplateTag"
const company = companyInfo()
//语言获取
const {t} = useI18n()
let router = useRouter()
const dialogTableVisible = ref(false)
const dialogTableVisibleLabel = ref(false)
const dialogTableVisibleCustomLabel = ref(false)
const dialogTableVisibleLabelXJ = ref(false)
const dialogTableVisibleLabelXJTwo = ref(false)
const printVisible = ref(false)
let selectRecords = ref(null)
let titleStyleVisible = ref(false)
let lastList = ref([])
const selectRecordsData = ref({
  printList: []
})
const xGrid = ref(null)
const xGridDetail = ref(null)
//排序
let editRow = ref({
  processId: null,
  technologyNumber: null,
  process: null
})
//落架顺序
let landingSequence= ref(1)
//打印
let printRow = ref({
  list: null,
  printMergeVal: null,
  like: null
})
//标签
let labelRow = ref({
  list: null,//勾选的数据
  faceOrientation: null,//内外面
  type: null,//标签模板
  lableType: null,//标签类型
  dataType: null,
  landingSequence:null
})
const getTableRow = (row, type) => {
  switch (type) {
    case 'edit' : {
      editRow.value.processId = row.process_id
      editRow.value.technologyNumber = row.technology_number
      editRow.value.process = row.process
      printVisible.value = true
      // router.push({path: '/sort-detail', query: {processId: row.process_id,technologyNumber:row.technology_number}})
      break
    }
  }
}
//筛选条件,有外键需要先定义明细里面的数据
let filterData = ref({
  orderGlassDetail: {
    productionId: '',
  },
  orderDetail: {
    orderId: '',
    productId: '',
    productName: '',
  }
})
//定义页面总页数
let pageTotal = ref('')
//定义数据返回结果
let produceList = ref([])
//定义数据返回结果
let produceDetailList = ref([])
//定义当前页数
let pageNum = $ref(1)
let pageState = null
//室内室外面
const stateValue = ref('')
const stateOptions = [
  {
    value: t('processCard.thisIsTheIndoorSurface'),
    label: t('processCard.thisIsTheIndoorSurface'),
  },
  {
    value: t('processCard.thisSideIsOutsideTheRoom'),
    label: t('processCard.thisSideIsOutsideTheRoom'),
  },
]
//标签类型
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;
let btnType = company.printBtn;
if (hidePrintLabels == 'true') {
  filteredOptions = lableTypeOptions.filter((option, index) => index !== 2);
} else {
  filteredOptions = lableTypeOptions;
}
//合片流程卡打印下拉选项
const printMerge = ref('')
const printMergeOptions = [{}]
const printContent = ref({
  id: 'child',
})
const printContentLabel = ref({
  id: 'childLabel',
})
const printContentLabelSemi = ref({
  id: 'childLabelSemi',
})
//打印类型
const printType = ref()
//定义接收加载表头下拉数据
const titleSelectJson = ref({
  dataType: [],
})
const data = ref({
  printList: []
})
let hiprintTemplate = ref(null)
onMounted(async () => {
  await getTags();
  await hiprint.init();
})
const tags = ref([])
const tag = ref({
  id: null,
  name: null,
  type: 1,
  tagWidth: null,
  tagHeight: null,
  value: null,
  size: null
})
const changeTag = () => {
  hiprintTemplate.value = new hiprint.PrintTemplate({});
  hiprintTemplate.value.design("#hiprint-printTemplate1",{grid:true});
  const json = tag.value.value
  hiprintTemplate.value.update(json)
}
const getTags = () => {
  request.get('tagStyle/getTagList').then(res => {
    res.data.forEach(item => {
      item.value = JSON.parse(item.value)
    })
    tags.value = res.data
  })
}
const printOrder = (type) => {
  printNumber()
  const list = tag.value.value
  list.panels[0].printElements.forEach(element => {
    element.options.fontFamily = 'Arial'
    if( element.options.field !== undefined){
      if(type===3 ){
        element.options.hideTitle = true
      }
    }
    if(type!==3){
      element.options.hideTitle = false
      if( element.options.field === undefined){
        element.options.hideTitle = true
      }
    }
  })
  //hiprintTemplate.value.update(list)
  let object =  JSON.parse(JSON.stringify(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)
  }
  //判断是否有 嵌套自定义纸张
  if(tag.value.tagHeight && tag.value.tagWidth){
    const print =createTemplate(list,object,tag.value.tagWidth,tag.value.tagHeight)
    hiprintTemplate.value.update(print.template)
    object = print.printData
  }
  hiprintTemplate.value.print(object)
}
const orderOtherMoney = ref(null)
const {currentRoute} = useRouter()
const route = currentRoute.value
let orderId = route.query.orderId
data.value.printList = JSON.parse(route.query.printList)
let type = parseInt(route.query.type)
let inquiryMode = route.query.checkedValue
// 第一次加载查询
request.post(`/processCard/selectPrintDetails/${inquiryMode}/${type}`, data.value).then((res) => {
  if (res.code == 200) {
    let newDataCollection = [];
    for (let i = 0; i < res.data.data.length; i++) {
      res.data.data[i].detail.forEach((item) => {
        newDataCollection.push(item);
      })
    }
    orderOtherMoney.value = res.data.orderOtherMoney
    orderOtherMoney.value.forEach(item => {
      let column = {
        field: `${item.column}`,
        width: 100,
        title: item.alias,
        filters: [{data: ''}],
        slots: {filter: 'num1_filter'},
        filterMethod: filterChanged,
        sortable: true
      }
      gridOptions.columns.push(column)
    })
    titleSelectJson.value.dataType = res.data.type
    xGrid.value.reloadData(newDataCollection)
    gridOptions.loading = false
    hideButton()
  } else {
    ElMessage.warning(res.msg)
  }
})
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}
const hasDecimal = (value) => {
  const regex = /\./; // 定义正则表达式,查找小数点
  return regex.test(value); // 返回true/false
}
const gridOptions = reactive({
  loading: true,
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 30},//鼠标移动或选择高亮
  id: 'printFlowCard_1',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollX: {enabled: true},
  scrollY: {enabled: true, gt: 0},//开启虚拟滚动
  showOverflow: true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
                    // remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns: [
    {type: 'expand', fixed: "left", slots: {content: 'content'}, width: 50},
    {title: t('basicData.operate'), width: 55, slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'checkbox', fixed: "left", title: t('basicData.check'), width: 80},
    {type: 'seq', fixed: "left", title: t('basicData.Number'), width: 50},
    {field: 'printQuantity', title: t('processCard.printQuantity'), width: 90,
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
    {
      field: 'order_id',
      title: t('order.orderId'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
    },
    {
      field: 'process_id',
      title: t('processCard.processId'),
      showOverflow: "ellipsis",
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 140
    },
    {
      field: 'customer_name',
      title: t('customer.customerName'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
    },
    {
      field: 'project',
      title: t('order.project'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged,
      width: 120
    },
    {
      field: 'order_number',
      title: t('order.OrderNum'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
      , sortable: true
    },
    {
      field: 'technology_number',
      title: t('processCard.technologyNumber'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
      , sortable: true
    },
    {
      field: 'building_number',
      title: t('processCard.buildingNumber'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
      , sortable: true
    },
    {
      field: 'width',
      title: t('order.width'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 100
    },
    {
      field: 'height',
      title: t('order.height'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 100
    },
    {
      field: 'glassNumber',
      title: t('reportingWorks.glassNumber'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 100
    },
    {field: 'quantity', title: t('order.quantity'), width: 90},
    {field: 'total_area', title: t('order.area'), width: 90},
    {
      field: 'product_name', title: t('order.product'), width: 120,
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {
      field: 'glass_child',
      title: t('reportingWorks.glassChild'),
      width: 120,
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged
    },
    {field: 'founder', title: t('processCard.founder'), width: 120},
    {field: 'splitFrame_time', title: t('processCard.splitFrameTime'), width: 120},
    {
      field: 'process', title: t('craft.process'), filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 160
    },
    {
      field: 'print_status',
      title: t('processCard.printStatus'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
      filterMethod: filterChanged, width: 120
    },
  ],//表头按钮
//表单验证
  editRules: {
    printQuantity: [
      {
        validator ({ row }) {
          const regex = /^[0-9]\d*$/
          const printQuantity =
              (row.printQuantity === undefined || row.printQuantity===null || row.printQuantity==='') ? 0 : row.printQuantity
           if(!regex.test(printQuantity)){
             return new Error(t('reportingWorks.enterIntegerGreaterThanEqualTo'))
          }
          else if(row.quantity<printQuantity){
            return new Error(t('processCard.printWarn1'))
          }
        }
      }
    ]
  },
  toolbarConfig: {
    buttons: [
      {code: 'print', name: t('processCard.print'), status: 'primary'},
      {code: 'customLabel', name: t('processCard.customLabelPrinting'), status: 'primary'},
      {code: 'printLabel', name: t('processCard.labelPrinting'), status: 'primary'},
      {code: 'printLabel2', name: t('processCard.labelPrinting2'), status: 'primary'},
      {code: 'printLabel3', name: t('processCard.finishedProductPrinting2'), status: 'primary'},
      {code: 'printTest', name: t('processCard.editablePrinting'), status: 'primary'},
      {code: 'invertSelection', name: t('processCard.invertSelection'), status: 'primary'},
      // {code: 'printLike', name: "同配置打印", status: 'primary'},
    ],
    // import: false,
    // export: true,
    //print: true,
    zoom: true,
    custom: true
  },
  data: null,//表格数据
  //脚部求和
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return t('basicData.total')
        }
        const List = ["quantity", 'total_area',]
        if (List.includes(column.field)) {
          return footSum(data, column.field)
        }
        return ''
      })
    ]
  },
})
const gridEvents = {
  async toolbarButtonClick({code}) {
    const $grid = xGrid.value
    selectRecords = $grid.getCheckboxRecords()
    // selectRecords.forEach(obj => {
    //   delete obj.print_status;
    // });
    let type = tag.value.name
    let faceOrientation = stateValue.value
    let lableTypes = lableType.value
    let lableTitle = lableType.text
    if ($grid) {
      switch (code) {
        //打印流程卡
        case 'print': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            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 + "|"
            }
          }
          printRow.value.list = JSON.stringify(selectRecords)
          printRow.value.printMergeVal = printMerge.value
          printRow.value.like = null
          // router.push({path: '/main/processCard/printProcess', query: {printList: JSON.stringify(selectRecords),printMerge:printMergeVal}})
          dialogTableVisible.value = true
          break
        }
        //标签打印 常州
        case 'printLabel': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            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 + "|"
            }
          }
          router.push({
            path: '/main/processCard/PrintLabel',
            query: {printList: JSON.stringify(selectRecords), printType: 2}
          })
          break
        }
        //标签打印2 常州
        case 'printLabel2': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            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 + "|"
            }
          }
          router.push({
            path: '/main/processCard/PrintCustomLabelSemi2',
            query: {printList: JSON.stringify(selectRecords), printType: 2}
          })
          break
        }
        case 'sort': {
          const $table = xGridDetail.value
          let data = $table.getTableData().fullData
          let flowCardData = ref({
            flowCard: data,
          })
          for (let i = 0; i < flowCardData.value.flowCard.length; i++) {
            const regex = /^[1-9]\d*$/
            if (!regex.test(flowCardData.value.flowCard[i].sort)) {
              ElMessage.warning(t('basicData.msg.greater0'))
              return; // 如果有一个不是整数
            }
          }
          request.post("/processCard/printSort", flowCardData.value).then((res) => {
            if (res.code == 200) {
              ElMessage.success(t('processCard.sortingSuccessful'))
              router.push({
                path: '/main/processCard/PrintFlowCard',
                query: {orderId: orderId, random: Math.random()}
              })
              //location.reload();
            } else {
              ElMessage.warning(res.msg)
            }
          })
          break
        }
        //自定义成品标签打印
        case 'customLabel': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            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 + "|"
            }
          }
          //成品标签1
          if (lableTypes == 1) {
            labelRow.value.list = JSON.stringify(selectRecords)
            labelRow.value.faceOrientation = faceOrientation
            labelRow.value.type = type
            labelRow.value.lableType = lableTypes
            lastList.value = []
            if (company.label === 1) {
              dialogTableVisibleLabel.value = true
            }
            //常州项目
            else if (company.label === 2) {
              router.push({
                path: '/main/processCard/PrintCustomLabelCZ',
                query: {
                  type: type,
                  faceOrientation: faceOrientation,
                  lableType: lableTypes,
                  printList: JSON.stringify(selectRecords),
                  printType: 2
                }
              })
            }
          }
          //成品标签2
          else if (lableTypes == 2) {
            labelRow.value.list = JSON.stringify(selectRecords)
            labelRow.value.faceOrientation = faceOrientation
            labelRow.value.type = type
            labelRow.value.lableType = lableTypes
            lastList.value = []
            if (company.label === 1) {
              dialogTableVisibleCustomLabel.value = true
            }
            //常州项目
            else if (company.label === 2) {
              router.push({
                path: '/main/processCard/PrintCustomLabelSemiCZ',
                query: {
                  type: type,
                  faceOrientation: faceOrientation,
                  lableType: lableTypes,
                  printList: JSON.stringify(selectRecords),
                  printType: 2
                }
              })
            }
          }
          //成品标签3
          else if (lableTypes == 3) {
            router.push({
              path: '/main/processCard/PrintLabel1',
              query: {
                type: type,
                faceOrientation: faceOrientation,
                lableType: lableTypes,
                printList: JSON.stringify(selectRecords),
                printType: 2
              }
            })
          }
          break
        }
        case 'printLike': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          if (printMerge.value === null || printMerge.value === '') {
            ElMessage.warning('请填入需要合并的层')
            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 + "|"
            }
          }
          printRow.value.list = JSON.stringify(selectRecords)
          printRow.value.printMergeVal = printMerge.value
          printRow.value.like = "1"
          // router.push({path: '/main/processCard/printProcess', query: {printList: JSON.stringify(selectRecords),printMerge:printMergeVal}})
          dialogTableVisible.value = true
          break
        }
        case 'printTest': {
          const errMap = await $grid.validate(true)
          if (errMap) {
            ElMessage.error(t('basicData.msg.checkoutLose'))
            return
          }
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            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 + "|"
            }
          }
          labelRow.value.landingSequence = landingSequence
          labelRow.value.list = JSON.stringify(selectRecords)
          labelRow.value.faceOrientation = faceOrientation
          labelRow.value.type = type
          labelRow.value.lableType = lableTypes
          titleStyleVisible.value = true
          break
        }
        case 'printLabel3': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          if (tag.value.name === null || tag.value.name === '' || tag.value.name === 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 + "|"
            }
          }
          labelRow.value.list = JSON.stringify(selectRecords)
          labelRow.value.faceOrientation = faceOrientation
          labelRow.value.type = tag.value.name
          labelRow.value.lableType = lableTypes
          labelRow.value.dataType = 1
          let columnsLabel = company.printLabel.columnsLabel
          if (columnsLabel == 1) {
            dialogTableVisibleLabelXJTwo.value = true
          } else {
            dialogTableVisibleLabelXJ.value = true
          }
          break
        }
        case 'invertSelection': {
          if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) {
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          let tableData = $grid.getTableData().fullData;
          // 假设你的 Vxe Table 引用为 xTable
          const tableRef = $grid;
          // 获取当前选中的记录
          //const selectedRecords = tableRef.getCheckboxRecords();
          const allRecords = $grid.getTableData().fullData; // 替换为实际的数据源
          allRecords.forEach(record => {
            tableRef.toggleCheckboxRow(record);
          });
        }
      }
    }
  },
}
const openedTable = () => {
  let detail = ref(produceDetailList.value)
  xGridDetail.value.reloadData(detail.value)
  addListener(xGridDetail.value, detailGridOptions)
}
const hideButton = () => {
  gridOptions.toolbarConfig.buttons = gridOptions.toolbarConfig.buttons.filter(button => {
    // 如果 type 不为空时,隐藏 print 按钮
    if (btnType == 1 && button.code === 'print') {
      return false;  // 隐藏 print 按钮
    }
    // 根据 hidePrintLabels 的值判断是否隐藏 printLabel、printLabel2 和 customLabel
    if (hidePrintLabels == 'true') {
      return button.code !== 'printLabel' && button.code !== 'printLabel2' && button.code !== 'customLabel';
    } else {
      // 如果 hidePrintLabels 不是 'true',则隐藏 printLike、printLabel3 和 printTest
      return button.code !== 'printLike' && button.code !== 'printLabel3' && button.code !== 'printTest';
    }
    // 默认返回 true,表示保留按钮
    return true;
  });
};
// 监听打印次数事件
const printNumber = () => {
  selectRecordsData.value.printList = selectRecords
  request.post(`/tagStyle/updatePrintNumber`, selectRecordsData.value).then((res) => {
    if (res.code == 200 && res.data === true) {
    } else {
      ElMessage.warning(t('basicData.msg.saveFail'))
    }
  })
}
function onlandingSequenceChange(checked) {
  landingSequence.value = checked ? 0 : 1
}
</script>
<template>
  <div  style="width: 100%;height: 100%">
    <div class="head">
      <el-input v-show="isVisible" v-model="printMerge" :placeholder="$t('processCard.mergePrinting')" clearable
                style="width: 90px"></el-input>
      &nbsp;
      <label>{{ $t('processCard.labelStyle') }}:</label>
      <el-select v-model="tag" :placeholder="$t('processCard.pleaseSelect')" style="width: 140px" @change="changeTag">
        <el-option
            v-for="(tag,index) in tags"
            :key="index"
            :label="tag.name"
            :value="tag"
        />
      </el-select>
      &nbsp;
      <el-select v-model="lableType" :placeholder="lableTypeOptions[0].label" class="m-2" 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" v-show="false" :placeholder="$t('processCard.pleaseSelect')" allow-create class="m-2" clearable
                 filterable style="width: 140px">
        <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      &nbsp;
      <el-checkbox
          :model-value="landingSequence === 0"
          @change="onlandingSequenceChange"
      >
        {{ t('processCard.landingSequence') }}
      </el-checkbox>
    </div>
    <div class="main-table">
      <vxe-grid
          ref="xGrid"
          :checkbox-config="{labelField: 'name', highlight: true, range: true}"
          :column-config="{resizable: true}"
          :data="tableData"
          :row-config="{isCurrent: true, isHover: true}"
          class="mytable-scrollbar"
          height="100%"
          v-bind="gridOptions"
          v-on="gridEvents">
        >
        <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined ">
              <span style="font-weight: bold">{{ item.title + ':  ' }}</span>
              <span v-if="hasDecimal(item.field)">{{ row[item.field.split('.')[0]][item.field.split('.')[1]] }}</span>
              <span v-else>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>
        <!--左边固定显示的插槽-->
        <!--      v-if="userStore.user.permissions.indexOf('SelectProductionBasicData.edit') > -1"-->
        <template #button_slot="{ row }">
          <el-button link
                     size="small"
                     type="primary"
                     @click="getTableRow(row,'edit')">
            {{ $t('basicData.edit') }}
          </el-button>
        </template>
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input v-model="option.data"
                     type="text"
                     @input="changeFilterEvent($event, option, $panel)"
                     @keyup.enter.native="$panel.confirmFilter()"/>
            </div>
          </div>
        </template>
      </vxe-grid>
    </div>
    <!--  流程卡打印  -->
    <el-dialog
        id="sizePrintCalrd"
        v-model="dialogTableVisible"
        :title="$t('processCard.print')"
        destroy-on-close
        style="width: 75%;height:75% ">
      <template #header="{ close, titleId, titleClass }">
        <el-button v-print="printContent" :icon="Printer" circle />
      </template>
      <print-process
          id="child"
          :printLike="printRow.like"
          :printList="printRow.list"
          :printMerge="printRow.printMergeVal"
          style="width: 100%;height: 100%"/>
    </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 v-print="printContentLabel" :icon="Printer" circle @click="printNumber"/>
      </template>
      <print-custom-label id="childLabel"
                          :faceOrientation="labelRow.faceOrientation"
                          :lableType="labelRow.lableType"
                          :lastList='lastList'
                          :list="labelRow.list"
                          :type="labelRow.type"
                          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 @click="printNumber"/>
      </template>
      <print-custom-label-semi id="childLabelSemi"
                               :faceOrientation="labelRow.faceOrientation"
                               :lableType="labelRow.lableType"
                               :list="labelRow.list"
                               :type="labelRow.type"
                               style="width: 100%;height: 100%"/>
    </el-dialog>
    <!--    排序-->
    <el-dialog
        id="sizeCheck"
        v-model="printVisible"
        :title="$t('processCard.processCardDetails')"
        destroy-on-close
        style="width: 80%;height:75% ">
      <sort-detail id="child" :process="editRow.process" :processId="editRow.processId"
                   :technologyNumber="editRow.technologyNumber"/>
    </el-dialog>
    <!--   标签样式    -->
    <el-dialog
        id="titleStyle"
        v-model="titleStyleVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="$t('processCard.labelStyle')"
        destroy-on-close
        style="width: 90%;height:91%;margin-top: 3vh ">
      <!--      <tag-style style="width: 100%;height: 100%"/>-->
      <tag-style-designer :faceOrientation="labelRow.faceOrientation"
                          :lableType="labelRow.lableType"
                          :list="labelRow.list"
                          :type="labelRow.type"
                          :landingSequence="labelRow.landingSequence"
                          style="width: 100%;height: 100%"/>
    </el-dialog>
    <!--    成品标签两列-->
    <el-dialog
        id="sizeCustom"
        v-model="dialogTableVisibleLabelXJ"
        :title="$t('processCard.printLabel')"
        destroy-on-close
        style="width: 80%;height:75% ">
      <template #header="{ close, titleId, titleClass }">
        <el-tooltip
            class="box-item"
            effect="dark"
            :content="$t('processCard.yesTitle')"
            placement="top"
        >
          <el-button :icon="Printer" circle @click="printOrder(1)"/>
        </el-tooltip>
        <el-tooltip
            class="box-item"
            effect="dark"
            :content="$t('processCard.noTitle')"
            placement="top"
        >
          <el-button @click="printOrder(3)">
            <i class="vxe-icon-print"></i>
          </el-button>
        </el-tooltip>
      </template>
      <print-custom-label-x-j id="childLabel"
                              :faceOrientation="labelRow.faceOrientation"
                              :lableType="labelRow.lableType"
                              :list="labelRow.list"
                              :lastList='lastList'
                              :type="labelRow.type"
                              style="width: 100%;height: 100%"/>
    </el-dialog>
    <!--    成品标签两列新疆-->
    <el-dialog
        id="sizeCustom"
        v-model="dialogTableVisibleLabelXJTwo"
        :title="$t('processCard.printLabel')"
        destroy-on-close
        style="width: 80%;height:75% ">
      <template #header="{ close, titleId, titleClass }">
        <el-button v-print="printContentLabel" :icon="Printer" circle/>
      </template>
      <print-custom-label-x-j-two id="childLabel"
                                  :dataType="labelRow.dataType"
                                  :faceOrientation="labelRow.faceOrientation"
                                  :lableType="labelRow.lableType"
                                  :list="labelRow.list"
                                  :type="labelRow.type"
                                  style="width: 100%;height: 100%"/>
    </el-dialog>
  </div>
</template>
<style scoped>
.main-div-customer {
  width: 99%;
  height: 92%;
}
.head{
  width: 100%;
  height: 35px;
}
.main-table{
  width: 100%;
  height: calc(100% - 35px);
}
:deep(#sizeCheck .el-dialog__body) {
  height: 90%;
  width: 100%;
  overflow-y: auto;
}
:deep(#sizePrintCalrd .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
:deep(#sizeCustom .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
:deep(#sizeCustomSemi .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
:deep(#titleStyle .el-dialog__body) {
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
</style>