FcDesigner/examples/components/MakeDragRule.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>