Skip to content

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

update json编辑器组件

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