修复数组报错的问题

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> <template>
<div id="app"> <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> </div>
</template> </template>
@@ -9,20 +15,55 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
tree:{ tree:
{
root: { root: {
type: "object", type: "object"
title: "title",
properties: {
field_1: {
type: "string"
},
},
required: ["field_1"]
} }
} }
} }
} }
} }
</script> </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> <template>
<div class="form-recursion"> <div class="json-schema-editor">
<a-row class="row" :gutter="10"> <a-row class="row" :gutter="10">
<a-col :span="8" class="ant-col-name"> <a-col :span="8" class="ant-col-name">
<div :style="{marginLeft:`${20*deep}px`}" class="ant-col-name-c"> <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> <span v-else style="width:32px;display:inline-block"></span>
<a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/> <a-input :disabled="disabled" :value="pickKey" class="ant-col-name-input" @input="onInputName"/>
</div> </div>
<a-checkbox v-if="root" :disabled="!isObject && !isArray" class="ant-col-name-required" @change="onRootCheck"/> <a-tooltip v-if="root">
<a-checkbox v-else :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/> <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>
<a-col :span="4"> <a-col :span="4">
<a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType"> <a-select v-model="pickValue.type" class="ant-col-type" @change="onChangeType">
@@ -111,13 +117,9 @@ export default {
countAdd: 1 countAdd: 1
} }
}, },
mounted(){
console.info(this.value)
},
methods: { methods: {
onInputName(event){ onInputName(){
clearAttr(this.value) clearAttr(this.value)
console.info(event)
}, },
onInputTitle(event){ onInputTitle(event){
this.title = event.target.value this.title = event.target.value
@@ -137,10 +139,11 @@ export default {
this._deepCheck(checked,this.pickValue) this._deepCheck(checked,this.pickValue)
}, },
_deepCheck(checked,node){ _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') 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])) 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') 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])) 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) const pos = required.indexOf(this.pickKey)
pos >=0 && required.splice(pos,1) pos >=0 && required.splice(pos,1)
} }
required.length === 0 && this.$delete(parent,'required')
}, },
addChild(){ addChild(){
const name = this._joinName() const name = this._joinName()
@@ -164,11 +168,9 @@ export default {
node.properties || this.$set(node,'properties',{}) node.properties || this.$set(node,'properties',{})
const props = node.properties const props = node.properties
this.$set(props,name,{type: type}) this.$set(props,name,{type: type})
console.info(this.value)
}, },
removeNode(){ removeNode(){
const { properties,required } = this.parent const { properties,required } = this.parent
console.info(properties,required)
this.$delete(properties,this.pickKey) this.$delete(properties,this.pickKey)
if(required){ if(required){
const pos = required.indexOf(this.pickKey) const pos = required.indexOf(this.pickKey)
@@ -183,8 +185,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.form-recursion{ .json-schema-editor{
width:100%;
.row{ .row{
display: flex; display: flex;
margin:12px; margin:12px;