sun-form-v3 1.0.70 → 1.0.72

package/src/components/aDesigner/http.js

@@ -1,292 +0,0 @@
-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/components/aDesigner/index.vue

@@ -1,144 +0,0 @@
-<template>
-    <div class="h-[100vh]  bg-gray-100 flex flex-col ">
-        <div class="head px-4 py-2 bg-gray-50 flex justify-between items-center">
-            <div class="logo">
-                <img class="h-[32px]" src="../../assets/img/logo.png" alt="">
-            </div>
-            <div class="menu">
-                <el-popover placement="bottom" :width="360" trigger="click">
-                    <template #reference>
-                        <el-button class="mr-3">历史记录</el-button>
-                    </template>
-                    <el-table :row-style="rowStyleHandle" :data="designer.historyList" @row-click="clickRowHandle"
-                        max-height="300">
-                        <el-table-column property="id" label="变更组件">
-                            <template #default="scope">
-                                <div>{{ scope.row.widgetConfig.chosenId }}</div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column width="100" property="time" label="操作时间" />
-                    </el-table>
-                </el-popover>
-                <el-button-group class="mr-3">
-                    <el-button @click="goBack" :disabled="designer.historyIndex === 0">
-                        <i :class="`iconfont icon-xianghou`"></i>
-                    </el-button>
-                    <el-button @click="goForward" :disabled="designer.historyIndex === designer.historyList.length - 1">
-                        <i :class="`iconfont icon-xiangqian`"></i>
-                    </el-button>
-                </el-button-group>
-                <el-button @click="clearWidgetConfig">重置</el-button>
-                <el-button type="primary" @click="preview">预览</el-button>
-            </div>
-        </div>
-        <div class="content  flex-1 flex  border-t border-gray-200 overflow-hidden">
-            <!-- 左侧菜单栏 -->
-            <div class="left flex bg-gray-50 border-r border-gray-200">
-                <div class="w-12 border-r border-gray-200 pt-5">
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 0 }" @click="data.activeSidebar = 0">
-                        <i :class="`iconfont icon-zujian`"></i>
-                    </div>
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 1 }" @click="data.activeSidebar = 1">
-                        <i :class="`iconfont icon-dagang`"></i>
-                    </div>
-                    <div class="btn_item" :class="{ active: data.activeSidebar === 2 }" @click="data.activeSidebar = 2">
-                        <i :class="`iconfont icon-yuanma`"></i>
-                    </div>
-                </div>
-                <div class="w-80">
-                    <panel :designer="designer" :activeSidebar="data.activeSidebar"></panel>
-                </div>
-            </div>
-            <!-- 中间操作栏 -->
-            <div class="mid flex-1 py-2 px-2 box-border w-full h-full overflow-auto">
-                <div class="inner w-full h-full  bg-gray-50  ">
-                    <design :designer="designer"></design>
-                </div>
-            </div>
-            <!-- 右侧配置栏 -->
-            <div class="right bg-gray-50 w-80 border-l border-gray-200 overflow-y-auto overflow-x-hidden">
-                <config v-if="designer.chosenWidget" :designer="designer"></config>
-            </div>
-        </div>
-    </div>
-    <vxe-modal transfer v-model="showModal" width="99%" height="99%" show-footer>
-        <template #title>
-            <span>预览表单</span>
-        </template>
-        <template #default>
-            <show v-if="showModal" :widgetConfig="compWidgetConfig"></show>
-        </template>
-        <template #footer>
-            <el-button icon="Close" size="small" @click="showModal=false">关闭</el-button>
-        </template>
-    </vxe-modal>
-</template>
-
-<script setup>
-import { ref, reactive, watch } from 'vue';
-import panel from './panel.vue'
-import design from './design.vue'
-import config from './config.vue'
-import show from './show.vue'
-
-import Designer from '../../designer'
-
-import widgetConfigPanelData from '../../widgetConfig'
-let initWidgetConfig = widgetConfigPanelData.homepage
-let originInitData = JSON.parse(JSON.stringify(initWidgetConfig))
-let showModal = ref(false)
-let compWidgetConfig = null
-let designer = reactive(new Designer({
-    widgetConfig: initWidgetConfig
-}))
-let data = reactive({
-    activeSidebar: 0,
-})
-const preview = ()=>{
-    compWidgetConfig=designer.$utils.clone(designer.widgetConfig, true)
-    showModal.value=true;
-}
-const clearWidgetConfig = () => {
-    designer.updateWidget("homepage", designer.$utils.clone(originInitData, true), true)
-}
-const clickRowHandle = (row) => {
-    designer.historyIndex = row.index
-    designer.updateByHistory(row.widgetConfig)
-
-}
-const rowStyleHandle = ({ row, rowIndex }) => {
-    if (designer.historyIndex === rowIndex) {
-        return {
-            color: 'rgb(85, 132, 255)',
-            fontWeight: "bold"
-            // background: "rgb(85, 132, 255)"
-        }
-    }
-}
-const goBack = () => {
-    if (designer.historyIndex > 0) {
-        designer.historyIndex--
-        designer.updateByHistory(designer.historyList[designer.historyIndex].widgetConfig)
-    }
-}
-const goForward = () => {
-    if (designer.historyIndex < designer.historyList.length - 1) {
-        designer.historyIndex++
-        designer.updateByHistory(designer.historyList[designer.historyIndex].widgetConfig)
-    }
-}
-defineOptions({ name: "designer" })
-</script>
-
-<style scoped lang="scss">
-@import url("../../assets/font/iconfont.css");
-
-.btn_item {
-    transition: all .3s;
-    @apply w-full flex items-center box-border border-l-4 border-transparent justify-center h-12 mb-3 cursor-pointer hover:bg-blue-50 hover:text-blue-700;
-}
-
-.active {
-    @apply border-blue-700 text-blue-700 bg-blue-50;
-}
-</style>

package/src/components/aDesigner/panel.vue

@@ -1,144 +0,0 @@
-<template>
-    <div class="flex flex-col h-full" v-if="props.activeSidebar === 0">
-        <!-- 工具栏 -->
-        <div class="px-4 py-2 text-lg text-gray-900 border-b border-gray-200">组件库</div>
-        <!-- 组件内容 -->
-        <div class="flex-1 overflow-auto select-none">
-            <commonCard :title="'容器组件'" class="mb-1">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListContainer" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-            <commonCard :title="'表单组件'" class="mb-1">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListForm" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-            <commonCard :title="'其他组件'">
-                <draggable ghostClass="ghost" class="content_wrap flex flex-wrap flex-shrink-0 justify-between "
-                    :list="panelListOrther" :group="{ name: 'dragGroup', pull: 'clone', put: false }" item-key="id"
-                    :clone="handleWidgetClone" :sort="false">
-                    <template #item="{ element }">
-                        <div @click="handleWidgetClick(element)"
-                            class="group items w-[47%] flex-shrink-0 px-2 py-2 border border-gray-200 my-2 rounded cursor-pointer hover:shadow-md">
-                            <i :class="`iconfont icon-${element.type} text-blue-700 group-hover:text-blue-500`"></i>
-                            <span class="text-sm ml-1 group-hover:text-blue-500"> {{ element.displayName }} </span>
-                        </div>
-                    </template>
-                </draggable>
-            </commonCard>
-
-        </div>
-    </div>
-    <!-- 大纲 -->
-    <div class="flex flex-col h-full" v-if="props.activeSidebar === 1">
-        <common-sidetree :designer="designer"></common-sidetree>
-    </div>
-    <!-- 源码 -->
-    <div class="flex flex-col h-full box-border p-2" v-if="props.activeSidebar === 2">
-        <common-code-editor class="flex-1" theme="vs-dark" ref="editor" :tabSize="2" :pure="true" :minimap="false"
-            language="json" v-model="codeString"></common-code-editor>
-        <el-button @click="updateWidget">立即应用配置</el-button>
-    </div>
-</template>
-  
-
-<script setup>
-import draggable from "vuedraggable/src/vuedraggable";
-import commonCodeEditor from '../widgetCommonComps/commonCodeEditor/editor.vue'
-import { ref, reactive, watch, toRaw } from 'vue';
-import widgetConfig from '../../widgetConfig';
-import { js_beautify } from "../../util/jsformat";
-//获取参数props传参
-let props = defineProps({
-    designer: {
-        type: Object,
-        default: {}
-    },
-    activeSidebar: {
-        type: Number,
-        default: 0
-    }
-})
-let designer = props.designer
-let panelList = reactive(widgetConfig);
-let panelListContainer = reactive([]);
-let panelListForm = reactive([]);
-let panelListOrther = reactive([]);
-let codeString = ref("")
-let editor = ref()
-let handleWidgetClone = (e) => {
-    return designer.getChosenInitData(e)
-}
-let handleWidgetClick = (e) => {
-    let chosenWidget = designer.chosenWidget;
-    let obj = designer.getChosenInitData(e)
-    if (!chosenWidget) {//没有选中时候默认添加到homeWidgetList
-        let homeWidgetList = designer.widgetConfig.widgetList;
-        homeWidgetList.push(obj)
-    } else {//选中时候
-        if (chosenWidget.isContainer) {//如果选中组件是容器就添加到容器中
-            chosenWidget.widgetList.push(obj)
-        } else {//如果选中组件不是容器就添加到选中组件后面
-            let { widgetList, index } = designer.getParentWidgetById(chosenWidget.id);
-            widgetList.splice(index + 1, 0, obj)
-        }
-    }
-}
-for (let i in panelList) {
-    let item = panelList[i];
-    if (item.addToPanel !== false && i != 'homepage') {
-        item.type = i;
-        if (item.isContainer) {
-            panelListContainer.push(item);
-        } else if (item.isForm) {
-            panelListForm.push(item);
-        } else {
-            panelListOrther.push(item);
-        }
-    }
-}
-const updateWidget = () => {
-    let chosenWidget = designer.chosenWidget;
-    designer.updateWidget(chosenWidget.id, JSON.parse(codeString.value))
-
-}
-watch(() => designer.widgetConfig, (val) => {
-    if (designer.chosenWidget) {
-        let str = js_beautify(JSON.stringify(designer.chosenWidget))
-        codeString.value = str
-        if (props.activeSidebar == 2) {
-            editor.value.setValue(str)
-        }
-    }
-}, {
-    deep: true,
-    immediate: true
-})
-defineOptions({ name: "panel" })
-
-</script>
-
-<style scoped lang="scss">
-@import url("../../assets/font/iconfont.css");
-
-.ghost {
-    @apply max-h-0 overflow-hidden border border-blue-700 p-0 w-full;
-}
-</style>

package/src/components/aDesigner/show.vue

@@ -1,24 +0,0 @@
-<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 { ref, reactive } from 'vue';
-import Designer from '../../designer'
-let props = defineProps({
-    widgetConfig: {
-        type: Object,
-        default: {}
-    },
-})
-let designer = reactive(new Designer({
-    widgetConfig: props.widgetConfig,
-    showMode: true
-}))
-defineOptions({ name: "sunForm" })
-
-</script>
-
-<style scoped lang="scss"></style>