super-page-runtime 1.0.16 → 2.0.1

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

@@ -1,68 +0,0 @@
-<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-input v-model="configure.props.base.defaultValue" placeholder="请输入" />
-					</el-form-item>
-					<el-form-item label="文本格式化" class="amb-design-attr-item">
-						<el-input v-model="configure.props.base.placeholder" type="textarea" placeholder="请输入" />
-					</el-form-item>
-					<el-form-item label="尺寸" class="amb-design-attr-item">
-						<el-radio-group v-model="configure.props.base.size" class="ml-4">
-							<el-radio value="large">大</el-radio>
-							<el-radio value="default">中</el-radio>
-							<el-radio value="small">小</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.state" class="ml-4">
-							<el-radio value="default">普通</el-radio>
-							<el-radio value="hidden">隐藏</el-radio>
-						</el-radio-group>
-					</el-form-item>
-				</div>
-			</el-collapse-item>
-			<PreSuffix :preSuffix="configure.props.preSuffix" />
-			<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 PreSuffix from '../common/pre-suffix.vue'
-
-defineProps({
-	configure: Object,
-	default: () => ({props: {}})
-});
-const openCollapseItems = ref("")
-
-</script>

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

@@ -1,14 +0,0 @@
-<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', 'blur', 'focus', 'show', 'hidden']
-</script>

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

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

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

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

@@ -1,155 +0,0 @@
-<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-show' }}
-      </div>
-    </template>
-    <el-input
-      :disabled="designProperty.state === 'disabled' ? true : false"
-      :readonly="designProperty.state === 'readonly' ? true : false"
-      :size="designProperty.size"
-      :clearable="designProperty.clearable"
-      :placeholder="designProperty.placeholder"
-      v-model="designProperty.defaultValue"
-    >
-      <template
-        v-if="designProperty && (designProperty.innerPreIcon || designProperty.innerPreText)"
-        #prefix
-      >
-        {{ designProperty.innerPreText }}
-      </template>
-      <template
-        v-show="
-          designProperty.enable ||
-          (designProperty && (designProperty.innerSufIcon || designProperty.innerSufText))
-        "
-        #suffix
-      >
-        {{ designProperty.innerSufText }}
-        <el-icon v-show="designProperty.enable"><FullScreen /></el-icon>
-      </template>
-      <template
-        v-if="designProperty && (designProperty.outerPreIcon || designProperty.outerPreText)"
-        #prepend
-      >
-        <!--<el-icon v-if="designProperty.outerPreIcon">-->
-        <!--  <component :is="designProperty.outerPreIcon" />-->
-        <!--</el-icon>-->
-        <span v-if="designProperty.outerPreText">{{ designProperty.outerPreText }}</span>
-      </template>
-      <template
-        v-if="designProperty && (designProperty.outerSufIcon || designProperty.outerSufText)"
-        #append
-      >
-        {{ designProperty.outerSufText }}
-      </template>
-    </el-input>
-  </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['scan']['enable']) {
-    tempProps['enable'] = true
-  } else {
-    tempProps['enable'] = false
-  }
-
-  // 前后缀/外部
-  if (defineProps['preSuffix']['position'] === 'outer') {
-    // 前缀图标
-    if (defineProps['preSuffix']['preIcon']) {
-      tempProps['outerPreIcon'] = defineProps['preSuffix']['preIcon']
-    }
-
-    // 前缀文本
-    if (defineProps['preSuffix']['preText']) {
-      tempProps['outerPreText'] = defineProps['preSuffix']['preText']
-    }
-
-    // 后缀图标
-    if (defineProps['preSuffix']['sufIcon']) {
-      tempProps['outerSufIcon'] = defineProps['preSuffix']['sufIcon']
-    }
-
-    // 后缀文本
-    if (defineProps['preSuffix']['sufText']) {
-      tempProps['outerSufText'] = defineProps['preSuffix']['sufText']
-    }
-  }
-
-  // 前后缀/内部
-  if (defineProps['preSuffix']['position'] === 'inner') {
-    // 前缀图标
-    if (defineProps['preSuffix']['preIcon']) {
-      tempProps['innerPreIcon'] = defineProps['preSuffix']['preIcon']
-    }
-
-    // 前缀文本
-    if (defineProps['preSuffix']['preText']) {
-      tempProps['innerPreText'] = defineProps['preSuffix']['preText']
-    }
-
-    // 后缀图标
-    if (defineProps['preSuffix']['sufIcon']) {
-      tempProps['innerSufIcon'] = defineProps['preSuffix']['sufIcon']
-    }
-
-    // 后缀文本
-    if (defineProps['preSuffix']['sufText']) {
-      tempProps['innerSufText'] = defineProps['preSuffix']['sufText']
-    }
-  }
-
-  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-text/inputtext-runtime.vue

@@ -1,142 +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-input
-      :disabled="designProperty.state === 'disabled'"
-      :readonly="designProperty.state === 'readonly'"
-      :size="designProperty.size"
-      :clearable="designProperty.clearable"
-      :placeholder="designProperty.placeholder"
-      :maxlength="designProperty.maxLength"
-      :show-word-limit="designProperty.showInputNum"
-      v-model="dynamicModelMethod"
-      @input="handleEvent($event, pageContext, configure, 'input')"
-      @change="handleEvent($event, pageContext, configure, 'change')"
-      @blur="handleEvent($event, pageContext, configure, 'blur')"
-      @focus="handleEvent($event, pageContext, configure, 'focus')"
-      @click="handleEvent($event, pageContext, configure, 'click')"
-    >
-      <template
-        v-if="
-          designProperty.iconPosition != 'outer' &&
-          ((designProperty.preIconType && designProperty.preIconValue) || designProperty.preText)
-        "
-        #prefix
-      >
-        <SuperIcon
-          v-if="designProperty.preIconType && designProperty.preIconValue"
-          :iconType="designProperty.preIconType"
-          :iconValue="designProperty.preIconValue"
-        ></SuperIcon>
-        {{ designProperty.preText }}
-      </template>
-      <template
-        v-if="
-          designProperty.iconPosition == 'outer' &&
-          ((designProperty.preIconType && designProperty.preIconValue) || designProperty.preText)
-        "
-        #prepend
-      >
-        <SuperIcon
-          v-if="designProperty.preIconType && designProperty.preIconValue"
-          :iconType="designProperty.preIconType"
-          :iconValue="designProperty.preIconValue"
-        ></SuperIcon>
-        {{ designProperty.preText }}
-      </template>
-      <template
-        v-if="
-          designProperty.iconPosition != 'outer' &&
-          ((designProperty.sufIconType && designProperty.sufIconValue) || designProperty.sufText)
-        "
-        #suffix
-      >
-        <SuperIcon
-          v-if="designProperty.sufIconType && designProperty.sufIconValue"
-          :iconType="designProperty.sufIconType"
-          :iconValue="designProperty.sufIconValue"
-        ></SuperIcon>
-        {{ designProperty.sufText }}
-      </template>
-      <template
-        v-if="
-          designProperty.iconPosition == 'outer' &&
-          ((designProperty.sufIconType && designProperty.sufIconValue) || designProperty.sufText)
-        "
-        #append
-      >
-        <SuperIcon
-          v-if="designProperty.sufIconType && designProperty.sufIconValue"
-          :iconType="designProperty.sufIconType"
-          :iconValue="designProperty.sufIconValue"
-        ></SuperIcon>
-        {{ designProperty.sufText }}
-      </template>
-    </el-input>
-  </el-form-item>
-</template>
-<script lang="ts" setup>
-import { SuperIcon } from 'agilebuilder-ui'
-import { computed, onMounted, 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'
-import { handleEvent } from '../../../../../../src/utils/events/event-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 = runtimeInfo.props ? runtimeInfo.props : {}
-const runtimeStyle = runtimeInfo.style
-const runtimeClass = runtimeInfo.class
-const headerStyle = runtimeInfo.headerStyle
-
-/**
- * 获取值
- */
-function getValue() {
-  return getVariableValue(entity, dynamicFields)
-}
-
-/**
- * 设置值
- */
-function setValue(value: any) {
-  return setVariableValue(entity, dynamicFields, value)
-}
-
-//暴露方法
-defineExpose({
-  getValue,
-  setValue
-})
-</script>

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

@@ -1,143 +0,0 @@
-<template>
-  <el-form-item
-    v-if="designProperty.tittleShow"
-    :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>
-    <div style="display: flex; width: 100%; justify-content: space-between">
-      <span style="overflow: hidden; white-space: nowrap">
-        <span
-          v-if="designProperty.preIconValue || designProperty.preText"
-          :class="{
-            'el-input__suffix': designProperty.iconPosition != 'outer',
-            'el-input-group__append': designProperty.iconPosition == 'outer'
-          }"
-          :style="appendStyle"
-        >
-          <SuperIcon
-            v-if="designProperty.preIconType && designProperty.preIconValue"
-            :iconType="designProperty.preIconType"
-            :iconValue="designProperty.preIconValue"
-          ></SuperIcon>
-          {{ designProperty.preText }}
-        </span>
-        &nbsp;{{ dynamicValue }}
-      </span>
-      <span
-        v-if="designProperty.sufIconValue || designProperty.sufText"
-        :class="{
-          'el-input__suffix': designProperty.iconPosition != 'outer',
-          'el-input-group__append': designProperty.iconPosition == 'outer'
-        }"
-      >
-        <SuperIcon
-          style=""
-          v-if="designProperty.sufIconType && designProperty.sufIconValue"
-          :iconType="designProperty.sufIconType"
-          :iconValue="designProperty.sufIconValue"
-        ></SuperIcon>
-        <span>&nbsp;{{ designProperty.sufText }}</span>
-      </span>
-    </div>
-  </el-form-item>
-  <span v-else style="display: flex; justify-content: space-between">
-    <span style="overflow: hidden; white-space: nowrap" :title="dynamicValue"
-      >{{ designProperty.prefixIcon }}&nbsp;{{ dynamicValue }}</span
-    >
-    <span v-if="designProperty.suffixTxt" :class="appendClass" :style="appendStyle">{{
-      designProperty.suffixTxt
-    }}</span>
-  </span>
-</template>
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import type {
-  Component,
-  PageContext
-} from '../../../../../../src/utils/interfaces/page-design-types'
-import { getFormModelFields } from '../../../../../../src/utils/page-init-util'
-import {
-  formatVariableValue,
-  queryOptions,
-  formatValueByType
-} from '../../../../../../src/utils/page-helper-util'
-import { SuperIcon } from 'agilebuilder-ui'
-
-//定义的属性对象
-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 appendClass = runtimeInfo.appendClass
-const appendStyle = runtimeInfo.appendStyle
-const designProperty: any = runtimeInfo.props ? runtimeInfo.props : {}
-
-//查询数据源
-//选项组数据
-const listOptions: any = designProperty.options ? designProperty.options : []
-//检查是否需要绑定远程查询对象
-const dataOrigin =
-  props.configure.props && props.configure.props.dataOrigin ? props.configure.props.dataOrigin : {}
-const valueType = dataOrigin.optionValueSetType
-//查询数据
-if (valueType == 'dynamicData' || valueType == 'dynamicData' || valueType == 'service') {
-  queryOptions(props.configure, props.pageContext, '')
-    .then((results) => {
-      listOptions.value = results
-    })
-    .catch((error) => {
-      console.log('lable组件查询数据源失败!', error)
-    })
-}
-
-//定义内容
-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 formatType = designProperty.formatType
-//显示内容
-const dynamicValue = computed(() => {
-  let resultValue: any = formatVariableValue(props.pageContext, contentVariable)
-  console.log('formatType', formatType)
-  if (formatType) {
-    if (designProperty.hasOptions) {
-      let selItems: any = null
-      if (listOptions.value) {
-        selItems = listOptions.value.filter((item: any) => item.value == resultValue)
-      }
-      if (selItems && selItems.length > 0) {
-        resultValue = selItems[0].label
-      }
-    } else {
-      //其他格式化
-      resultValue = formatValueByType(resultValue, formatType, designProperty)
-    }
-  }
-  return resultValue == undefined || resultValue == null ? '' : resultValue
-})
-</script>