super-page-runtime 1.0.15 → 1.0.16

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

@@ -0,0 +1,247 @@
+<template>
+  <el-form-item
+    :required="designProperty.required ? true : false"
+    :class="runtimeClass"
+    :label-width="designProperty.labelWidth"
+    :style="runtimeStyle"
+  >
+    <template #label>
+      <div v-if="designProperty.tittleShow" :style="{ ...headerStyle }">
+        {{ designProperty.title }}
+      </div>
+    </template>
+    <el-select
+      :disabled="designProperty.state === 'disabled'"
+      :size="designProperty.size"
+      :clearable="designProperty.clearable"
+      :multiple="designProperty.multiple"
+      :collapse-tags="designProperty.collapseTags"
+      :collapse-tags-tooltip="designProperty.collapseTagsTooltip"
+      :filterable="designProperty.filterable"
+      :allow-create="designProperty.allowCreate"
+      :placeholder="designProperty.placeholder"
+      :remote-show-suffix="designProperty.remoteShowSuffix"
+      :remote="designProperty.remote"
+      :remote-method="designProperty.remoteMethod"
+      :loading="queryLoadingFlag"
+      @change="designProperty.changeMethod"
+      v-model="dynamicModelMethod"
+    >
+      <el-option
+        v-for="item in listOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+        <template v-if="item._description_">
+          <span style="float: left">{{ item.label }}</span>
+          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
+            {{ item._description_ }}
+          </span>
+        </template>
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue'
+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 '../../../../../../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 : {}
+//选项组数据
+const listOptions: any = ref(designProperty.options ? designProperty.options : [])
+//缓存中有值时,从缓存中获取
+const cacheOptions: any = getOptionDatasFromPage(props.pageContext, props.configure)
+if (cacheOptions.length > 0) {
+  listOptions.value = cacheOptions
+}
+
+const queryLoadingFlag = ref(false)
+//检查是否需要绑定远程查询对象
+const dataOrigin =
+  props.configure.props && props.configure.props.dataOrigin ? props.configure.props.dataOrigin : {}
+const valueType = dataOrigin.optionValueSetType
+//检查是否有自动设置值
+let autoSets: any = []
+
+//开启动态查询
+//查询的参数
+const optionconfigInfo = designProperty.optionconfigInfo ? designProperty.optionconfigInfo : {}
+//远程时固定开启模糊查询
+if (valueType == 'dynamicData' || valueType == 'dataTable' || valueType == 'service') {
+  if (dataOrigin.filterType == 'remote') {
+    designProperty.filterable = true
+    designProperty.remote = true
+    designProperty.remoteShowSuffix = true
+    let hisQuery: any = undefined
+    designProperty.remoteMethod = function (query: string) {
+      //判断是否和之前的查询条件一致
+      if (hisQuery === query) {
+        return
+      }
+      hisQuery = query
+      queryLoadingFlag.value = true
+      console.log('query', query)
+      queryOptionDatasources(props.pageContext, optionconfigInfo, query)
+        .then((results) => {
+          queryLoadingFlag.value = false
+        })
+        .then((error) => {
+          console.log('查询失败!', error)
+          queryLoadingFlag.value = false
+        })
+    }
+  }
+  if (dataOrigin.autoSets) {
+    for (let obj of dataOrigin.autoSets) {
+      if (obj.source) {
+        autoSets.push(obj)
+      }
+    }
+  }
+}
+//检查是否有绑定标签的变量
+if (
+  props.configure &&
+  props.configure.props &&
+  props.configure.props.base &&
+  props.configure.props.base.optionProp
+) {
+  autoSets.push({
+    source: 'label',
+    target: props.configure.props.base.optionProp
+  })
+}
+
+if (autoSets.length > 0) {
+  designProperty.changeMethod = optionChange
+}
+
+//监控字段
+const monitorFields: any = designProperty.monitorFields
+const monitorFieldInfos: any = []
+//监控对应的字段变化
+if (monitorFields) {
+  const preFields: any = []
+  for (let propName of monitorFields) {
+    if (propName.startsWith('${')) {
+      propName = propName.substring(2, propName.length - 1)
+      const fields = propName.split('.')
+      if (fields[0] === 'page' || fields[0] === 'task' || fields[0] === 'data') {
+        monitorFieldInfos.push(fields)
+        if (!preFields.includes(fields[0])) {
+          preFields.push(fields[0])
+        }
+      }
+    }
+  }
+  //监控对应的字段
+  for (let preField of preFields) {
+    watch(entity[preField], () => {
+      monitorFieldChange()
+    })
+  }
+}
+
+/**
+ * 获取监控的数据值
+ */
+function getMonitorFieldValues(): any {
+  let values = ''
+  for (let fieldInfo of monitorFieldInfos) {
+    values += '_' + getVariableValue(entity, fieldInfo)
+  }
+  return values
+}
+
+//初始化时检查一次
+let initMonitorValue: string = getMonitorFieldValues()
+
+let monitorTimeout: any = false
+/**
+ * 监控数据变化时
+ */
+function monitorFieldChange() {
+  if (monitorTimeout) {
+    clearTimeout(monitorTimeout)
+  }
+  //延迟200毫秒执行
+  monitorTimeout = setTimeout(function () {
+    const newValue = getMonitorFieldValues()
+    if (newValue == initMonitorValue) {
+      return
+    }
+    initMonitorValue = newValue
+    queryOptionDatasources(props.pageContext, optionconfigInfo, undefined).then((error) => {
+      console.log('查询失败!', error)
+      queryLoadingFlag.value = false
+    })
+  }, 200)
+}
+
+//数据选择变化后自动设置值
+function optionChange(value: any) {
+  let selItems: any = null
+  if (listOptions.value && value != undefined && value != null) {
+    selItems = listOptions.value.filter((item: any) => {
+      return Array.isArray(value) ? value.includes(item.value) : value === item.value
+    })
+  }
+  autoSetAfterSelect(props.configure, props.pageContext, autoSets, selItems)
+}
+
+/**
+ * 更新选项组
+ */
+function updateOptions(newOptions: any) {
+  listOptions.value = newOptions ? newOptions : []
+  console.log('updateOptions', newOptions)
+}
+
+/**
+ * 暴露更新选项组内容的方法
+ */
+defineExpose({
+  updateOptions
+})
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+      <el-slider v-model="configure.fieldName" />
+  </el-form-item>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = '';
+    }
+</script>
+<style scoped>
+  
+</style>

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

@@ -0,0 +1,63 @@
+<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-switch
+      :disabled="designProperty.state === 'disabled'"
+      :active-value:="designProperty.activeValue"
+      :active-text="designProperty.activeText"
+      :inactive-value="designProperty.inactiveValue"
+      :inactive-text="designProperty.inactiveText"
+      :width="designProperty.offOnWidth"
+      :size="designProperty.size"
+      :style="switchStyle"
+      v-model="dynamicModelMethod"
+    />
+  </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 : {}
+const switchStyle = runtimeInfo.switchStyle
+</script>

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

@@ -0,0 +1,65 @@
+<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-tag
+      :size="designProperty.size"
+      :closable="designProperty.closable"
+      :type="designProperty.type"
+    >
+      {{ dynamicValue }}
+    </el-tag>
+  </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 { formatVariableValue } from '../../../../../../src/utils/page-helper-util'
+
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//初始化字段及默认值
+getFormModelFields(props.pageContext, props.configure)
+
+//定义自身详细参数
+//运行时信息
+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 : {}
+
+//定义内容
+let contentVariable = designProperty.formatting
+if (!contentVariable) {
+  const propsBase = props.configure.props.base ? props.configure.props.base : {}
+  contentVariable = propsBase.prop
+}
+//无值时,按UUID
+if (!contentVariable) {
+  contentVariable = '${page.' + props.configure.uuid + '}'
+}
+//显示内容
+const dynamicValue = computed(() => {
+  const resultValue = formatVariableValue(props.pageContext, contentVariable)
+  return resultValue == undefined || resultValue == null ? '' : resultValue
+})
+</script>

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

@@ -0,0 +1,19 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+      <el-text type="success">{{ configure.fieldName }}</el-text>
+  </el-form-item>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = 'Text';
+    }
+    if(props.configure.fieldName==undefined){
+        props.configure.fieldName = 'Success';
+    }
+</script>
+<style scoped>
+  
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-form-item
+      :required="designProperty.required ? true : false"
+      :class="runtimeClass"
+      :label-width="designProperty.labelWidth"
+      :style="runtimeStyle"
+    >
+      <template #label>
+        <div v-if="designProperty.tittleShow" :style="{ ...headerStyle }">
+          {{ designProperty.title }}
+        </div>
+      </template>
+      <el-input
+        :disabled="designProperty.state === 'disabled'"
+        :readonly="designProperty.state === 'readonly'"
+        :size="designProperty.size"
+        :clearable="designProperty.clearable"
+        :placeholder="designProperty.placeholder"
+        v-model="dynamicModelMethod"
+        :rows="designProperty.rows ? designProperty.rows : 2"
+        :maxlength="designProperty.maxLength"
+        :show-word-limit="designProperty.showInputNum"
+        type="textarea"
+      />
+    </el-form-item>
+  </div>
+</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 = props.configure.runtime ? props.configure.runtime : {}
+const designProperty: any = runtimeInfo.props ? runtimeInfo.props : {}
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+const headerStyle = runtimeInfo.headerStyle
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+      <el-transfer v-model="configure.fieldName" :data="configure.options" />
+  </el-form-item>
+</template>
+<script lang='ts' setup>
+    import {ref} from 'vue'
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = '';
+    }
+
+    const generateData = () => {
+        const data: Option[] = []
+        for (let i = 1; i <= 15; i++) {
+            data.push({
+            key: i,
+            label: `Option ${i}`,
+            disabled: i % 4 === 0,
+            })
+        }
+        return data
+    }
+    if(props.configure.options==undefined){
+        props.configure.options = ref<Option[]>(generateData());
+    }
+</script>
+<style scoped>
+  
+</style>

package/components/runtime/views/assemblys/object-render.vue

@@ -0,0 +1,176 @@
+<template>
+  <component
+    :is="dynamicComponent"
+    v-show="showFlag"
+    v-permission="permissionCodes"
+    :ref="setComponentRef"
+    :style="runtimeStyle"
+    :class="runtimeClass"
+    :configure="configure"
+    :pageContext="pageContext"
+  >
+  </component>
+</template>
+<script lang="ts" setup>
+import { ref, markRaw, onMounted, computed } from 'vue'
+import ErrorRender from './error-render.vue'
+import { getRuntimeComponentByName } from '../../utils/assemblys-config.js'
+import type { PageContext, Component } from '../../../../src/utils/interfaces/page-design-types'
+import { PageDimensions } from '../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef, addComponentRefByCode } from '../../../../src/utils/global-refs'
+import { getPermissionCodes } from '../../../../src/utils/page-init-util'
+import { caculateShowCondition } from '../../../../src/utils/page-helper-util'
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+if (props.configure.style == undefined) {
+  props.configure.style = {}
+}
+
+//获取权限编码
+const permissionCodes = getPermissionCodes(props.configure, props.pageContext)
+
+//显示的标识
+let handleShowFlag = ref(true) //手工点击隐藏或显示的标识
+let showFlag: any = ref(true)
+if (props.configure && props.configure.props && props.configure.props.showConditions) {
+  const showConditions = props.configure.props.showConditions
+  if (showConditions.length > 0) {
+    showFlag = computed(() => {
+      //手动指定为不显示时,直接为不显示
+      if (!handleShowFlag.value) {
+        return false
+      }
+      return caculateShowCondition(props.pageContext, props.configure, showConditions)
+    })
+  }
+}
+
+const dynamicComponent = ref({})
+dynamicComponent.value = markRaw(getRuntimeComponentByName(props.configure.name))
+const showCopy = ref(true)
+if (dynamicComponent.value == null) {
+  dynamicComponent.value = ErrorRender
+  showCopy.value = false
+}
+//对象引用,通用的外部样式
+const thisRef: any = ref(null)
+const runtimeStyle: any = ref({})
+const runtimeClass: any = ref('')
+
+//设计时保存的通用样式
+const commonRuntime =
+  props.configure.runtime && props.configure.runtime.common ? props.configure.runtime.common : {}
+
+//通用的class
+if (commonRuntime.class) {
+  runtimeClass.value = commonRuntime.class
+}
+if (commonRuntime.style) {
+  Object.assign(runtimeStyle.value, commonRuntime.style)
+  //获取尺寸的宽度和高度信息
+  const pageDimensions =
+    props.pageContext && props.pageContext.dimensions
+      ? props.pageContext.dimensions
+      : PageDimensions.PC
+  const sizeStyle = commonRuntime.style[pageDimensions + '_style']
+  if (sizeStyle) {
+    Object.assign(runtimeStyle.value, sizeStyle)
+  }
+  const sizeClass = commonRuntime.style[pageDimensions + '_class']
+  if (sizeClass) {
+    runtimeClass.value += ' ' + sizeClass
+  }
+}
+
+/**
+ * 添加组件的引用
+ * @param el
+ */
+function setComponentRef(el: any) {
+  thisRef.value = el
+  //绑定默认的show和hide方法
+  //TODO:触发show和hide事件
+  if (el && !el.show) {
+    el.show = function () {
+      handleShowFlag.value = true
+    }
+  }
+  if (el && !el.hide) {
+    el.hide = function () {
+      handleShowFlag.value = false
+    }
+  }
+
+  //添加到全局变量
+  if (props.configure.uuid) {
+    addComponentRef(props.pageContext, props.configure.uuid, thisRef)
+  }
+  //添加code的引用
+  if (props.configure.code) {
+    addComponentRefByCode(props.pageContext, props.configure.code, thisRef)
+  } else if (props.configure.props && props.configure.props.base) {
+    const propsBase = props.configure.props.base
+    if (propsBase.prop) {
+      //获取字段名,以后缀
+      let propName = propsBase.prop
+      if (propName.startsWith('${')) {
+        propName = propName.substring(2, propName.length - 1)
+      }
+      if (propName.includes('.')) {
+        propName = propName.substring(propName.indexOf('.') + 1)
+      }
+      addComponentRefByCode(props.pageContext, propName, thisRef)
+    }
+  }
+}
+
+//加载后计算位置
+onMounted(() => {
+  if (!thisRef.value || !thisRef.value.parentNode) {
+    return
+  }
+  //计算位置
+  const thisProps = props.configure.props ? props.configure.props : {}
+  const thisStyle = props.configure.style ? props.configure.style : {}
+  //检查是否固定位置
+  const position = thisProps.position
+  //工具栏位置
+  if (position == 'top' || position == 'bottom') {
+    //找展示容器的位置x
+    const contentObj = [thisRef.value.parentNode]
+    if (contentObj && contentObj.length > 0) {
+      const contentRec = contentObj[0].getBoundingClientRect()
+      if (position == 'top') {
+        runtimeStyle.value['top'] = contentRec.top + 'px'
+      }
+      if (position == 'bottom') {
+        runtimeStyle.value['bottom'] = '10px'
+      }
+    }
+    //宽
+    const thisRec = thisRef.value.getBoundingClientRect()
+    runtimeStyle.value['width'] = thisRec.width + 'px'
+  } else if (thisStyle.position) {
+    //按定位设置
+    runtimeStyle.value['position'] = thisStyle.position
+    if (runtimeStyle.value.position != 'relative') {
+      //其余需要默认当前的宽度
+      if (!runtimeStyle.value['width']) {
+        const thisRec = thisRef.value.getBoundingClientRect()
+        runtimeStyle.value['width'] = thisRec.width + 'px'
+      }
+      if (thisStyle.left) {
+        runtimeStyle.value['left'] = thisStyle.left + 'px'
+      }
+      if (thisStyle.top) {
+        runtimeStyle.value['top'] = thisStyle.top + 'px'
+      }
+    }
+  }
+})
+</script>