|
import QRCode from 'qrcode'; // 二维码生成库
|
import { ElDialog, ElButton, ElMessage ,ElImage,ElMessageBox } from 'element-plus';// 引入ElMessage，解决提示无反应
|
import { h,createVNode, render } from 'vue';
|
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
|
let extension = {
|
components: {
|
//查询界面扩展组件
|
gridHeader: '',
|
gridBody: '',
|
gridFooter: '',
|
//新建、编辑弹出框扩展组件
|
modelHeader: '',
|
modelBody: '',
|
modelFooter: ''
|
},
|
tableAction: '',
|
buttons: { view: [{
|
name: '生成二维码',
|
type: 'success',
|
value: '生成二维码',
|
onClick: async function () {
|
// 1. 校验选中行
|
const selectedRows = this.$refs.table.getSelected();
|
if (selectedRows.length === 0) {
|
ElMessage.warning('请先选择一行数据');
|
return;
|
}
|
if (selectedRows.length > 1) {
|
ElMessage.warning('仅支持选择一行数据生成二维码');
|
return;
|
}
|
|
// 2. 获取核心物料字段（料号、品名、规格等）
|
const { materielCode, materialName, specification, lotNo, batchNo, date } = selectedRows[0];
|
if (!materielCode) {
|
ElMessage.error('选中数据缺少料号信息');
|
return;
|
}
|
|
// 3. 生成二维码（内容为料号，可根据需求拼接更多信息）
|
let qrCodeUrl = '';
|
try {
|
qrCodeUrl = await QRCode.toDataURL(materielCode, {
|
width: 150, // 适配标识卡尺寸
|
margin: 1
|
});
|
} catch (err) {
|
ElMessage.error('二维码生成失败，请重试');
|
console.error('二维码生成错误：', err);
|
return;
|
}
|
|
// 4. 创建弹窗挂载节点
|
const mountNode = document.createElement('div');
|
document.body.appendChild(mountNode);
|
|
// 打印专用样式
|
const addPrintStyle = () => {
|
const style = document.createElement('style');
|
style.id = 'qr-print-style';
|
style.textContent = `
|
@media print {
|
body > *:not(.print-container) { display: none !important; }
|
.print-container {
|
position: fixed !important;
|
top: 0 !important;
|
left: 0 !important;
|
width: 100% !important;
|
height: 100% !important;
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
padding: 0 !important;
|
margin: 0 !important;
|
}
|
|
.material-card {
|
padding: 5mm; /* 使用毫米单位更适配打印尺寸 */
|
font-size: 2mm; /* 按比例缩小字体 */
|
position: relative;
|
width: 80mm; /* 略小于纸张宽度，留边距 */
|
height: 60mm; /* 略小于纸张高度，留边距 */
|
box-sizing: border-box; /* 确保padding不影响整体尺寸 */
|
}
|
|
.card-title {
|
text-align: center;
|
font-size: 2mm; /* 标题略大 */
|
font-weight: bold;
|
margin-top: 5mm; /* 减小顶部间距 */
|
margin-right: 20mm; /* 适配缩小的二维码位置 */
|
}
|
|
.card-fields {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
gap:1.5mm; /* 缩小间距 */
|
margin-top: 8mm; /* 调整字段容器位置 */
|
}
|
|
.field-item {
|
width: 48%; /* 保持两列布局 */
|
line-height: 1.3; /* 紧凑行高 */
|
}
|
|
.qr-wrapper {
|
position: absolute;
|
top: 5mm; /* 调整二维码顶部位置 */
|
right: 3mm; /* 调整二维码右侧位置 */
|
width: 15mm; /* 二维码尺寸适配小卡片 */
|
height: 15mm;
|
}
|
|
.qr-wrapper img {
|
width: 100% !important; /* 确保二维码填充满容器 */
|
height: 100% !important;
|
object-fit: contain;
|
}
|
}
|
`;
|
document.head.appendChild(style);
|
return style;
|
};
|
|
// 打印函数
|
const printQrCode = () => {
|
const printContainer = document.createElement('div');
|
printContainer.className = 'print-container';
|
printContainer.style = 'position:fixed; top:-9999px; left:-9999px;';
|
document.body.appendChild(printContainer);
|
|
// 构建物料标识卡HTML结构
|
printContainer.innerHTML = `
|
<div class="material-card">
|
<div class="card-title">卓力能物料标识卡（小包）</div>
|
<div class="card-fields">
|
<div class="field-item">料号：${materielCode}</div>
|
<div class="field-item">供应商编码：</div>
|
<div class="field-item">品名：${materialName || '无'}</div>
|
<div class="field-item">采购单号：</div>
|
<div class="field-item">规格：${specification || '无'}</div>
|
<div class="field-item">数量/总数：0PCS/0PCS</div>
|
<div class="field-item">批号：${lotNo || '无'}</div>
|
<div class="field-item">批次：${batchNo || '无'}</div>
|
<div class="field-item">厂区：卓力能三厂</div>
|
<div class="field-item">日期：${date || '无'}</div>
|
</div>
|
<div class="qr-wrapper">
|
<img src="${qrCodeUrl}" alt="物料二维码" />
|
</div>
|
</div>
|
`;
|
|
const printStyle = addPrintStyle();
|
const cleanUp = () => {
|
document.body.removeChild(printContainer);
|
document.head.removeChild(printStyle);
|
window.removeEventListener('afterprint', cleanUp);
|
};
|
window.addEventListener('afterprint', cleanUp, { once: true });
|
window.print();
|
};
|
|
// 弹窗预览组件
|
const vnode = createVNode(ElDialog, {
|
title: '物料标识卡及二维码',
|
width: '500px',
|
modelValue: true,
|
style: { maxHeight: '500px', overflowY: 'auto' },
|
appendToBody: true,
|
'onUpdate:modelValue': (isVisible) => {
|
if (!isVisible) {
|
const printStyle = document.getElementById('qr-print-style');
|
printStyle && document.head.removeChild(printStyle);
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
}
|
}
|
}, {
|
default: () => [
|
h('div', { style: { padding: '20px' } }, [
|
h('div', { style: { border: '1px solid #000', padding: '15px' ,position:'relative',height:'280px'} }, [
|
h('div', { style: { textAlign: 'center', fontSize: '18px', fontWeight: 'bold', marginTop: '20px' ,marginRight:'100px'} }, '卓力能物料标识卡（小包）'),
|
h('div', { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '10px',marginTop:'60px'} }, [
|
h('div', { style: { width: '48%' } }, `料号：${materielCode}`),
|
h('div', { style: { width: '48%' } }, '供应商编码：'),
|
h('div', { style: { width: '48%' } }, `品名：${materialName || '无'}`),
|
h('div', { style: { width: '48%' } }, '采购单号：'),
|
h('div', { style: { width: '48%' } }, `规格：${specification || '无'}`),
|
h('div', { style: { width: '48%' } }, '数量/总数：0PCS/0PCS'),
|
h('div', { style: { width: '48%' } }, `批号：${lotNo || '无'}`),
|
h('div', { style: { width: '48%' } }, `批次：${batchNo || '无'}`),
|
h('div', { style: { width: '48%' } }, '厂区：卓力能三厂'),
|
h('div', { style: { width: '48%' } }, `日期：${date || '无'}`),
|
]),
|
h('div', { style: { position:'absolute',top:'1px',right:'15px',width:'100px',heigth:'100px' } }, [
|
h(ElImage, {
|
src: qrCodeUrl,
|
alt: '物料二维码',
|
style: { width: '100px', height: '100px' }
|
})
|
])
|
])
|
])
|
],
|
footer: () => h('div', null, [
|
h(ElButton, {
|
type: 'default',
|
onClick: () => {
|
const printStyle = document.getElementById('qr-print-style');
|
printStyle && document.head.removeChild(printStyle);
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
}
|
}, '关闭'),
|
h(ElButton, {
|
type: 'primary',
|
onClick: () => {
|
ElMessageBox.confirm(
|
'是否打印该物料标识卡？',
|
'打印确认',
|
{
|
confirmButtonText: '确认打印',
|
cancelButtonText: '取消',
|
type: 'info'
|
}
|
).then(async () => {
|
try {
|
await printQrCode();
|
setTimeout(() => {
|
render(null, mountNode);
|
document.body.removeChild(mountNode);
|
}, 500);
|
} catch (printErr) {
|
ElMessage.error(`打印失败：${printErr.message || '未知错误'}`);
|
console.error('打印错误：', printErr);
|
}
|
}).catch((err) => {
|
if (err === 'cancel' || err.name === 'CanceledError') {
|
ElMessage.info('已取消打印');
|
}
|
});
|
}
|
}, '打印')
|
])
|
});
|
|
vnode.appContext = this.$.appContext;
|
render(vnode, mountNode);
|
}
|
}], box: [], detail: [] }, //扩展的按钮
|
methods: {
|
//下面这些方法可以保留也可以删除
|
onInit() {
|
},
|
onInited() {
|
//框架初始化配置后
|
//如果要配置明细表,在此方法操作
|
//this.detailOptions.columns.forEach(column=>{ });
|
},
|
searchBefore(param) {
|
//界面查询前,可以给param.wheres添加查询参数
|
//返回false，则不会执行查询
|
return true;
|
},
|
searchAfter(result) {
|
//查询后，result返回的查询数据,可以在显示到表格前处理表格的值
|
return true;
|
},
|
addBefore(formData) {
|
//新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
|
return true;
|
},
|
updateBefore(formData) {
|
//编辑保存前formData为对象，包括明细表、删除行的Id
|
return true;
|
},
|
rowClick({ row, column, event }) {
|
//查询界面点击行事件
|
this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
},
|
modelOpenAfter(row) {
|
//点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
|
//(1)判断是编辑还是新建操作： this.currentAction=='Add';
|
//(2)给弹出框设置默认值
|
//(3)this.editFormFields.字段='xxx';
|
//如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
|
//看不懂就把输出看：console.log(this.editFormOptions)
|
}
|
}
|
};
|
export default extension;
|
