sun-form-v3 1.0.64 → 1.0.66

package/src/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;

package/src/http.js

@@ -0,0 +1,292 @@
+import axios from 'axios'
+import qs from 'qs'
+import {
+    ElNotification
+} from 'element-plus'
+/**
+ * Http类用于封装HTTP请求
+ * 提供了多种请求方法，如GET、POST、PUT、DELETE等
+ * 支持设置基础URL、请求头、超时时间等选项
+ * 可以自定义请求成功和失败的处理函数
+ */
+class Http {
+    /**
+     * 构造函数初始化Http对象
+     * @param {Object} options 配置选项，包括baseUrl、headers、timeout、httpSuccessHandle、httpErrorHandle、httpBeforeSendHandle
+     */
+    constructor({
+        baseUrl = "",
+        headers = {},
+        timeout = 1000000,
+        httpSuccessHandle = null,
+        httpErrorHandle = null,
+        httpBeforeSendHandle = null
+    }) {
+        this.options = {
+            baseUrl,
+            headers,
+            timeout,
+            httpSuccessHandle,
+            httpErrorHandle,
+            httpBeforeSendHandle
+        }
+        // 定义不同Content-Type的headers
+        this.formDataHeader = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        this.formFileHeader = {
+            'Content-Type': 'multipart/form-data'
+        }
+        this.jsonHeader = {
+            'Content-Type': 'application/json'
+        }
+    }
+
+    /**
+     * 处理请求参数
+     * @param {any} data 请求参数
+     * @returns 处理后的请求参数
+     */
+    paramHandle(data) {
+        // 如果data是数组，直接返回
+        if (data instanceof Array) {
+            return data;
+        }
+        // 如果data不是对象，直接返回
+        if (typeof data !== 'object') {
+            return data
+        }
+        // 如果data存在，返回合并后的对象
+        if (data) {
+            return Object.assign({}, this.httpBeforeSendHandle ? this.httpBeforeSendHandle() || {} : {}, data)
+        } else {
+            // 如果data不存在，仅返回httpBeforeSendHandle处理的结果
+            return this.httpBeforeSendHandle()
+        }
+    }
+
+    /**
+     * 发送请求
+     * @param {Object} config 请求配置，包括url、method、params、data、headers等
+     * @returns 返回axios发送请求的Promise
+     */
+    send(config) {
+        // 创建axios实例
+        const api = axios.create({
+            baseURL: this.options.baseUrl,
+            timeout: this.options.timeout,
+            responseType: 'json'
+        })
+        // 请求拦截器，设置请求头
+        api.interceptors.request.use(
+            request => {
+                if (this.options.headers) {
+                    for (var key in this.options.headers) {
+                        request.headers[key] = headers[key]
+                    }
+                }
+                return request
+            }
+        )
+        // 响应拦截器，处理请求成功和失败的情况
+        api.interceptors.response.use(
+            response => {
+                if (this.options.httpSuccessHandle) {
+                    this.options.httpSuccessHandle(response.data)
+                }
+                return Promise.resolve(response.data)
+            },
+            error => {
+                if (this.options.httpErrorHandle) {
+                    this.options.httpErrorHandle(error)
+                }
+                ElNotification({
+                    title: '消息',
+                    message: '数据请求失败',
+                    type: 'error'
+                })
+                return Promise.reject(error)
+            }
+        )
+        // 发送请求
+        return api(config)
+    }
+
+    /**
+     * 发送GET请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送GET请求的Promise
+     */
+    get(url, data, headers) { //get请求
+        return this.send({
+            url: url,
+            method: 'get',
+            params: this.paramHandle(data),
+            headers: headers
+        })
+    }
+
+    /**
+     * 发送GET请求，返回Blob类型数据
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送GET请求的Promise
+     */
+    getBlob(url, data, headers) { //get请求
+        return this.send({
+            url: url,
+            method: 'get',
+            responseType: 'blob',
+            params: this.paramHandle(data),
+            headers: headers
+        })
+    }
+
+    /**
+     * 发送POST请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送POST请求的Promise
+     */
+    post(url, data, headers = {}) { //post请求
+        return this.send({
+            url: url,
+            method: 'post',
+            data: this.paramHandle(data),
+            headers: {
+                ...headers,
+                ...this.jsonHeader
+            }
+        })
+    }
+
+    /**
+     * 发送PUT请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送PUT请求的Promise
+     */
+    put(url, data, headers) { //put请求
+        return this.send({
+            url: url,
+            method: 'put',
+            data: this.paramHandle(data),
+            headers: headers
+        })
+    }
+
+    /**
+     * 发送PATCH请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送PATCH请求的Promise
+     */
+    patch(url, data, headers) { //patch请求
+        return this.send({
+            url: url,
+            method: 'patch',
+            data: this.paramHandle(data),
+            headers: headers
+        })
+    }
+
+    /**
+     * 发送DELETE请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送DELETE请求的Promise
+     */
+    delete(url, data, headers) { //delete请求
+        return this.send({
+            url: url,
+            method: 'delete',
+            params: this.paramHandle(data),
+            headers: headers
+        })
+    }
+
+    /**
+     * 发送使用FormData的POST请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送POST请求的Promise
+     */
+    postFormData(url, data, headers) { //formdata的post请求
+        return this.send({
+            url: url,
+            method: 'post',
+            data: qs.stringify(this.paramHandle(data)),
+            headers: {
+                ...this.formDataHeader,
+                ...headers
+            }
+        })
+    }
+
+    /**
+     * 发送上传文件的POST请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送POST请求的Promise
+     */
+    postFile(url, data, headers) { //formdata的post请求
+        return this.send({
+            url: url,
+            method: 'post',
+            data: data,
+            headers: {
+                ...this.formDataHeader,
+                ...headers
+            }
+        })
+    }
+
+    /**
+     * 发送使用FormData的PUT请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送PUT请求的Promise
+     */
+    putFormData(url, data, headers) { //formdata的put请求
+        return this.send({
+            url: url,
+            method: 'put',
+            data: qs.stringify(this.paramHandle(data)),
+            headers: {
+                ...this.formDataHeader,
+                ...headers
+            }
+        })
+    }
+
+    /**
+     * 发送使用FormData的PATCH请求
+     * @param {string} url 请求URL
+     * @param {any} data 请求参数
+     * @param {Object} headers 请求头
+     * @returns 返回发送PATCH请求的Promise
+     */
+    patchFormData(url, data, headers) { //formdata的patch请求
+        return this.send({
+            url: url,
+            method: 'patch',
+            data: qs.stringify(this.paramHandle(data)),
+            headers: {
+                ...this.formDataHeader,
+                ...headers
+            }
+        })
+    }
+
+}
+export default Http

package/src/index.js

@@ -0,0 +1,24 @@
+import './assets/styles/element/index.scss'
+import './assets/styles/index.css'
+import designer from './components/aDesigner/index.vue'
+import sunForm from './components/aDesigner/show.vue'
+import compsCommon from './components/widgetCommonComps/index'
+import compsWidget from './components/widgetShowComps/index'
+const install = (app) => {
+    Object.entries({
+        ...compsCommon,
+        ...compsWidget,
+    }).forEach(([name, component]) => {
+        app.component(name, component);
+    });
+    app.component("designer", designer);
+    app.component("sunForm", sunForm);
+};
+console.log(compsCommon);
+export {
+    designer,
+    sunForm,
+};
+export default {
+    install
+};

package/src/index2.js

@@ -0,0 +1,23 @@
+import './assets/styles/element/index.scss'
+import './assets/styles/index.css'
+import widgetShowComps from './components/widgetShowComps/index'
+import widgetCommonComps from './components/widgetCommonComps/index'
+import widgetConfigComps from './components/widgetConfigComps/index'
+import designer from './components/aDesigner/index.vue'
+designer.install = function (app) {
+    app.use(widgetShowComps)
+    app.use(widgetCommonComps)
+    app.use(widgetConfigComps)
+};
+let comps = [designer]
+const install = (app) => {
+    app.use(widgetShowComps)
+    app.use(widgetCommonComps)
+    app.use(widgetConfigComps)
+    comps.forEach(item => {
+        app.component(item.name, item)
+    })
+};
+export default {
+    install
+};

package/src/main.js

@@ -0,0 +1,19 @@
+import {
+    createApp
+} from 'vue'
+import App from './App.vue'
+import comps from './index2'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+import XEUtils from 'xe-utils'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(VxeUITable)
+app.use(comps)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+app.mount('#app')