sun-form-v3 1.0.64 → 1.0.66

package/src/assets/styles/element/index.scss

@@ -0,0 +1,15 @@
+/* 只需要重写你需要的即可 */
+@forward 'element-plus/theme-chalk/src/common/var.scss'with (
+  $colors: ('primary': (
+      'base': rgb(85, 132, 255),
+    ),
+  ),
+);
+
+
+
+@use "element-plus/theme-chalk/src/index.scss"as *;
+
+body {
+  margin: 0;
+}

package/src/assets/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/components/a.js

@@ -0,0 +1,14 @@
+const modules =
+    import.meta.glob('./test**.vue', {
+        eager: true
+    });
+    console.log('modules',modules);
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, module]) => {
+        const componentName = module.default.name
+        return [componentName, module.default];
+    })
+);
+export default {
+    ...components,
+};

package/src/components/aDesigner/config.vue

@@ -0,0 +1,127 @@
+<template>
+    <common-card title="基础属性" class="mb-1">
+        <div class="w-full">
+            <common-label-container label="唯一名称">
+                <el-input v-model="chosenWidget.id" disabled>
+                    <template #append>
+                        <el-button icon="Refresh" />
+                    </template>
+                </el-input>
+            </common-label-container>
+            <common-label-container label="组件标签">
+                <el-input v-model="chosenWidget.props.label">
+                </el-input>
+            </common-label-container>
+            <common-label-container label="字段名称">
+                <el-input v-model="chosenWidget.props.zdname" placeholder="填写会作为表单字段名称">
+                </el-input>
+            </common-label-container>
+            <common-label-container label="默认赋值">
+                <common-type-input v-model="chosenWidget.props.value"></common-type-input>
+            </common-label-container>
+            <common-label-container label="备注内容">
+                <el-input v-model="chosenWidget.props.remark" placeholder="填写会有备注提示内容">
+                </el-input>
+            </common-label-container>
+            <common-label-container label="组件宽度">
+                <el-slider v-model="chosenWidget.props.width" :step="2" show-stops :max="24" :min="6" />
+            </common-label-container>
+            <common-label-container label="标签宽度">
+                <el-input v-model="chosenWidget.props.labelWidth" placeholder="请填写标签信息">
+                </el-input>
+            </common-label-container>
+            <common-label-container label="标签位置">
+                <el-radio-group v-model="chosenWidget.props.labelPosition">
+                    <el-radio-button value="left" label="居左"></el-radio-button>
+                    <el-radio-button value="top" label="居上"></el-radio-button>
+                </el-radio-group>
+            </common-label-container>
+            <common-label-container label="标签对齐">
+                <el-radio-group v-model="chosenWidget.props.labelAlign">
+                    <el-radio-button value="left" label="居左"></el-radio-button>
+                    <el-radio-button value="right" label="居右"></el-radio-button>
+                </el-radio-group>
+            </common-label-container>
+            <common-label-container label="是否隐藏">
+                <el-radio-group v-model="chosenWidget.props.hide">
+                    <el-radio-button :value="false" label="显示"></el-radio-button>
+                    <el-radio-button :value="true" label="隐藏"></el-radio-button>
+                </el-radio-group>
+            </common-label-container>
+        </div>
+        <!-- <common-json-input v-model="data.chosenWidget.props.list"></common-json-input> -->
+        <common-api-config :designer="designer" v-if="chosenWidget.props.apiSet"
+            v-model="chosenWidget.props.apiSet"></common-api-config>
+        <component :ref="chosenWidget.id" :is="getComponent(chosenWidget.type)" :widget="chosenWidget" :designer="designer">
+        </component>
+    </common-card>
+    <common-card title="事件属性">
+        <common-label-container label="onCreated">
+            <modalEditor v-model="chosenWidget.props.onCreated" :params="['widget', 'self', 'app']" :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onMounted">
+            <modalEditor v-model="chosenWidget.props.onMounted" :params="['widget', 'self', 'app']" :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onInput">
+            <modalEditor v-model="chosenWidget.props.onInput" :params="['value', 'widget', 'self', 'app']"
+                :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onChange">
+            <modalEditor v-model="chosenWidget.props.onChange" :params="['value', 'widget', 'self', 'app']"
+                :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onFocus">
+            <modalEditor v-model="chosenWidget.props.onFocus" :params="['value', 'widget', 'self', 'app']"
+                :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onBlur">
+            <modalEditor v-model="chosenWidget.props.onBlur" :params="['value', 'widget', 'self', 'app']"
+                :designer="designer">
+            </modalEditor>
+        </common-label-container>
+        <common-label-container label="onHandle">
+            <modalEditor v-model="chosenWidget.props.onHandle" :params="['widget', 'self', 'app']" :designer="designer">
+            </modalEditor>
+        </common-label-container>
+    </common-card>
+    <!-- <common-code-editor v-model="data.chosenWidget.props.value"></common-code-editor> -->
+    <!-- <modalEditor v-model="data.chosenWidget.props.value"></modalEditor> -->
+    <!-- <CommonTypeInput v-model="data.chosenWidget.props.value"></CommonTypeInput> -->
+    <!-- <common-api-config :designer="designer" v-if="chosenWidget.props.apiSet"
+        v-model="chosenWidget.props.apiSet"></common-api-config>
+    {{ chosenWidget }} -->
+    <!-- {{ designer.widgetConfig }} -->
+</template>
+
+<script setup>
+
+import { ref, reactive, watch, computed, defineAsyncComponent } from 'vue';
+import commonCodeEditor from '../widgetCommonComps/commonCodeEditor/editor.vue'
+import modalEditor from '../widgetCommonComps/commonCodeEditor/modalEditor.vue'
+const modules = import.meta.glob('../widgetConfigComps/**/index.vue');
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, importFn]) => {
+        const match = path.match(/\/([^/]+)\/index\.vue$/);
+        const componentName = match ? match[1] : null;
+        return [componentName, defineAsyncComponent(importFn)];
+    })
+);
+const getComponent = (type) => {
+  return components['config-' + type] || null;
+};
+defineOptions({ name: "config" })
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: {}
+    }
+})
+let designer = props.designer
+let chosenWidget = computed(() => designer.chosenWidget)
+</script>
+<style scoped lang="scss"></style>

package/src/components/aDesigner/design.vue

@@ -0,0 +1,21 @@
+<template>
+    <commonContainer class="h-full w-full" :widget="designer.widgetConfig" :designer="designer">
+        <widget-homepage :widget="designer.widgetConfig" :designer="designer"></widget-homepage>
+    </commonContainer>
+</template>
+
+<script setup>
+import draggable from "vuedraggable";
+import { ref, reactive, toRaw, markRaw } from 'vue';
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: {}
+    }
+})
+let designer = props.designer
+let homeWidget = designer.widgetConfig
+defineOptions({ name: "design" })
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/aDesigner/designer.js

@@ -0,0 +1,342 @@
+import XEUtils from "xe-utils"
+import Http from './http'
+import {
+    ElNotification
+} from 'element-plus'
+import {
+    reactive,
+    ref,
+    watch
+} from 'vue'
+/**
+ * 设计器类，用于管理组件配置和交互
+ * @class Designer
+ * @param {Object} options 初始化选项，包含组件配置
+ */
+class Designer {
+    constructor({
+        widgetConfig,
+        showMode = false
+    }) {
+        /**
+         * 渲染器模式
+         */
+        this.showMode = ref(showMode)
+        /**
+         * 反向响应式的组件配置对象
+         */
+        this.widgetConfig = reactive(widgetConfig);
+        /**
+         * XEUtils 工具库实例
+         */
+        this.$utils = XEUtils;
+        /**
+         * 组件映射表，用于快速查找组件
+         */
+        this.widgetMap = new Map();
+        /**
+         * Vue 实例映射表，用于快速查找 Vue 实例
+         */
+        this.vueInstanceMap = new Map();
+        /**
+         * 组件ID列表
+         */
+        this.widgetIds = [];
+        /**
+         * 当前选中的组件引用
+         */
+        this.chosenWidget = ref(null);
+        /**
+         * 操作历史列表
+         */
+        this.historyList = [];
+        /**
+         * 操作历史索引
+         */
+        this.historyIndex = ref(0);
+        /**
+         * 标记是否在操作历史中
+         */
+        this.isHistory = false;
+        /**
+         * Http服务实例，用于发起请求
+         */
+        this.$http = new Http({
+            baseUrl: "/api"
+        });
+        /**
+         * 根据组件配置构建组件映射表
+         */
+        this.buildWidgetMap(this.widgetConfig);
+        /**
+         * 监听组件配置的变化，重建组件映射表，并更新选中组件
+         */
+        watch(() => this.widgetConfig, (val) => {
+            this.rebuildWidgetMap();
+            this.chosenWidget.value = this.getWidgetById(this.widgetConfig.chosenId);
+        }, {
+            deep: true,
+            immediate: true
+        });
+        /**
+         * 监听组件列表的变化，记录操作历史
+         */
+        watch(() => this.widgetConfig.widgetList, (val) => {
+            if (!this.isHistory) {
+                this.historyList.push({
+                    widgetConfig: this.$utils.clone(this.widgetConfig, true),
+                    time: this.$utils.toDateString(new Date(), 'HH:mm:ss'),
+                    index: this.historyList.length
+                });
+                this.historyIndex.value = this.historyList.length - 1;
+            } else {
+                this.isHistory = false;
+            }
+        }, {
+            deep: true,
+            immediate: true
+        });
+    }
+    eventHandle({
+        value = null,
+        eventType,
+        widget,
+        tableItemData
+    }) {
+        if (!this.showMode) return;
+        if (widget.props[eventType]) {
+            let funcstr = widget.props[eventType]
+            let func = new Function('value', 'widget','self','app', funcstr);
+            func(value, widget, this.getVueInstance(widget.id), this)
+        }
+    }
+    /**
+     * 设置vue实例
+     */
+    setVueIncetance(id, vueInstance) {
+        this.vueInstanceMap.set(id, vueInstance);
+    }
+    /**
+     * 获取vue实例
+     */
+    getVueInstance(id) {
+        return this.vueInstanceMap.get(id);
+    }
+    /**
+     * 设置当前选中的组件
+     * @param {Object} chosenWidget 选中的组件对象
+     */
+    setChosenWidget(chosenWidget) {
+        this.chosenWidget.value = chosenWidget;
+    }
+    /**
+     * 根据组件的apiSet配置发起请求
+     * @param {Object} widget 当前组件对象
+     */
+    requestByApisetConfig(widget) {
+        let apiSet = widget.props.apiSet;
+        if (!apiSet || !apiSet.apiurl) {
+            return;
+        }
+        let params = {};
+        let headers = {};
+        let method = apiSet.method;
+        if (apiSet.contentType == "FormData") {
+            if (method == "post" || method == "put" || method == "patch") {
+                method += "FormData";
+            }
+        }
+        if (apiSet.params.length) {
+            apiSet.params.forEach(e => {
+                params[e.label] = e.value;
+            });
+        }
+        if (apiSet.headers.length) {
+            apiSet.headers.forEach(e => {
+                headers[e.label] = e.value;
+            });
+        }
+        if (apiSet.paramsFormat) {
+            let fun = new Function("params", "widget", "app", apiSet.paramsFormat);
+            let paramData = this.$utils.clone(params, true);
+            var funcData = fun(paramData, widget, this);
+            if (funcData && typeof this.$utils.isPlainObject(funcData)) {
+                params = funcData;
+            }
+        }
+        if (apiSet.headersFormat) {
+            let fun = new Function("headers", "widget", "app", apiSet.headersFormat);
+            let headerData = this.$utils.clone(headers, true);
+            var funcData = fun(headerData, widget, this);
+            if (funcData && typeof this.$utils.isPlainObject(funcData)) {
+                headers = funcData;
+            }
+        }
+        this.$http[method](apiSet.apiurl, params, headers)
+            .then(res => {
+                if (apiSet.successFormat) {
+                    let fun = new Function("res", "widget", "app", apiSet.successFormat);
+                    fun(res, widget, this);
+                }
+            })
+            .catch(err => {
+                if (apiSet.errorFormat) {
+                    let fun = new Function("error", "widget", "app", apiSet.errorFormat);
+                    fun(err, widget, this);
+                }
+            });
+    }
+    /**
+     * 根据ID获取组件
+     * @param {String} id 组件ID
+     * @returns {Object|null} 组件对象或null（如果未找到）
+     */
+    getWidgetById(id) {
+        return this.widgetMap.get(id);
+    }
+    /**
+     * 根据历史索引更新组件配置
+     * @param {Object} updates 更新的对象
+     */
+    updateByHistory(updates) {
+        this.isHistory = true;
+        this.$utils.destructuring(this.widgetConfig, updates);
+    }
+    /**
+     * 更新组件的属性
+     * @param {String} id 组件ID
+     * @param {Object} updates 更新的对象
+     * @param {Boolean} force 是否强制更新，即使存在相同的ID
+     */
+    updateWidget(id, updates, force) {
+        const widget = this.getWidgetById(id);
+        if (widget) {
+            console.log('widget', widget);
+            console.log('updates', updates);
+            if (widget.id !== updates.id) {
+                if (this.widgetIds.includes(updates.id) && !force) {
+                    ElNotification.warning('已经存在相同的id的组件，组件id不允许重复');
+                    return;
+                }
+            }
+            if (id === 'homepage') {
+                if (updates.id !== id) {
+                    ElNotification.warning('主页面的id不允许修改');
+                }
+                updates.id = updates.type = 'homepage';
+            }
+            this.$utils.destructuring(widget, updates);
+        } else {
+            console.warn(`Widget with id ${id} not found.`);
+        }
+    }
+    /**
+     * 重建组件映射表
+     */
+    rebuildWidgetMap() {
+        this.widgetMap.clear();
+        this.widgetIds = [];
+        this.buildWidgetMap(this.widgetConfig);
+    }
+    /**
+     * 递归构建组件映射表
+     * @param {Object} widget 当前组件对象
+     */
+    buildWidgetMap(widget) {
+        this.widgetMap.set(widget.id, widget);
+        this.widgetIds.push(widget.id);
+        if (widget.widgetList && widget.widgetList.length) {
+            widget.widgetList.forEach(widget => {
+                this.buildWidgetMap(widget);
+            });
+        }
+    }
+    /**
+     * 设置当前选中的组件ID
+     * @param {String} id 组件ID
+     */
+    setChosenId(id) {
+        this.widgetConfig.chosenId = id;
+    }
+    /**
+     * 获取当前选中的组件ID
+     * @returns {String} 当前选中的组件ID
+     */
+    getChosenId() {
+        return this.widgetConfig.chosenId;
+    }
+    /**
+     * 获取初始化的数据对象
+     * @param {Object} obj 初始数据对象
+     * @returns {Object} 处理后的初始数据对象
+     */
+    getChosenInitData(obj) {
+        obj = this.$utils.clone(obj, true);
+        obj.id = this.getUniqueId(obj.type);
+        this.setChosenId(obj.id);
+        let delkeyArr = ['isForm', 'canAddDataTableQuery', 'canAddDataTableList', 'addToPanel', 'active'];
+        let delkey = (key) => {
+            delete obj[key];
+        }
+        delkeyArr.forEach(e => {
+            delkey(e);
+        });
+        return obj;
+    }
+    /**
+     * 生成唯一的ID
+     * @param {String} prefix ID前缀
+     * @returns {String} 唯一的ID
+     */
+    getUniqueId(prefix) {
+        return prefix + '_' + Math.floor(new Date().getTime() % 100000) + "" + this.$utils.uniqueId();
+    }
+    /**
+     * 获取组件列表
+     * @returns {Array} 组件列表
+     */
+    getWidgetList() {
+        return this.widgetConfig.widgetList;
+    }
+    /**
+     * 获取组件配置
+     * @returns {Object} 组件配置对象
+     */
+    getWidgetConfig() {
+        return this.widgetConfig;
+    }
+    /**
+     * 更新组件配置
+     * @param {Object} config 新的组件配置
+     */
+    updateWidgetConfig(config) {
+        this.widgetConfig = config;
+    }
+    /**
+     * 根据组件ID查找其父组件
+     * @param {String} id 组件ID
+     * @returns {Object|null} 父组件对象或null（如果未找到）
+     */
+    getParentWidgetById(id) {
+        function recurse(items) {
+            for (const item of items) {
+                if (item.id === id) {
+                    let index = items.findIndex(e => e.id === id);
+                    return {
+                        widgetList: items,
+                        index: index
+                    };
+                }
+                if (item.widgetList && item.widgetList.length > 0) {
+                    const activeItem = recurse(item.widgetList);
+                    if (activeItem) {
+                        return activeItem;
+                    }
+                }
+            }
+            return null;
+        }
+        return recurse(this.widgetConfig.widgetList);
+    }
+}
+export default Designer;