super-page-runtime 1.0.14 → 1.0.16

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

@@ -0,0 +1,155 @@
+<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/{src/components → components}/runtime/views/assemblys/form/input-text/inputtext-runtime.vue

@@ -87,10 +87,13 @@
 <script lang="ts" setup>
 import { SuperIcon } from 'agilebuilder-ui'
 import { computed, onMounted, 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 { handleEvent } from '../../../../utils/events/event-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'
+import { handleEvent } from '../../../../../../src/utils/events/event-util'
 interface MyProps {
   pageContext: PageContext
   configure: Component

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

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

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

@@ -0,0 +1,70 @@
+<template>
+  <el-form-item
+    :class="runtimeClass"
+    :label-width="designProperty.labelWidth"
+    :style="runtimeStyle"
+  >
+    <template #label>
+      <div v-if="designProperty.tittleShow" :style="{ ...headerStyle }">
+        {{ designProperty.title }}
+      </div>
+    </template>
+    <el-tooltip :disabled="!tooltipValue" :content="tooltipValue">
+      <el-link
+        :disabled="designProperty.state === 'disabled'"
+        :type="designProperty.type"
+        :underline="designProperty.underline"
+        @click="openLink(configure, pageContext)"
+      >
+        {{ dynamicValue }}
+      </el-link>
+    </el-tooltip>
+  </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, openLink } 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
+})
+//tooltip
+let tooltipVariable = designProperty.tooltip
+const tooltipValue = computed(() => {
+  const resultValue = formatVariableValue(props.pageContext, tooltipVariable)
+  return resultValue == undefined || resultValue == null ? '' : resultValue
+})
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :class="runtimeClass" :style="runtimeStyle">
+    <div style="width: 100%; height: 100%">&nbsp;</div>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//定义自身详细参数
+//运行时信息
+const runtimeInfo: any = props.configure.runtime ? props.configure.runtime : {}
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+</script>

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

@@ -28,14 +28,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/rich-text/richtext-runtime.vue

@@ -0,0 +1,169 @@
+<template>
+  <!--无标题时不用form-item-->
+  <el-form-item
+    v-if="designProperty.tittleShow"
+    :required="designProperty.required"
+    :class="runtimeClass"
+    :label-width="designProperty.labelWidth"
+    :style="runtimeStyle"
+  >
+    <template #label>
+      <div v-if="designProperty.tittleShow" :style="{ ...headerStyle }">
+        {{ designProperty.title }}
+      </div>
+    </template>
+    <div style="width: 100%; height: 100%">
+      <div ref="quillEditorRef" style="width: 100%">{{ initValue }}</div>
+      <!-- 使用自定义图片上传 -->
+      <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
+    </div>
+  </el-form-item>
+  <div v-else style="width: 100%; height: 100%" class="amb-widget-richtext-single">
+    <div ref="quillEditorRef" style="width: 100%">{{ initValue }}</div>
+    <!-- 使用自定义图片上传 -->
+    <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { getFormModelFields } from '../../../../../../src/utils/page-init-util'
+import { formatVariableValue, setVariableValue } from '../../../../../../src/utils/page-helper-util'
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css' // 引入样式文件
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+const entity: any = props.pageContext.entity ? props.pageContext.entity : {}
+//初始化字段及默认值
+const dynamicFields: string[] = 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.value
+const initValue = formatVariableValue(props.pageContext, contentVariable)
+
+//富文本引用
+const quillEditorRef = ref(null)
+const quill: any = ref(null)
+const fileBtn: any = ref(null)
+//初始化富文本控件
+const fontSize = [
+  '12px',
+  '13px',
+  '14px',
+  '15px',
+  '16px',
+  '18px',
+  '20px',
+  '24px',
+  '28px',
+  '32px',
+  '36px'
+]
+const option = ref({
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+      ['blockquote', 'code-block'], // 引用
+      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+      [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+      [{ indent: '-1' }, { indent: '+1' }], // 缩进
+      [{ direction: 'rtl' }], // 文本方向
+      [{ size: fontSize }], // 字体大小
+      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+      [{ font: [] }], // 字体种类
+      [{ align: [] }], // 对齐方式
+      ['clean'], // 清除文本格式
+      ['link', 'image'] // 链接、图片、视频
+    ]
+  },
+  theme: 'snow',
+  placeholder: designProperty.placeholder,
+  readOnly: designProperty.state == 'readonly'
+})
+
+/**
+ * 计算并更新高度
+ */
+function updateEditorHeight() {
+  //计算高度
+  if (quill && quill.value) {
+    if (quill.value.container) {
+      //获取相对高度
+      const parentNode = quill.value.container.parentNode
+      const parentRect = parentNode.getBoundingClientRect()
+
+      const thisRect = quill.value.container.getBoundingClientRect()
+      //计算高度
+      let newHeight = parentRect.height - (thisRect.top - parentRect.top)
+      if (newHeight < 100) {
+        newHeight = 100
+      }
+      quill.value.container.style.height = newHeight + 'px'
+    }
+  }
+}
+
+//上传图片
+const imgHandler = (state) => {
+  if (fileBtn.value && state) {
+    fileBtn.value.click()
+  }
+}
+//上传
+const handleUpload = (e) => {
+  const files = Array.prototype.slice.call(e.target.files)
+  if (!files) {
+    return
+  }
+  const formdata = new FormData()
+  formdata.append('file', files[0])
+  alert('TODO:上传图片')
+  //此处使用服务端提供上传接口
+  /**backsite.uploadFile(formdata) 
+			.then(res => {
+			if (res.data.url) {
+				const quill = toRaw(myQuillEditor.value).getQuill()
+				const length = quill.getSelection().index
+				quill.insertEmbed(length, 'image', res.data.url)
+				quill.setSelection(length + 1)
+			}
+			})*/
+}
+//初始化编辑器
+onMounted(() => {
+  quill.value = new Quill(quillEditorRef.value, option.value)
+  //添加上传文件
+  quill.value.getModule('toolbar').addHandler('image', imgHandler)
+  //绑定事件
+  quill.value.on('text-change', function (delta, oldDelta, source) {
+    //1秒后设置到缓存中
+    if (window.updateQuillTimeout) {
+      clearTimeout(window.updateQuillTimeout)
+    }
+    window.updateQuillTimeout = setTimeout(function () {
+      setVariableValue(entity, dynamicFields, quill.value.root.innerHTML)
+      console.log('new entity', entity)
+    }, 1000)
+  })
+  //计算高度
+  updateEditorHeight()
+})
+</script>

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

@@ -36,7 +36,7 @@
         <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_ }}	
+            {{ item._description_ }}
           </span>
         </template>
       </el-option>
@@ -45,14 +45,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 {