12 changed files with 1093 additions and 40 deletions
-
197package-lock.json
-
1package.json
-
3src/api/category/categoty.js
-
1src/api/label/labelFormatUserDefault.js
-
4src/api/label/printRollLabelRecord.js
-
77src/printFormat/roll_label.js
-
51src/views/modules/label/QrCode.vue
-
2src/views/modules/label/format.vue
-
150src/views/modules/label/printer.vue
-
609src/views/modules/label/roll.vue
-
1src/views/modules/label/userDefault.vue
-
37src/views/modules/part/external.vue
@ -0,0 +1,3 @@ |
|||||
|
import {createAPI} from '../../utils/httpRequest' |
||||
|
|
||||
|
export const getCategoryList = (data) => createAPI('part/category/list','post', data) |
||||
@ -0,0 +1,4 @@ |
|||||
|
import {createAPI} from '../../utils/httpRequest' |
||||
|
|
||||
|
export const getPrintRollLabelRecordPage = (data,no,size) => createAPI(`/label/print/roll/record/page/${no}/${size}`,'post',data) |
||||
|
export const savePrintRollLabelRecord = (data) => createAPI(`/label/print/roll/record/save`,'post',data) |
||||
77
src/printFormat/roll_label.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<div v-if="false"> |
||||
|
<!-- 你可以选择是否需要展示 base64 编码字符串 --> |
||||
|
<div v-for="(code, index) in qrCodesBase64" :key="index"> |
||||
|
<!-- <p>{{ code }}</p>--> |
||||
|
<img :src="code"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import QRCode from 'qrcode' |
||||
|
|
||||
|
export default { |
||||
|
name: 'QrCode', |
||||
|
data() { |
||||
|
return { |
||||
|
texts: ['text1', 'text2', 'text3'], // 你要生成二维码的文本数组 |
||||
|
qrCodesBase64: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init(contextList){ |
||||
|
this.texts = contextList |
||||
|
this.generateQRCodesSync(this.texts) |
||||
|
return this.qrCodesBase64 |
||||
|
}, |
||||
|
generateQRCodeSync(text) { |
||||
|
let base64 = '' |
||||
|
QRCode.toDataURL(text, { errorCorrectionLevel: 'H' }, (err, url) => { |
||||
|
if (err) { |
||||
|
console.error(err) |
||||
|
return |
||||
|
} |
||||
|
base64 = url |
||||
|
}) |
||||
|
return base64 |
||||
|
}, |
||||
|
generateQRCodesSync(texts) { |
||||
|
this.qrCodesBase64 = texts.map(text => this.generateQRCodeSync(text)) |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.generateQRCodesSync(this.texts) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/* 你的样式 */ |
||||
|
</style> |
||||
@ -0,0 +1,609 @@ |
|||||
|
<script> |
||||
|
import ExternalPart from '../part/external.vue' |
||||
|
import CustomerInfo from '../customer/info.vue' |
||||
|
import {getPrintLabelRecordList, getPrintLabelRecordPage} from '../../../api/label/printLabelRecord' |
||||
|
import { printAlphaHardTagLabel} from '../../../printFormat/alphaHardTagPrintFormat' |
||||
|
import SelectionTable from '../../common/selectionTable.vue' |
||||
|
import {getExternalPartPicturePartList} from '../../../api/part/externalPartPicture' |
||||
|
import {printAntennaLabel} from '../../../printFormat/antenna' |
||||
|
import {printRF_RFIDLabel} from '../../../printFormat/RF_RFID' |
||||
|
import { |
||||
|
getRollPrinterNameList, |
||||
|
selectLabelFormatUserDefaultPrintListByUserId |
||||
|
} from '../../../api/label/labelFormatUserDefault' |
||||
|
import getLodop from '@/utils/LodopFuncs.js' |
||||
|
import {getTableDefaultListLanguage, getTableUserListLanguage} from '../../../api/table' |
||||
|
import {getPrintRollLabelRecordPage} from '../../../api/label/printRollLabelRecord' |
||||
|
import QrCode from './QrCode.vue' |
||||
|
import {print_roll_label} from '../../../printFormat/roll_label' |
||||
|
|
||||
|
const printRecord = { |
||||
|
customerNo: '', |
||||
|
customerName: '', |
||||
|
partNo: '', |
||||
|
partDesc: '', |
||||
|
startDate: '', |
||||
|
endDate: '' |
||||
|
} |
||||
|
export default { |
||||
|
name: 'roll', |
||||
|
components: {QrCode, SelectionTable, CustomerInfo, ExternalPart}, |
||||
|
props: { |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 700 |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
printerSetupList:[], |
||||
|
customerVisible: false, |
||||
|
partVisible: false, |
||||
|
printRecord: { |
||||
|
...printRecord |
||||
|
}, |
||||
|
no:1, |
||||
|
size: 50, |
||||
|
total: 0, |
||||
|
printLabelRecordList: [], |
||||
|
selectionPrintLabelRecordList: [], |
||||
|
columnList: [ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableRollNo', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'rollNo', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Roll No', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableCustomerNo', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'customerNo', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Customer No', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 100 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableCustomerName', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'customerName', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Customer Name', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TablePartNo', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'partNo', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Part No', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TablePartDesc', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'partDesc', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Part Description', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableQtyPerRoll', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'qtyPerRoll', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Qty Per Roll', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableTotalShipQty', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'totalShipQty', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Total Ship Qty', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableCartonCount', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'cartonCount', |
||||
|
headerAlign: 'center', |
||||
|
align: 'right', |
||||
|
columnLabel: 'Carton Count', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableSerialNumber', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'serialNumber', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Serial Number', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableManufacturerNo', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'manufacturerNo', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Manufacturer', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableMoldCode', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'moldCode', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Mold Code', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableManufacturerDate', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'manufacturerDate', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Manufacturer Date', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableCreateBy', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'createBy', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'Created By', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 30005, |
||||
|
serialNumber: '30005TableCreateTime', |
||||
|
tableId: '30005Table', |
||||
|
tableName: '发货标签记录表', |
||||
|
columnProp: 'createTime', |
||||
|
headerAlign: 'center', |
||||
|
align: 'left', |
||||
|
columnLabel: 'CreateTime', |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 140 |
||||
|
} |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
"printRecord.customerNo"(newVal, oldVal){ |
||||
|
this.printRecord.customerNo = newVal.toUpperCase(); |
||||
|
}, |
||||
|
"printRecord.partNo"(newVal, oldVal){ |
||||
|
this.printRecord.partNo = newVal.toUpperCase(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handlePartRowClick (row) { |
||||
|
this.printRecord.partNo = row.partNo |
||||
|
this.partVisible = false |
||||
|
}, |
||||
|
handleCustomerRowClick (row) { |
||||
|
this.printRecord.customerNo = row.customerNo |
||||
|
this.customerVisible = false |
||||
|
}, |
||||
|
getPrintLabelRecordList () { |
||||
|
let params = { |
||||
|
...this.printRecord, |
||||
|
site: this.$store.state.user.site, |
||||
|
} |
||||
|
getPrintRollLabelRecordPage(params,this.no,this.size).then(({data}) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.printLabelRecordList = data.rows |
||||
|
this.total = data.total |
||||
|
} else { |
||||
|
this.$message.warning(data.message) |
||||
|
} |
||||
|
}).catch((error) => { |
||||
|
this.$message.error(error.message) |
||||
|
}) |
||||
|
}, |
||||
|
handleSelectionChange (val) { |
||||
|
this.selectionPrintLabelRecordList = val |
||||
|
}, |
||||
|
async handlePrintLabel () { |
||||
|
if (this.selectionPrintLabelRecordList.length === 0) { |
||||
|
this.$message.warning('please select record') |
||||
|
return |
||||
|
} |
||||
|
let params = this.selectionPrintLabelRecordList.map((item) => { |
||||
|
return { |
||||
|
site:item.site, |
||||
|
partNo:item.partNo, |
||||
|
customerNo:item.customerNo, |
||||
|
username:this.$store.state.user.name, |
||||
|
rollNo:item.rollNo, |
||||
|
category:item.category, |
||||
|
} |
||||
|
}) |
||||
|
let {data} = await getRollPrinterNameList(params) |
||||
|
if (data && data.code === 0){ |
||||
|
for (let i = 0; i < this.selectionPrintLabelRecordList.length; i++) { |
||||
|
let record = this.selectionPrintLabelRecordList[i] |
||||
|
let printerNameList = data.rows[i].filter((item)=> item.labelType === 'Roll Label') |
||||
|
let arr = [] |
||||
|
arr.push(record) |
||||
|
for (let j = 0; j < printerNameList.length; j++) { |
||||
|
arr = arr.map((item)=>{ |
||||
|
return { |
||||
|
qrCode: `(00)${item.partNo}(01)${item.qtyPerRoll}(02)${item.umName}(03)${item.manufacturerDate}(04)${item.serialNumber? item.serialNumber : ''}(05)${item.manufacturerNo? item.manufacturerNo : ''}(06)${item.moldCode? item.moldCode : ''}(07)(08)${item.rollNo}`, |
||||
|
ref: item.partNo, |
||||
|
rev: item.rev, |
||||
|
qty: item.qtyPerRoll, |
||||
|
uom: item.umName, |
||||
|
desc: item.partDesc, |
||||
|
date: item.manufacturerDate, |
||||
|
manufacturer: item.manufacturerNo, |
||||
|
moldCode: item.moldCode, |
||||
|
rollNo: item.rollNo, |
||||
|
sn: item.serialNumber, |
||||
|
} |
||||
|
}) |
||||
|
let qrCodeList = this.$refs.qrCode.init(arr.map((item)=>{ |
||||
|
return item.qrCode |
||||
|
})) |
||||
|
for (let i = 0; i < qrCodeList.length; i++) { |
||||
|
arr[i].qrCode = qrCodeList[i] |
||||
|
} |
||||
|
print_roll_label(arr,printerNameList[j].defaultPrinterName) |
||||
|
} |
||||
|
} |
||||
|
}else { |
||||
|
this.$message.warning(data.msg) |
||||
|
} |
||||
|
}, |
||||
|
printLabel(pictureList,formatList){ |
||||
|
let prints = this.selectionPrintLabelRecordList.map((item) => { |
||||
|
return { |
||||
|
qrCode: `(00)${item.partNo}(01)${item.qtyPerCarton}(02)${item.umName}(03)${item.manufacturerDate}(04)${item.serialNumber}(05)${item.manufacturerNo}(06)${item.moldCode}(07)${item.boxNo}(08)`, |
||||
|
ref: item.partNo, |
||||
|
qty: item.qtyPerCarton, |
||||
|
productRev: item.rev, |
||||
|
uom: item.umName, |
||||
|
desc: item.partDesc, |
||||
|
rollCount: item.qtyPerRoll, |
||||
|
date: item.manufacturerDate, |
||||
|
manufacturer: item.manufacturerNo, |
||||
|
moldCode: item.moldCode, |
||||
|
sn: item.serialNumber, |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
let notFound = []; |
||||
|
for (let i = 0; i < prints.length; i++) { |
||||
|
let print = prints[i] |
||||
|
let dataList = [] |
||||
|
dataList.push(print); |
||||
|
// 获取模板数量 |
||||
|
let format = formatList[i] |
||||
|
let base64List = pictureList[i].map((item)=>{return {icon:item}}) |
||||
|
|
||||
|
for (let formatElement of format) { |
||||
|
let str = formatElement.split('(type)') |
||||
|
if (!this.printerSetupList.includes(str[0])) { |
||||
|
if (notFound.includes(str[0])){ |
||||
|
continue |
||||
|
} |
||||
|
notFound.push(str[0]) |
||||
|
continue |
||||
|
} |
||||
|
if (str[1] === 'Alpha/Hard Tag'){ |
||||
|
printAlphaHardTagLabel(dataList,base64List,str[0]) |
||||
|
}else if (str[1] === 'Hardware(Antenna)'){ |
||||
|
printAntennaLabel(dataList,base64List,str[0]) |
||||
|
}else if (str[1] === 'RF' || str[1] === 'RFID'){ |
||||
|
printRF_RFIDLabel(dataList,base64List,str[0]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.$refs.table.clearSelection() |
||||
|
if (notFound.length > 0){ |
||||
|
this.$message.warning(`The printer ${notFound.join(',')} is not found`) |
||||
|
}else { |
||||
|
this.$message.success("Print label success") |
||||
|
} |
||||
|
}, |
||||
|
handleSizeChange(val){ |
||||
|
this.size = val |
||||
|
this.getPrintLabelRecordList() |
||||
|
}, |
||||
|
handleCurrentChange(val){ |
||||
|
this.no = val |
||||
|
this.getPrintLabelRecordList() |
||||
|
}, |
||||
|
async getTableUserColumn (tableId, columnId) { |
||||
|
let queryTableUser = { |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: this.$route.meta.menuId, |
||||
|
tableId: tableId, |
||||
|
status: true, |
||||
|
languageCode: this.$i18n.locale |
||||
|
} |
||||
|
await getTableUserListLanguage(queryTableUser).then(({data}) => { |
||||
|
if (data.rows.length > 0) { |
||||
|
this.caseTable(data.rows,columnId) |
||||
|
} else { |
||||
|
this.getColumnList(tableId, columnId) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 获取 tableDefault 列 |
||||
|
async getColumnList (tableId, columnId) { |
||||
|
let queryTable = { |
||||
|
functionId: this.$route.meta.menuId, |
||||
|
tableId: tableId, |
||||
|
languageCode: this.$i18n.locale |
||||
|
} |
||||
|
await getTableDefaultListLanguage(queryTable).then(({data}) => { |
||||
|
if (!data.rows.length === 0) { |
||||
|
this.caseTable(data.rows,columnId) |
||||
|
} else { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
caseTable(list,columnId){ |
||||
|
if (list.length > 0){ |
||||
|
switch (columnId) { |
||||
|
case 1: |
||||
|
this.columnList = list |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted () { |
||||
|
const lodop = getLodop() |
||||
|
for (let i = 0; i < lodop.GET_PRINTER_COUNT(); i++) { |
||||
|
this.printerSetupList.push(lodop.GET_PRINTER_NAME(i)) |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
// this.getPrintLabelRecordList() |
||||
|
this.getTableUserColumn('30006Table',1) |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div style="min-width: 600px;max-width: 1000px"> |
||||
|
<el-form :model="printRecord" label-position="top"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="Customer No"> |
||||
|
<span slot="label" style="cursor:pointer;" @click="customerVisible=true"><a |
||||
|
herf="#">Customer No</a></span> |
||||
|
<el-input v-model="printRecord.customerNo" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="7"> |
||||
|
<el-form-item label="Customer Name"> |
||||
|
<el-input v-model="printRecord.customerName" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-row> |
||||
|
<el-col :span="11"> |
||||
|
<el-form-item label="Created Time"> |
||||
|
<el-date-picker |
||||
|
v-model="printRecord.startDate" |
||||
|
style="width: 100%;" |
||||
|
type="date" |
||||
|
placeholder=" "> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="2"> |
||||
|
<el-form-item label=" "> |
||||
|
<div style="text-align: center"><i class="el-icon-right"></i></div> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="11"> |
||||
|
<el-form-item label=" "> |
||||
|
<el-date-picker |
||||
|
v-model="printRecord.endDate" |
||||
|
style="width: 100%;" |
||||
|
type="date" |
||||
|
placeholder=" "> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="Part No"> |
||||
|
<span slot="label" style="cursor:pointer;" @click="partVisible=true"><a herf="#">Part No</a></span> |
||||
|
<el-input v-model="printRecord.partNo" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="7"> |
||||
|
<el-form-item label="Part Description"> |
||||
|
<el-input v-model="printRecord.partDesc" clearable></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="6"> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button type="primary" style="width: 60px" @click="getPrintLabelRecordList">Query</el-button> |
||||
|
<el-button type="primary" style="width: 60px" @click="handlePrintLabel">Print</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="printLabelRecordList" ref="table" @selection-change="handleSelectionChange" |
||||
|
style="width: 100%;margin-top: 10px" border :height="height"> |
||||
|
<el-table-column type="selection" width="55" fixed="left" align="center"></el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columnList" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed===''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
||||
|
style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div> |
||||
|
<selection-table :size="selectionPrintLabelRecordList.length" :total="total"></selection-table> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="no" |
||||
|
:page-sizes="[50,100, 200, 300, 400]" |
||||
|
:page-size="size" |
||||
|
layout="sizes, prev, pager, next" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
<qr-code ref="qrCode"></qr-code> |
||||
|
<el-dialog v-drag title="Select Part" :close-on-click-modal="false" :visible.sync="partVisible"> |
||||
|
<external-part :height="450" :of-components="true" @rowClick="handlePartRowClick"></external-part> |
||||
|
<div slot="footer" style="text-align: center; margin-top: 10px"></div> |
||||
|
</el-dialog> |
||||
|
<el-dialog v-drag title="Select Customer" :close-on-click-modal="false" :visible.sync="customerVisible"> |
||||
|
<customer-info :height="450" :of-components="true" @rowClick="handleCustomerRowClick"></customer-info> |
||||
|
<div slot="footer" style="text-align: center; margin-top: 10px"></div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue