273 lines
8.5 KiB
Vue
273 lines
8.5 KiB
Vue
|
<script>
|
||
|
|
import {defineComponent} from 'vue'
|
||
|
|
import makeRule from '../rule'
|
||
|
|
import StructEditor from "../../src/components/StructEditor.vue";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "MakeDragRule",
|
||
|
|
components: {StructEditor},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
formData: {},
|
||
|
|
rule: makeRule(),
|
||
|
|
value: {},
|
||
|
|
preview: false,
|
||
|
|
uni: 0,
|
||
|
|
options: {
|
||
|
|
"form": {
|
||
|
|
"inline": false,
|
||
|
|
"hideRequiredAsterisk": true,
|
||
|
|
"labelPosition": "right",
|
||
|
|
"size": "default",
|
||
|
|
"labelWidth": "125px"
|
||
|
|
},
|
||
|
|
"resetBtn": {
|
||
|
|
"show": false,
|
||
|
|
},
|
||
|
|
"submitBtn": {
|
||
|
|
"show": false,
|
||
|
|
},
|
||
|
|
"wrap": {
|
||
|
|
"style": {
|
||
|
|
"marginBottom": "8px"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"ignoreHiddenFields": true,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
preview(val) {
|
||
|
|
if (val) {
|
||
|
|
this.value = this.makeValue();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
makeValue() {
|
||
|
|
const dragRule = {
|
||
|
|
menu: 'aide',
|
||
|
|
icon: 'icon-tag',
|
||
|
|
name: this.formData.name,
|
||
|
|
label: this.formData.label,
|
||
|
|
}
|
||
|
|
if (this.formData.validate) {
|
||
|
|
dragRule.validate = this.formData.validate;
|
||
|
|
}
|
||
|
|
if (this.formData.event) {
|
||
|
|
dragRule.event = this.formData.event.map(item => item.name);
|
||
|
|
}
|
||
|
|
const rule = {
|
||
|
|
type: this.formData.name,
|
||
|
|
}
|
||
|
|
if (this.formData.type !== '1') {
|
||
|
|
rule.title = this.formData.label;
|
||
|
|
rule.field = this.formData.name;
|
||
|
|
rule.$required = false;
|
||
|
|
dragRule.menu = 'main';
|
||
|
|
dragRule.icon = 'icon-input';
|
||
|
|
}
|
||
|
|
rule.props = {};
|
||
|
|
if (this.formData.options && this.formData.options.length) {
|
||
|
|
rule.options = this.formData.options;
|
||
|
|
}
|
||
|
|
dragRule.rule = (new Function('return function () { return' + JSON.stringify(rule) + '}'))();
|
||
|
|
const props = [];
|
||
|
|
(this.formData.props || []).forEach((item, index) => {
|
||
|
|
const prop = {
|
||
|
|
type: item.props_type,
|
||
|
|
field: item.field,
|
||
|
|
title: item.name
|
||
|
|
}
|
||
|
|
if (props.type === 'select') {
|
||
|
|
prop.options = props.options || []
|
||
|
|
}
|
||
|
|
props.push(prop);
|
||
|
|
})
|
||
|
|
dragRule.props = (new Function('return function () { return' + JSON.stringify(props) + '}'))();
|
||
|
|
return dragRule;
|
||
|
|
},
|
||
|
|
demo1() {
|
||
|
|
this.uni++;
|
||
|
|
this.rule = makeRule();
|
||
|
|
this.formData = {
|
||
|
|
"type": "2",
|
||
|
|
"name": "input",
|
||
|
|
"label": "输入框",
|
||
|
|
"validate": [
|
||
|
|
"string"
|
||
|
|
],
|
||
|
|
"event": [
|
||
|
|
{
|
||
|
|
"name": "change"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "blur"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"props": [
|
||
|
|
{
|
||
|
|
"name": "类型",
|
||
|
|
"field": "type",
|
||
|
|
"props_type": "select",
|
||
|
|
"options": [
|
||
|
|
{
|
||
|
|
"label": "输入框",
|
||
|
|
"value": "text"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"label": "多行输入框",
|
||
|
|
"value": "textarea"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "禁用",
|
||
|
|
"field": "disabled",
|
||
|
|
"props_type": "switch",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "占位显示",
|
||
|
|
"field": "placeholder",
|
||
|
|
"props_type": "input",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
demo2() {
|
||
|
|
this.uni++;
|
||
|
|
this.rule = makeRule();
|
||
|
|
this.formData = {
|
||
|
|
"type": "3",
|
||
|
|
"name": "checkbox",
|
||
|
|
"label": "多选框",
|
||
|
|
"options": [
|
||
|
|
{
|
||
|
|
"label": "选项1",
|
||
|
|
"value": "1"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"label": "选项2",
|
||
|
|
"value": "2"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"label": "选项3",
|
||
|
|
"value": "3"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"validate": [
|
||
|
|
"array"
|
||
|
|
],
|
||
|
|
"event": [
|
||
|
|
{
|
||
|
|
"name": "change"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"props": [
|
||
|
|
{
|
||
|
|
"field": "disabled",
|
||
|
|
"name": "是否禁用",
|
||
|
|
"props_type": "switch"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"field": "type",
|
||
|
|
"name": "按钮类型",
|
||
|
|
"props_type": "select",
|
||
|
|
"options": [
|
||
|
|
{
|
||
|
|
"label": "默认",
|
||
|
|
"value": "default"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"label": "按钮",
|
||
|
|
"value": "button"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
demo3() {
|
||
|
|
this.uni++;
|
||
|
|
this.rule = makeRule();
|
||
|
|
this.formData = {
|
||
|
|
"type": "1",
|
||
|
|
"name": "button",
|
||
|
|
"label": "按钮",
|
||
|
|
"event": [
|
||
|
|
{
|
||
|
|
"name": "click"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"props": [
|
||
|
|
{
|
||
|
|
"field": "disabled",
|
||
|
|
"name": "是否禁用",
|
||
|
|
"props_type": "switch"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"field": "formCreateChild",
|
||
|
|
"name": "内容",
|
||
|
|
"props_type": "input",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="_fd-make-drag-rule">
|
||
|
|
<span @click="visible = true">生成拖拽规则</span>
|
||
|
|
<el-dialog class="_fd-make-drag-pop" v-model="visible">
|
||
|
|
<template #header>
|
||
|
|
生成拖拽规则 <span style="font-size: 12px;color:var(--fc-text-color-2);">可以生成任意 Vue 组件或 UI 组件的拖拽规则</span>
|
||
|
|
</template>
|
||
|
|
<template v-if="!preview">
|
||
|
|
<formCreate :key="uni" :rule="rule" v-model="formData" :option="options"></formCreate>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<StructEditor ref="editor" v-model="value"></StructEditor>
|
||
|
|
</template>
|
||
|
|
<template #footer>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<template v-if="!preview">
|
||
|
|
<el-button @click="demo1">示例1</el-button>
|
||
|
|
<el-button @click="demo2">示例2</el-button>
|
||
|
|
<el-button @click="demo3">示例3</el-button>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<el-button v-if="!preview" @click="preview = true" type="primary">下一步</el-button>
|
||
|
|
<el-button v-else @click="preview = false" type="primary">上一步</el-button>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
._fd-make-drag-rule > span {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--el-text-color-regular);
|
||
|
|
}
|
||
|
|
|
||
|
|
._fd-make-drag-pop .el-dialog__body {
|
||
|
|
height: 500px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
._fd-make-drag-pop .el-dialog__footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
._fd-make-drag-pop .el-dialog__footer > div {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
._fd-make-drag-pop ._fd-struct-editor, ._fd-make-drag-pop .CodeMirror {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|