super-page-runtime 1.0.15 → 1.0.16

package/components/runtime/views/assemblys/form/common/uploading.vue

@@ -0,0 +1,34 @@
+<template>
+	<el-collapse-item
+			title="上传"
+			name="uploadConfig"
+			class="amb-design-attr-group-header">
+		<div style="padding:8px 0px 0px 0px;">
+			<slot name="addition" :row="uploadConfig"></slot>
+			<el-form-item label="立即上传" class="amb-design-attr-item">
+				<el-switch v-model="uploadConfig.autoUpload" />
+			</el-form-item>
+			<el-form-item label="上传地址" class="amb-design-attr-item">
+				<el-input v-model="uploadConfig.action" placeholder="请输入" />
+			</el-form-item>
+			<el-form-item label="附件多选" class="amb-design-attr-item">
+				<el-switch v-model="uploadConfig.multiple" />
+			</el-form-item>
+			<el-form-item label="文件字段名" class="amb-design-attr-item">
+				<el-input v-model="uploadConfig.name" placeholder="请输入" />
+			</el-form-item>
+			<el-form-item label="文件限制(M)" class="amb-design-attr-item">
+				<el-input-number v-model="uploadConfig.limitFileSize" />
+			</el-form-item>
+			<el-form-item label="实时删除" class="amb-design-attr-item">
+				<el-switch v-model="uploadConfig.isDeleteNow" />
+			</el-form-item>
+		</div>
+	</el-collapse-item>
+</template>
+<script lang='ts' setup>
+const props = defineProps({
+	uploadConfig:Object
+});
+</script>
+

package/components/runtime/views/assemblys/form/common/verification.vue

@@ -0,0 +1,79 @@
+<template>
+		<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="verification.required" label="必填"/>
+					</el-form-item>
+					<el-checkbox-group v-model="verification.type">
+						<el-form-item class="amb-design-attr-item" label-width="0">
+							<el-checkbox label="整形" value="int" />
+							<el-checkbox label="数字" value="number" />
+							<el-checkbox label="bool" value="boolean" />
+						</el-form-item>
+						<el-form-item class="amb-design-attr-item" label-width="0">
+							<el-checkbox label="邮件" value="mail" />
+							<el-checkbox label="网址" value="ip" />
+						</el-form-item>
+					</el-checkbox-group>
+					<el-form-item class="amb-design-attr-item" label-width="0">
+						<el-col :span="8">			
+							<el-checkbox v-model="verification.verifyMinLength" label="最小长度" value="min" /> 
+						</el-col>
+						<el-col :span="14">
+								<el-input-number
+										v-model="verification.minLength"
+										class="mx-4"
+										:min="0"
+										controls-position="right"
+										placeholder="请输入"
+								/>
+						</el-col>
+					</el-form-item>
+					<el-form-item class="amb-design-attr-item" label-width="0">
+						<el-col :span="8">
+							<el-checkbox v-model="verification.verifyMaxLength" label="最大长度" value="max" /> 
+						</el-col>
+						<el-col :span="14">
+								<el-input-number
+										v-model="verification.maxLength"
+										class="mx-4"
+										:min="0"
+										controls-position="right"
+										placeholder="请输入"
+								/>
+						</el-col>
+					</el-form-item>
+					<el-form-item class="amb-design-attr-item" label-width="0">
+							<el-col :span="8">
+								<el-checkbox v-model="verification.verifyRegex" label="正则" value="regex" />
+							</el-col>
+							<el-col :span="14">
+									<el-input
+											v-model="verification.regex"
+											class="mx-4"
+											controls-position="right"
+											placeholder="请输入"
+									/>
+							</el-col>
+					</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>
+</template>
+<script lang='ts' setup>
+import { Search } from '@element-plus/icons-vue'
+defineProps({
+		verification:Object
+});
+
+</script>

package/components/runtime/views/assemblys/form/common/voluntarily.vue

@@ -0,0 +1,27 @@
+<template>
+	<el-collapse-item
+			title="选择后自动设置"
+			name="voluntarily"
+			class="amb-design-attr-group-header">
+		<div style="padding:8px 0px 0px 0px;">
+			<RowUlLi
+					type="input"
+					:tittle="true"
+					:showIndex="true"
+					leftTittle="可选属性"
+					rightTittle="设置到变量"
+					:list="voluntarily"></RowUlLi>
+		</div>
+	</el-collapse-item>
+</template>
+
+<script setup lang="ts">
+import RowUlLi from '../common/row-ul-li.vue'
+const props = defineProps({
+	voluntarily:Object,
+});
+</script>
+
+<style scoped>
+
+</style>

package/components/runtime/views/assemblys/form/custom/custom-attr-base.vue

@@ -0,0 +1,81 @@
+<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="parameter"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<RowUlLi type="input" :list="configure.props.parameter"></RowUlLi>
+				</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>
+			<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 RowUlLi from '../common/row-ul-li.vue'
+
+defineProps({
+	configure: Object,
+	default: () => ({props: {}})
+});
+const openCollapseItems = ref("")
+
+</script>

package/components/runtime/views/assemblys/form/custom/custom-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']
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div :class="designClass" :style="designStyle">
+    <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 : 'custom' }}
+        </div>
+      </template>
+      <el-button
+        :disabled="designProperty.state === 'disabled' ? true : false"
+        :size="designProperty.size"
+        type="primary"
+      >
+        自定义组件
+      </el-button>
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  caculateDetailComponentStyle,
+  caculateComponentProps
+} from '../../../../../../src/utils/form-design-util'
+import { FullScreen } from '@element-plus/icons-vue'
+import { ref, watch } from 'vue'
+const props = defineProps({
+  configure: Object
+})
+//定义自身详细参数
+const designStyle = ref({})
+const designClass = ref('')
+const designHeaderStyle = ref({})
+const designProperty = ref({})
+//监控配置样式的变化
+watch(
+  props.configure.style,
+  () => {
+    caculateDetailComponentStyle(props.configure, designStyle, designClass, designHeaderStyle)
+  },
+  { immediate: true }
+)
+
+//监控配置属性的变化
+watch(
+  props.configure.props,
+  () => {
+    caculateComponentProps(props.configure, designProperty)
+  },
+  { immediate: true }
+)
+</script>
+<style scoped></style>

package/components/runtime/views/assemblys/form/date-picker/datepicker-runtime.vue

@@ -0,0 +1,80 @@
+<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-time-picker
+      v-if="designProperty.dateType == 'time' || designProperty.dateType == 'timerange'"
+      :is-range="designProperty.dateType == 'timerange'"
+      range-separator="-"
+      :clearable="designProperty.clearable"
+      :disabled="designProperty.state === 'disabled'"
+      :readonly="designProperty.state === 'readonly'"
+      :size="designProperty.size"
+      :placeholder="designProperty.placeholder"
+      :start-placeholder="designProperty.placeholder"
+      :end-placeholder="designProperty.endPlaceholder"
+      :format="designProperty.format"
+      v-model="dynamicModelMethod"
+      :shortcuts="designProperty.shortcuts"
+      :type="designProperty.dateType"
+    />
+    <el-date-picker
+      v-else
+      :clearable="designProperty.clearable"
+      :disabled="designProperty.state === 'disabled'"
+      :readonly="designProperty.state === 'readonly'"
+      :size="designProperty.size"
+      :placeholder="designProperty.placeholder"
+      :start-placeholder="designProperty.placeholder"
+      :end-placeholder="designProperty.endPlaceholder"
+      :format="designProperty.format"
+      v-model="dynamicModelMethod"
+      :shortcuts="designProperty.shortcuts"
+      :type="designProperty.dateType"
+    />
+  </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>

package/components/runtime/views/assemblys/form/datetime/datetime-design.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+    <el-date-picker
+        v-model="configure.fieldName"
+        type="date"
+        placeholder="Pick a day"/>
+  </el-form-item>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = 'Date or Time';
+    }
+</script>
+<style scoped>
+  
+</style>

package/components/runtime/views/assemblys/form/dept-tree/depttree-runtime.vue

@@ -0,0 +1,60 @@
+<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>
+    <OrganizationInput
+      :disabled="designProperty.state == 'disabled'"
+      :multiple="designProperty.multiple"
+      :treeType="designProperty.treeType"
+      v-model="dataModel[fieldName]"
+      :models="dataModel"
+      :fields="autoSetFields"
+      :size="designProperty.size"
+      placeholder="请选择"
+      :separator="designProperty.separator"
+    ></OrganizationInput>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { ref, watch } 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 : {}
+if (!entity.data) {
+  entity.data = {}
+}
+const dataModel = entity.data
+//设计时有限制只能选择data
+let dynamicFields: string[] = getFormModelFields(props.pageContext, props.configure)
+const fieldName =
+  dynamicFields.length > 0 ? dynamicFields[dynamicFields.length - 1] : props.configure.uuid
+
+//获取默认的样式及配置
+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 autoSetFields = designProperty.autoSetFields ? designProperty.autoSetFields : []
+</script>

package/components/runtime/views/assemblys/form/divider/divider-runtime.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-divider
+    :direction="designProperty.direction"
+    :border-style="designProperty.borderType"
+    :content-position="designProperty.titlePosition"
+  >
+    <div :style="headerStyle">
+      {{ dynamicValue }}
+    </div>
+  </el-divider>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { formatVariableValue } from '../../../../../../src/utils/page-helper-util'
+
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+//定义自身详细参数
+//运行时信息
+const runtimeInfo: any = props.configure.runtime ? props.configure.runtime : {}
+const headerStyle = runtimeInfo.headerStyle
+const designProperty: any = runtimeInfo.props ? runtimeInfo.props : {}
+
+//定义内容
+let contentVariable = designProperty.value
+//显示内容
+const dynamicValue = computed(() => {
+  if (!contentVariable) {
+    return ''
+  }
+  const resultValue = formatVariableValue(props.pageContext, contentVariable)
+  return resultValue == undefined || resultValue == null ? '' : resultValue
+})
+</script>

package/components/runtime/views/assemblys/form/file-picture/picture-design.vue

@@ -0,0 +1,80 @@
+<template>
+    <el-form-item :label="configure.title" :label-position="right">
+        <el-upload
+            v-model:file-list="fileList"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+        >
+        <el-icon><Plus /></el-icon>
+        </el-upload>
+        <el-dialog v-model="dialogVisible">
+            <img w-full :src="dialogImageUrl" alt="Preview Image" />
+        </el-dialog>
+    </el-form-item>
+</template>
+<script lang='ts' setup>
+    import { ref } from 'vue'
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    import { Plus } from '@element-plus/icons-vue'
+    import type { UploadProps, UploadUserFile } from 'element-plus'
+
+    //配置参数
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = '';
+    }
+    const dialogImageUrl = ref('')
+    const dialogVisible = ref(false)
+
+    //默认的文件
+    const fileList = ref<UploadUserFile[]>([
+        {
+            name: 'food.jpeg',
+            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+            name: 'plant-1.png',
+            url: 'https://element-plus.org/images/plant-1.png',
+        },
+        {
+            name: 'food.jpeg',
+            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+            name: 'plant-2.png',
+            url: 'https://element-plus.org/images/plant-2.png',
+        },
+        {
+            name: 'food.jpeg',
+            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+            name: 'figure-1.png',
+            url: 'https://element-plus.org/images/figure-1.png',
+        },
+        {
+            name: 'food.jpeg',
+            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+            name: 'figure-2.png',
+            url: 'https://element-plus.org/images/figure-2.png',
+        },
+      ])
+
+    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
+    console.log(file, uploadFiles)
+    }
+
+    const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+        dialogImageUrl.value = uploadFile.url!
+        dialogVisible.value = true
+    }
+</script>
+<style scoped>
+  
+</style>