super-page-runtime 1.0.14 → 1.0.15

package/src/components/runtime/views/assemblys/form/file-upload/fileupload-runtime.vue

@@ -1,76 +0,0 @@
-<template>
-  <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>
-    <FsUploadList
-      :disabled="designProperty.state == 'disabled'"
-      :fileSetObj="designProperty.fileSetObj"
-      :fileInfo="fileInfo"
-    ></FsUploadList>
-  </el-form-item>
-  <FsUploadList
-    v-else
-    :disabled="designProperty.state == 'disabled'"
-    :fileSetObj="designProperty.fileSetObj"
-    :fileInfo="fileInfo"
-  ></FsUploadList>
-</template>
-<script lang="ts" setup>
-import { computed, watch } from 'vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
-import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
-interface MyProps {
-  pageContext: PageContext
-  configure: Component
-}
-const props = defineProps<MyProps>()
-
-//获取默认的样式及配置
-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
-//回显设置
-const entity: any = props.pageContext.entity ? props.pageContext.entity : {}
-//{name:'',serverPath:''}
-const propsBase = props.configure.props.base ? props.configure.props.base : {}
-let propName = propsBase.prop
-const pathFields = getFieldsByVariable(propsBase.prop)
-const nameFields = getFieldsByVariable(propsBase.propName)
-const initNames = getVariableValue(entity, nameFields)
-const initPaths = getVariableValue(entity, pathFields)
-const fileInfo: any = ref({
-  name: initNames ? initNames : '',
-  serverPath: initPaths ? initPaths : ''
-})
-//监听对象,设置到变量中
-watch(fileInfo, () => {
-  //名称
-  setVariableValue(entity, nameFields, fileInfo.name)
-  //路径
-  setVariableValue(entity, pathFields, fileInfo.serverPath)
-})
-
-/**
- * 获取变量各层级的字段
- */
-function getFieldsByVariable(variableName) {
-  if (!variableName) {
-    return []
-  }
-  if (variableName.startsWith('${')) {
-    variableName = variableName.substring(2, variableName.length - 1)
-  }
-  return variableName.split('.')
-}
-</script>

package/src/components/runtime/views/assemblys/form/image-thumbnail/imagethumbnail-attr-base.vue

@@ -1,142 +0,0 @@
-<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">
-						<SizeInput v-model:modelValue="configure.props.base.fileSize" v-model:selectedUnit="configure.props.base.fileSizeUnit"></SizeInput>
-					</el-form-item>
-					<el-form-item label="文件数量" class="amb-design-attr-item">
-						<el-input v-model="configure.props.base.fileNumber" placeholder="请输入" />
-					</el-form-item>
-					<el-form-item label="支持多选" class="amb-design-attr-item">
-						<el-radio-group v-model="configure.props.base.multiSelect" class="ml-4">
-							<el-radio :value="false">否</el-radio>
-							<el-radio :value="true">是</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.multiSelect" class="ml-4">
-							<el-radio :value="false">否</el-radio>
-							<el-radio :value="true">是</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.fit" class="ml-4">
-							<el-radio label="fill"> fill </el-radio>
-							<el-radio label="contain"> contain </el-radio>
-							<el-radio label="cover"> cover </el-radio>
-							<el-radio label="none"> none </el-radio>
-							<el-radio label="scale-down"> scale-down </el-radio>
-						</el-radio-group>
-					</el-form-item>
-				</div>
-			</el-collapse-item>
-			<el-collapse-item
-					title="图片源"
-					name="imageSearch"
-					class="amb-design-attr-group-header">
-				<div style="padding:8px 0px 0px 0px;display: block">
-					<div
-							v-for="(item,index) in configure.props.imageSearch"
-							:key="index"
-							class="amb-design-attr-image-thumbnail-search">
-						<el-input class="search-input" v-model="item.imageUrl" />
-						<el-icon class="search-icon" @click="romoveImageUrl(item)"><Minus /></el-icon>
-						<el-icon class="search-icon" @click="addImageUrl"><Plus /></el-icon>
-					</div>
-					<el-icon
-							v-if="configure.props.imageSearch && configure.props.imageSearch.length == 0"
-							class="search-icon"
-							@click="addImageUrl">
-						<Plus />
-					</el-icon>
-				</div>
-			</el-collapse-item>
-			<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>
-			<el-collapse-item
-					title="缩略图"
-					name="thumbnail"
-					class="amb-design-attr-group-header">
-				<div style="padding:8px 0px 0px 0px;">
-					<el-form-item label="宽度" class="amb-design-attr-item">
-						<el-input v-model="configure.props.base.imgWidth" placeholder="请输入" />
-					</el-form-item>
-					<el-form-item label="高度" class="amb-design-attr-item">
-						<el-input v-model="configure.props.base.imgHeight" placeholder="请输入" />
-					</el-form-item>
-					<el-form-item label="附件结果集合中文件存储路径的数据绑定key" style="margin-bottom: 60px">
-						<el-input v-model="configure.props.base.serverPathModel" placeholder="请输入" />
-					</el-form-item>
-				</div>
-			</el-collapse-item>
-			<CommonAttrSize :size="configure.props.size" />
-			<Title :title="configure.props.title" />
-		</el-collapse>
-	</el-form>
-</template>
-<script lang='ts' setup>
-import {Minus, Plus} from '@element-plus/icons-vue';
-import { ref } from 'vue';
-import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
-// import Verification from '../common/verification.vue'
-import CommonAttrSize from '../../common/common-attr-size.vue'
-import Title from '../common/title.vue'
-import SizeInput from '../common/size-input.vue'
-import DimensionInput from '../common/dimension-input.vue'
-
-const props = defineProps({
-	configure: Object,
-	default: () => ({props: {}})
-});
-const openCollapseItems = ref("")
-
-function addImageUrl() {
-	props.configure.props.imageSearch.push({imageUrl:''})
-}
-
-function romoveImageUrl(imageUrl:object) {
-	props.configure.props.imageSearch =
-			props.configure.props.imageSearch.filter(item => item != imageUrl)
-}
-
-</script>

package/src/components/runtime/views/assemblys/form/image-thumbnail/imagethumbnail-attr-event.vue

@@ -1,14 +0,0 @@
-<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', 'show', 'hidden','upload','select']
-</script>

package/src/components/runtime/views/assemblys/form/image-thumbnail/imagethumbnail-attr-style.vue

@@ -1,14 +0,0 @@
-<template>
-	<el-form label-width="80px" size="small">
-		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
-			<AttrStyle :configure="configure"></AttrStyle>
-		</el-collapse>
-	</el-form>
-</template>
-<script lang='ts' setup>
-import { defineProps } from 'vue';
-import AttrStyle from '../common/attr-style.vue'
-defineProps({
-	configure:Object
-});
-</script>

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

@@ -1,84 +0,0 @@
-<template>
-	<div style="max-height: 400px;overflow-y: scroll">
-		<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:'image' }}
-				</div>
-			</template>
-			<div>
-				<el-image
-						:style="{'width': designProperty.imgWidth,'height':designProperty.imgHeight,'margin-bottom':'10px','display':'block'}"
-						v-for="(item,index) in designProperty.imageSearchList"
-						:fit="designProperty.fit"
-						:src="item.imageUrl?item.imageUrl:''"
-						:key="index" />
-			</div>
-		</el-form-item>
-	</div>
-</template>
-<script lang='ts' setup>
-import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
-
-import {ref, confineProps, watch} from 'vue';
-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['imageSearch']){
-		tempProps['imageSearchList'] = defineProps['imageSearch']
-	}else {
-		tempProps['imageSearchList'] = [{imageUrl:''}]
-	}
-
-	// 显示方式
-	if (defineProps['base']['fit']){
-		tempProps['fit'] = defineProps['base']['fit']
-	}
-
-	// 图片宽度
-	if (defineProps['base']['imgWidth']){
-		tempProps['imgWidth'] = defineProps['base']['imgWidth'] + 'px'
-	}
-
-	// 图片高度
-	if (defineProps['base']['imgHeight']){
-		tempProps['imgHeight'] = defineProps['base']['imgHeight'] + 'px'
-	}
-	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描述-091621','color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',designProperty.value);
-},{immediate:true});
-</script>
-<style scoped>
-
-</style>

package/src/components/runtime/views/assemblys/form/image-upload/imageupload-attr-base.vue

@@ -1,75 +0,0 @@
-<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-radio-group v-model="configure.props.base.state" class="ml-4">
-							<el-radio value="default">普通</el-radio>
-							<el-radio value="disabled">禁用</el-radio>
-							<el-radio value="hidden">隐藏</el-radio>
-						</el-radio-group>
-					</el-form-item>
-				</div>
-			</el-collapse-item>
-			<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>
-			<uploading :uploadConfig="configure.props.uploadConfig"></uploading>
-			<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 Verification from '../common/verification.vue'
-import CommonAttrSize from '../../common/common-attr-size.vue'
-import Title from '../common/title.vue'
-import uploading from '../common/uploading.vue'
-
-defineProps({
-	configure: Object,
-	default: () => ({props: {}})
-});
-const openCollapseItems = ref("")
-
-</script>

package/src/components/runtime/views/assemblys/form/image-upload/imageupload-attr-event.vue

@@ -1,13 +0,0 @@
-<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'
-defineProps({
-	configure:Object
-});
-const events = ['click', 'change', 'show', 'hidden']
-</script>

package/src/components/runtime/views/assemblys/form/image-upload/imageupload-attr-style.vue

@@ -1,14 +0,0 @@
-<template>
-	<el-form label-width="80px" size="small">
-		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
-			<AttrStyle :configure="configure"></AttrStyle>
-		</el-collapse>
-	</el-form>
-</template>
-<script lang='ts' setup>
-import { defineProps } from 'vue';
-import AttrStyle from '../common/attr-style.vue'
-defineProps({
-	configure:Object
-});
-</script>

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

@@ -1,66 +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:'image-upload' }}
-			</div>
-		</template>
-		<el-upload
-				:disabled="designProperty.state === 'disabled'? true : false"
-				class="avatar-uploader"
-		>
-			<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-		</el-upload>
-	</el-form-item>
-</template>
-<script lang='ts' setup>
-import {Plus} from '@element-plus/icons-vue'
-import {ref, watch} from "vue";
-import {caculateDetailComponentStyle,caculateComponentProps} from "../../../../utils/form-design-util";
-const props = defineProps({
-	configure:Object
-});
-if(props.configure.title==undefined){
-	props.configure.title = 'Text';
-}
-//定义自身详细参数
-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-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>