修复候选组设置后数据不能回显到面板上 fix #14

Nayacco · Sep 30, 2020 · 750782e · 750782e
1 parent 5d51f35
commit 750782e
Showing 1 changed file with 49 additions and 40 deletions.
diff --git a/package/components/nodePanel/task.vue b/package/components/nodePanel/task.vue
@@ -242,23 +242,34 @@ export default {
     }
   },
   watch: {
-    'formData.userType': function(val) {
-      const types = ['assignee', 'candidateUsers', 'candidateGroups']
-      types.forEach(type => {
-        delete this.element.businessObject.$attrs[`flowable:${type}`]
-        delete this.formData[type]
-      })
+    'formData.userType': function(val, oldVal) {
+      if (oldVal) {
+        const types = ['assignee', 'candidateUsers', 'candidateGroups']
+        types.forEach(type => {
+          delete this.element.businessObject.$attrs[`flowable:${type}`]
+          delete this.formData[type]
+        })
+      }
     },
     'formData.assignee': function(val) {
-      if (this.formData.userType !== 'assignee') return
+      if (this.formData.userType !== 'assignee') {
+        delete this.element.businessObject.$attrs[`flowable:assignee`]
+        return
+      }
       this.updateProperties({ 'flowable:assignee': val })
     },
     'formData.candidateUsers': function(val) {
-      if (this.formData.userType !== 'candidateUsers') return
+      if (this.formData.userType !== 'candidateUsers') {
+        delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
+        return
+      }
       this.updateProperties({ 'flowable:candidateUsers': val?.join(',') })
     },
     'formData.candidateGroups': function(val) {
-      if (this.formData.userType !== 'candidateGroups') return
+      if (this.formData.userType !== 'candidateGroups') {
+        delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
+        return
+      }
       this.updateProperties({ 'flowable:candidateGroups': val?.join(',') })
     },
     'formData.async': function(val) {
@@ -312,39 +323,37 @@ export default {
     'formData.resultVariable': function(val) {
       if (val === '') val = null
       this.updateProperties({ 'flowable:resultVariable': val })
-    },
-    element: {
-      handler: function(val) {
-        const cache = {
-          ...this.element.businessObject,
-          ...this.element.businessObject.$attrs
-        }
-        // 移除flowable前缀，格式化数组
-        for (const key in cache) {
-          if (key.indexOf('flowable:') === 0) {
-            const newKey = key.replace('flowable:', '')
-            cache[newKey] = cache[key]
-            delete cache[key]
-            if (newKey === 'candidateUsers') {
-              cache.userType = 'candidateUsers'
-              cache[newKey] = cache[newKey]?.split(',') || []
-            } else if (newKey === 'candidateGroups') {
-              cache.userType = 'candidateGroups'
-              cache[newKey] = cache[newKey]?.split(',') || []
-            } else if (newKey === 'assignee') {
-              cache.userType = 'assignee'
-            }
-          }
-        }
-        this.formData = cache
-        this.computedExecutionListenerLength()
-        this.computedTaskListenerLength()
-        this.computedHasMultiInstance()
-      },
-      deep: true,
-      immediate: true
     }
   },
+  created() {
+    const cache = {
+      ...this.element.businessObject,
+      ...this.element.businessObject.$attrs
+    }
+    // 移除flowable前缀，格式化数组
+    for (const key in cache) {
+      if (key.indexOf('flowable:') === 0) {
+        const newKey = key.replace('flowable:', '')
+        cache[newKey] = cache[key]
+        delete cache[key]
+      }
+    }
+    for (const key in cache) {
+      if (key === 'candidateUsers') {
+        cache.userType = 'candidateUsers'
+        cache[key] = cache[key]?.split(',') || []
+      } else if (key === 'candidateGroups') {
+        cache.userType = 'candidateGroups'
+        cache[key] = cache[key]?.split(',') || []
+      } else if (key === 'assignee') {
+        cache.userType = 'assignee'
+      }
+    }
+    this.formData = cache
+    this.computedExecutionListenerLength()
+    this.computedTaskListenerLength()
+    this.computedHasMultiInstance()
+  },
   methods: {
     computedExecutionListenerLength() {
       this.executionListenerLength = this.element.businessObject.extensionElements?.values