修复数组报错的问题

This commit is contained in:
zyqwst
2020-06-27 16:27:26 +08:00
parent 615431bcc0
commit 639028f99f
2 changed files with 67 additions and 25 deletions

View File

@@ -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>

View File

@@ -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;