super-page-runtime 1.0.12 → 1.0.14

package/src/components/runtime/views/assemblys/data/tree/tree-attr-base.vue

@@ -0,0 +1,137 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<el-collapse-item
+					title="基本"
+					name="base"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item label="组件类型" class="amb-design-attr-item">
+						<el-select v-model="configure.name" disabled placeholder="请选择" >
+							<el-option
+									v-for="item in getFormComponentOptions()"
+									:key="item.name"
+									:label="item.label"
+									:value="item.name"
+							/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="组件名" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.name" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="绑定变量" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.prop" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="可选择" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.treeSelect" class="ml-4">
+							<el-radio value="no">否</el-radio>
+							<el-radio value="alone">单选</el-radio>
+							<el-radio value="multiple">多选</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="默认展开" class="amb-design-attr-item">
+						<el-switch v-model="configure.props.base.defaultExpand" />
+					</el-form-item>
+					<el-form-item v-if="configure.props.base.defaultExpand" label="展开级数" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.unfoldGrade" />
+					</el-form-item>
+					<el-form-item label="点击节点时展开或收缩节点" style="margin-bottom: 50px">
+						<el-radio-group v-model="configure.props.base.deployable" class="ml-4">
+							<el-radio :value="true">是</el-radio>
+							<el-radio :value="false">否</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="每次只打开一个同级树节点" style="margin-bottom: 50px">
+						<el-radio-group v-model="configure.props.base.oneNode" class="ml-4">
+							<el-radio :value="true">是</el-radio>
+							<el-radio :value="false">否</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="相邻级节点间的水平缩进" style="margin-bottom: 50px">
+						<DimensionInput v-model:modelValue="configure.props.base.retractWidth" v-model:selectedUnit="configure.props.base.retractWidthUnit"/>
+					</el-form-item>
+					<el-form-item label="是否懒加载" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.lazy" class="ml-4">
+							<el-radio :value="true">是</el-radio>
+							<el-radio :value="false">否</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="节点图标" class="amb-design-attr-item">
+						<IconSetDialog v-model:modelValue="configure.props.base.icon" />
+					</el-form-item>
+					<el-form-item label="树节点内容渲染" class="amb-design-attr-item-linefeed-two">
+						<DataoriginInputtable v-model:modelValue="configure.props.base.renderingTitle"></DataoriginInputtable>
+					</el-form-item>
+					<el-form-item label="状态" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.state" class="ml-4">
+							<el-radio value="default">普通</el-radio>
+							<el-radio value="hidden">隐藏</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</div>
+			</el-collapse-item>
+			<DataOriginTree :dataOrigin="configure.props.dataOrigin"/>
+			<InParameter :parameter="configure.props.queryParameter">
+				<template #body="scope">
+					<el-form-item label="数据集字段" class="amb-design-attr-item">
+						<el-select v-model="scope.row.dataSetKey">
+							<el-option label="1" value="1"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="子节点集合字段" class="amb-design-attr-item-linefeed-two">
+						<el-select v-model="scope.row.childNodeKey">
+							<el-option label="1" value="1"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="选项值格式化" class="amb-design-attr-item-linefeed-two">
+						<el-select v-model="scope.row.queryFormattingValue">
+							<el-option label="1" value="1"/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="选项名格式化" class="amb-design-attr-item">
+						<el-select v-model="scope.row.queryFormattingName">
+							<el-option label="1" value="1"/>
+						</el-select>
+					</el-form-item>
+				</template>
+			</InParameter>
+			<Linkage :linkage="configure.props.linkage" />
+			<el-collapse-item
+					title="校验"
+					name="verification"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item class="amb-design-attr-item" label-width="0">
+						<el-checkbox v-model="configure.props.verification.required" label="必填"/>
+					</el-form-item>
+					<el-form-item class="amb-design-attr-item" label-width="0">
+						<el-col :span="8">
+							<el-checkbox label="自定义" value="custom" />
+						</el-col>
+						<el-col :span="14">
+							<el-button>自定义逻辑</el-button><el-button :icon="Search" circle />
+						</el-col>
+					</el-form-item>
+				</div>
+			</el-collapse-item>
+			<CommonAttrSize :size="configure.props.size" />
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue';
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import DimensionInput from '../../form/common/dimension-input.vue'
+import IconSetDialog from '../../form/common/icon-set-dialog.vue'
+import DataoriginInputtable from '../../form/common/dataorigin-input-table.vue'
+import DataOriginTree from '../component/data-origin-tree.vue'
+import InParameter from '../component/in-parameter.vue'
+import Linkage from '../../form/common/linkage.vue'
+import CommonAttrSize from '../../common/common-attr-size.vue'
+defineProps({
+	configure: Object,
+	default: () => ({props: {}})
+});
+const openCollapseItems = ref("")
+
+</script>

package/src/components/runtime/views/assemblys/data/tree/tree-attr-event.vue

@@ -0,0 +1,14 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<AttrEvent :events="events"></AttrEvent>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref, computed, defineEmits } from 'vue';
+import AttrEvent from '../../form/common/attr-event.vue'
+import {getFormComponentOptions} from '../../../../utils/assemblys-config.js'
+defineProps({
+	configure:Object
+});
+const events = ['show', 'hidden', 'node-click', 'check-change', 'check', 'add-node', 'update-node', 'delete-node']
+</script>

package/src/components/runtime/views/assemblys/data/tree/tree-attr-style.vue

@@ -0,0 +1,55 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<AttrStyle :configure="configure" :blankOption="blankOption">
+				<template #font="scope">
+					<el-collapse-item
+							title="字体"
+							name="font"
+							class="amb-design-attr-group-header">
+						<div style="padding:8px 0px 0px 0px;">
+							<el-form-item label="加粗" class="amb-design-attr-item">
+								<el-radio-group v-model="scope.row.style.titleFont.bold" class="ml-4">
+									<el-radio value="left">是</el-radio>
+									<el-radio value="top">否</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="倾斜" class="amb-design-attr-item">
+								<el-radio-group v-model="scope.row.style.titleFont.italic" class="ml-4">
+									<el-radio value="left">是</el-radio>
+									<el-radio value="top">否</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="字号" class="amb-design-attr-item">
+								<DimensionInput
+										v-model:modelValue="scope.row.style.titleFont.fontSize"
+										v-model:selectedUnit="scope.row.style.titleFont.fontSizeUnit">
+								</DimensionInput>
+							</el-form-item>
+							<el-form-item label="颜色" class="amb-design-attr-item">
+								<el-color-picker v-model="scope.row.style.titleFont.color" />
+							</el-form-item>
+						</div>
+					</el-collapse-item>
+				</template>
+			</AttrStyle>
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { defineProps } from 'vue';
+import AttrStyle from '../../form/common/attr-style.vue'
+import DimensionInput from '../../form/common/dimension-input.vue'
+defineProps({
+	configure:Object
+});
+const blankOption ={
+	showTittleFont:false, // 是否显示标题字体
+	showBackground:true, // 是否显示背景
+	showBorder:true, // 是否显示边框
+	showShadow:true, // 是否显示阴影
+	showCursor:true, // 是否显示鼠标手势
+	showClass:true, // 是否显示class
+	showCustom:true, // 是否显示自定义
+}
+</script>

package/src/components/runtime/views/assemblys/data/tree/tree-attr.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="amb-design-attr-content">
+		<AttrHeader v-model="currentConfigType"/>
+		<div class="amb-design-attr-list">
+			<AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+			<AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+			<AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+		</div>
+	</div>
+</template>
+<script lang='ts' setup>
+import AttrBase from './tree-attr-base.vue';
+import AttrStyle from './tree-attr-style.vue';
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './tree-attr-event.vue';
+import { ref } from 'vue';
+
+defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ title: 'Text',props: {type: 'input-text'} }) // 设置默认值
+	}
+});
+let currentConfigType = ref("base")
+
+</script>
+<style >
+@import '../../../../../../assets/design-attr.css';
+</style>

package/src/components/runtime/views/assemblys/data/tree/tree-design.vue

@@ -0,0 +1,114 @@
+<template>
+	<div :class="designClass" :style="designStyle">
+		<el-tree
+				style="max-width: 600px"
+				:data="designProperty.staticData"
+				:default-expand-all="designProperty.defaultExpand"
+				:expand-on-click-node="designProperty.deployable"
+				:indent="designProperty.retractWidth?designProperty.retractWidth:18"
+				:accordion="designProperty.oneNode"
+				:show-checkbox="designProperty.treeSelect"
+				:props="defaultProps"
+		/>
+	</div>
+</template>
+<script lang='ts' setup>
+import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
+import {ref, watch} from 'vue'
+const props = defineProps({
+	configure:Object
+});
+if(props.configure.title==undefined){
+	props.configure.title = '';
+}
+
+const defaultProps = {
+	children: 'children',
+	label: 'label',
+}
+
+const data = [
+	{
+		label: 'Level one 1',
+		children: [
+			{
+				label: 'Level two 1-1',
+				children: [
+					{
+						label: 'Level three 1-1-1',
+					},
+				],
+			},
+		],
+	},
+]
+//定义自身详细参数
+const designStyle = ref({});
+const designClass = ref('');
+const designHeaderStyle = ref({});
+const designProperty = ref({})
+function getRestsParameter(){
+	let defineProps = {}
+	const tempProps = {}
+
+	if (props.configure.props.preSuffix){
+		defineProps = props.configure.props
+	}
+	// 可选择
+	if (defineProps['base']['treeSelect']){
+		tempProps['treeSelect'] = defineProps['base']['treeSelect']
+	}
+
+	// 默认展开
+	if (defineProps['base']['defaultExpand']){
+		tempProps['defaultExpand'] = defineProps['base']['defaultExpand']
+	}
+
+	// 点击节点时展开或收缩节点
+	if (defineProps['base']['deployable']){
+		tempProps['deployable'] = defineProps['base']['deployable']
+	}
+
+	// 每次只打开一个同级树节点
+	if (defineProps['base']['oneNode']){
+		tempProps['oneNode'] = defineProps['base']['oneNode']
+	}
+
+	// 每次只打开一个同级树节点
+	if (defineProps['base']['retractWidth']){
+		tempProps['retractWidth'] = defineProps['base']['retractWidth']
+	}
+
+	// 树形数据
+	try {
+		if (defineProps['dataOrigin']['staticData']){
+			let str:string = defineProps['dataOrigin']['staticData'].replace(/[\r\n\t\f\v ]+/g, '')
+			tempProps['staticData'] = JSON.parse(str)
+		}
+	}
+	catch (err){
+		console.log(err)
+	}
+
+
+	if (tempProps != {}){
+		for (const tempPropsKey in tempProps) {
+			designProperty.value[tempPropsKey] = tempProps[tempPropsKey]
+		}
+	}
+}
+//监控配置样式的变化
+watch(props.configure.style,()=>{
+	caculateDetailComponentStyle(props.configure,designStyle,designClass,designHeaderStyle);
+},{immediate:true});
+
+//监控配置属性的变化
+watch(props.configure.props,()=>{
+	caculateComponentProps(props.configure,designProperty)
+	getRestsParameter()
+	console.log('%c描述-174733','color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',designProperty.value);
+},{immediate:true});
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/error-attr.vue

@@ -0,0 +1,15 @@
+<template>
+    <div style="text-align:center;color:red;">
+        未指定【{{configure.name}}】的属性组件
+    </div>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:{
+            type:Object,
+            default:{
+                name:'未知'
+            }
+        }
+    });
+</script>

package/src/components/runtime/views/assemblys/error-render.vue

@@ -0,0 +1,17 @@
+<template>
+    <div style="text-align:center;color:red;">
+        不能识别的组件类型【{{configure.name}}】
+    </div>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:{
+            type:Object,
+            default:{
+                name:'未知'
+            }
+        },
+        selectWidget:Object,
+        indexObj:Object
+    });
+</script>

package/src/components/runtime/views/assemblys/form/cascader/cascader-design.vue

@@ -0,0 +1,288 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+    <el-cascader v-model="configure.fieldName" 
+        :options="configure.options"/>
+  </el-form-item>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = 'Cascader';
+    }
+    const options = [
+    {
+        value: 'guide',
+        label: 'Guide',
+        children: [
+        {
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [
+            {
+                value: 'consistency',
+                label: 'Consistency',
+            },
+            {
+                value: 'feedback',
+                label: 'Feedback',
+            },
+            {
+                value: 'efficiency',
+                label: 'Efficiency',
+            },
+            {
+                value: 'controllability',
+                label: 'Controllability',
+            },
+            ],
+        },
+        {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [
+            {
+                value: 'side nav',
+                label: 'Side Navigation',
+            },
+            {
+                value: 'top nav',
+                label: 'Top Navigation',
+            },
+            ],
+        },
+        ],
+    },
+    {
+        value: 'component',
+        label: 'Component',
+        children: [
+        {
+            value: 'basic',
+            label: 'Basic',
+            children: [
+            {
+                value: 'layout',
+                label: 'Layout',
+            },
+            {
+                value: 'color',
+                label: 'Color',
+            },
+            {
+                value: 'typography',
+                label: 'Typography',
+            },
+            {
+                value: 'icon',
+                label: 'Icon',
+            },
+            {
+                value: 'button',
+                label: 'Button',
+            },
+            ],
+        },
+        {
+            value: 'form',
+            label: 'Form',
+            children: [
+            {
+                value: 'radio',
+                label: 'Radio',
+            },
+            {
+                value: 'checkbox',
+                label: 'Checkbox',
+            },
+            {
+                value: 'input',
+                label: 'Input',
+            },
+            {
+                value: 'input-number',
+                label: 'InputNumber',
+            },
+            {
+                value: 'select',
+                label: 'Select',
+            },
+            {
+                value: 'cascader',
+                label: 'Cascader',
+            },
+            {
+                value: 'switch',
+                label: 'Switch',
+            },
+            {
+                value: 'slider',
+                label: 'Slider',
+            },
+            {
+                value: 'time-picker',
+                label: 'TimePicker',
+            },
+            {
+                value: 'date-picker',
+                label: 'DatePicker',
+            },
+            {
+                value: 'datetime-picker',
+                label: 'DateTimePicker',
+            },
+            {
+                value: 'upload',
+                label: 'Upload',
+            },
+            {
+                value: 'rate',
+                label: 'Rate',
+            },
+            {
+                value: 'form',
+                label: 'Form',
+            },
+            ],
+        },
+        {
+            value: 'data',
+            label: 'Data',
+            children: [
+            {
+                value: 'table',
+                label: 'Table',
+            },
+            {
+                value: 'tag',
+                label: 'Tag',
+            },
+            {
+                value: 'progress',
+                label: 'Progress',
+            },
+            {
+                value: 'tree',
+                label: 'Tree',
+            },
+            {
+                value: 'pagination',
+                label: 'Pagination',
+            },
+            {
+                value: 'badge',
+                label: 'Badge',
+            },
+            ],
+        },
+        {
+            value: 'notice',
+            label: 'Notice',
+            children: [
+            {
+                value: 'alert',
+                label: 'Alert',
+            },
+            {
+                value: 'loading',
+                label: 'Loading',
+            },
+            {
+                value: 'message',
+                label: 'Message',
+            },
+            {
+                value: 'message-box',
+                label: 'MessageBox',
+            },
+            {
+                value: 'notification',
+                label: 'Notification',
+            },
+            ],
+        },
+        {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [
+            {
+                value: 'menu',
+                label: 'Menu',
+            },
+            {
+                value: 'tabs',
+                label: 'Tabs',
+            },
+            {
+                value: 'breadcrumb',
+                label: 'Breadcrumb',
+            },
+            {
+                value: 'dropdown',
+                label: 'Dropdown',
+            },
+            {
+                value: 'steps',
+                label: 'Steps',
+            },
+            ],
+        },
+        {
+            value: 'others',
+            label: 'Others',
+            children: [
+            {
+                value: 'dialog',
+                label: 'Dialog',
+            },
+            {
+                value: 'tooltip',
+                label: 'Tooltip',
+            },
+            {
+                value: 'popover',
+                label: 'Popover',
+            },
+            {
+                value: 'card',
+                label: 'Card',
+            },
+            {
+                value: 'carousel',
+                label: 'Carousel',
+            },
+            {
+                value: 'collapse',
+                label: 'Collapse',
+            },
+            ],
+        },
+        ],
+    },
+    {
+        value: 'resource',
+        label: 'Resource',
+        children: [
+        {
+            value: 'axure',
+            label: 'Axure Components',
+        },
+        {
+            value: 'sketch',
+            label: 'Sketch Templates',
+        },
+        {
+            value: 'docs',
+            label: 'Design Documentation',
+        },
+        ],
+    },
+    ];
+    if(props.configure.options==undefined){
+        props.configure.options = options;
+    }
+</script>
+<style scoped>
+  
+</style>