super-page-runtime 1.0.14 → 1.0.15

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

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

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

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

@@ -1,241 +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 '../../../../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

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

@@ -1,58 +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 '../../../../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>