@houaoran/designer 1.0.0

package/src/components/FnEditor.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="_fd-fn">
+        <div class="_fd-fn-tip">
+            <div class="_fd-fn-ind"></div>
+            <div class="cm-keyword"><span
+            >function {{ name }}(<template v-for="(item, idx) in argList"
+            >{{
+                    idx > 0 ? ', ' : ''
+                }}<template v-if="item.type === 'string'">
+                                <span>{{ item.name }}</span> </template
+                ><template v-else
+                ><el-popover placement="top-start" :width="400" :hide-after="0" trigger="click" :title="item.name"
+                ><template #reference
+                ><span class="_fd-fn-arg">{{ item.name }}<i class="fc-icon icon-question"></i></span
+                ></template>
+                                    <template v-if="item.info">
+                                        <div class="_fd-fn-info" v-html="item.info || ''"></div>
+                                    </template>
+                                    <template v-if="item.columns">
+                                        <el-table :data="item.columns" border>
+                                            <el-table-column width="120" property="label" :label="t('props.field')"/>
+                                            <el-table-column property="info" :label="t('event.info')"/>
+                                            <el-table-column width="80" property="type" :label="t('event.type')"/>
+                                        </el-table>
+                                    </template>
+                                </el-popover>
+                            </template> </template
+            >) {</span
+            ></div>
+        </div>
+        <div ref="editor" class="_fd-fn-editor"></div>
+        <div class="_fd-fn-tip">
+            <div class="_fd-fn-ind"></div>
+            <div class="cm-keyword">}</div>
+        </div>
+        <el-button v-if="visible && button" type="primary" size="small" @click="save">{{ t('props.save') }}</el-button>
+    </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/hint/show-hint.css';
+import CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/javascript-hint';
+import 'codemirror/addon/hint/anyword-hint';
+import {defineComponent, markRaw} from 'vue';
+import {addAutoKeyMap, toJSON} from '../utils';
+import { getGlobalStubForParamName } from '../utils/hintStubs';
+import errorMessage from '../utils/message';
+
+const PREFIX = '[[FORM-CREATE-PREFIX-';
+const SUFFIX = '-FORM-CREATE-SUFFIX]]';
+
+export default defineComponent({
+    name: 'FnEditor',
+    emits: ['update:modelValue', 'change'],
+    props: {
+        modelValue: [String, Function],
+        name: String,
+        args: Array,
+        body: Boolean,
+        button: Boolean,
+        fnx: Boolean,
+    },
+    inject: ['designer'],
+    data() {
+        return {
+            editor: null,
+            fn: '',
+            visible: false,
+            value: '',
+            hintDebounceTimer: null,
+        };
+    },
+    beforeUnmount() {
+        if (this.hintDebounceTimer) {
+            clearTimeout(this.hintDebounceTimer);
+            this.hintDebounceTimer = null;
+        }
+    },
+    watch: {
+        modelValue(n) {
+            if (n != this.value && (!n || !n.__json || (n.__json && n.__json != this.value))) {
+                this.editor && this.editor.setValue(this.tidyValue());
+            }
+        },
+        argList: {
+            handler() {
+                if (this.editor) {
+                    this.editor.setOption('hintOptions', this.buildHintOptions());
+                }
+            },
+            deep: true,
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        argStr() {
+            return (this.args || []).map(arg => {
+                if (typeof arg === 'string') {
+                    return arg;
+                }
+                return arg.name;
+            }).join(', ');
+        },
+        argList() {
+            return (this.args || []).map(arg => {
+                if (typeof arg === 'string') {
+                    return {
+                        name: arg,
+                        type: 'string'
+                    }
+                }
+                return arg;
+            });
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.load();
+        });
+    },
+    methods: {
+        save() {
+            const str = this.editor.getValue() || '';
+            if (str.trim() === '') {
+                this.fn = '';
+            } else {
+                let fn;
+                try {
+                    fn = (new Function('return function (' + this.argStr + '){\n' + str + '\n}'))();
+                } catch (e) {
+                    console.error(e);
+                    errorMessage(this.t('struct.errorMsg'));
+                    return false;
+                }
+                if (this.body) {
+                    this.fn = (this.fnx ? '$FNX:' : '') + str;
+                } else {
+                    this.fn = PREFIX + fn + SUFFIX;
+                }
+            }
+            this.submit();
+            return true;
+        },
+        submit() {
+            this.$emit('update:modelValue', this.fn);
+            this.$emit('change', this.fn);
+            this.value = this.fn;
+            this.visible = false;
+        },
+        trimString(input) {
+            const firstIndex = input.indexOf('{');
+            const lastIndex = input.lastIndexOf('}');
+            if (firstIndex === -1 || lastIndex === -1 || firstIndex >= lastIndex) {
+                return input;
+            }
+            return input.slice(firstIndex + 1, lastIndex).replace(/^\n+|\n+$/g, '');
+        },
+        tidyValue() {
+            let value = this.modelValue || '';
+            if (value.__json) {
+                value = value.__json;
+            }
+            if (this.fnx && typeof value === 'string' && value.indexOf('$FNX:') === 0) {
+                value = value.slice(5);
+            }
+            if (typeof value === 'function') {
+                value = this.trimString(toJSON(value)).trim();
+            } else if (!this.body) {
+                value = this.trimString(value).trim();
+            }
+            this.value = value;
+            return value;
+        },
+        buildHintOptions() {
+            return {
+                hint: (cm, options) => {
+                    const additionalContext = Object.create(null);
+                    (this.argList || []).forEach(arg => {
+                        if (arg && arg.name) {
+                            additionalContext[arg.name] = getGlobalStubForParamName(arg.name);
+                        }
+                    });
+                    const opts = Object.assign({}, options || {}, { additionalContext });
+                    const js = CodeMirror.hint.javascript(cm, opts);
+                    if (js && js.list && js.list.length) {
+                        return js;
+                    }
+                    const token = cm.getTokenAt(cm.getCursor());
+                    if (token && /\b(?:string|comment)\b/.test(token.type)) {
+                        return js;
+                    }
+                    return CodeMirror.hint.anyword(cm, options);
+                },
+                completeSingle: false,
+            };
+        },
+        load() {
+            this.$nextTick(() => {
+                let value = this.tidyValue();
+                this.editor = markRaw(CodeMirror(this.$refs.editor, {
+                    lineNumbers: true,
+                    mode: {name: 'javascript', globalVars: true},
+                    extraKeys: {'Ctrl-Space': 'autocomplete'},
+                    hintOptions: this.buildHintOptions(),
+                    line: true,
+                    tabSize: 2,
+                    lineWrapping: true,
+                    value,
+                }));
+                this.editor.on('inputRead', (cm, change) => {
+                    if (change.origin !== '+input' || change.text.join('').length !== 1) {
+                        return;
+                    }
+                    const c = change.text[0];
+                    if (c === '.') {
+                        clearTimeout(this.hintDebounceTimer);
+                        this.hintDebounceTimer = null;
+                        setTimeout(() => {
+                            CodeMirror.commands.autocomplete(cm);
+                        }, 0);
+                        return;
+                    }
+                    if (!/[\w$]/.test(c)) {
+                        return;
+                    }
+                    clearTimeout(this.hintDebounceTimer);
+                    this.hintDebounceTimer = setTimeout(() => {
+                        this.hintDebounceTimer = null;
+                        if (!this.editor || cm.state.completionActive) {
+                            return;
+                        }
+                        CodeMirror.commands.autocomplete(cm);
+                    }, 150);
+                });
+                this.editor.on('change', () => {
+                    this.visible = true;
+                });
+                addAutoKeyMap(this.editor);
+            });
+        },
+    }
+});
+</script>
+
+<style>
+
+._fd-fn {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+._fd-fn .el-button {
+    position: absolute;
+    bottom: 3px;
+    right: 5px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+._fd-fn-editor {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+}
+
+._fd-fn-editor .CodeMirror {
+    height: 100%;
+    width: 100%;
+}
+
+._fd-fn-editor .CodeMirror-wrap pre.CodeMirror-line {
+    padding-left: 20px;
+}
+
+._fd-fn-tip {
+    color: #000;
+    font-family: monospace;
+    direction: ltr;
+    background: #F5F5F5;
+}
+
+._fd-fn-tip .cm-keyword {
+    color: #708;
+    line-height: 24px;
+    white-space: nowrap;
+    overflow-x: auto;
+}
+
+._fd-fn-tip .cm-keyword::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background-color: transparent;
+}
+
+._fd-fn-ind {
+    background-color: #ECECEC;
+    width: 29px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 4px;
+    border-right: 1px solid #ddd;
+    float: left;
+}
+
+._fd-fn-arg {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+._fd-fn-arg i {
+    font-size: 12px;
+    color: #3073ff;
+}
+
+._fd-fn-info a {
+    text-decoration: underline;
+}
+</style>

package/src/components/FnInput.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="_fd-fn-input">
+        <el-badge type="warning" is-dot :hidden="!configured">
+            <el-button @click="visible=true" size="small">
+                <slot>
+                    {{t('event.title')}}
+                </slot>
+            </el-button>
+        </el-badge>
+        <el-dialog class="_fd-fn-input-dialog _fd-config-dialog" :title="title || t('struct.title')" v-model="visible"
+                   destroy-on-close
+                   :close-on-click-modal="false"
+                   append-to-body width="800px">
+            <FnEditor ref="editor" v-model="value" :name="name" :args="args" :body="body" :fnx="fnx"></FnEditor>
+            <template #footer>
+                <div>
+                    <el-button @click="visible = false" size="default">{{ t('props.cancel') }}</el-button>
+                    <el-button type="primary" @click="onOk" size="default">{{ t('props.ok') }}</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+import {defineComponent} from 'vue';
+import FnEditor from './FnEditor.vue';
+
+export default defineComponent({
+    name: 'FnInput',
+    components: {FnEditor},
+    emits: ['update:modelValue', 'change'],
+    props: {
+        modelValue: [String, Function],
+        name: String,
+        args: Array,
+        title: String,
+        body: Boolean,
+        fnx: Boolean,
+        defaultValue: {
+            require: false
+        },
+        validate: Function,
+    },
+    inject: ['designer'],
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        configured() {
+            return !!this.modelValue;
+        },
+    },
+    data() {
+        return {
+            visible: false,
+            value: this.modelValue
+        };
+    },
+    watch: {
+        modelValue(n){
+            this.value = n;
+        }
+    },
+    methods: {
+        onOk() {
+            if(this.$refs.editor.save()) {
+                this.$emit('update:modelValue', this.value);
+                this.$emit('change', this.value);
+                this.visible = false;
+            }
+        },
+    }
+});
+</script>
+
+<style>
+._fd-fn-input {
+    width: 100%;
+}
+
+._fd-fn-input .el-badge {
+    width: 100%;
+}
+
+._fd-fn-input .el-button {
+    font-weight: 400;
+    width: 100%;
+    border-color: #2E73FF;
+    color: #2E73FF;
+}
+
+._fd-fn-input-dialog .CodeMirror-lint-tooltip {
+    z-index: 2021 !important;
+}
+
+._fd-fn-input-dialog .el-dialog__body {
+    padding: 0px;
+    height: 500px;
+}
+</style>

package/src/components/FormLabel.vue

@@ -0,0 +1,47 @@
+<template>
+    <span @click.capture="handleClick">
+        <template v-if="showField">
+            {{ rule.field }}
+        </template>
+        <template v-else>
+            <template v-if="rule.warning">
+                <Warning :tooltip="rule.warning">
+                    {{ rule.title }}
+                </Warning>
+            </template>
+            <template v-else>
+                {{ rule.title }}
+            </template>
+        </template>
+    </span>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import Warning from './Warning.vue';
+
+export default defineComponent({
+    name: 'FormLabel',
+    components: {
+        Warning,
+    },
+    props: {
+        rule: Object,
+    },
+    data() {
+        return {
+            showField: false,
+        };
+    },
+    methods: {
+        handleClick(e) {
+            if (e.ctrlKey || e.metaKey) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.showField = !this.showField;
+            }
+        },
+    },
+});
+</script>
+

package/src/components/HtmlEditor.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="_fd-html-editor">
+        <el-button @click="visible=true" style="width: 100%;">{{ title || t('struct.title') }}</el-button>
+        <el-dialog class="_fd-html-editor-con" :title="title || t('struct.title')" v-model="visible"
+                  :close-on-click-modal="false" append-to-body>
+            <div ref="editor" v-if="visible"></div>
+            <template #footer>
+                <div>
+                    <el-button @click="visible = false" size="default">{{ t('props.cancel') }}</el-button>
+                    <el-button type="primary" @click="onOk" size="default">{{ t('props.ok') }}</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css';
+import CodeMirror from 'codemirror/lib/codemirror';
+import {defineComponent, markRaw} from 'vue';
+import errorMessage from '../utils/message';
+
+export default defineComponent({
+    name: 'HtmlEditor',
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: String,
+        title: String,
+        defaultValue: {
+            require: false
+        },
+    },
+    inject: ['designer'],
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    data() {
+        return {
+            editor: null,
+            visible: false,
+            oldVal: null,
+        };
+    },
+    watch: {
+        modelValue() {
+            this.load();
+        },
+        visible(n) {
+            if (n) {
+                this.load();
+            }
+        }
+    },
+    methods: {
+        validateXML(xmlString) {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlString, 'text/html');
+            const parseErrors = xmlDoc.getElementsByTagName('parsererror');
+            if (parseErrors.length > 0) {
+                return parseErrors[0].innerText.split('\n')[0] ?? '';
+            } else {
+                return '';
+            }
+        },
+        load() {
+            this.oldVal = this.modelValue;
+            this.$nextTick(() => {
+                this.editor = markRaw(CodeMirror(this.$refs.editor, {
+                    lineNumbers: true,
+                    mode: 'xml',
+                    lint: true,
+                    line: true,
+                    tabSize: 2,
+                    lineWrapping: true,
+                    value: this.modelValue || ''
+                }));
+            });
+        },
+        onOk() {
+            const str = this.editor.getValue();
+            if (this.validateXML(str)) {
+                errorMessage(this.t('struct.errorMsg'));
+                return false;
+            }
+            this.visible = false;
+            if (str !== this.oldVal) {
+                this.$emit('update:modelValue', str);
+            }
+            return true;
+        },
+    }
+});
+</script>
+
+<style>
+._fd-html-editor {
+    width: 100%;
+}
+
+._fd-html-editor .el-button {
+    font-weight: 400;
+    width: 100%;
+    border-color: #2E73FF;
+    color: #2E73FF;
+}
+
+._fd-html-editor-con .CodeMirror {
+    height: 450px;
+}
+
+._fd-html-editor-con .CodeMirror-line {
+    line-height: 16px !important;
+    font-size: 13px !important;
+}
+
+._fd-html-editor-con .CodeMirror-lint-tooltip {
+    z-index: 2021 !important;
+}
+
+._fd-html-editor-con .el-dialog__body {
+    padding: 0px 20px;
+}
+</style>