@houaoran/designer 1.0.0

package/src/components/Struct.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="_fd-struct">
+        <el-badge type="warning" is-dot :hidden="!configured">
+            <div @click="visible=true">
+                <slot>
+                    <el-button class="_fd-plain-button" plain size="small">
+                        {{ title || t('struct.title') }}
+                    </el-button>
+                </slot>
+            </div>
+        </el-badge>
+        <el-dialog class="_fd-struct-con" :title="title || t('struct.title')" v-model="visible" destroy-on-close
+                   :close-on-click-modal="false"
+                   append-to-body width="800px">
+            <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" color="#2f73ff">{{ t('props.ok') }}</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css';
+import CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/display/placeholder';
+import {deepParseFn, toJSON} from '../utils/index';
+import {deepCopy} from '@form-create/utils/lib/deepextend';
+import {defineComponent, markRaw} from 'vue';
+import is from '@form-create/utils/lib/type';
+import errorMessage from '../utils/message';
+import beautify from 'js-beautify';
+
+export default defineComponent({
+    name: 'Struct',
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: [Object, Array, Function, String],
+        title: String,
+        placeholder: String,
+        defaultValue: {
+            require: false
+        },
+        validate: Function,
+        text: Boolean,
+    },
+    inject: ['designer'],
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        configured() {
+            return !is.empty(this.modelValue) && Object.keys(this.modelValue).length > 0;
+        },
+    },
+    data() {
+        return {
+            editor: null,
+            visible: false,
+            oldVal: null,
+        };
+    },
+    watch: {
+        modelValue() {
+            this.load();
+        },
+        visible(n) {
+            if (n) {
+                this.load();
+            }
+        },
+    },
+    methods: {
+        load() {
+            const val = this.text
+                ? this.modelValue || this.defaultValue
+                : toJSON(deepParseFn(this.modelValue ? deepCopy(this.modelValue) : this.defaultValue));
+            const placeholder = this.placeholder || '';
+            this.oldVal = val;
+            this.$nextTick(() => {
+                this.editor = markRaw(CodeMirror(this.$refs.editor, {
+                    lineNumbers: true,
+                    mode: this.text ? 'null' : 'javascript',
+                    lint: true,
+                    line: true,
+                    tabSize: 2,
+                    lineWrapping: true,
+                    placeholder,
+                    value: val && !this.text ? beautify.js(val, {
+                        indent_size: '2',
+                        indent_char: ' ',
+                        max_preserve_newlines: '5',
+                        indent_scripts: 'separate',
+                    }) : this.text ? (val || '') : '',
+                }));
+            });
+        },
+        onOk() {
+            const str = (this.editor.getValue() || '').trim();
+            let val;
+            if (this.text) {
+                val = str;
+            } else {
+                try {
+                    val = (new Function('return ' + str))();
+                } catch (e) {
+                    console.error(e);
+                    errorMessage(this.t('struct.errorMsg'));
+                    return false;
+                }
+            }
+            if (this.validate && false === this.validate(val)) {
+                errorMessage(this.t('struct.errorMsg'));
+                return false;
+            }
+            this.visible = false;
+            if (toJSON(val, null, 2) !== this.oldVal) {
+                this.$emit('update:modelValue', val);
+            }
+            return true;
+        },
+    }
+});
+</script>
+
+<style>
+._fd-struct {
+    width: 100%;
+}
+
+._fd-struct .el-badge {
+    width: 100%;
+}
+
+._fd-struct .el-button {
+    font-weight: 400;
+    width: 100%;
+    border-color: #2E73FF;
+    color: #2E73FF;
+}
+
+._fd-struct-con .CodeMirror {
+    height: 500px;
+}
+
+._fd-struct-con .el-dialog__body {
+    padding: 0px;
+}
+</style>

package/src/components/StructEditor.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="_fd-struct-editor">
+        <div ref="editor"></div>
+    </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css';
+import CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/mode/javascript/javascript';
+import {toJSON} from '../utils/index';
+import {defineComponent, markRaw} from 'vue';
+import errorMessage from '../utils/message';
+import {designerForm} from '../utils/form';
+import beautify from 'js-beautify';
+
+export default defineComponent({
+    name: 'StructEditor',
+    props: {
+        modelValue: [Object, Array, Function, String],
+        format: Boolean,
+        defaultValue: {
+            require: false
+        }
+    },
+    emits: ['blur', 'focus', 'update:modelValue'],
+    inject: ['designer'],
+    data() {
+        return {
+            editor: null,
+            visible: false,
+            err: false,
+            oldVal: null,
+        };
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    watch: {
+        modelValue(n) {
+            if (this.editor) {
+                const val = n ? this.toJson(n) : '';
+                this.oldVal = val;
+                const scrollInfo = this.editor.getScrollInfo();
+                const scrollTop = scrollInfo.top;
+                this.editor.setValue(val);
+                this.editor.scrollTo(0, scrollTop);
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.load();
+        });
+    },
+    methods: {
+        toJson(val) {
+            return this.format ? designerForm.toJson(val, 2) : toJSON(val);
+        },
+        load() {
+            const val = this.modelValue ? this.toJson(this.modelValue) : '';
+            this.oldVal = val;
+            this.$nextTick(() => {
+                this.editor = markRaw(CodeMirror(this.$refs.editor, {
+                    lineNumbers: true,
+                    mode: 'javascript',
+                    lint: true,
+                    line: true,
+                    tabSize: 2,
+                    lineWrapping: true,
+                    value: val ? beautify.js(val, {
+                        indent_size: '2',
+                        indent_char: ' ',
+                        max_preserve_newlines: '5',
+                        indent_scripts: 'separate',
+                    }) : '',
+                }));
+                this.editor.on('blur', () => {
+                    this.$emit('blur');
+                });
+                this.editor.on('focus', () => {
+                    this.$emit('focus');
+                });
+            });
+        },
+        save() {
+            const str = (this.editor.getValue() || '').trim();
+            let val;
+            try {
+                val = (new Function('return ' + str))();
+            } catch (e) {
+                console.error(e);
+                errorMessage(this.t('struct.errorMsg'));
+                return false;
+            }
+            if (this.validate && false === this.validate(val)) {
+                this.err = true;
+                return false;
+            }
+            this.visible = false;
+            if (this.toJson(val) !== this.oldVal) {
+                this.$emit('update:modelValue', val);
+            }
+            return true;
+        },
+    }
+});
+</script>
+
+<style>
+._fd-struct-editor {
+    flex: 1;
+    width: 100%;
+}
+
+._fd-struct-editor > div {
+    height: 100%;
+}
+</style>

package/src/components/StructTree.vue

@@ -0,0 +1,209 @@
+<template>
+    <FcTree
+        class="_fd-struct-tree"
+        ref="tree"
+        :data="treeData"
+        :indent="10"
+        default-expand-all
+        :placeholder="treePlaceholder"
+        :filter-node-method="treeFilterNode"
+        :get-key="getKey"
+        :get-children="getChildren"
+        draggable
+        :can-inner-drop="treeCanInnerDrop"
+        :before-drag="treeBeforeDrag"
+        :before-drop="treeBeforeDrop"
+        ensure-children
+        @select="select"
+        @drop="onDrop"
+    >
+        <template #default="{ node, data }">
+            <slot :node="node" :data="data" />
+        </template>
+    </FcTree>
+</template>
+
+<script>
+import FcTree from './tree/FcTree.vue';
+
+function defaultGetKey(item) {
+    return item?.id ?? item?.rule?._fc_id ?? item?.rule?.field ?? item?.rule?.name ?? item;
+}
+
+export default {
+    name: 'StructTree',
+    components: { FcTree },
+    inject: {
+        designer: { default: null },
+    },
+    props: {
+        getKey: { type: Function, default: defaultGetKey },
+        // 通用树 children 适配（默认使用 item.children）
+        getChildren: { type: Function, default: item => item?.children },
+    },
+    computed: {
+        designerProxy() {
+            return this.designer.setupState;
+        },
+        treeData() {
+            return Array.isArray(this.designerProxy.treeInfo) ? this.designerProxy.treeInfo : [];
+        },
+        treePlaceholder() {
+            return this.designerProxy.t('designer.search');
+        },
+    },
+    methods: {
+        filter(val) {
+            this.$refs.tree && this.$refs.tree.filter && this.$refs.tree.filter(val);
+        },
+        select(item) {
+            // 这里是 StructTree 的唯一使用点（树面板），选中即激活组件
+            this.designerProxy.triggerActive(item?.rule);
+        },
+        treeFilterNode(val, data) {
+            if (!val) return true;
+            return (
+                data.id?.indexOf(val) > -1 ||
+                data.rule?.field?.indexOf(val) > -1 ||
+                data.rule?.name?.indexOf(val) > -1 ||
+                data.rule?.title?.indexOf(val) > -1 ||
+                data.rule.__fc__?.refRule?.__$title?.value?.indexOf(val) > -1 ||
+                (typeof data.rule?.children?.[0] === 'string' && data.rule?.children?.[0].indexOf(val) > -1)
+            );
+        },
+        treeCanInnerDrop(item) {
+            const rule = item?.rule;
+            if (!rule) return false;
+            const menu = rule._menu;
+            if (!menu) return true;
+            if (menu.drag === true) return true;
+            if (menu.children) return true;
+            return false;
+        },
+        treeBeforeDrag({ dragItem }) {
+            const rule = dragItem?.rule;
+            if (!rule) return false;
+            const d = this.designerProxy;
+            const hiddenDragBtn = d.hiddenDragBtn;
+            const hidden = typeof hiddenDragBtn === 'object' && hiddenDragBtn ? hiddenDragBtn.value : hiddenDragBtn;
+            const permission = d.getPermission(rule);
+            return !(permission?.move === false || hidden);
+        },
+        treeBeforeDrop({ dragItem, toParent }) {
+            const dragRule = dragItem?._menu ? dragItem : dragItem?.rule;
+            const toParentRule = toParent?._menu ? toParent : toParent?.rule;
+            if (!dragRule || !toParentRule) return !!dragRule._menu.menu;
+            const menu = toParentRule._menu;
+            if (menu) {
+                if (!menu.children && menu.drag !== true) return false;
+                if (menu.children && menu.children !== menu.name && menu.children !== dragRule._menu?.name) return false;
+                if (!dragRule._menu.menu) {
+                    if (dragRule.__fc__.parent.rule.type === 'DragTool') {
+                        return dragRule.__fc__.parent.parent.rule === toParentRule;
+                    } else {
+                        return dragRule.__fc__.parent.rule === toParentRule;
+                    }
+                }
+            }
+            return true;
+        },
+        getMovableRule(rule) {
+            if (!rule) return null;
+            if (rule._menu?.inside) {
+                return rule;
+            }
+            return rule.__fc__?.parent?.rule || rule;
+        },
+        getRuleTop(rule) {
+            let parent = rule?.__fc__?.parent?.rule;
+            let current = rule;
+            const config = parent?._menu;
+            if (config && config.inside) {
+                current = parent;
+                parent = parent.__fc__?.parent?.rule;
+            }
+            return { root: parent, parent: current };
+        },
+        getRuleParentInfo(rule) {
+            const moveRule = this.getMovableRule(rule);
+            const parentRule = moveRule?.__fc__?.parent?.rule || null;
+            return {
+                moveRule,
+                parentRule,
+                list: parentRule?.children || [],
+            };
+        },
+        getRootRuleList(fallbackRule) {
+            const firstRoot = (this.treeData || [])[0];
+            if (firstRoot?.rule) {
+                const { list } = this.getRuleParentInfo(firstRoot.rule);
+                if (Array.isArray(list) && list.length > 0) {
+                    return list;
+                }
+                const mr = this.getMovableRule(firstRoot.rule);
+                if (mr && Array.isArray(mr.children)) {
+                    return mr.children;
+                }
+                return list || [];
+            }
+            if (fallbackRule) {
+                return this.getRuleTop(fallbackRule).root?.children || [];
+            }
+            return [];
+        },
+        onDrop(payload) {
+            // payload 来自 FcTree：dragItem/dropItem 是树节点对象（非 rule）
+            const dragItem = payload?.dragItem;
+            if (!dragItem) return false;
+
+            const sourceInfo = this.getRuleParentInfo(dragItem.rule);
+            if (!sourceInfo.moveRule || !sourceInfo.list) return false;
+
+            // beforeDrop/canDrop 已在 FcTree 里判断过，这里只做最终业务移动
+            let targetList;
+            let targetIndex = payload.toIndex;
+            if (payload.dropType === 'inner') {
+                const targetItem = payload.toParent;
+                if (!targetItem) return false;
+                if (!Array.isArray(targetItem.rule.children)) targetItem.rule.children = [];
+                targetList = targetItem.rule.children;
+            } else if (payload.toKey === '__root__') {
+                targetList = this.getRootRuleList(dragItem.rule);
+            } else {
+                const targetItem = payload.dropItem;
+                const targetInfo = targetItem ? this.getRuleParentInfo(targetItem.rule) : null;
+                targetList = targetInfo?.list || null;
+            }
+            if (!targetList) return false;
+
+            const oldIndex = sourceInfo.list.indexOf(sourceInfo.moveRule);
+            if (oldIndex < 0) return false;
+
+            // 同一列表内拖拽时，resolvedIndex 是“包含自身”的插入位；若最终还是原位，直接视为无操作
+            if (sourceInfo.list === targetList) {
+                let normalizedIndex = targetIndex;
+                if (oldIndex < normalizedIndex) normalizedIndex -= 1;
+                if (normalizedIndex === oldIndex) return false;
+            }
+            delete sourceInfo.moveRule.slot;
+            this.designerProxy.handleSortBefore();
+
+            sourceInfo.list.splice(oldIndex, 1);
+            if (sourceInfo.list === targetList && oldIndex < targetIndex) {
+                targetIndex -= 1;
+            }
+            if (targetIndex < 0) targetIndex = 0;
+            if (targetIndex > targetList.length) targetIndex = targetList.length;
+            targetList.splice(targetIndex, 0, sourceInfo.moveRule);
+            this.designerProxy.handleSortAfter();
+            return true;
+        },
+    },
+};
+</script>
+
+<style scoped>
+._fd-struct-tree {
+    padding: 8px 12px;
+}
+</style>

package/src/components/TableOptions.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="_td-table-opt">
+        <el-table
+            :data="value"
+            border
+            :size="size || 'small'"
+            style="width: 100%">
+            <template v-for="(col,idx) in column" :key="col.label + idx">
+                <el-table-column :label="col.label">
+                    <template #default="scope">
+                        <template v-if="col.value">
+                            <ValueInput :size="size || 'small'" :modelValue="scope.row[col.key]" :disabled="disabled"
+                                        @update:modelValue="(n)=>(scope.row[col.key] = n)"
+                                        @blur="onInput(scope.row)" @change-type="onInput(scope.row)"></ValueInput>
+                        </template>
+                        <template v-else>
+                            <el-input :size="size || 'small'" :disabled="disabled" :modelValue="scope.row[col.key] || ''"
+                                      @Update:modelValue="(n)=>(scope.row[col.key] = n)"
+                                      @blur="onInput(scope.row)"
+                                      @keydown.enter="onInput(scope.row)"></el-input>
+                        </template>
+                    </template>
+                </el-table-column>
+            </template>
+            <el-table-column width="45" align="center" fixed="right" v-if="!disabled">
+                <template #default="scope">
+                    <i class="fc-icon icon-delete" @click="del(scope.$index)"></i>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="_td-table-opt-handle">
+            <el-button link type="primary" @click="add" v-if="!max || max > value.length">
+                <i class="fc-icon icon-add"></i> {{ t('tableOptions.add') }}
+            </el-button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import {copy} from '@form-create/utils/lib/extend';
+import ValueInput from './ValueInput.vue';
+
+export default defineComponent({
+    name: 'TableOptions',
+    emits: ['update:modelValue', 'change'],
+    components: {
+        ValueInput
+    },
+    props: {
+        modelValue: [Array, Object],
+        column: {
+            type: Array,
+            default: () => [{label: 'label', key: 'label'}, {label: 'value', key: 'value'}]
+        },
+        valueType: String,
+        max: Number,
+        size: String,
+        disabled: Boolean,
+    },
+    inject: ['designer'],
+    watch: {
+        modelValue() {
+            this.value = this.tidyModelValue();
+        }
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    data() {
+        return {
+            value: this.tidyModelValue(),
+        };
+    },
+    methods: {
+        tidyModelValue() {
+            const modelValue = this.modelValue;
+            if (this.valueType === 'string') {
+                return (modelValue || []).map(value => {
+                    return {value: '' + value}
+                })
+            } else if (this.valueType === 'object') {
+                return Object.keys((modelValue || {})).map(label => {
+                    return {label, value: modelValue[label]}
+                })
+            } else {
+                return [...modelValue || []].map(v => {
+                    return copy(v);
+                });
+            }
+        },
+        tidyValue() {
+            if (this.valueType === 'object') {
+                const obj = {};
+                this.value.forEach(v => {
+                    if (v.label && v.value) {
+                        obj[v.label] = v.value;
+                    }
+                })
+                return obj;
+            } else {
+                return this.value.map(v => {
+                    if (this.valueType === 'string') {
+                        return v.value;
+                    }
+                    return {...v}
+                });
+            }
+        },
+        onInput(item) {
+            if (this.column.length === 1 && '' === item[this.column[0].key]) {
+                return;
+            }
+            const flag = this.column.every(v => {
+                if (v.required === false) {
+                    return true;
+                }
+                if (['object', 'string'].indexOf(this.valueType) > -1) {
+                    return item[v.key] !== undefined && item[v.key] !== '' && item[v.key] !== null;
+                }
+                return item[v.key] !== undefined;
+            })
+            if (flag) {
+                this.input();
+            }
+        },
+        input() {
+            const value = this.tidyValue();
+            this.$emit('update:modelValue', value);
+            this.$emit('change', value);
+        },
+        add() {
+            this.value.push(this.column.reduce((initial, v) => {
+                initial[v.key] = '';
+                return initial;
+            }, {}));
+        },
+        del(idx) {
+            this.value.splice(idx, 1);
+            this.input();
+        }
+    }
+});
+</script>
+
+<style scoped>
+._td-table-opt {
+    width: 100%;
+}
+
+._td-table-opt .el-table {
+    z-index: 1;
+}
+
+._td-table-opt-handle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 5px;
+}
+</style>