super-page-runtime 1.0.13 → 1.0.14

package/src/components/runtime/views/assemblys/form/input-show/input-show-attr-base.vue

@@ -0,0 +1,68 @@
+<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" 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-input v-model="configure.props.base.title" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="默认值" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.defaultValue" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="文本格式化" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.placeholder" type="textarea" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="尺寸" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.size" class="ml-4">
+							<el-radio value="large">大</el-radio>
+							<el-radio value="default">中</el-radio>
+							<el-radio value="small">小</el-radio>
+						</el-radio-group>
+					</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>
+			<PreSuffix :preSuffix="configure.props.preSuffix" />
+			<CommonAttrSize :size="configure.props.size" />
+			<Title :title="configure.props.title" />
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue';
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import CommonAttrSize from '../../common/common-attr-size.vue'
+import Title from '../common/title.vue'
+import PreSuffix from '../common/pre-suffix.vue'
+
+defineProps({
+	configure: Object,
+	default: () => ({props: {}})
+});
+const openCollapseItems = ref("")
+
+</script>

package/src/components/runtime/views/assemblys/form/input-show/input-show-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 '../common/attr-event.vue'
+import {getFormComponentOptions} from '../../../../utils/assemblys-config.js'
+defineProps({
+	configure:Object
+});
+const events = ['click', 'change', 'blur', 'focus', 'show', 'hidden']
+</script>

package/src/components/runtime/views/assemblys/form/input-show/input-show-attr-style.vue

@@ -0,0 +1,58 @@
+<template>
+	<el-form-item
+			:required="designProperty.required?true:false"
+			:class="designClass"
+			:label-width="designProperty.labelWidth"
+			:style="designStyle">
+		<template #label>
+			<div :style="designHeaderStyle">
+				{{ designProperty.title?designProperty.title:'input-text' }}
+			</div>
+		</template>
+		<el-text :size="designProperty.size">{{ designProperty.title?designProperty.title:'text' }}</el-text>
+	</el-form-item>
+</template>
+<script lang='ts' setup>
+import {ref, watch} from "vue";
+import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
+
+const props = defineProps({
+	configure:Object
+});
+//定义自身详细参数
+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']['rows']){
+	// 	tempProps['rows'] = defineProps['base']['rows']
+	// }
+
+	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()
+},{immediate:true});
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/form/input-show/input-show-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 './input-show-attr-base.vue';
+import AttrStyle from './input-show-attr-style.vue';
+import AttrHeader from '../common/attr-header.vue'
+import AttrEvent from './input-show-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/form/input-show/input-show-design.vue

@@ -0,0 +1,132 @@
+<template>
+	<el-form-item
+			:required="designProperty.required?true:false"
+			:class="designClass"
+			:label-width="designProperty.labelWidth"
+			:style="designStyle">
+		<template #label>
+			<div :style="designHeaderStyle">
+				{{ designProperty.title?designProperty.title:'input-show' }}
+			</div>
+		</template>
+		<el-input
+				:disabled="designProperty.state === 'disabled'? true : false"
+				:readonly="designProperty.state === 'readonly'? true : false"
+				:size="designProperty.size"
+				:clearable="designProperty.clearable"
+				:placeholder="designProperty.placeholder"
+				v-model="designProperty.defaultValue">
+			<template v-if="designProperty && (designProperty.innerPreIcon || designProperty.innerPreText)" #prefix>
+				{{ designProperty.innerPreText }}
+			</template>
+			<template
+					v-show="designProperty.enable || (designProperty && (designProperty.innerSufIcon || designProperty.innerSufText))"
+					#suffix>
+				{{ designProperty.innerSufText }}
+				<el-icon v-show="designProperty.enable"><FullScreen /></el-icon>
+			</template>
+			<template v-if="designProperty && (designProperty.outerPreIcon || designProperty.outerPreText)" #prepend>
+				<!--<el-icon v-if="designProperty.outerPreIcon">-->
+				<!--  <component :is="designProperty.outerPreIcon" />-->
+				<!--</el-icon>-->
+				<span v-if="designProperty.outerPreText">{{ designProperty.outerPreText }}</span>
+			</template>
+			<template v-if="designProperty && (designProperty.outerSufIcon || designProperty.outerSufText)" #append>
+				{{ designProperty.outerSufText }}
+			</template>
+		</el-input>
+	</el-form-item>
+</template>
+<script lang='ts' setup>
+import {ref, watch} from "vue";
+import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
+
+const props = defineProps({
+	configure:Object
+});
+//定义自身详细参数
+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['scan']['enable']){
+		tempProps['enable'] = true;
+	}else {
+		tempProps['enable'] = false;
+	}
+
+	// 前后缀/外部
+	if(defineProps['preSuffix']['position'] === 'outer'){
+
+		// 前缀图标
+		if (defineProps['preSuffix']['preIcon']){
+			tempProps['outerPreIcon'] = defineProps['preSuffix']['preIcon'];
+		}
+
+		// 前缀文本
+		if (defineProps['preSuffix']['preText']){
+			tempProps['outerPreText'] = defineProps['preSuffix']['preText'];
+		}
+
+		// 后缀图标
+		if (defineProps['preSuffix']['sufIcon']){
+			tempProps['outerSufIcon'] = defineProps['preSuffix']['sufIcon'];
+		}
+
+		// 后缀文本
+		if (defineProps['preSuffix']['sufText']){
+			tempProps['outerSufText'] = defineProps['preSuffix']['sufText'];
+		}
+	}
+
+	// 前后缀/内部
+	if(defineProps['preSuffix']['position'] === 'inner'){
+		// 前缀图标
+		if (defineProps['preSuffix']['preIcon']){
+			tempProps['innerPreIcon'] = defineProps['preSuffix']['preIcon'];
+		}
+
+		// 前缀文本
+		if (defineProps['preSuffix']['preText']){
+			tempProps['innerPreText'] = defineProps['preSuffix']['preText'];
+		}
+
+		// 后缀图标
+		if (defineProps['preSuffix']['sufIcon']){
+			tempProps['innerSufIcon'] = defineProps['preSuffix']['sufIcon'];
+		}
+
+		// 后缀文本
+		if (defineProps['preSuffix']['sufText']){
+			tempProps['innerSufText'] = defineProps['preSuffix']['sufText'];
+		}
+	}
+
+	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()
+},{immediate:true});
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/form/input-text/inputtext-runtime.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-form-item
+    :required="designProperty.required ? true : false"
+    :class="runtimeClass"
+    :label-width="designProperty.labelWidth"
+    :style="runtimeStyle"
+  >
+    <template #label>
+      <div v-if="designProperty.tittleShow" :style="{ ...headerStyle }">
+        {{ designProperty.title }}
+      </div>
+    </template>
+    <el-input
+      :disabled="designProperty.state === 'disabled'"
+      :readonly="designProperty.state === 'readonly'"
+      :size="designProperty.size"
+      :clearable="designProperty.clearable"
+      :placeholder="designProperty.placeholder"
+      :maxlength="designProperty.maxLength"
+      :show-word-limit="designProperty.showInputNum"
+      v-model="dynamicModelMethod"
+      @input="handleEvent($event, pageContext, configure, 'input')"
+      @change="handleEvent($event, pageContext, configure, 'change')"
+      @blur="handleEvent($event, pageContext, configure, 'blur')"
+      @focus="handleEvent($event, pageContext, configure, 'focus')"
+      @click="handleEvent($event, pageContext, configure, 'click')"
+    >
+      <template
+        v-if="
+          designProperty.iconPosition != 'outer' &&
+          ((designProperty.preIconType && designProperty.preIconValue) || designProperty.preText)
+        "
+        #prefix
+      >
+        <SuperIcon
+          v-if="designProperty.preIconType && designProperty.preIconValue"
+          :iconType="designProperty.preIconType"
+          :iconValue="designProperty.preIconValue"
+        ></SuperIcon>
+        {{ designProperty.preText }}
+      </template>
+      <template
+        v-if="
+          designProperty.iconPosition == 'outer' &&
+          ((designProperty.preIconType && designProperty.preIconValue) || designProperty.preText)
+        "
+        #prepend
+      >
+        <SuperIcon
+          v-if="designProperty.preIconType && designProperty.preIconValue"
+          :iconType="designProperty.preIconType"
+          :iconValue="designProperty.preIconValue"
+        ></SuperIcon>
+        {{ designProperty.preText }}
+      </template>
+      <template
+        v-if="
+          designProperty.iconPosition != 'outer' &&
+          ((designProperty.sufIconType && designProperty.sufIconValue) || designProperty.sufText)
+        "
+        #suffix
+      >
+        <SuperIcon
+          v-if="designProperty.sufIconType && designProperty.sufIconValue"
+          :iconType="designProperty.sufIconType"
+          :iconValue="designProperty.sufIconValue"
+        ></SuperIcon>
+        {{ designProperty.sufText }}
+      </template>
+      <template
+        v-if="
+          designProperty.iconPosition == 'outer' &&
+          ((designProperty.sufIconType && designProperty.sufIconValue) || designProperty.sufText)
+        "
+        #append
+      >
+        <SuperIcon
+          v-if="designProperty.sufIconType && designProperty.sufIconValue"
+          :iconType="designProperty.sufIconType"
+          :iconValue="designProperty.sufIconValue"
+        ></SuperIcon>
+        {{ designProperty.sufText }}
+      </template>
+    </el-input>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { SuperIcon } from 'agilebuilder-ui'
+import { computed, onMounted, watch } from 'vue'
+import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import { getFormModelFields } from '../../../../utils/page-init-util'
+import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
+import { handleEvent } from '../../../../utils/events/event-util'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+const entity: any = props.pageContext.entity ? props.pageContext.entity : {}
+
+let dynamicFields: string[] = getFormModelFields(props.pageContext, props.configure)
+
+//绑定模型的字段
+const dynamicModelMethod = computed({
+  get() {
+    return getVariableValue(entity, dynamicFields)
+  },
+  set(value) {
+    setVariableValue(entity, dynamicFields, value)
+  }
+})
+//获取默认的样式及配置
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+const designProperty = runtimeInfo.props ? runtimeInfo.props : {}
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+const headerStyle = runtimeInfo.headerStyle
+
+/**
+ * 获取值
+ */
+function getValue() {
+  return getVariableValue(entity, dynamicFields)
+}
+
+/**
+ * 设置值
+ */
+function setValue(value: any) {
+  return setVariableValue(entity, dynamicFields, value)
+}
+
+//暴露方法
+defineExpose({
+  getValue,
+  setValue
+})
+</script>

package/src/components/runtime/views/assemblys/form/label/label-runtime.vue

@@ -0,0 +1,115 @@
+<template>
+	<el-form-item
+		v-if="designProperty.tittleShow"
+			:required="designProperty.required?true:false"
+			:class="runtimeClass"
+			:label-width="designProperty.labelWidth"
+			:style="runtimeStyle">
+		<template #label>
+			<div v-if="designProperty.tittleShow" :style="{...headerStyle}">
+				{{designProperty.title}}
+			</div>
+		</template>
+		<div style="display:flex;width:100%;justify-content: space-between">
+			<span
+				style="overflow:hidden;white-space: nowrap;">
+				<span
+					v-if="designProperty.preIconValue||designProperty.preText"
+					:class="{'el-input__suffix':designProperty.iconPosition!='outer','el-input-group__append':designProperty.iconPosition=='outer'}" :style="appendStyle">
+					<SuperIcon v-if="designProperty.preIconType&&designProperty.preIconValue" :iconType="designProperty.preIconType" :iconValue="designProperty.preIconValue"></SuperIcon>
+					{{designProperty.preText}}
+				</span>
+				&nbsp;{{dynamicValue}}
+			</span>
+			<span
+				v-if="designProperty.sufIconValue||designProperty.sufText"
+				:class="{'el-input__suffix':designProperty.iconPosition!='outer','el-input-group__append':designProperty.iconPosition=='outer'}">
+				<SuperIcon style="" v-if="designProperty.sufIconType&&designProperty.sufIconValue" :iconType="designProperty.sufIconType" :iconValue="designProperty.sufIconValue"></SuperIcon>
+				<span>&nbsp;{{designProperty.sufText}}</span>
+			</span>
+		</div>
+	</el-form-item>
+	<span
+		v-else 
+		style="display:flex;justify-content: space-between">
+		<span style="overflow:hidden;white-space: nowrap;" :title="dynamicValue">{{designProperty.prefixIcon}}&nbsp;{{dynamicValue}}</span>
+		<span
+			v-if="designProperty.suffixTxt"
+			:class="appendClass" :style="appendStyle">{{designProperty.suffixTxt}}</span>
+	</span>
+</template>
+<script lang='ts' setup>
+	import {ref,computed} from "vue";
+	import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+	import { getFormModelFields} from '../../../../utils/page-init-util';
+	import {formatVariableValue,queryOptions,formatValueByType} from '../../../../utils/page-helper-util';
+	import {SuperIcon} from 'agilebuilder-ui';
+
+	//定义的属性对象
+    interface MyProps{
+        //页面对象
+        pageContext:PageContext,
+        configure:Component
+    }
+	const props = defineProps<MyProps>();
+	//初始化字段及默认值
+	getFormModelFields(props.pageContext,props.configure);
+
+	//定义自身详细参数
+	//运行时信息
+	const runtimeInfo:any = props.configure.runtime?props.configure.runtime:{};
+	const runtimeStyle = runtimeInfo.style;
+	const runtimeClass = runtimeInfo.class;
+	const headerStyle = runtimeInfo.headerStyle;
+	const appendClass = runtimeInfo.appendClass;
+	const appendStyle = runtimeInfo.appendStyle;
+	const designProperty:any =  runtimeInfo.props?runtimeInfo.props:{};
+
+	//查询数据源
+	//选项组数据
+	const listOptions:any = designProperty.options?designProperty.options:[];
+	//检查是否需要绑定远程查询对象
+	const dataOrigin = props.configure.props&&props.configure.props.dataOrigin?props.configure.props.dataOrigin:{};
+	const valueType = dataOrigin.optionValueSetType;
+	//查询数据
+	if(valueType=='dynamicData'||valueType=='dynamicData'||valueType=='service'){
+		queryOptions(props.configure,props.pageContext,'').then((results)=>{
+			listOptions.value = results;
+		}).catch((error)=>{
+			console.log("lable组件查询数据源失败!",error);
+		});
+	}
+
+	//定义内容
+	let contentVariable = designProperty.formatting;
+	if(!contentVariable){
+		const propsBase = props.configure.props.base?props.configure.props.base:{};
+		contentVariable = propsBase.prop;
+	}
+	//无值时,按UUID
+	if(!contentVariable){
+		contentVariable = '${page.'+props.configure.uuid+'}';
+	}
+	//格式化分类
+	const formatType = designProperty.formatType;
+	//显示内容
+	const dynamicValue = computed(()=>{
+		let resultValue:any = formatVariableValue(props.pageContext,contentVariable);
+		console.log("formatType",formatType)
+		if(formatType){
+			if(designProperty.hasOptions){
+				let selItems:any = null;
+				if(listOptions.value){
+					selItems = listOptions.value.filter((item:any)=>item.value==resultValue);
+				}
+				if(selItems&&selItems.length>0){
+					resultValue = selItems[0].label;
+				}
+			}else{
+				//其他格式化
+				resultValue = formatValueByType(resultValue,formatType,designProperty);
+			}
+		}
+		return resultValue==undefined||resultValue==null?'':resultValue;
+	});
+</script>

package/src/components/runtime/views/assemblys/form/link/link-runtime.vue

@@ -0,0 +1,67 @@
+<template>
+	<el-form-item
+			:class="runtimeClass"
+			:label-width="designProperty.labelWidth"
+			:style="runtimeStyle">
+		<template #label>
+			<div v-if="designProperty.tittleShow" :style="{...headerStyle}">
+				{{ designProperty.title}}
+			</div>
+		</template>
+		<el-tooltip
+			:disabled="!tooltipValue"
+			:content="tooltipValue">
+			<el-link
+					:disabled="designProperty.state === 'disabled'"
+					:type="designProperty.type"
+					:underline="designProperty.underline"
+					@click="openLink(configure,pageContext)">
+				{{dynamicValue}}
+			</el-link>
+		</el-tooltip>
+	</el-form-item>
+</template>
+<script lang='ts' setup>
+	import {computed} from "vue";
+	import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+	import { getFormModelFields} from '../../../../utils/page-init-util';
+	import {formatVariableValue,openLink} from '../../../../utils/page-helper-util';
+	//定义的属性对象
+    interface MyProps{
+        //页面对象
+        pageContext:PageContext,
+        configure:Component
+    }
+	const props = defineProps<MyProps>();
+	//初始化字段及默认值
+	getFormModelFields(props.pageContext,props.configure);
+	//定义自身详细参数
+	//运行时信息
+	const runtimeInfo:any = props.configure.runtime?props.configure.runtime:{};
+	const runtimeStyle = runtimeInfo.style;
+	const runtimeClass = runtimeInfo.class;
+	const headerStyle = runtimeInfo.headerStyle;
+	const designProperty:any =  runtimeInfo.props?runtimeInfo.props:{};
+
+	//定义内容
+	let contentVariable = designProperty.formatting;
+	if(!contentVariable){
+		const propsBase = props.configure.props.base?props.configure.props.base:{};
+		contentVariable = propsBase.prop;
+	}
+	//无值时,按UUID
+	if(!contentVariable){
+		contentVariable = '${page.'+props.configure.uuid+'}';
+	}
+	//显示内容
+	const dynamicValue = computed(()=>{
+		const resultValue = formatVariableValue(props.pageContext,contentVariable);
+		return resultValue==undefined||resultValue==null?'':resultValue;
+	});
+	//tooltip
+	let tooltipVariable = designProperty.tooltip;
+	const tooltipValue = computed(()=>{
+		const resultValue = formatVariableValue(props.pageContext,tooltipVariable);
+		return resultValue==undefined||resultValue==null?'':resultValue;
+	});
+</script>

package/src/components/runtime/views/assemblys/form/placeholder/placeholder-runtime.vue

@@ -0,0 +1,23 @@
+<template>
+	<el-form-item
+			:class="runtimeClass"
+			:style="runtimeStyle">
+		<div style="width: 100%;height:100%;">&nbsp;</div>
+	</el-form-item>
+</template>
+<script lang='ts' setup>
+	import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+
+	//定义的属性对象
+    interface MyProps{
+        //页面对象
+        pageContext:PageContext,
+        configure:Component
+    }
+	const props = defineProps<MyProps>();
+	//定义自身详细参数
+	//运行时信息
+	const runtimeInfo:any = props.configure.runtime?props.configure.runtime:{};
+	const runtimeStyle = runtimeInfo.style;
+	const runtimeClass = runtimeInfo.class;
+</script>