低代码前端完成

project/oms/apps/develop/AppAiCode/detailLayout.vue

@@ -183,7 +183,6 @@
           </div>
         </div>
       </template>
-
       <div class="right-item" v-if="['select', 'date', 'time', 'input', 'datetime', 'textarea', 'rtf'].includes(currTarget.type)">
         <div class="right-item__title no-solid">
           <h2>占位符</h2>
@@ -425,6 +424,12 @@ export default {
       } else if (this.groupIndex > -1 && this.isGroup) {
         this.currTarget = this.targetList[this.groupIndex]
       } else this.currTarget = {}
+    },
+    targetList: {
+      deep: true,
+      handler(v) {
+        this.$emit('change', v)
+      }
     }
   },
   computed: {
@@ -432,43 +437,17 @@ export default {
       return '表单设置'
     },
     propOps: v => v.form.props?.map(e => ({dictValue: e.prop, dictName: e.label})),
-    detailProps: {
-      set(v) {
-        let props = [v.map((e, i) => e.column.map((item, index) => ({
-          ...e,
-          groupIndex: i,
-          groupName: e.groupName,
-          fieldDbName: item.isInit ? item.fieldDbName : (this.isUnique(item.type) ? item.type : `${item.type}${i}${index}`),
-          defaultValue: item.type === 'checkbox' && item.defaultValue ? item.defaultValue.join('`') : item.defaultValue,
-          selectValues: item.options ? item.options.map(o => o.label).join('`') : ''
-        })))].flat()
-        console.log(props)
-        this.$emit('change', props)
-      },
-      get() {
-        const init = {
-          type: 'group',
-          fieldName: '卡片',
-          fixedLabel: '卡片',
-          icon: 'iconpic',
-          groupName: '基础信息',
-          column: []
-        }
-        let arr = this.$copy(this.value),
-            groups = [...new Set(arr?.map(e => e.groupName))].filter(e => !!e)
-        this.targetList = groups?.length > 0 ? groups.map(groupName => ({
-          type: 'group',
-          fieldName: '卡片',
-          fixedLabel: '卡片',
-          icon: 'iconpic',
-          groupName,
-          column: arr.filter(e => e.groupName == groupName)
-        })) : [init]
-        return this.targetList
-      }
-    },
   },
   methods: {
+    initValue() {
+      let unwatch = this.$watch('value', (v) => {
+        if (this.targetList.length > 0) unwatch && unwatch()
+        else if (!!v) {
+          this.targetList = this.$copy(v)
+          unwatch && unwatch()
+        }
+      }, {immediate: true})
+    },
     removeItem(j, i) {
       this.groupIndex = -1
       this.activeIndex = -1
@@ -502,7 +481,6 @@ export default {
         value: ''
       })
     },
-
     removeOptions(index) {
       const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
 
@@ -511,14 +489,12 @@ export default {
       }
       this.targetList[this.groupIndex].column[this.activeIndex].options.splice(index, 1)
     },
-
     onEnd(e) {
       const el = e.to.parentElement.parentElement
       this.isGroup = false
       this.activeIndex = e.newIndex
       this.groupIndex = Number(el.getAttribute('data-index'))
     },
-
     onElEnd(e) {
       if (this.isGroup) {
         this.groupIndex = e.newIndex
@@ -526,7 +502,6 @@ export default {
         this.activeIndex = e.newIndex
       }
     },
-
     clone(e) {
       if (e.type === 'group') {
         this.targetList.push(JSON.parse(JSON.stringify(e)))
@@ -563,7 +538,6 @@ export default {
         this.activeIndex = this.targetList[0].column.length - 1
       })
     },
-
     onMove(e) {
       const el = e.draggedContext.element
       if (el.type === 'group') {
@@ -577,7 +551,6 @@ export default {
       })
       return !(list.indexOf(el.type) > -1 && ['name', 'idNumber', 'phone', 'area'].includes(el.type));
     },
-
     cloneComponent(e) {
       if (e.type === 'group') {
         this.targetList.push(JSON.parse(JSON.stringify(e)))
@@ -599,7 +572,9 @@ export default {
       return JSON.parse(JSON.stringify(e))
     }
   },
-
+  created() {
+    this.initValue()
+  }
 }
 </script>