|
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 newMaterialBarCode = selectedRows[0].newMaterialBarCode;
|
if (!newMaterialBarCode) {
|
ElMessage.error('选中的数据中未找到单据编号');
|
return;
|
}
|
|
// 3. 获取单据明细数据（新增：通过单据编号获取QtyTrans、MaterialCode、MaterialName）
|
// let detailList = [];
|
// const loading = ElLoading.service({ text: '获取单据明细中...' });
|
// try {
|
// const res = await http.post('/api/DocumentDetail/details', { transNo: transNo });
|
// // 校验返回格式（必须是数组且至少有一条数据）
|
// if (!res.status || !Array.isArray(res.data) || res.data.length === 0) {
|
// throw new Error('未查询到单据明细数据');
|
// }
|
// detailList = res.data;
|
|
// // 校验每条明细的必填字段
|
// detailList.forEach((item, index) => {
|
// if (!item.qtyTrans || !item.materialCode || !item.materialName) {
|
// throw new Error(`第${index + 1}条明细数据不完整`);
|
// }
|
// });
|
// } catch (err) {
|
// ElMessage.error(err.message || '获取单据明细失败');
|
// loading.close();
|
// return;
|
// } finally {
|
// loading.close();
|
// }
|
|
// 4. 生成二维码
|
let qrCodeUrl = '';
|
try {
|
qrCodeUrl = await QRCode.toDataURL(newMaterialBarCode, {
|
width: 200, // 二维码大小适配布局
|
margin: 1
|
});
|
} catch (err) {
|
ElMessage.error('二维码生成失败，请重试');
|
console.error('二维码生成错误：', err);
|
return;
|
}
|
|
// 5. 创建弹窗
|
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: 50px !important;
|
left: 50px !important;
|
width: 90% !important;
|
height: auto !important;
|
}
|
/* 打印内容布局 */
|
.print-content {
|
display: flex !important;
|
flex-direction: column !important;
|
gap: 20px !important;
|
}
|
.qr-wrapper {
|
align-self: flex-start !important; /* 二维码靠左 */
|
}
|
.detail-fields {
|
display: flex !important;
|
justify-content: space-around !important; /* 字段均匀分布 */
|
width: 100% !important;
|
margin-top: 20px !important;
|
font-size: 16px !important;
|
}
|
.field-item {
|
text-align: center !important;
|
padding: 10px !important;
|
border: 1px solid #eee !important;
|
border-radius: 4px !important;
|
width: 30% !important; /* 每个字段占1/3宽度 */
|
}
|
.field-label {
|
font-weight: bold !important;
|
margin-bottom: 5px !important;
|
display: block !important;
|
}
|
}
|
`;
|
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);
|
|
// 填充打印内容（布局：二维码左上角 + 三个字段均匀分布）
|
printContainer.innerHTML = `
|
<div class="print-content">
|
<!-- 二维码（左上角） -->
|
<div class="qr-wrapper">
|
<img src="${qrCodeUrl}" style="width: 200px; height: 200px;" />
|
<p style="margin-top: 10px; font-size: 16px;">单据编号：${newMaterialBarCode}</p>
|
</div>
|
|
<!-- 明细字段（均匀分布） -->
|
<div class="detail-fields">
|
<div class="field-item">
|
<span class="field-label">交易数量</span>
|
<span>${detailList[0].qtyTrans}</span>
|
</div>
|
<div class="field-item">
|
<span class="field-label">物料编码</span>
|
<span>${detailList[0].materialCode}</span>
|
</div>
|
<div class="field-item">
|
<span class="field-label">物料名称</span>
|
<span>${detailList[0].materialName}</span>
|
</div>
|
</div>
|
</div>
|
`;
|
|
// 添加打印样式
|
const printStyle = addPrintStyle();
|
|
// 清理函数（防止重复移除）
|
const cleanUp = () => {
|
if (printContainer.parentNode === document.body) {
|
document.body.removeChild(printContainer);
|
}
|
if (printStyle && printStyle.parentNode === document.head) {
|
document.head.removeChild(printStyle);
|
}
|
window.removeEventListener('afterprint', cleanUp);
|
};
|
|
// 监听打印完成
|
window.addEventListener('afterprint', cleanUp, { once: true });
|
|
// 触发打印
|
window.print();
|
};
|
|
// 弹窗组件（预览布局）
|
const vnode = createVNode(ElDialog, {
|
title: '单据二维码及明细',
|
width: '600px',
|
modelValue: true,
|
appendToBody: true,
|
'onUpdate:modelValue': (isVisible) => {
|
if (!isVisible) {
|
const printStyle = document.getElementById('qr-print-style');
|
if (printStyle && printStyle.parentNode === document.head) {
|
document.head.removeChild(printStyle);
|
}
|
render(null, mountNode);
|
if (mountNode.parentNode === document.body) {
|
document.body.removeChild(mountNode);
|
}
|
}
|
}
|
}, {
|
default: () => [
|
// 预览区布局（和打印布局一致）
|
h('div', { style: { padding: '20px' } }, [
|
// 二维码预览（左上角）
|
h('div', { style: { marginBottom: '20px' } }, [
|
h(ElImage, {
|
src: qrCodeUrl,
|
alt: '单据二维码',
|
style: { width: '200px', height: '200px' }
|
}),
|
h('p', { style: { marginTop: '10px', fontSize: '16px' } }, `单据编号：${newMaterialBarCode}`)
|
]),
|
// 明细字段预览（均匀分布）
|
// h('div', { style: { display: 'flex', justifyContent: 'space-around', gap: '10px' } }, [
|
// h('div', { style: { textAlign: 'center', padding: '10px', border: '1px solid #eee', width: '30%' } }, [
|
// h('div', { style: { fontWeight: 'bold', marginBottom: '5px' } }, '交易数量'),
|
// h('div', null, detailList[0].qtyTrans)
|
// ]),
|
// h('div', { style: { textAlign: 'center', padding: '10px', border: '1px solid #eee', width: '30%' } }, [
|
// h('div', { style: { fontWeight: 'bold', marginBottom: '5px' } }, '物料编码'),
|
// h('div', null, detailList[0].materialCode)
|
// ]),
|
// h('div', { style: { textAlign: 'center', padding: '10px', border: '1px solid #eee', width: '30%' } }, [
|
// h('div', { style: { fontWeight: 'bold', marginBottom: '5px' } }, '物料名称'),
|
// h('div', null, detailList[0].materialName)
|
// ])
|
// ])
|
])
|
],
|
footer: () => h('div', null, [
|
h(ElButton, {
|
type: 'default',
|
onClick: () => {
|
const printStyle = document.getElementById('qr-print-style');
|
if (printStyle) document.head.removeChild(printStyle);
|
render(null, mountNode);
|
if (mountNode.parentNode === document.body) {
|
document.body.removeChild(mountNode);
|
}
|
}
|
}, '关闭'),
|
h(ElButton, {
|
type: 'primary',
|
onClick: () => {
|
ElMessageBox.confirm(
|
'是否打印该内容？',
|
'打印确认',
|
{
|
confirmButtonText: '确认打印',
|
cancelButtonText: '取消',
|
type: 'info'
|
}
|
).then(async () => {
|
try {
|
// 执行打印并等待完成，捕获可能的错误
|
await printQrCode();
|
setTimeout(() => {
|
render(null, mountNode);
|
if (mountNode.parentNode === document.body) {
|
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;
|
