From 07774c70a65bed6bacf936bdd66f756ba9c7f266 Mon Sep 17 00:00:00 2001
From: pan <antony1029@163.com>
Date: 星期二, 02 十二月 2025 10:15:48 +0800
Subject: [PATCH] 提交
---
项目代码/WIDESEA_WMSClient/src/extension/inbound/Dt_MaterielToMes.js | 252 +++++++++++++++++++++----------------------------
1 files changed, 109 insertions(+), 143 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/inbound/Dt_MaterielToMes.js" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/inbound/Dt_MaterielToMes.js"
index 844b013..7c0a3b6 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/inbound/Dt_MaterielToMes.js"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/inbound/Dt_MaterielToMes.js"
@@ -14,9 +14,9 @@
modelBody: '',
modelFooter: ''
},
- tableAction: '', //鎸囧畾鏌愬紶琛ㄧ殑鏉冮檺(杩欓噷濉啓琛ㄥ悕,榛樿涓嶇敤濉啓)
+ tableAction: '',
buttons: { view: [{
- name: '鐢熸垚浜岀淮鐮�',
+ name: '鐢熸垚浜岀淮鐮�',
type: 'success',
value: '鐢熸垚浜岀淮鐮�',
onClick: async function () {
@@ -31,43 +31,18 @@
return;
}
- // 2. 鑾峰彇鍗曟嵁缂栧彿
- const newMaterialBarCode = selectedRows[0].newMaterialBarCode;
- if (!newMaterialBarCode) {
- ElMessage.error('閫変腑鐨勬暟鎹腑鏈壘鍒板崟鎹紪鍙�');
+ // 2. 鑾峰彇鏍稿績鐗╂枡瀛楁锛堟枡鍙枫�佸搧鍚嶃�佽鏍肩瓑锛�
+ const { materielCode, materialName, specification, lotNo, batchNo, date } = selectedRows[0];
+ if (!materielCode) {
+ ElMessage.error('閫変腑鏁版嵁缂哄皯鏂欏彿淇℃伅');
return;
}
- // 3. 鑾峰彇鍗曟嵁鏄庣粏鏁版嵁锛堟柊澧烇細閫氳繃鍗曟嵁缂栧彿鑾峰彇QtyTrans銆丮aterialCode銆丮aterialName锛�
- // 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. 鐢熸垚浜岀淮鐮�
+ // 3. 鐢熸垚浜岀淮鐮侊紙鍐呭涓烘枡鍙凤紝鍙牴鎹渶姹傛嫾鎺ユ洿澶氫俊鎭級
let qrCodeUrl = '';
try {
- qrCodeUrl = await QRCode.toDataURL(newMaterialBarCode, {
- width: 200, // 浜岀淮鐮佸ぇ灏忛�傞厤甯冨眬
+ qrCodeUrl = await QRCode.toDataURL(materielCode, {
+ width: 150, // 閫傞厤鏍囪瘑鍗″昂瀵�
margin: 1
});
} catch (err) {
@@ -76,11 +51,11 @@
return;
}
- // 5. 鍒涘缓寮圭獥
+ // 4. 鍒涘缓寮圭獥鎸傝浇鑺傜偣
const mountNode = document.createElement('div');
document.body.appendChild(mountNode);
- // 娣诲姞鎵撳嵃涓撶敤鏍峰紡
+ // 鎵撳嵃涓撶敤鏍峰紡
const addPrintStyle = () => {
const style = document.createElement('style');
style.id = 'qr-print-style';
@@ -88,39 +63,60 @@
@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;
+ 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;
}
- /* 鎵撳嵃鍐呭甯冨眬 */
- .print-content {
- display: flex !important;
- flex-direction: column !important;
- gap: 20px !important;
+
+ .material-card {
+ padding: 5mm; /* 浣跨敤姣背鍗曚綅鏇撮�傞厤鎵撳嵃灏哄 */
+ font-size: 2mm; /* 鎸夋瘮渚嬬缉灏忓瓧浣� */
+ position: relative;
+ width: 80mm; /* 鐣ュ皬浜庣焊寮犲搴︼紝鐣欒竟璺� */
+ height: 60mm; /* 鐣ュ皬浜庣焊寮犻珮搴︼紝鐣欒竟璺� */
+ box-sizing: border-box; /* 纭繚padding涓嶅奖鍝嶆暣浣撳昂瀵� */
}
- .qr-wrapper {
- align-self: flex-start !important; /* 浜岀淮鐮侀潬宸� */
+
+ .card-title {
+ text-align: center;
+ font-size: 2mm; /* 鏍囬鐣ュぇ */
+ font-weight: bold;
+ margin-top: 5mm; /* 鍑忓皬椤堕儴闂磋窛 */
+ margin-right: 20mm; /* 閫傞厤缂╁皬鐨勪簩缁寸爜浣嶇疆 */
}
- .detail-fields {
- display: flex !important;
- justify-content: space-around !important; /* 瀛楁鍧囧寑鍒嗗竷 */
- width: 100% !important;
- margin-top: 20px !important;
- font-size: 16px !important;
+
+ .card-fields {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap:1.5mm; /* 缂╁皬闂磋窛 */
+ margin-top: 8mm; /* 璋冩暣瀛楁瀹瑰櫒浣嶇疆 */
}
+
.field-item {
- text-align: center !important;
- padding: 10px !important;
- border: 1px solid #eee !important;
- border-radius: 4px !important;
- width: 30% !important; /* 姣忎釜瀛楁鍗�1/3瀹藉害 */
+ width: 48%; /* 淇濇寔涓ゅ垪甯冨眬 */
+ line-height: 1.3; /* 绱у噾琛岄珮 */
}
- .field-label {
- font-weight: bold !important;
- margin-bottom: 5px !important;
- display: block !important;
+
+ .qr-wrapper {
+ position: absolute;
+ top: 5mm; /* 璋冩暣浜岀淮鐮侀《閮ㄤ綅缃� */
+ right: 3mm; /* 璋冩暣浜岀淮鐮佸彸渚т綅缃� */
+ width: 15mm; /* 浜岀淮鐮佸昂瀵搁�傞厤灏忓崱鐗� */
+ height: 15mm;
+ }
+
+ .qr-wrapper img {
+ width: 100% !important; /* 纭繚浜岀淮鐮佸～鍏呮弧瀹瑰櫒 */
+ height: 100% !important;
+ object-fit: contain;
}
}
`;
@@ -130,106 +126,83 @@
// 鎵撳嵃鍑芥暟
const printQrCode = () => {
- // 鍒涘缓鎵撳嵃瀹瑰櫒
const printContainer = document.createElement('div');
printContainer.className = 'print-container';
printContainer.style = 'position:fixed; top:-9999px; left:-9999px;';
document.body.appendChild(printContainer);
- // 濉厖鎵撳嵃鍐呭锛堝竷灞�锛氫簩缁寸爜宸︿笂瑙� + 涓変釜瀛楁鍧囧寑鍒嗗竷锛�
+ // 鏋勫缓鐗╂枡鏍囪瘑鍗TML缁撴瀯
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 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="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 class="qr-wrapper">
+ <img src="${qrCodeUrl}" alt="鐗╂枡浜岀淮鐮�" />
</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);
- }
+ 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: '600px',
+ title: '鐗╂枡鏍囪瘑鍗″強浜岀淮鐮�',
+ width: '500px',
modelValue: true,
+ style: { maxHeight: '500px', overflowY: 'auto' },
appendToBody: true,
'onUpdate:modelValue': (isVisible) => {
if (!isVisible) {
const printStyle = document.getElementById('qr-print-style');
- if (printStyle && printStyle.parentNode === document.head) {
- document.head.removeChild(printStyle);
- }
+ printStyle && document.head.removeChild(printStyle);
render(null, mountNode);
- if (mountNode.parentNode === document.body) {
- document.body.removeChild(mountNode);
- }
+ 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)
- // ])
- // ])
+ 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, [
@@ -237,18 +210,16 @@
type: 'default',
onClick: () => {
const printStyle = document.getElementById('qr-print-style');
- if (printStyle) document.head.removeChild(printStyle);
+ printStyle && document.head.removeChild(printStyle);
render(null, mountNode);
- if (mountNode.parentNode === document.body) {
- document.body.removeChild(mountNode);
- }
+ document.body.removeChild(mountNode);
}
}, '鍏抽棴'),
h(ElButton, {
type: 'primary',
onClick: () => {
ElMessageBox.confirm(
- '鏄惁鎵撳嵃璇ュ唴瀹癸紵',
+ '鏄惁鎵撳嵃璇ョ墿鏂欐爣璇嗗崱锛�',
'鎵撳嵃纭',
{
confirmButtonText: '纭鎵撳嵃',
@@ -257,21 +228,16 @@
}
).then(async () => {
try {
- // 鎵ц鎵撳嵃骞剁瓑寰呭畬鎴愶紝鎹曡幏鍙兘鐨勯敊璇�
await printQrCode();
setTimeout(() => {
render(null, mountNode);
- if (mountNode.parentNode === document.body) {
- document.body.removeChild(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('宸插彇娑堟墦鍗�');
}
--
Gitblit v1.9.3