super-page-runtime 1.0.14 → 1.0.16

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

@@ -1,57 +0,0 @@
-<template>
-	<el-form-item
-			:required="designProperty.required"
-			:class="runtimeClass"
-			:label-width="designProperty.labelWidth"
-			:style="runtimeStyle">
-		<template #label>
-			<div v-if="designProperty.tittleShow" :style="{...headerStyle}">
-				{{ designProperty.title}}
-			</div>
-		</template>
-		<el-input-number
-				:disabled="designProperty.state === 'disabled'"
-				:readonly="designProperty.state === 'readonly'"
-				:controls="designProperty.showButton"
-				:size="designProperty.size"
-				:placeholder="designProperty.placeholder"
-				v-model="dynamicModelMethod"
-				:precision="designProperty.precision"
-				:step="designProperty.step"
-				:min="designProperty.min"
-				:max="designProperty.max" />
-	</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 { getVariableValue,setVariableValue} from '../../../../utils/page-helper-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: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:{};
-</script>

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

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

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

@@ -1,132 +0,0 @@
-<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/label/label-runtime.vue

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

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

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

package/src/components/runtime/views/assemblys/form/rich-text/richtext-runtime.vue

@@ -1,153 +0,0 @@
-<template>
-	<!--无标题时不用form-item-->
-	<el-form-item
-			v-if="designProperty.tittleShow"
-			:required="designProperty.required"
-			:class="runtimeClass"
-			:label-width="designProperty.labelWidth"
-			:style="runtimeStyle">
-		<template #label>
-			<div v-if="designProperty.tittleShow" :style="{...headerStyle}">
-				{{ designProperty.title}}
-			</div>
-		</template>
-		<div style="width:100%;height:100%;">
-			<div ref="quillEditorRef" style="width:100%;">{{ initValue }}</div>
-			<!-- 使用自定义图片上传 -->
-			<input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
-		</div>
-	</el-form-item>
-	<div v-else style="width:100%;height:100%;" class="amb-widget-richtext-single">
-		<div ref="quillEditorRef" style="width:100%;">{{ initValue }}</div>
-		<!-- 使用自定义图片上传 -->
-		<input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
-	</div>
-</template>
-<script lang='ts' setup>
-	import {ref,onMounted} from "vue";
-	import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
-	import { getFormModelFields} from '../../../../utils/page-init-util';
-	import {formatVariableValue, setVariableValue} from '../../../../utils/page-helper-util';
-	import Quill from 'quill';
-	import 'quill/dist/quill.snow.css'; // 引入样式文件
-	//定义的属性对象
-	interface MyProps{
-        //页面对象
-        pageContext:PageContext,
-        configure:Component
-    }
-	const props = defineProps<MyProps>();
-
-	const entity:any = props.pageContext.entity?props.pageContext.entity:{};
-	//初始化字段及默认值
-	const dynamicFields:string[] = 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.value;
-	const initValue = formatVariableValue(props.pageContext,contentVariable);
-	
-	//富文本引用
-	const quillEditorRef = ref(null);
-	const quill:any = ref(null);
-	const fileBtn:any = ref(null);
-	//初始化富文本控件
-	const fontSize = ['12px', '13px', '14px', '15px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'];
-	const option = ref({
-		modules: {
-			toolbar: [
-				['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-				["blockquote", "code-block"], // 引用
-				[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-				[{ script: "sub" }, { script: "super" }], // 上标/下标
-				[{ indent: '-1' }, { indent: '+1' }], // 缩进
-				[{ direction: 'rtl' }], // 文本方向
-				[{ size: fontSize }], // 字体大小
-				[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-				[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-				[{ font: [] }], // 字体种类
-				[{ align: [] }], // 对齐方式
-				['clean'], // 清除文本格式
-				['link', 'image'] // 链接、图片、视频
-			]
-		},
-		theme: 'snow',
-		placeholder:designProperty.placeholder,
-		readOnly:designProperty.state=='readonly'
-	});
-
-	/**
-	 * 计算并更新高度
-	 */
-	 function updateEditorHeight(){
-		//计算高度
-		if(quill&&quill.value){
-			if(quill.value.container){
-				//获取相对高度
-				const parentNode = quill.value.container.parentNode;
-				const parentRect = parentNode.getBoundingClientRect();
-				
-				const thisRect = quill.value.container.getBoundingClientRect();
-				//计算高度
-				let newHeight = parentRect.height-(thisRect.top-parentRect.top);
-				if(newHeight<100){
-					newHeight = 100;
-				}
-				quill.value.container.style.height = newHeight+"px";
-			}
-		}
-	}
-
-	//上传图片
-	const imgHandler = (state) => {
-		if (fileBtn.value&&state) {
-			fileBtn.value.click();
-		}
-	}
-	//上传
-	const handleUpload = (e) => {
-		const files = Array.prototype.slice.call(e.target.files);
-		if (!files) {
-			return
-		}
-		const formdata = new FormData()
-		formdata.append('file', files[0]);
-		alert("TODO:上传图片")
-		//此处使用服务端提供上传接口
-		/**backsite.uploadFile(formdata) 
-			.then(res => {
-			if (res.data.url) {
-				const quill = toRaw(myQuillEditor.value).getQuill()
-				const length = quill.getSelection().index
-				quill.insertEmbed(length, 'image', res.data.url)
-				quill.setSelection(length + 1)
-			}
-			})*/
-	}
-	//初始化编辑器
-	onMounted(() => {
-		quill.value = new Quill(quillEditorRef.value, option.value);
-		//添加上传文件
-		quill.value.getModule('toolbar').addHandler('image',imgHandler);
-		//绑定事件
-		quill.value.on('text-change', function(delta, oldDelta, source) {
-			//1秒后设置到缓存中
-			if(window.updateQuillTimeout){
-				clearTimeout(window.updateQuillTimeout);
-			}
-			window.updateQuillTimeout = setTimeout(function(){
-				setVariableValue(entity,dynamicFields,quill.value.root.innerHTML);
-				console.log("new entity",entity)
-			},1000);
-		});
-		//计算高度
-		updateEditorHeight();
-	});
-</script>