From 639028f99f0dafc3b5638f754ec31f3b937b8c39 Mon Sep 17 00:00:00 2001
From: zyqwst <790321193@qq.com>
Date: Sat, 27 Jun 2020 16:27:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=95=B0=E7=BB=84=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/App.vue                     | 63 +++++++++++++++++++++++-----
 packages/json-schema-editor/main.vue | 29 ++++++-------
 2 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/examples/App.vue b/examples/App.vue
index db0269c..52d3025 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,6 +1,12 @@
 <template>
   <div id="app">
-    <json-schema-editor :disabled="true" :value="tree" :root="true" style="width:600px"/>
+    <div class="title">
+      Demo
+    </div>
+    <div class="container">
+      <pre>{{tree}}</pre>
+      <json-schema-editor class="schema" :disabled="true" :value="tree" :root="true"/>
+    </div>
   </div>
 </template>
 
@@ -9,20 +15,55 @@ export default {
   name: 'App',
   data() {
     return {
-      tree:{
+      tree:
+      {
         root: {
-          type: "object",
-          title: "title",
-          properties: {
-            field_1: {
-              type: "string"
-            },
-          },
-          required: ["field_1"]
+          type: "object"
         }
       }
     }
   }
 }
 </script>
-
+<style>
+*{
+  padding:0;
+  margin:0;
+  box-sizing: border-box;
+}
+.title{
+  text-align: center;
+  font-size: 40px;
+  font-weight: bold;
+  height:100px;
+  line-height: 100px;
+}
+.container{
+  display: flex;
+  padding:20px;
+  width:80vw;
+  min-width:800px;
+  justify-content:center;
+  height: calc(100vh - 100px);
+  margin:auto;
+}
+pre {
+  font-family: monospace;
+  height: 100%;
+  overflow-y: auto;
+  border:1px solid rgba(0,0,0,.1);
+  border-radius: 8px;
+  padding: 12px;
+  width:50%
+}
+.schema{
+  margin-left: 20px;
+  width:50%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x:hidden;
+  border:1px solid rgba(0,0,0,.1);
+  border-radius: 8px;
+  padding: 12px;
+}
+</style>
diff --git a/packages/json-schema-editor/main.vue b/packages/json-schema-editor/main.vue
index 6f86959..4e19420 100644
--- a/packages/json-schema-editor/main.vue
+++ b/packages/json-schema-editor/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="form-recursion">
+  <div class="json-schema-editor">
       <a-row class="row" :gutter="10">
         <a-col :span="8" class="ant-col-name">
           <div :style="{marginLeft:`${20*deep}px`}" class="ant-col-name-c">
@@ -7,8 +7,14 @@
             <span v-else style="width:32px;display:inline-block"></span>
             <a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/>
           </div>
-          <a-checkbox v-if="root" :disabled="!isObject && !isArray"  class="ant-col-name-required" @change="onRootCheck"/>
-          <a-checkbox v-else :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
+          <a-tooltip v-if="root">
+            <span slot="title">全选</span>
+            <a-checkbox :disabled="!isObject && !isArray"  class="ant-col-name-required" @change="onRootCheck"/>
+          </a-tooltip>
+          <a-tooltip v-else>
+            <span slot="title">是否必填</span>
+            <a-checkbox :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
+          </a-tooltip>
         </a-col>
         <a-col :span="4">
           <a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType">
@@ -111,13 +117,9 @@ export default {
       countAdd: 1
     }
   },
-  mounted(){
-    console.info(this.value)
-  },
   methods: {
-    onInputName(event){
+    onInputName(){
       clearAttr(this.value)
-      console.info(event)
     },
     onInputTitle(event){
       this.title = event.target.value
@@ -137,10 +139,11 @@ export default {
      this._deepCheck(checked,this.pickValue)
     },
     _deepCheck(checked,node){
-      if(node.type === 'object'){
+      if(node.type === 'object' && node.properties){
         checked ? this.$set(node,'required',Object.keys(node.properties)) : this.$delete(node,'required')
         Object.keys(node.properties).forEach(key => this._deepCheck(checked,node.properties[key]))
-      } else if(node.type === 'array'){
+      } else if(node.type === 'array' && node.items.type === 'object'){
+        console.info("t1",node)
         checked ? this.$set(node.items,'required',Object.keys(node.items.properties)) : this.$delete(node.items,'required')
         Object.keys(node.items.properties).forEach(key => this._deepCheck(checked,node.items.properties[key]))
       }
@@ -156,6 +159,7 @@ export default {
         const pos = required.indexOf(this.pickKey)
         pos >=0 && required.splice(pos,1)
       }
+      required.length === 0 && this.$delete(parent,'required')
     },
     addChild(){
       const name = this._joinName()
@@ -164,11 +168,9 @@ export default {
       node.properties || this.$set(node,'properties',{})
       const props = node.properties
       this.$set(props,name,{type: type})
-      console.info(this.value)
     },
     removeNode(){
       const { properties,required } = this.parent 
-      console.info(properties,required)
       this.$delete(properties,this.pickKey)
       if(required){
         const pos = required.indexOf(this.pickKey)
@@ -183,8 +185,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.form-recursion{
-  width:100%;
+.json-schema-editor{
   .row{
     display: flex;
     margin:12px;