super-page-runtime 1.0.15 → 1.0.16

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

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

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

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

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

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

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

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

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

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

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

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

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

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