@houaoran/designer 1.0.0

package/src/components/JsonPreview.vue

@@ -0,0 +1,146 @@
+<template>
+    <el-container class="_fc-json-preview">
+        <el-header height="40px" class="_fc-l-tabs">
+            <div class="_fc-l-tab"
+                 :class="{active: active==='rule'}"
+                 @click="active='rule'"> {{ t('designer.json') }}
+            </div>
+            <div class="_fc-l-tab"
+                 :class="{active: active==='options'}"
+                 @click="active='options'"> {{ t('designer.form') }}
+            </div>
+            <div class="_fc-json-preview-down">
+                <el-tooltip effect="dark" :content="t('props.export')" placement="top" :hide-after="0">
+                    <i class="fc-icon icon-download" @click="downloadJson"></i>
+                </el-tooltip>
+            </div>
+        </el-header>
+        <el-main style="padding: 8px;">
+            <StructEditor ref="editor" v-model="value" @blur="handleBlur" @focus="handleFocus" format
+                          style="height:100%;"></StructEditor>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import StructEditor from './StructEditor.vue';
+import {designerForm} from '../utils/form';
+
+export default defineComponent({
+    name: 'JsonPreview',
+    components: {StructEditor},
+    inject: ['designer'],
+    data() {
+        return {
+            active: 'rule',
+            value: this.designer.setupState.getRule(),
+            oldValue: '',
+        }
+    },
+    watch: {
+        active() {
+            this.updateValue();
+        }
+    },
+    computed: {
+        change() {
+            if (this.active === 'rule') {
+                return this.designer.setupState.children;
+            } else {
+                return this.designer.setupState.formOptions;
+            }
+        },
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    methods: {
+        updateValue() {
+            if (this.active === 'rule') {
+                this.value = this.designer.setupState.getRule();
+            } else {
+                this.value = this.designer.setupState.getOptions();
+            }
+        },
+        handleFocus() {
+            this.oldValue = designerForm.toJson(this.value);
+        },
+        handleBlur() {
+            let str;
+            if (this.$refs.editor.save() && (str = designerForm.toJson(this.value)) !== this.oldValue) {
+                if (this.active === 'rule') {
+                    this.designer.setupState.setRule(this.value ? str : []);
+                } else {
+                    this.designer.setupState.setOptions(this.value || {});
+                }
+            }
+        },
+        downloadJson() {
+            const data = {
+                rule: this.designer.setupState.getRule(),
+                options: this.designer.setupState.getOptions(),
+            };
+            const str = designerForm.toJson(data);
+            const blob = new Blob([str], {type: 'application/json'});
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `fc-json-${Date.now()}.json`;
+            link.click();
+            setTimeout(() => {
+                URL.revokeObjectURL(url);
+            }, 0);
+        }
+    },
+    mounted() {
+        this.$watch(() => this.change, () => {
+            this.updateValue();
+        }, {deep: true});
+    }
+});
+</script>
+
+<style>
+._fc-json-preview {
+    display: flex;
+    width: 100%;
+    color: #262626;
+}
+
+._fc-json-preview-down {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    right: 8px;
+    top: 0;
+}
+
+._fc-json-preview .icon-download {
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    border-radius: 3px;
+    color: #666666;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    opacity: 0.8;
+}
+
+._fc-json-preview .icon-download:hover {
+    background: #f5f5f5;
+    color: #262626;
+    opacity: 1;
+}
+
+._fc-json-preview .CodeMirror {
+    height: 100%;
+    font-size: 12px;
+}
+</style>

package/src/components/OptionsTextInput.vue

@@ -0,0 +1,151 @@
+<template>
+    <Struct
+        v-model="structValue"
+        text
+        :title="t('struct.editText')"
+        :defaultValue="''"
+        :placeholder="placeholder"
+        :validate="validateStruct"
+    ></Struct>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import Struct from './Struct.vue';
+
+export default defineComponent({
+    name: 'OptionsTextInput',
+    emits: ['update:modelValue'],
+    components: { Struct },
+    inject: ['designer'],
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => [],
+        },
+        field: {
+            type: Object,
+            default: () => ({
+                label: 'label',
+                value: 'value',
+                children: 'children',
+            }),
+        },
+        parseSpace: {
+            type: Boolean,
+            default: false,
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        labelKey() {
+            return this.field?.label || 'label';
+        },
+        valueKey() {
+            return this.field?.value || 'value';
+        },
+        childrenKey() {
+            return this.field?.children || 'children';
+        },
+    },
+    data() {
+        return {
+            structValue: '',
+            syncingFromModel: false,
+        };
+    },
+    watch: {
+        modelValue: {
+            handler(val) {
+                this.syncingFromModel = true;
+                this.structValue = this.optionsToText(Array.isArray(val) ? val : []);
+                this.$nextTick(() => {
+                    this.syncingFromModel = false;
+                });
+            },
+            immediate: true,
+            deep: true,
+        },
+        structValue(val) {
+            if (this.syncingFromModel) {
+                return;
+            }
+            this.$emit('update:modelValue', this.textToOptions(val));
+        },
+        parseSpace() {
+            this.syncingFromModel = true;
+            this.structValue = this.optionsToText(Array.isArray(this.modelValue) ? this.modelValue : []);
+            this.$nextTick(() => {
+                this.syncingFromModel = false;
+            });
+        },
+    },
+    methods: {
+        validateStruct(val) {
+            return typeof val === 'string';
+        },
+        optionsToText(options, depth = 0) {
+            if (!Array.isArray(options) || !options.length) {
+                return '';
+            }
+            const lines = [];
+            options.forEach(item => {
+                const text = item?.[this.labelKey] ?? item?.[this.valueKey] ?? '';
+                if (text !== '') {
+                    const level = this.parseSpace ? depth : 0;
+                    lines.push(`${' '.repeat(level)}${text}`);
+                }
+                if (Array.isArray(item?.[this.childrenKey]) && item[this.childrenKey].length) {
+                    const childText = this.optionsToText(item[this.childrenKey], depth + 1);
+                    if (childText) {
+                        lines.push(childText);
+                    }
+                }
+            });
+            return lines.join('\n');
+        },
+        textToOptions(text) {
+            const lines = String(text || '')
+                .replace(/\t/g, ' ')
+                .split(/\r?\n/)
+                .filter(line => line.trim() !== '');
+            const root = [];
+            const stack = [];
+
+            lines.forEach(line => {
+                const indent = (line.match(/^ */) || [''])[0].length;
+                const depth = this.parseSpace ? Math.min(indent, stack.length) : 0;
+                const content = line.trim();
+                const node = {};
+                node[this.labelKey] = content;
+                node[this.valueKey] = content;
+
+                while (stack.length > depth) {
+                    stack.pop();
+                }
+
+                if (depth === 0 || !stack[depth - 1]) {
+                    root.push(node);
+                } else {
+                    const parent = stack[depth - 1];
+                    if (!Array.isArray(parent[this.childrenKey])) {
+                        parent[this.childrenKey] = [];
+                    }
+                    parent[this.childrenKey].push(node);
+                }
+
+                stack[depth] = node;
+                stack.length = depth + 1;
+            });
+
+            return root;
+        },
+    },
+});
+</script>

package/src/components/PropsInput.vue

@@ -0,0 +1,72 @@
+<template>
+    <Struct class="_fd-props-input" :modelValue="props" @update:modelValue="onInput" :title="t('designer.customProps')">
+        <i class="fc-icon icon-edit"></i>
+    </Struct>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import Struct from './Struct.vue';
+import extend from '@form-create/utils/lib/extend';
+
+export default defineComponent({
+    name: 'PropsInput',
+    components: {Struct},
+    inject: ['designer'],
+    data() {
+        return {}
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        activeRule() {
+            return this.designer.setupState.activeRule;
+        },
+        props() {
+            const propsKeys = this.activeRule._fc_store?.props_keys || [];
+            const props = {};
+            propsKeys.forEach(k => {
+                if (this.activeRule.props && this.activeRule.props[k] != null) {
+                    props[k] = this.activeRule.props[k];
+                }
+            });
+            return props;
+        },
+    },
+    methods: {
+        onInput(props) {
+            if (!this.activeRule.props) {
+                this.activeRule.props = {};
+            }
+            if (!this.activeRule._fc_store) {
+                this.activeRule._fc_store = {};
+            }
+            Object.keys(this.props).forEach(k => {
+                if ((props || {})[k] == null) {
+                    delete this.activeRule.props[k];
+                }
+            });
+            extend(this.activeRule.props, props || {});
+            const keys = Object.keys(props || {});
+            if (keys.length) {
+                this.activeRule._fc_store.props_keys = keys;
+            } else {
+                delete this.activeRule._fc_store.props_keys;
+            }
+        }
+    }
+
+});
+</script>
+
+<style>
+._fd-props-input {
+    display: inline-block;
+    width: 16px;
+}
+
+._fd-props-input .fc-icon {
+    cursor: pointer;
+}
+</style>

package/src/components/Required.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="_fd-required">
+        <el-switch v-model="required"></el-switch>
+        <LanguageInput v-model="requiredMsg" v-if="required"
+                       :placeholder="t('validate.requiredPlaceholder')"></LanguageInput>
+    </div>
+</template>
+
+<script>
+import is from '@form-create/utils/lib/type';
+import {defineComponent} from 'vue';
+import LanguageInput from './language/LanguageInput.vue';
+
+export default defineComponent({
+    name: 'Required',
+    components: {LanguageInput},
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: {}
+    },
+    inject: ['designer'],
+    watch: {
+        required() {
+            this.update();
+        },
+        requiredMsg() {
+            this.update();
+        },
+        modelValue(n) {
+            const flag = is.String(n);
+            this.required = n === undefined ? false : (flag ? true : !!n);
+            this.requiredMsg = flag ? n : '';
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    data() {
+        const flag = is.String(this.modelValue);
+        return {
+            required: this.modelValue === undefined ? false : (flag ? true : !!this.modelValue),
+            requiredMsg: flag ? this.modelValue : ''
+        };
+    },
+    methods: {
+        update() {
+            let val;
+            if (this.required === false) {
+                val = false;
+            } else {
+                val = this.requiredMsg || true;
+            }
+            this.$emit('update:modelValue', val);
+        },
+    }
+});
+</script>
+
+<style>
+._fd-required {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+._fd-required .el-input {
+    margin-left: 15px;
+}
+
+._fd-required .el-switch {
+    height: 28px;
+}
+</style>

package/src/components/Row.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="_fd-row el-row" :class="{'_fc-child-empty' : !$slots.default}" v-bind="$attrs">
+        <slot name="default"></slot>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    name: 'fcRow',
+    mounted() {
+    }
+
+});
+</script>
+
+<style>
+._fd-row {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+</style>

package/src/components/SignaturePad.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="_fc-signature" :class="{disabled: disabled}">
+        <template v-if="modelValue">
+            <div class="_fc-signature-preview">
+                <i class="fc-icon icon-delete2" v-if="!disabled" @click="remove"></i>
+                <img :src="modelValue" alt="signature">
+            </div>
+        </template>
+        <template v-else>
+            <div class="_fc-signature-btn" @click="open"><i class="fc-icon icon-edit2"></i> {{ tipText }}</div>
+        </template>
+        <el-dialog class="_fc-signature-dialog" :title="padTitleText"
+                   v-model="visible"
+                   destroy-on-close
+                   :close-on-click-modal="false"
+                   append-to-body width="640px">
+            <canvas class="_fc-signature-pad" ref="pad" width="600px" height="270px"></canvas>
+            <template #footer>
+                <div>
+                    <el-button size="default" @click="clear()">{{ formCreateInject.t('reset') || '重置' }}</el-button>
+                    <el-button type="primary" :disabled="isEmpty" @click="submit" size="default">
+                        {{ formCreateInject.t('ok') || '确定' }}
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {defineComponent, markRaw} from 'vue';
+import SignaturePad from 'signature_pad';
+
+export default defineComponent({
+    name: 'SignaturePad',
+    emits: ['update:modelValue', 'change', 'remove'],
+    data() {
+        return {
+            visible: false,
+            isEmpty: true,
+            signaturePad: null,
+        };
+    },
+    props: {
+        modelValue: String,
+        penColor: String,
+        disabled: Boolean,
+        tip: String,
+        padTitle: String,
+        formCreateInject: Object,
+        beforeRemove: Function,
+    },
+    computed: {
+        tipText() {
+            return this.tip || this.formCreateInject?.t('signaturePadTip') || '点击添加手写签名';
+        },
+        padTitleText() {
+            return this.padTitle || this.formCreateInject?.t('signaturePadTitle') || '请在虚线框内书写';
+        },
+    },
+    watch: {
+        visible(val) {
+            if (val) {
+                this.isEmpty = true;
+                this.$nextTick(() => {
+                    this.signaturePad = markRaw(new SignaturePad(this.$refs.pad, {
+                        penColor: this.penColor,
+                    }));
+                    this.signaturePad.addEventListener('endStroke', () => {
+                        this.isEmpty = this.signaturePad.isEmpty();
+                    });
+                });
+            } else {
+                this.signaturePad.off();
+                this.signaturePad = null;
+            }
+        }
+    },
+
+    methods: {
+        open() {
+            if (!this.disabled) {
+                this.visible = true;
+            }
+        },
+        clear() {
+            this.signaturePad.clear();
+            this.isEmpty = true;
+        },
+        submit() {
+            const res = this.signaturePad.toDataURL();
+            this.updateValue(res);
+            this.visible = false;
+        },
+        updateValue(val) {
+            this.$emit('update:modelValue', val);
+            this.$emit('change', val);
+        },
+        async remove() {
+            if (this.disabled) {
+                return;
+            }
+            // 检查是否有删除前置回调
+            if (this.beforeRemove) {
+                const result = await this.beforeRemove();
+                // 如果回调返回 false，则停止删除
+                if (result === false) {
+                    return;
+                }
+            }
+            this.updateValue('');
+            this.$emit('remove');
+        },
+    },
+});
+</script>
+
+<style>
+
+._fc-signature {
+    width: 100%;
+}
+
+._fc-signature-btn, ._fc-signature-preview {
+    width: 100%;
+    min-width: 160px;
+    height: 88px;
+    line-height: 88px;
+    font-size: 14px;
+    color: rgb(201, 204, 216);
+    border-radius: 4px;
+    border: 1px dashed rgb(212, 215, 224);
+    text-align: center;
+    background: rgb(255, 255, 255);
+    position: relative;
+    box-sizing: border-box;
+}
+
+._fc-signature-btn {
+    cursor: pointer;
+}
+
+._fc-signature.disabled ._fc-signature-btn {
+    cursor: not-allowed;
+}
+
+._fc-signature-preview > img {
+    display: inline-block;
+    height: 88px;
+}
+
+._fc-signature-preview .icon-delete2 {
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    display: inline-block;
+    line-height: 14px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+._fc-signature-btn i {
+    font-size: 14px;
+}
+
+._fc-signature-dialog .el-dialog__body {
+    text-align: center;
+}
+
+._fc-signature-pad {
+    border-radius: 4px;
+    border: 1px dashed #D4D7E0;
+    background-image: linear-gradient(#FFFFFF 14px, transparent 0), linear-gradient(90deg, #FFFFFF 14px, #D4D7E0 0);
+    background-size: 15px 15px;
+}
+</style>