super-page-runtime 1.0.15 → 1.0.16

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/components/runtime/views/assemblys/form/radio/radio-runtime.vue

@@ -0,0 +1,203 @@
+<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-radio-group
+      :disabled="designProperty.state === 'disabled'"
+      :size="designProperty.size"
+      @change="designProperty.changeMethod"
+      v-model="dynamicModelMethod"
+    >
+      <el-radio
+        v-for="item in listOptions"
+        :key="item.value"
+        :value="item.value"
+        :label="item.label"
+      >
+      </el-radio>
+    </el-radio-group>
+  </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 dataOrigin =
+  props.configure.props && props.configure.props.dataOrigin ? props.configure.props.dataOrigin : {}
+const valueType = dataOrigin.optionValueSetType
+//检查是否有自动设置值
+let autoSets: any = []
+//检查自动设置
+if (valueType == 'dynamicData' || valueType == 'dataTable' || valueType == 'service') {
+  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
+
+//查询的参数
+const optionconfigInfo = designProperty.optionconfigInfo ? designProperty.optionconfigInfo : {}
+/**
+ * 监控数据变化时
+ */
+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)
+    })
+  }, 200)
+}
+
+//数据选择变化后自动设置值
+function optionChange(value: any) {
+  let selItems: any = null
+  if (listOptions.value && value != undefined && value != null) {
+    selItems = listOptions.value.filter((item: any) => {
+      return value === item.value
+    })
+  }
+  autoSetAfterSelect(props.configure, props.pageContext, autoSets, selItems)
+}
+
+/**
+ * 更新选项组
+ */
+function updateOptions(newOptions: any) {
+  listOptions.value = newOptions ? newOptions : []
+}
+
+/**
+ * 暴露更新选项组内容的方法
+ */
+defineExpose({
+  updateOptions
+})
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <el-form-item :label="configure.title" :label-position="right">
+      <el-rate 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 = 'Rate';
+    }
+</script>
+<style scoped>
+  
+</style>

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>