sun-form-v3 1.0.65 → 1.0.67

package/src/components/aDesigner/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/components/aDesigner/index.vue

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,24 @@
+<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>