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/PrintCustomLabel.vue | 145 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 102 insertions(+), 43 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabel.vue b/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabel.vue
index 6367be4..973760a 100644
--- a/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabel.vue
+++ b/north-glass-erp/northglass-erp/src/components/pp/PrintCustomLabel.vue
@@ -74,53 +74,105 @@
+const isComposing = ref(false)
-//淇敼鐩稿悓浜у搧鍚嶇О鏍囩
-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 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
- // 鏍规嵁 index 鑾峰彇瀵瑰簲鐨勫睘鎬у悕
- const propertyName = keys[index];
+ const preRange = range.cloneRange()
+ preRange.selectNodeContents(el)
+ preRange.setEnd(range.startContainer, range.startOffset)
+ return preRange.toString().length
+}
- // 濡傛灉鏄犲皠涓病鏈夎 index锛岀洿鎺ヨ繑鍥�
- if (!propertyName) {
- console.warn('Unsupported index:', index);
- return;
+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 骞舵洿鏂板搴旂殑灞炴��
- lastList.value.forEach(obj => {
- // 鑾峰彇鍓嶇紑鍜� orderId
- const prefix = lastList.value[id].processId.substring(0, 11);
- const orderId = obj.orderId;
- const glassNumber=lastList.value[id].glassNumber
- const customerName = obj.customerName
- // 鏍规嵁 propertyName 鏇存柊灞炴��
- if (propertyName === 'productAbbreviation' && prefix === obj.processId.substring(0, 11)) {
- obj.productAbbreviation = result;
- }
+ // 瓒呭嚭闀垮害鍒欐斁鍒版湯灏�
+ range.collapse(false)
+ sel.removeAllRanges()
+ sel.addRange(range)
+}
+// =============================================
- 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;
- }
- });
+//淇敼鐩稿悓浜у搧鍚嶇О鏍囩
+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)
}
@@ -132,9 +184,16 @@
<div v-for="(item1,index) in lastList" :class="company.printLabel.className.custom.entiretyName()">
<div class="row4">{{ faceOrientation }}</div>
<div v-for="(item,id) in labelList" :class="company.printLabel.className.custom.contentRowName()">
- <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row1" contenteditable="true" @input="updateProductName($event, id,index)" v-text="item.title+'锛�'+item1[item.name]"></div>
-<!-- <div class="row2" style="width: 100%;"><input class="contentRow2" v-model="item1[item.name]" @keyup="updataProductName()" style="border: none;"/></div>-->
-<!-- <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row2" style="width: 100%;" contenteditable="true" @input="updateProductName($event, id)" v-text="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.custom(item1)"></div>
</div>
--
Gitblit v1.8.0