super-page-runtime 1.0.13 → 1.0.14

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

@@ -0,0 +1,197 @@
+<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 '../../../../utils/interfaces/page-design-types'
+import { queryOptionDatasources, autoSetAfterSelect } from '../../../../utils/page-helper-util'
+import { getFormModelFields } from '../../../../utils/page-init-util'
+import {
+  getVariableValue,
+  setVariableValue,
+  getOptionDatasFromPage
+} from '../../../../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/src/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/src/components/runtime/views/assemblys/form/rich-text/richtext-runtime.vue

@@ -0,0 +1,153 @@
+<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 '../../../../utils/interfaces/page-design-types';
+	import { getFormModelFields} from '../../../../utils/page-init-util';
+	import {formatVariableValue, setVariableValue} from '../../../../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/runtime/views/assemblys/form/select/select-runtime.vue

@@ -0,0 +1,241 @@
+<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 '../../../../utils/interfaces/page-design-types'
+import { queryOptionDatasources, autoSetAfterSelect } from '../../../../utils/page-helper-util'
+import { getFormModelFields } from '../../../../utils/page-init-util'
+import {
+  getVariableValue,
+  setVariableValue,
+  getOptionDatasFromPage
+} from '../../../../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/src/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/src/components/runtime/views/assemblys/form/switch/switch-runtime.vue

@@ -0,0 +1,58 @@
+<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 '../../../../utils/interfaces/page-design-types';
+	import { getFormModelFields} from '../../../../utils/page-init-util';
+	import { getVariableValue,setVariableValue} from '../../../../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>