Skip to content

I
ibzlite
提交 204d0106 编写于 作者: llz's avatar llz
浏览文件
操作

update json编辑器组件

上级 5dc9819a
显示空白字符变更
内嵌 并排
正在显示 包含 207 行增加 和 181 行删除
app_web/package.json
浏览文件 @ 204d0106
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
"@fullcalendar/list": "^4.4.0", "@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0", "@fullcalendar/timegrid": "^4.4.0",
"@fullcalendar/vue": "^4.4.0", "@fullcalendar/vue": "^4.4.0",
"@json-editor/json-editor": "^2.5.1", "@json-editor/json-editor": "1.4.0-beta.0",
"@popperjs/core": "^2.4.3", "@popperjs/core": "^2.4.3",
"async-validator": "^3.3.0", "async-validator": "^3.3.0",
"axios": "^0.19.1", "axios": "^0.19.1",
......
app_web/src/components/app-form-json/app-form-json.less
浏览文件 @ 204d0106
.btn-secondary { .app-form-json{
.btn-secondary {
color: black; color: black;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
.form-control { .form-control {
display: block; display: block;
height: calc(1.4em + 0.75rem + 2px); height: calc(1.4em + 0.75rem + 2px);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
} }
h3, .h3 { h3, .h3 {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-top: 5px; margin-top: 5px;
}
.row{
> div {
> div{
display: flex;
}
}
}
.nav{
display: block;
> li{
border-radius: 5px;
padding: 5px;
cursor: pointer;
>
a:hover{
text-decoration: none;
}
}
.active{
background-color:#357AB3;
>
a{
color: #fff;
}
a:hover{
color: #fff;
}
}
}
.control-label{
min-width: 100px;
display: inline-block;
}
} }
\ No newline at end of file
//.bg-light {
// background-color: #fff!important;
//}
\ No newline at end of file
app_web/src/components/app-form-json/app-form-json.vue
浏览文件 @ 204d0106
<template> <template>
<div> <div class="app-form-json">
<textarea style="width:100%" v-model="CurrentVal"></textarea> <textarea style="width:100%" v-model="CurrentVal"></textarea>
<div id='editor_holder_json'></div> <div id='editor_holder_json'></div>
</div> </div>
...@@ -70,25 +70,12 @@ export default class AppFormJson extends Vue { ...@@ -70,25 +70,12 @@ export default class AppFormJson extends Vue {
*/ */
private formStateEvent: Subscription | undefined; private formStateEvent: Subscription | undefined;
/**
* Vue生命周期（实例创建完成后）
*
* @memberof AppFormJson
*/
public created() {
if (!this.formState) {
return;
}
}
/** /**
* Vue生命周期（实例销毁后） * Vue生命周期（实例销毁后）
* *
* @memberof AppFormJson * @memberof AppFormJson
*/ */
public destroyed() { public destroyed() {
if (this.editor) this.editor = null; if (this.editor) this.editor = null;
} }
...@@ -98,8 +85,15 @@ export default class AppFormJson extends Vue { ...@@ -98,8 +85,15 @@ export default class AppFormJson extends Vue {
* @memberof AppFormJson * @memberof AppFormJson
*/ */
public mounted() { public mounted() {
if (!this.formState) {
return;
}
this.formStateEvent = this.formState.subscribe(($event: any) => {
if (Object.is($event.type, "load")) {
this.renderJsoneditor(); this.renderJsoneditor();
} }
});
}
/** /**
* 编辑器对象 * 编辑器对象
...@@ -122,140 +116,140 @@ export default class AppFormJson extends Vue { ...@@ -122,140 +116,140 @@ export default class AppFormJson extends Vue {
} }
let _schema = { let _schema = {
"$ref": "#/definitions/model", $ref: "#/definitions/model",
"definitions": { definitions: {
"model": { model: {
"title": "模型", title: "模型",
"headerTemplate": "{{ self.dataModelName }}", headerTemplate: "{{ self.dataModelName }}",
"type": "object", type: "object",
"format": "grid", format: "grid",
"properties": { properties: {
"dataModelName": { dataModelName: {
"title": "模型名", title: "模型名",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 1 propertyOrder: 1,
}, },
"objectProperties": { objectProperties: {
"title": "对象参数集合", title: "对象参数集合",
"type": "array", type: "array",
"format": "tabs", format: "tabs",
"uniqueItems": true, uniqueItems: true,
"items": { items: {
"title": "对象", title: "对象",
"headerTemplate": "{{ self.propertyName }}", headerTemplate: "{{ self.propertyName }}",
"type": "object", type: "object",
"properties": { properties: {
"propertyName": { propertyName: {
"title": "对象", title: "对象",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 1 propertyOrder: 1,
}, },
"system": { system: {
"title": "系统", title: "系统",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 2 propertyOrder: 2,
}, },
"propertyEntity": { propertyEntity: {
"title": "结构实体", title: "结构实体",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 3 propertyOrder: 3,
}, },
"propertyMappings": { propertyMappings: {
"title": "对象关系映射", title: "对象关系映射",
"type": "array", type: "array",
"format": "table", format: "table",
"uniqueItems": true, uniqueItems: true,
"items": { items: {
"title": "映射", title: "映射",
"type": "object", type: "object",
"properties": { properties: {
"selfPropertyColumn": { selfPropertyColumn: {
"title": "列", title: "列",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 1 propertyOrder: 1,
}, },
"joinPropertyName": { joinPropertyName: {
"title": "关联对象", title: "关联对象",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 2 propertyOrder: 2,
}, },
"joinPropertyColumn": { joinPropertyColumn: {
"title": "关联列", title: "关联列",
"type": "string", type: "string",
"options": { options: {
"grid_columns": 4 grid_columns: 4,
}, },
"propertyOrder": 3 propertyOrder: 3,
} },
} },
},
propertyOrder: 4,
},
},
},
propertyOrder: 2,
},
nestedDataModels: {
title: "嵌套子模型集合",
type: "array",
format: "tabs",
uniqueItems: true,
items: {
title: "子模型",
$ref: "#/definitions/model",
},
propertyOrder: 3,
},
layerMappings: {
title: "模型上下级映射",
type: "array",
format: "table",
uniqueItems: true,
items: {
title: "映射",
type: "object",
properties: {
selfPropertyColumn: {
title: "列",
type: "string",
options: {
grid_columns: 4,
},
propertyOrder: 1,
},
parentPropertyColumn: {
title: "父模型列",
type: "string",
options: {
grid_columns: 4,
},
propertyOrder: 2,
},
},
},
propertyOrder: 4,
},
}, },
"propertyOrder": 4
}
}
}, },
"propertyOrder": 2
},
"nestedDataModels": {
"title": "嵌套子模型集合",
"type": "array",
"format": "tabs",
"uniqueItems": true,
"items": {
"title": "子模型",
"$ref": "#/definitions/model"
},
"propertyOrder": 3
},
"layerMappings": {
"title": "模型上下级映射",
"type": "array",
"format": "table",
"uniqueItems": true,
"items": {
"title": "映射",
"type": "object",
"properties": {
"selfPropertyColumn": {
"title": "列",
"type": "string",
"options": {
"grid_columns": 4
},
"propertyOrder": 1
},
"parentPropertyColumn": {
"title": "父模型列",
"type": "string",
"options": {
"grid_columns": 4
},
"propertyOrder": 2
}
}
}, },
"propertyOrder": 4
}
}
}
}
}; };
let opt: any = { let opt: any = {
schema: _schema, schema: _schema,
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或