super-page-runtime 1.0.14 → 1.0.16

package/{src/components → components}/runtime/views/assemblys/form/checkbox/checkbox-runtime.vue

@@ -27,14 +27,20 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
-import { queryOptionDatasources, autoSetAfterSelect } from '../../../../utils/page-helper-util'
-import { getFormModelFields } from '../../../../utils/page-init-util'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import {
+  queryOptionDatasources,
+  autoSetAfterSelect
+} from '../../../../../../src/utils/page-helper-util'
+import { getFormModelFields } from '../../../../../../src/utils/page-init-util'
 import {
   getVariableValue,
   setVariableValue,
   getOptionDatasFromPage
-} from '../../../../utils/page-helper-util'
+} from '../../../../../../src/utils/page-helper-util'
 
 //定义的属性对象
 interface MyProps {

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/{src/components → components}/runtime/views/assemblys/form/dept-tree/depttree-runtime.vue

@@ -25,9 +25,12 @@
 </template>
 <script lang="ts" setup>
 import { ref, watch } 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'
+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

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/{src/components → components}/runtime/views/assemblys/form/file-upload/fileupload-runtime.vue

@@ -26,8 +26,11 @@
 </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'
+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

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.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>

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

@@ -0,0 +1,70 @@
+<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 '../../../../../../src/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/components/runtime/views/assemblys/form/input-show/input-show-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 './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>