super-page-runtime 1.0.16 → 2.0.1

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

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

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

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

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

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

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

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

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