1
This commit is contained in:
robin
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="_fc-t-header">
|
||||
<img class="_fc-t-logo" src="http://form-create.com/logo.png">
|
||||
<div class="_fc-t-name">form-create-designer</div>
|
||||
<div class="_fc-t-menu">
|
||||
<el-button size="small" @click="setJson"> 导入JSON</el-button>
|
||||
<el-button size="small" @click="setOption"> 导入Options</el-button>
|
||||
<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
|
||||
<el-button size="small" type="success" @click="showOption">生成Options</el-button>
|
||||
<el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<fc-designer ref="designer"/>
|
||||
|
||||
<ElFooter class="_fc-copyright" height="30px">
|
||||
<div class="_fc-b-item">
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="400"
|
||||
trigger="hover">
|
||||
<el-image src="http://form-create.com/img/donation.jpg"></el-image>
|
||||
<template #reference>
|
||||
<span>赞助</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<span style="margin: 0 5px;">|</span>
|
||||
<div class="_fc-b-item">
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=xaboy&repo=form-create-designer&type=star&count=true&size=mini"
|
||||
frameborder="0" scrolling="0" width="90" height="21" title="GitHub"></iframe>
|
||||
</div>
|
||||
<span style="margin: 0 5px;">|</span>
|
||||
<div class="_fc-b-item">
|
||||
<a href='https://gitee.com/xaboy/form-create-designer/stargazers' style="display: inline-flex;"><img
|
||||
src='https://gitee.com/xaboy/form-create-designer/badge/star.svg?theme=dark' alt='gitee'/></a>
|
||||
</div>
|
||||
</ElFooter>
|
||||
|
||||
<el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
|
||||
<div ref="editor" v-if="state"></div>
|
||||
<span style="color: red;" v-if="err">输入内容格式有误!</span>
|
||||
<template #footer v-if="type > 2">
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="state = false" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="onOk" size="small">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jsonlint from 'jsonlint-mod';
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import 'codemirror/addon/lint/lint.css';
|
||||
import CodeMirror from 'codemirror/lib/codemirror';
|
||||
import 'codemirror/addon/lint/lint';
|
||||
import 'codemirror/addon/lint/json-lint';
|
||||
import 'codemirror/mode/javascript/javascript';
|
||||
import 'codemirror/mode/vue/vue';
|
||||
import 'codemirror/mode/xml/xml';
|
||||
import 'codemirror/mode/css/css';
|
||||
import 'codemirror/addon/mode/overlay';
|
||||
import 'codemirror/addon/mode/simple';
|
||||
import 'codemirror/addon/selection/selection-pointer';
|
||||
import 'codemirror/mode/handlebars/handlebars';
|
||||
import 'codemirror/mode/htmlmixed/htmlmixed';
|
||||
import 'codemirror/mode/pug/pug';
|
||||
|
||||
import is from '@form-create/utils/lib/type';
|
||||
import formCreate from '@form-create/element-ui';
|
||||
// import image from '../src/components/custom/image.ts';
|
||||
|
||||
|
||||
const TITLE = ['生成规则', '表单规则', '生成组件', '设置生成规则', '设置表单规则'];
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
data() {
|
||||
return {
|
||||
state: false,
|
||||
value: null,
|
||||
title: TITLE,
|
||||
editor: null,
|
||||
err: false,
|
||||
type: -1,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
state(n) {
|
||||
if (!n) {
|
||||
this.value = null;
|
||||
this.err = false;
|
||||
}
|
||||
},
|
||||
value() {
|
||||
this.load();
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
let val;
|
||||
if (this.type === 2) {
|
||||
val = this.value;
|
||||
} else if (this.type === 0) {
|
||||
val = formCreate.toJson(this.value, 2);
|
||||
} else {
|
||||
val = JSON.stringify(this.value, null, 2);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.editor = CodeMirror(this.$refs.editor, {
|
||||
lineNumbers: true,
|
||||
mode: this.type === 2 ? {name: 'vue'} : 'application/json',
|
||||
gutters: ['CodeMirror-lint-markers'],
|
||||
// lint: true,
|
||||
line: true,
|
||||
tabSize: 2,
|
||||
lineWrapping: true,
|
||||
value: val || ''
|
||||
});
|
||||
});
|
||||
},
|
||||
onValidationError(e) {
|
||||
this.err = e.length !== 0;
|
||||
},
|
||||
showJson() {
|
||||
this.state = true;
|
||||
this.type = 0;
|
||||
this.value = this.$refs.designer.getRule();
|
||||
},
|
||||
showOption() {
|
||||
this.state = true;
|
||||
this.type = 1;
|
||||
this.value = this.$refs.designer.getOption();
|
||||
},
|
||||
showTemplate() {
|
||||
this.state = true;
|
||||
this.type = 2;
|
||||
this.value = this.makeTemplate();
|
||||
},
|
||||
setJson() {
|
||||
this.state = true;
|
||||
this.type = 3;
|
||||
this.value = [];
|
||||
},
|
||||
setOption() {
|
||||
this.state = true;
|
||||
this.type = 4;
|
||||
this.value = {form: {}};
|
||||
},
|
||||
onOk() {
|
||||
if (this.err) return;
|
||||
const json = this.editor.getValue();
|
||||
let val = JSON.parse(json);
|
||||
if (this.type === 3) {
|
||||
if (!Array.isArray(val)) {
|
||||
this.err = true;
|
||||
return;
|
||||
}
|
||||
this.$refs.designer.setRule(formCreate.parseJson(json));
|
||||
} else {
|
||||
if (!is.Object(val) || !val.form) {
|
||||
this.err = true;
|
||||
return;
|
||||
}
|
||||
this.$refs.designer.setOption(val);
|
||||
}
|
||||
this.state = false;
|
||||
},
|
||||
makeTemplate() {
|
||||
const rule = this.$refs.designer.getRule();
|
||||
const opt = this.$refs.designer.getOption();
|
||||
return `<template>
|
||||
<form-create
|
||||
v-model="fapi"
|
||||
:rule="rule"
|
||||
:option="option"
|
||||
@submit="onSubmit"
|
||||
></form-create>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formCreate from "@form-create/element-ui";
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fapi: null,
|
||||
rule: formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}'),
|
||||
option: formCreate.parseJson('${JSON.stringify(opt)}')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit (formData) {
|
||||
//todo 提交表单
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`;
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
window.jsonlint = jsonlint;
|
||||
},
|
||||
created() {
|
||||
// this.$nextTick(() => {
|
||||
// console.log("插入组件规则",this.$refs.designer);
|
||||
// //插入组件规则
|
||||
// this.$refs.designer.addComponent(image);
|
||||
// //插入拖拽按钮到`main`分类下
|
||||
// this.$refs.designer.appendMenuItem("main", {
|
||||
// icon : image.icon,
|
||||
// name : image.name,
|
||||
// label: image.label
|
||||
// });
|
||||
// });
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
._fc-t-header {
|
||||
height: 60px;
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
._fc-t-logo {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
._fc-t-name {
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
._fc-t-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
._fc-t-menu i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
._fc-copyright {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
border-top: 1px solid #ECECEC;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
._fc-t-dialog .CodeMirror {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
._fc-t-dialog .CodeMirror-line {
|
||||
line-height: 16px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
z-index: 2021 !important;
|
||||
}
|
||||
|
||||
._fc-t-dialog .el-dialog__body {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
._fc-b-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user