super-page-runtime 1.0.16 → 2.0.1

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

@@ -1,79 +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 '../../../../../../src/utils/interfaces/page-design-types'
-import { getVariableValue, setVariableValue } from '../../../../../../src/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/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/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/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/components/runtime/views/assemblys/form/image-thumbnail/imagethumbnail-attr.vue

@@ -1,28 +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/components/runtime/views/assemblys/form/image-thumbnail/imagethumbnail-design.vue

@@ -1,104 +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 '../../../../../../src/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/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/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/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/components/runtime/views/assemblys/form/image-upload/imageupload-attr.vue

@@ -1,28 +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/components/runtime/views/assemblys/form/image-upload/imageupload-design.vue

@@ -1,76 +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 '../../../../../../src/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/components/runtime/views/assemblys/form/input-number/input-number-runtime.vue

@@ -1,62 +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 '../../../../../../src/utils/interfaces/page-design-types'
-import { getFormModelFields } from '../../../../../../src/utils/page-init-util'
-import { getVariableValue, setVariableValue } from '../../../../../../src/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>