From 103b03d9b18cc713550ddfa3f5772123568dc6c3 Mon Sep 17 00:00:00 2001
From: chenlu <1320612696@qq.com>
Date: 星期一, 29 十二月 2025 16:40:01 +0800
Subject: [PATCH] 标签打印预览界面中修改可同步变更的字段光标自动前移问题，流程卡进度打印界面增加列
---
north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabelTwo.vue | 250 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 178 insertions(+), 72 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabelTwo.vue b/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabelTwo.vue
index 4e8ead6..31bc34b 100644
--- a/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabelTwo.vue
+++ b/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabelTwo.vue
@@ -82,10 +82,8 @@
for (const group of list.value) {
// 閬嶅巻姣忕粍涓殑鏁版嵁锛堟浛鎹� j锛�
for (const item of group.data) {
- console.log(item)
const { quantity, newList } = item;
// 璺宠繃 quantity 涓� 0 鎴栨棤鏁堢殑鎯呭喌
- console.log(quantity)
if (!quantity || quantity <= 0) continue;
// 澶勭悊 newList锛氱‘淇濇槸鏁扮粍锛屼笉瓒虫椂鐢ㄧ┖瀵硅薄鍏滃簳
@@ -119,80 +117,180 @@
}
)
-//淇敼鐩稿悓浜у搧鍚嶇О鏍囩
-const updateProductName = (event, index,id) => {
- // 鍒涘缓鏄犲皠瀵硅薄
- const propertyMapping = {};
- labelList.forEach(item => {
- propertyMapping[item.name] = item.title;
- });
- // 杈撳叆鐨勫��
- const newValue = event.target.innerText;
- const parts = newValue.split('锛�');
- const result = parts[1]; // 鑾峰彇鍐掑彿鍚庣殑閮ㄥ垎
- // 鑾峰彇鏄犲皠涓墍鏈夌殑閿�
- const keys = Object.keys(propertyMapping);
+const isComposing = ref(false)
- // 鏍规嵁 index 鑾峰彇瀵瑰簲鐨勫睘鎬у悕
- const propertyName = keys[index];
- // 濡傛灉鏄犲皠涓病鏈夎 index锛岀洿鎺ヨ繑鍥�
- if (!propertyName) {
- console.warn('Unsupported index:', index);
- return;
+const getCaretOffset = (el) => {
+ const sel = window.getSelection()
+ if (!sel || sel.rangeCount === 0) return 0
+ const range = sel.getRangeAt(0)
+ if (!el.contains(range.startContainer)) return 0
+
+ const preRange = range.cloneRange()
+ preRange.selectNodeContents(el)
+ preRange.setEnd(range.startContainer, range.startOffset)
+ return preRange.toString().length
+}
+
+const setCaretOffset = (el, offset) => {
+ const sel = window.getSelection()
+ if (!sel) return
+
+ const range = document.createRange()
+ range.selectNodeContents(el)
+
+ let current = 0
+ const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null)
+ let node = walker.nextNode()
+
+ while (node) {
+ const next = current + (node.nodeValue?.length || 0)
+ if (offset <= next) {
+ range.setStart(node, Math.max(0, offset - current))
+ range.collapse(true)
+ sel.removeAllRanges()
+ sel.addRange(range)
+ return
+ }
+ current = next
+ node = walker.nextNode()
}
- // 閬嶅巻 lastList 骞舵洿鏂板搴旂殑灞炴��
- props.lastList.forEach(obj => {
- // 鑾峰彇鍓嶇紑鍜� orderId
- console.log(index)
- const prefix = props.lastList[id].processId.substring(0, 11);
- const orderId = obj.orderId;
- const glassNumber=props.lastList[id].glassNumber
- // 鏍规嵁 propertyName 鏇存柊灞炴��
- if (propertyName === 'productAbbreviation' && prefix === obj.processId.substring(0, 11)) {
- obj.productAbbreviation = result;
- }
-
- if (propertyName === 'project' && orderId === obj.orderId) {
- obj.project = result;
- }
- if (propertyName === 'productName' && prefix === obj.processId.substring(0, 11)){
- obj.productName = result;
- }
- if (propertyName === 'customerName' && orderId === obj.orderId){
- obj.customerName = result;
- }
- if (propertyName === 'orderId' && orderId === obj.orderId){
- obj.orderId = result;
- }
- if (propertyName === 'glassNumber' && glassNumber === obj.glassNumber){
- obj.glassNumber = result;
- }
- if (propertyName === 'width' && glassNumber === obj.glassNumber){
- obj.width = result;
- }
- if (propertyName === 'height' && glassNumber === obj.glassNumber){
- obj.height = result;
- }
- if (propertyName === 'custom1' && orderId === obj.orderId){
- obj.custom1 = result;
- }
- if (propertyName === 'custom2' && orderId === obj.orderId){
- obj.custom2 = result;
- }
- if (propertyName === 'custom3' && orderId === obj.orderId){
- obj.custom3 = result;
- }
- if (propertyName === 'custom4' && orderId === obj.orderId){
- obj.custom4 = result;
- }
- if (propertyName === 'custom5' && orderId === obj.orderId){
- obj.custom5 = result;
- }
- });
+ // 瓒呭嚭闀垮害鍒欐斁鍒版湯灏�
+ range.collapse(false)
+ sel.removeAllRanges()
+ sel.addRange(range)
}
+// =============================================
+
+//淇敼鐩稿悓浜у搧鍚嶇О鏍囩
+const updateProductName = async (event, fieldIndex, rowIndex) => {
+ // 杈撳叆娉曠粍璇嶉樁娈典笉瑕佸悓姝ワ紝鍚﹀垯浼氭姈鍔�/閿欎贡
+ if (isComposing.value) return
+
+ const el = event.target
+
+ // 淇濆瓨鍏夋爣
+ const caret = getCaretOffset(el)
+
+ // 鍙栤�滅函鍊尖�濇鏃� contenteditable 鍙寘鍚�硷紝涓嶅寘鍚爣棰橈細
+ const result = (el.innerText ?? '').trim()
+
+ // 鏄犲皠锛歠ieldIndex -> 瀛楁鍚�
+ const propertyMapping = {}
+ labelList.forEach(item => {
+ propertyMapping[item.name] = item.title
+ })
+ const keys = Object.keys(propertyMapping)
+ const propertyName = keys[fieldIndex]
+ if (!propertyName) return
+
+ //鏇存柊
+ const baseRow = props.lastList?.[rowIndex]
+ if (!baseRow) return
+
+ const basePrefix = (baseRow.processId ?? '').substring(0, 11)
+ const baseGlassNumber = baseRow.glassNumber
+ const baseOrderId = baseRow.orderId
+
+ props.lastList.forEach(obj => {
+ const objPrefix = (obj.processId ?? '').substring(0, 11)
+
+ if (propertyName === 'productAbbreviation' && basePrefix === objPrefix) obj.productAbbreviation = result
+ if (propertyName === 'project' && baseOrderId === obj.orderId) obj.project = result
+ if (propertyName === 'productName' && basePrefix === objPrefix) obj.productName = result
+ if (propertyName === 'customerName' && baseOrderId === obj.orderId) obj.customerName = result
+ if (propertyName === 'orderId' && baseOrderId === obj.orderId) obj.orderId = result
+
+ if (propertyName === 'glassNumber' && baseGlassNumber === obj.glassNumber) obj.glassNumber = result
+ if (propertyName === 'width' && baseGlassNumber === obj.glassNumber) obj.width = result
+ if (propertyName === 'height' && baseGlassNumber === obj.glassNumber) obj.height = result
+
+ if (propertyName === 'custom1' && baseOrderId === obj.orderId) obj.custom1 = result
+ if (propertyName === 'custom2' && baseOrderId === obj.orderId) obj.custom2 = result
+ if (propertyName === 'custom3' && baseOrderId === obj.orderId) obj.custom3 = result
+ if (propertyName === 'custom4' && baseOrderId === obj.orderId) obj.custom4 = result
+ if (propertyName === 'custom5' && baseOrderId === obj.orderId) obj.custom5 = result
+ })
+
+ // 5) 绛� Vue patch 瀹屾垚鍚庯紝鎶婂厜鏍囨斁鍥炲幓
+ await nextTick()
+ setCaretOffset(el, caret)
+}
+
+//淇敼鐩稿悓浜у搧鍚嶇О鏍囩
+// const updateProductName = (event, index,id) => {
+// // 鍒涘缓鏄犲皠瀵硅薄
+// const propertyMapping = {};
+// labelList.forEach(item => {
+// propertyMapping[item.name] = item.title;
+// });
+// // 杈撳叆鐨勫��
+// const newValue = event.target.innerText;
+// const parts = newValue.split('锛�');
+// const result = parts[1]; // 鑾峰彇鍐掑彿鍚庣殑閮ㄥ垎
+//
+// // 鑾峰彇鏄犲皠涓墍鏈夌殑閿�
+// const keys = Object.keys(propertyMapping);
+//
+// // 鏍规嵁 index 鑾峰彇瀵瑰簲鐨勫睘鎬у悕
+// const propertyName = keys[index];
+// // 濡傛灉鏄犲皠涓病鏈夎 index锛岀洿鎺ヨ繑鍥�
+// if (!propertyName) {
+// console.warn('Unsupported index:', index);
+// return;
+// }
+//
+// // 閬嶅巻 lastList 骞舵洿鏂板搴旂殑灞炴��
+// props.lastList.forEach(obj => {
+// // 鑾峰彇鍓嶇紑鍜� orderId
+// const prefix = props.lastList[id].processId.substring(0, 11);
+// const orderId = obj.orderId;
+// const glassNumber=props.lastList[id].glassNumber
+// // 鏍规嵁 propertyName 鏇存柊灞炴��
+// if (propertyName === 'productAbbreviation' && prefix === obj.processId.substring(0, 11)) {
+// obj.productAbbreviation = result;
+// }
+//
+// if (propertyName === 'project' && orderId === obj.orderId) {
+// obj.project = result;
+// }
+// if (propertyName === 'productName' && prefix === obj.processId.substring(0, 11)){
+// obj.productName = result;
+// }
+// if (propertyName === 'customerName' && orderId === obj.orderId){
+// obj.customerName = result;
+// }
+// if (propertyName === 'orderId' && orderId === obj.orderId){
+// obj.orderId = result;
+// }
+// if (propertyName === 'glassNumber' && glassNumber === obj.glassNumber){
+// obj.glassNumber = result;
+// }
+// if (propertyName === 'width' && glassNumber === obj.glassNumber){
+// obj.width = result;
+// }
+// if (propertyName === 'height' && glassNumber === obj.glassNumber){
+// obj.height = result;
+// }
+// if (propertyName === 'custom1' && orderId === obj.orderId){
+// obj.custom1 = result;
+// }
+// if (propertyName === 'custom2' && orderId === obj.orderId){
+// obj.custom2 = result;
+// }
+// if (propertyName === 'custom3' && orderId === obj.orderId){
+// obj.custom3 = result;
+// }
+// if (propertyName === 'custom4' && orderId === obj.orderId){
+// obj.custom4 = result;
+// }
+// if (propertyName === 'custom5' && orderId === obj.orderId){
+// obj.custom5 = result;
+// }
+// });
+// }
</script>
@@ -203,8 +301,16 @@
<div class="entirety_semi">
<div class="row4">{{ faceOrientation }}</div>
<div v-for="(item,id) in labelList" class="contentRow">
- <div contenteditable="true" v-if="item1[item.name] != null && item1[item.name] !== ''" class="row1" @input="updateProductName($event, id,index)">{{ item.title }}锛歿{ item1[item.name] }}</div>
- <!-- <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row2">{{ item1[item.name] }}</div>-->
+ <div class="row1" v-show="item1[item.name] != null && item1[item.name] !== ''">
+ <span class="label">{{ item.title }}锛�</span>
+ <span
+ class="value"
+ contenteditable="true"
+ @compositionstart="isComposing.value = true"
+ @compositionend="(e) => { isComposing.value = false; updateProductName(e, id, index) }"
+ @input="(e) => updateProductName(e, id, index)"
+ >{{ item1[item.name] }}</span>
+ </div>
</div>
<div v-html="company.printLabel.customSemi(item1)"></div>
</div>
--
Gitblit v1.8.0