Ver Fonte

修复CURD窗口callout/calloutjs 多次执行的BUG。

YangZhiJie há 2 anos atrás
pai
commit
059ba3ab13

+ 2 - 2
package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "client-base-v4",
-  "version": "4.0.13",
+  "version": "4.0.14",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "client-base-v4",
-      "version": "4.0.13",
+      "version": "4.0.14",
       "devDependencies": {
         "@babel/core": "^7.17.5",
         "@babel/eslint-parser": "^7.17.0",

+ 1 - 1
public/index-debug.html

@@ -15,7 +15,7 @@
 
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css/bootstrap.css">
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css//bootstrap-theme.min.css">
+	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css/bootstrap-theme.min.css">
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap3-dialog/dist/css/bootstrap-dialog.css">
 	
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/layui/dist/css/layui.css">

+ 26 - 1
src/window/tabFormView/TabFormFieldEdit.vue

@@ -463,7 +463,16 @@ export default {
         fieldUtil.isEnumListType(this.field) == false &&
         fieldUtil.isManyToManySetType(this.field) == false
       ) {
-        if (currentValue != oldValue) {
+        // add by jack 20240220
+        // 修复bug:当modelData.data的值从外部修改以后,修改执行 watch->'modelData.data'  中的 this.displayValue = ? 方法
+        // 执行完成以后,watch->displayValue 又会执行,会触发valueChanged事件,这会导致 callout/calloutjs 会被多次执行。
+        // 所以在触发 valueChanged 的之前,先判断currentValue与modelData中的值是否相等,
+        // 如果相等,说明是外部修改了modelData,然后执行了 watch->'modelData.data' 方法修改了 displayValue,此时不触发valueChanged事件。
+        // 如果不相等,说明是DOM修改了,触发修改了displayValue,此时触发valueChanged事件。
+
+        const modelDataFieldDisplayValue = this.getModelDataFieldDisplayValue();
+
+        if (currentValue != oldValue && currentValue != modelDataFieldDisplayValue) {
           var newFieldValue = {
             displayValue: [currentValue],
             fieldType: 'String',
@@ -512,6 +521,22 @@ export default {
      */
     getContext: Context,
 
+
+    /**
+     * 获取modelData中字段的显示值
+     */
+    getModelDataFieldDisplayValue : function(){
+      if(this.modelData == null 
+          || this.field == null
+          || this.modelData[this.field.fieldName] == undefined
+          || this.modelData[this.field.fieldName].displayValue == undefined
+          || this.modelData[this.field.fieldName].displayValue.length < this.field.entityFieldIndex + 1){
+        return null;
+      }
+      return this.modelData[this.field.fieldName].displayValue[this.field.entityFieldIndex];
+    },
+
+
     // 值改变事件
     valueChanged: function (newFieldValue) {
       // this.fieldValue = newFieldValue;

+ 25 - 1
src/window/tabGridView/CellItem.vue

@@ -377,7 +377,17 @@ export default {
         fieldUtil.isEnumListType(this.fieldItem) == false &&
         fieldUtil.isManyToManySetType(this.fieldItem) == false
       ) {
-        if (currentValue != oldValue) {
+        // add by jack 20240220
+        // 修复bug:当modelData.data的值从外部修改以后,修改执行 watch->'modelData.data'  中的 this.displayValue = ? 方法
+        // 执行完成以后,watch->displayValue 又会执行,会触发valueChanged事件,这会导致 callout/calloutjs 会被多次执行。
+        // 所以在触发 valueChanged 的之前,先判断currentValue与modelData中的值是否相等,
+        // 如果相等,说明是外部修改了modelData,然后执行了 watch->'modelData.data' 方法修改了 displayValue,此时不触发valueChanged事件。
+        // 如果不相等,说明是DOM修改了,触发修改了displayValue,此时触发valueChanged事件。
+
+        const modelDataFieldDisplayValue = this.getModelDataFieldDisplayValue();
+        
+
+        if (currentValue != oldValue && currentValue != modelDataFieldDisplayValue) {
           var newFieldValue = {
             displayValue: [currentValue],
             fieldType: 'String',
@@ -419,6 +429,20 @@ export default {
   mounted: function () {},
 
   methods: {
+    /**
+     * 获取modelData中字段的显示值
+     */
+    getModelDataFieldDisplayValue : function(){
+      if(this.modelData == null 
+          || this.fieldItem == null 
+          || this.modelData[this.fieldItem.fieldName] == null 
+          || this.modelData[this.fieldItem.fieldName].displayValue == null){
+        return null;
+      }
+      return this.modelData[this.fieldItem.fieldName].displayValue[this.fieldItem.entityFieldIndex];
+    },
+
+
     // 值改变事件
     valueChanged: function (newFieldValue) {
       this.$emit('valueChanged', newFieldValue);