From 56ea3bca73c0db1bce3dc42841ffdac03bab4f5e Mon Sep 17 00:00:00 2001
From: albert <790321193@qq.com>
Date: Mon, 19 Sep 2022 16:22:35 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20fix:=E4=BF=AE=E5=A4=8D=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=B1=9E=E6=80=A7=E8=87=AA=E5=8A=A8=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  4 +--
 package.json                         |  2 +-
 packages/json-schema-editor/main.vue | 49 +++++++++++++++++++++++-----
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index af2dd81..4356c54 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ A json-schema editor of high efficient and easy-to-use, base on Vue
   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/capture.png">
 </p>
 
-**支持自定义属性，满足特殊的需求*
+**支持自定义属性，满足特殊的需求**
 
 <p align="center">
   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/custom.png">
@@ -30,14 +30,12 @@ A json-schema editor of high efficient and easy-to-use, base on Vue
 **[国内Demo](http://json-schema-editor.sviip.com)**
 ### Usage
 
-```bash
 ```bash
 # vue2
 npm install json-schema-editor-vue
 # vue3 
 npm install json-schema-editor-vue3
 ```
-```
 
 ```vue
 import JsonSchemaEditor from 'json-schema-editor-vue'
diff --git a/package.json b/package.json
index 4edda59..3857bde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "json-schema-editor-vue",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "author": "zhangyq",
   "description": "A json-schema editor of high efficient and easy-to-use, base on Vue",
   "keywords": [
diff --git a/packages/json-schema-editor/main.vue b/packages/json-schema-editor/main.vue
index e216362..8e32179 100644
--- a/packages/json-schema-editor/main.vue
+++ b/packages/json-schema-editor/main.vue
@@ -89,7 +89,7 @@
             <a-col :span="8" v-for="item in customProps" :key="item.key">
               <a-form-item :label="item.key">
                 <a-input v-model="item.value" style="width:calc(100% - 30px)"/>
-                <a-button icon="close" type="link" @click="customProps.splice(customProps.indexOf(item),1)" style="width:30px"></a-button>  
+                <a-button icon="close" type="link" @click="removeCustomNode(item.key)" style="width:30px"></a-button>  
               </a-form-item>
             </a-col>
             <a-col :span="8" v-show="addProp.key != undefined">
@@ -197,6 +197,9 @@ export default {
     advancedAttr(){
       return TYPE[this.pickValue.type].attr
     },
+    ownProps () {
+      return [ 'type', 'title', 'properties', 'items','required', ...Object.keys(this.advancedAttr)]
+    },
     advancedNotEmptyValue(){
       const jsonNode = Object.assign({},this.advancedValue);
       for(let key in jsonNode){
@@ -206,10 +209,12 @@ export default {
     },
     completeNodeValue(){
       const t = {}
+      const basicValue = { ...this.pickValue }
       for(const item of this.customProps){
         t[item.key] = item.value
       }
-      return Object.assign({},this.pickValue,this.advancedNotEmptyValue, t)
+      this._pickDiffKey().forEach(key => delete basicValue[key])
+      return Object.assign({}, basicValue, t,this.advancedNotEmptyValue)
     },
     enumText () {
       const t = this.advancedValue['enum']
@@ -232,12 +237,6 @@ export default {
     }
   },
   methods: {
-    parseCustomProps () {
-      const ownProps = [ 'type', 'title', 'properties', 'items','required', ...Object.keys(this.advancedAttr)]
-      Object.keys(this.pickValue).forEach(key => {
-        ownProps.indexOf(key) === -1 && this.confirmAddCustomNode({ key: key, value: this.pickValue[key] })
-      })
-    },
     onInputName(e){
       const oldKey = this.pickKey
       const newKey = e.target.value
@@ -327,13 +326,37 @@ export default {
       const props = node.properties
       this.$set(props,name,{type: type})
     },
+    parseCustomProps () {
+      const ownProps = this.ownProps
+      Object.keys(this.pickValue).forEach(key => {
+        if (ownProps.indexOf(key) === -1) {
+          this.confirmAddCustomNode({ key: key, value: this.pickValue[key] })
+          // this.$delete(this.pickValue,key)
+        }
+      })
+    },
     addCustomNode(){
       this.$set(this.addProp,'key',this._joinName())
       this.$set(this.addProp,'value','')
       this.customing = true
     },
+    removeCustomNode(key) {
+      this.customProps.forEach((item,index) => {
+        if (item.key === key) {
+          this.customProps.splice(index,1)
+          return
+        }
+      })
+    },
     confirmAddCustomNode(prop) {
       const p = prop || this.addProp
+      let existKey = false
+      this.customProps.forEach(item => {
+        if (item.key === prop.key) {
+          existKey = true
+        }
+      })
+      if (existKey) return
       this.customProps.push(p)
       this.addProp = {}
       this.customing = false
@@ -354,7 +377,9 @@ export default {
       this.modalVisible = true
       this.advancedValue = { ...this.advanced.value }
       for(const k in this.advancedValue) {
-        if(this.pickValue[k]) this.advancedValue[k] = this.pickValue[k]
+        if(this.pickValue[k]) {
+          this.advancedValue[k] = this.pickValue[k]
+        }
       }
       this.parseCustomProps()
     },
@@ -368,9 +393,15 @@ export default {
           this.$set(this.pickValue,key,this.advancedValue[key])
         }
       }
+      const diffKey = this._pickDiffKey()
+      diffKey.forEach(key => this.$delete(this.pickValue,key))
       for(const item of this.customProps){
         this.$set(this.pickValue,item.key,item.value)
       }
+    },
+    _pickDiffKey () {
+      const keys = Object.keys(this.pickValue)
+      return keys.filter(item => this.ownProps.indexOf(item) === -1)
     }
   }
 }