sun-form-v3 1.0.64 → 1.0.66

package/src/components/widgetCommonComps/commonJsonInput/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <!-- <draggable :key="key" class="w-full" handle=".move_handle" :list="jsonValue" item-key="label"
+        :group="{ name: 'no', put: false, pull: false }">
+        <template #item="{ element, index }"> -->
+    <div class=" w-full flex items-center my-2 box-border" v-for="(element, index) in jsonValue" :key="index">
+        <el-input v-model="element.label" placeholder="请输入"></el-input>
+        <common-type-input v-model="element.value" class="ml-1 w-[100%]"></common-type-input>
+        <el-icon class="cursor-pointer ml-1" @click="deleteItem(index)">
+            <Delete />
+        </el-icon>
+    </div>
+    <!-- </template>
+    </draggable> -->
+    <div class="flex items-center justify-start">
+        <el-button icon="CirclePlus" type="primary" link @click="addItem">添加</el-button>
+        <el-button icon="CircleClose" v-if="jsonValue&&jsonValue.length" type="primary" link @click="clearItem">清空</el-button>
+    </div>
+</template>
+
+<script setup>
+import draggable from "vuedraggable";
+import { ref, computed, watch } from 'vue';
+
+defineOptions({ name: "commonJsonInput" })
+
+const props = defineProps({
+    modelValue: [Array],
+})
+const emit = defineEmits(['update:modelValue'])
+const jsonValue = computed({
+    get() {
+        return props.modelValue || []
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+const deleteItem = (index) => {
+    jsonValue.value.splice(index, 1)
+}
+const addItem = () => {
+    jsonValue.value.push({
+        label: null,
+        value: null
+    })
+}
+const clearItem = () => {
+    jsonValue.value = []
+}
+// watch(() => props.modelValue, () => {
+//     if (props.modelValue === null || props.modelValue === undefined) {
+//         type.value = 'string';
+//     } else {
+//         type.value = typeof props.modelValue;
+//     }
+// }, { immediate: true });
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonLabelContainer/index.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="item">
+        <div class="lab">
+            {{ props.label }}
+        </div>
+        <div class="con">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+defineOptions({ name: "commonLabelContainer" })
+let props = defineProps({
+    label: {
+        type: String,
+        default: ""
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.item {
+    @apply flex items-center mb-2;
+
+    .lab {
+        @apply flex-none w-[90px] text-sm;
+    }
+
+    .con {
+        @apply flex-1;
+    }
+
+    // &:last-child {
+    //     @apply mb-0;
+    // }
+}
+</style>

package/src/components/widgetCommonComps/commonSidetree/index.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="h-full">
+        <vxe-table ref="table" :show-header="false" show-overflow border="outer"
+            :row-config="{ isHover: false, useKey: true }" height="auto" :column-config="{ resizable: true }"
+            :tree-config="{ transform: false, childrenField: 'widgetList', showLine: true, expandAll: true }" :data="arr">
+            <vxe-column field="displayName" title="组件大纲" tree-node>
+                <template #default="{ row }">
+                    <div @click="chooseHandle(row)" class="cursor-pointer  pl-2 box-border hover:bg-gray-50"
+                        :class="{ 'bg-blue-50': row.id == chosenId }">
+                        <span class="text-sm">
+                            {{ row.displayName }}
+                        </span>
+                        <span class="text-xs text-gray-400">
+                            _{{ row.id }}
+                        </span>
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from 'vue';
+defineOptions({ name: "commonSidetree" })
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: {}
+    }, canAddApi: {
+        type: Boolean,
+        default: false
+    }
+
+})
+const emit = defineEmits(['addApi'])
+let designer = props.designer
+let table = ref()
+let arr = ref([])
+let chosenId = ref(null)
+const chooseHandle = (row) => {
+    if (props.canAddApi) {
+        emit('addApi', row);
+        return
+    }
+    designer.setChosenId(row.id)
+}
+watch(() => designer.getWidgetConfig(), (val) => {
+    chosenId.value = designer.getChosenId()
+    arr.value = []
+    arr.value.push(designer.$utils.clone(val, true))
+    nextTick(() => {
+        table.value.setAllTreeExpand(true)
+    })
+}, {
+    deep: true,
+    immediate: true
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonTypeInput/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <el-input v-model="inputValue" placeholder="请输入">
+        <template #append>
+            <el-select v-model="type" class="w-[75px]" @change="handleTypeChange">
+                <el-option label="字符" value="string" />
+                <el-option label="布尔" value="boolean" />
+                <el-option label="数字" value="number" />
+            </el-select>
+        </template>
+    </el-input>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+
+defineOptions({ name: "commonTypeInput" })
+
+const props = defineProps({
+    modelValue: [String, Number, Boolean, Object, null],
+    default: null
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const type = ref("string")
+const inputValue = computed({
+    get() {
+        let inType = typeof props.modelValue
+        switch (inType) {
+            case 'number':
+                return props.modelValue.toString()
+            case 'boolean':
+                return props.modelValue ? 'true' : 'false'
+            default: // string
+                return props.modelValue
+        }
+    },
+    set(value) {
+        let emitValue = null
+        switch (type.value) {
+            case 'number':
+                emitValue = Number(value) || null
+                break
+            case 'boolean':
+                if (/^t(rue)?$/i.test(value)) {
+                    emitValue = true;
+                }
+                else if (/^f(alse)?$/i.test(value)) {
+                    emitValue = false;
+                }
+                else {
+                    emitValue = null;
+                }
+                break
+            default: // string
+                emitValue = value || null
+        }
+        emit('update:modelValue', emitValue)
+    }
+})
+
+const handleTypeChange = (newType) => {
+    inputValue.value = ""
+}
+
+watch(() => props.modelValue, () => {
+    if (props.modelValue === null || props.modelValue === undefined) {
+        type.value = 'string';
+    } else {
+        type.value = typeof props.modelValue;
+    }
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetCommonComps/commonWidgetLabelContainer/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="item" :class="{ flex: props.labelPosition == 'left', 'hide': props.hide }">
+        <div class="lab" :class="{ required: props.required }" :style='{
+            width: props.labelWidth,
+            justifyContent: props.labelAlign == "left" ? "flex-start" : "flex-end"
+        }'>
+            {{ props.label }}
+        </div>
+        <div class="con">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+defineOptions({ name: "commonWidgetLabelContainer" })
+let p = defineProps({
+    props: {
+        type: Object,
+        default: {
+            label: "",
+            labelWidth: "90px",
+            labelAlign: "left",
+            labelPosition: "left",
+            required: false,
+            hide: false,
+            width: 24
+        }
+    },
+})
+let props = computed(() => p.props)
+</script>
+
+<style scoped lang="scss">
+.item {
+    @apply items-center flex-wrap relative p-2;
+
+    .lab {
+        @apply flex-none text-sm flex box-border pr-2;
+    }
+
+    .con {
+        @apply flex-1;
+    }
+
+    .required {
+        @apply before:content-['*'] before:text-red-500 before:mr-1;
+    }
+}
+
+.hide {
+    @apply after:content-['<隐藏状态>'] after:w-full after:h-full after:absolute after:top-0 after:left-0 after:flex after:items-center after:justify-center after:bg-gray-400 after:bg-opacity-10 after:text-sm after:text-gray-400;
+}
+</style>

package/src/components/widgetCommonComps/index copy.js

@@ -0,0 +1,17 @@
+const modules =
+    import.meta.glob('./**/index.vue', {
+        eager: true
+    });
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, module]) => {
+        const componentName = module.default.name
+        return [componentName, module.default];
+    })
+);
+export default{
+    install(app) {
+        Object.keys(components).forEach(key => {
+            app.component(key, components[key]);
+        });
+    }
+}

package/src/components/widgetCommonComps/index.js

@@ -0,0 +1,17 @@
+const modules =
+    import.meta.glob('./**/index.vue', {
+        eager: true
+    });
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, module]) => {
+        const componentName = module.default.name
+        return [componentName, module.default];
+    })
+);
+export default{
+    install(app) {
+        Object.keys(components).forEach(key => {
+            app.component(key, components[key]);
+        });
+    }
+}

package/src/components/widgetConfigComps/config-input/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <common-label-container label="组件尺寸">
+        <el-select v-model="props.widget.props.size">
+            <el-option label="大尺寸" value="large"></el-option>
+            <el-option label="默认" value="default"></el-option>
+            <el-option label="小尺寸" value="small"></el-option>
+        </el-select>
+    </common-label-container>
+    <common-label-container label="组件类型">
+        <el-select v-model="props.widget.props.type">
+            <el-option label="文字" value="text"></el-option>
+            <!-- <el-option label="数字" value="number"></el-option> -->
+            <el-option label="密码" value="password"></el-option>
+        </el-select>
+    </common-label-container>
+    <common-label-container label="占位文字">
+        <el-input v-model="props.widget.props.placeholder" placeholder="填写占位文字">
+        </el-input>
+    </common-label-container>
+    <common-label-container label="前置内容文字">
+        <el-input v-model="props.widget.props.prependText" placeholder="填写末尾按钮文字">
+        </el-input>
+    </common-label-container>
+    <common-label-container label="末尾按钮文字">
+        <el-input v-model="props.widget.props.appendText" placeholder="填写末尾按钮文字">
+        </el-input>
+    </common-label-container>
+    <common-label-container label="最大输入长度">
+        <el-input-number class="w-full" placeholder="填写最大输入长度" v-model="props.widget.props.maxlength" :min="0" controls-position="right" />
+    </common-label-container>
+    <common-label-container label="是否去空格">
+        <el-switch v-model="props.widget.props.isTrim" />
+    </common-label-container>
+    <common-label-container label="是否必填">
+        <el-switch v-model="props.widget.props.required" />
+    </common-label-container>
+    <common-label-container label="是否只读">
+        <el-switch v-model="props.widget.props.readonly" />
+    </common-label-container>
+    <common-label-container label="是否禁用">
+        <el-switch v-model="props.widget.props.disabled" />
+    </common-label-container>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+defineOptions({ name: "config-input" })
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: {}
+    },
+    widget: {
+        type: Object,
+        default: {}
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetConfigComps/index copy.js

@@ -0,0 +1,13 @@
+const modules =
+    import.meta.glob('./**/index.vue', {
+        eager: true
+    });
+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/widgetConfigComps/index.js

@@ -0,0 +1,17 @@
+const modules =
+    import.meta.glob('./**/index.vue', {
+        eager: true
+    });
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, module]) => {
+        const componentName = module.default.name
+        return [componentName, module.default];
+    })
+);
+export default{
+    install(app) {
+        Object.keys(components).forEach(key => {
+            app.component(key, components[key]);
+        });
+    }
+}

package/src/components/widgetShowComps/index.js

@@ -0,0 +1,29 @@
+const modules =
+    import.meta.glob('./**/index.vue', {
+        eager: true
+    });
+const components = Object.fromEntries(
+    Object.entries(modules).map(([path, module]) => {
+        const componentName = module.default.name
+        return [componentName, module.default];
+    })
+);
+export default{
+    install(app) {
+        Object.keys(components).forEach(key => {
+            app.component(key, components[key]);
+        });
+    }
+}
+// import widgetForm from './widget-form/index.vue'
+// import widgetHomepage from './widget-homepage/index.vue'
+// import widgetInput from './widget-input/index.vue'
+// import widgetSelect from './widget-select/index.vue'
+
+
+// export default {
+//     'widget-form': widgetForm,
+//     'widget-homepage': widgetHomepage,
+//     'widget-input': widgetInput,
+//     'widget-select': widgetSelect,
+// };

package/src/components/widgetShowComps/widget-form/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <draggable ghostClass="ghost" handle=".handle" :list="widgetList" class="min-h-14"
+        :group="{ name: 'dragGroup', put: true }" item-key="id">
+        <template #item="{ element }">
+            <div>
+                <commonContainer :designer="designer" :widget="element" :parentWidget="widget">
+                    <component :ref="element.id" :is="'widget-'+element.type" :widget="element" :designer="designer">
+                    </component>
+                </commonContainer>
+            </div>
+        </template>
+    </draggable>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import draggable from "vuedraggable";
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    widget: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+let designer = reactive(props.designer)
+let widget = reactive(props.widget)
+let widgetList = props.widget.widgetList
+
+defineOptions({ name: "widget-form" })
+</script>
+
+<style scoped lang="scss">
+.ghost {
+    @apply max-h-0 overflow-hidden border border-blue-700;
+}
+</style>

package/src/components/widgetShowComps/widget-homepage/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <draggable ghostClass="ghost" handle=".handle" :list="widgetList" class="min-h-full flex  flex-wrap content-start"
+        :group="{ name: 'dragGroup', put: true }" item-key="id">
+        <template #item="{ element }">
+            <commonContainer :designer="designer" :widget="element" :parentWidget="widget">
+                <component :ref="element.id" :is="'widget-'+element.type" :widget="element" :designer="designer">
+                </component>
+            </commonContainer>
+        </template>
+    </draggable>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import draggable from "vuedraggable";
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    widget: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+let designer = props.designer
+let widget = computed(() => props.widget)
+let widgetList = computed(() => designer.widgetConfig.widgetList)
+
+defineOptions({ name: "widget-homepage" })
+</script>
+
+<style scoped lang="scss">
+.ghost {
+    @apply max-h-0 overflow-hidden border border-blue-700;
+}
+</style>

package/src/components/widgetShowComps/widget-input/index.vue

@@ -0,0 +1,85 @@
+<template>
+    <common-widget-label-container :props="p">
+        <el-input @change="changeHandle" @input="inputHandle" @focus="focusHandle" v-model="p.value" :type="p.type"
+            :size="p.size" @blur="blurHandle" :placeholder="p.placeholder" :maxlength="p.maxlength">
+            <template v-if="p.prependText" #prepend>{{ p.prependText }}</template>
+            <template v-if="p.appendText" #append>
+                <el-button @click="onHandle">{{ p.appendText }}</el-button>
+            </template>
+        </el-input>
+    </common-widget-label-container>
+</template>
+
+<script setup>
+import { ref, reactive, computed, getCurrentInstance, onMounted } from 'vue';
+
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    widget: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+props.designer.setVueIncetance(props.widget.id, getCurrentInstance())
+
+let p = computed(() => props.widget.props)
+
+const changeHandle = (value) => {
+    props.designer.eventHandle({
+        eventType: "onChange",
+        value: value,
+        widget: props.widget,
+    })
+}
+const inputHandle = (value) => {
+    props.designer.eventHandle({
+        eventType: "onInput",
+        value: value,
+        widget: props.widget,
+    })
+}
+const focusHandle = () => {
+    props.designer.eventHandle({
+        eventType: "onFocus",
+        value: props.widget.props.value,
+        widget: props.widget,
+    })
+}
+const blurHandle = (value) => {
+    props.designer.eventHandle({
+        eventType: "onBlur",
+        value: props.widget.props.value,
+        widget: props.widget,
+    })
+}
+const onHandle = () => {
+    props.designer.eventHandle({
+        eventType: "onHandle",
+        value: props.widget.props.value,
+        widget: props.widget,
+    })
+}
+props.designer.eventHandle({
+    eventType: "onCreated",
+    widget: props.widget,
+})
+onMounted(() => {
+    props.designer.eventHandle({
+        eventType: "onMounted",
+        widget: props.widget,
+    })
+})
+defineExpose({
+    changeHandle,
+})
+defineOptions({ name: "widget-input" })
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/widgetShowComps/widget-select/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="widget-select">
+        <el-select v-model="widget.props.value" placeholder="请选择">
+            <el-option v-for="item in widget.props.list" :key="item.value" :label="item.label || ''"
+                :value="item.value || ''">
+            </el-option>
+        </el-select>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+let props = defineProps({
+    designer: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    widget: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+let designer = props.designer
+defineOptions({ name: "widget-select" })
+</script>
+
+<style scoped lang="scss"></style>