super-page-runtime 1.0.15 → 1.0.16

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

@@ -0,0 +1,198 @@
+<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-checkbox-group
+      :disabled="designProperty.state === 'disabled'"
+      :size="designProperty.size"
+      @change="designProperty.changeMethod"
+      v-model="dynamicModelMethod"
+    >
+      <el-checkbox
+        v-for="item in listOptions"
+        :key="item.value"
+        :value="item.value"
+        :label="item.label"
+      >
+      </el-checkbox>
+    </el-checkbox-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 == 'dynamicData' || 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 > -1) {
+  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 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 : []
+}
+
+/**
+ * 暴露更新选项组内容的方法
+ */
+defineExpose({
+  updateOptions
+})
+</script>

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

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

package/components/runtime/views/assemblys/form/common/analytic-rule.vue

@@ -0,0 +1,148 @@
+<template>
+	<el-button type="primary" @click="dialogVisible = true">添加</el-button>
+	<el-dialog
+			v-model="dialogVisible"
+			title="显示判断条件"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="ElIconCirclePlusOutline"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+			<el-button
+					:icon="ElIconDelete"
+					plain
+					type="primary"
+					@click="remove"
+			>
+				删除
+			</el-button>
+		</el-row>
+		<el-table border highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
+			<el-table-column label="序号" type="index" />
+			<el-table-column label="规则组" >
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.leftBracket"
+							clearable
+							size="default"
+					>
+						<el-option label="" value=""/>
+						<el-option label="(" value="("/>
+						<el-option label="((" value="(("/>
+						<el-option label="(((" value="((("/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="name" label="设置" width="180">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.propName"
+							clearable
+							size="default"
+					>
+						<el-option label="名字1" value="1"/>
+						<el-option label="名字2" value="2"/>
+						<el-option label="名字3" value="3"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="操作符">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.operator"
+							clearable
+							size="default"
+					>
+						<el-option label="操作符1" value="1"/>
+						<el-option label="操作符1" value="2"/>
+						<el-option label="操作符1" value="3"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="值(*)">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.propValueType"
+							clearable
+							size="default"
+					>
+						<el-option label="值1" value="1"/>
+						<el-option label="值2" value="2"/>
+						<el-option label="值3" value="3"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label=")">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.rightBracket"
+							clearable
+							size="default"
+					>
+						<el-option label="" value=""/>
+						<el-option label=")" value=")"/>
+						<el-option label="))" value="))"/>
+						<el-option label=")))" value=")))"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="并且/或者">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.joinSign"
+							clearable
+							size="default"
+					>
+						<el-option
+								label="或者"
+								value="or"
+						/>
+						<el-option label="并且" value="and"/>
+					</el-select>
+				</template>
+			</el-table-column>
+		</el-table>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="dialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="dialogVisible = false">
+					确定
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+const props = defineProps({
+	list:Object
+});
+const dialogVisible = ref(false)
+const currentRow = ref({})
+function remove(){
+	props.list = props.list.filter(item => item !== currentRow.value)
+}
+function handleCurrentChange(val){
+	currentRow.value = val
+}
+function add(){
+	props.list.push({
+		leftBracket:'',
+		propName:'',
+		operator:'',
+		propValueType:'',
+		rightBracket:'',
+		joinSign:''
+	})
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-row v-for="(event,index) in componentEvents" :key='index' class='event-item'>
+      <el-col  style="overflow: hidden;" :span="20">
+        &nbsp;&nbsp;{{ event.label }}
+        <template v-if="event.type">
+        ({{ event.type }})
+        </template>
+      </el-col>
+      <el-col :span="4" style="text-align:center;font-weight:bold;">
+        <el-icon  style="cursor:pointer;color:#5893EF;margin-right:6px;"><Edit /></el-icon>
+        <el-icon  style="cursor:pointer;" ><Search /></el-icon>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue';
+import { Edit, Search } from '@element-plus/icons';
+
+const props = defineProps({
+	configure: {
+			type: Object,
+			default: () => ({  }) // 设置默认值
+	},
+	events: {
+			type: Array<String>,
+			default: () => ([]) // 设置默认值
+	}
+});
+
+const allEvents = [
+	{ type: 'click', label: "点击" },
+	{ type: 'change', label: "更改" },
+	{ type: 'blur', label: "失去焦点" },
+	{ type: 'focus', label: "获取焦点" },
+	{ type: 'show', label: "显示" },
+	{ type: 'hidden', label: "隐藏" },
+	{ type: 'upload', label: "上传" },
+	{ type: 'select', label: "选择" },
+	{ type: 'remove', label: "删除" },
+	{ type: 'formatDatas', label: "格式化" },
+	{ type: 'beforeRequest', label: "默认查询" },
+	{ type: 'load', label: "加载完成" },
+	{ type: 'select-all', label: "全选" },
+	{ type: 'cell-click', label: "单元格点击" },
+	{ type: 'cell-dblclick', label: "单元格双击" },
+	{ type: 'row-click', label: "行点击" },
+	{ type: 'row-dblclick', label: "行双击" },
+	{ type: 'header-click', label: "表头点击" },
+	{ type: 'resize', label: "窗口变化" },
+	{ type: 'node-click', label: "节点点击" },
+	{ type: 'check-change', label: "复选框点击" },
+	{ type: 'check', label: "选中节点" },
+	{ type: 'add-node', label: "右击添加节点" },
+	{ type: 'update-node', label: "右击修改节点" },
+	{ type: 'delete-node', label: "右击删除节点" },
+	{ type: 'menuClick', label: "菜单点击" },
+	{ type: 'menuShow', label: "菜单显示" },
+	{ type: 'menuHidden', label: "菜单隐藏" },
+	{ type: 'input', label: "输入" },
+	{ type: 'clear', label: "清空" },
+]
+
+function getEvent(event:String)  {
+  return allEvents.find(e => e.type === event);
+}
+const componentEvents = ref<any[]>([]);
+for (let i = 0; i < props.events.length; i++) {
+	componentEvents.value.push(getEvent(props.events[i]))
+}
+
+</script>
+<style scoped>
+.event-item {
+	font-size:12px;
+	border-bottom:2px dashed #F5F6F8;
+	padding-top:5px;
+	padding-bottom:5px;
+}
+</style>
+

package/components/runtime/views/assemblys/form/common/attr-header.vue

@@ -0,0 +1,54 @@
+<template>
+		<div class="amb-design-attr-header">
+				<div class="amb-design-attr-header-type">
+						<label :class="{ selected: clickType === 'base' }" @click="changeType('base')">属性</label>
+						<label :class="{ selected: clickType === 'style' }" @click="changeType('style')">样式</label>
+						<label :class="{ selected: clickType === 'event' }" @click="changeType('event')">事件</label>
+				</div>
+		</div>
+</template>
+<script lang='ts' setup>
+import { ref, defineProps } from 'vue';
+const props = defineProps({
+		modelValue: {
+			type: String,
+			default: 'base' // 设置默认值
+		}
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const clickType = ref(props.modelValue);
+
+function changeType(type: string) {
+  clickType.value = type;
+  emit('update:modelValue', type);
+};
+</script>
+<style scoped>
+.amb-design-attr-header {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0px;
+  z-index: 1;
+  text-align: center;
+  padding: 20px 0px 10px 0px;
+}
+.amb-design-attr-header-type {
+  border-radius: 100px 100px 100px 100px;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+  padding: 10px;
+  padding-bottom: 12px;
+}
+.amb-design-attr-header-type > label {
+  padding: 4px 14px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.amb-design-attr-header-type > label.selected {
+  border-radius: 100px 100px 100px 100px;
+  background: #5893ef;
+  color: #ffffff;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+	<CommonStyleFontHead v-if="blankOption.showTittleFont" :headerTextAlign="false" :configure="configure"/>
+	<slot name="font" :row="configure" />
+	<CommonStyleBackground v-if="blankOption.showBackground" :configure="configure"/>
+	<CommonStylePosition v-if="blankOption.showPosition" :configure="configure"/>
+	<CommonStyleMargin v-if="blankOption.showMargin" :configure="configure"/>
+	<CommonStylePadding v-if="blankOption.showPadding" :configure="configure"/>
+	<CommonStyleBorder v-if="blankOption.showBorder" :configure="configure"/>
+	<CommonStyleShadow v-if="blankOption.showShadow" :configure="configure"/>
+	<CommonStyleCursor v-if="blankOption.showCursor" :configure="configure" />
+	<CommonStyleCustom v-if="blankOption.showCustom" :configure="configure" />
+</template>
+<script lang='ts' setup>
+import { defineProps } from 'vue';
+import CommonStyleFontHead from '../../common/common-style-font-head.vue';
+import CommonStyleBackground from '../../common/common-style-background.vue';
+import CommonStylePosition from '../../common/common-style-position.vue';
+import CommonStyleMargin from '../../common/common-style-margin.vue';
+import CommonStylePadding from '../../common/common-style-padding.vue';
+import CommonStyleBorder from '../../common/common-style-border.vue';
+import CommonStyleShadow from '../../common/common-style-shadow.vue';
+import CommonStyleCursor from '../../common/common-attr-cursor.vue';
+import CommonStyleCustom from '../../common/common-style-custom.vue';
+const props = defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ }) // 设置默认值
+	},
+	blankOption:{
+		type:Object,
+		default:{
+			showTittleFont:true, // 是否显示标题字体
+			showBackground:true, // 是否显示背景
+			showPosition:true, // 是否显示定位
+			showMargin:true, // 是否显示外边距
+			showPadding:true, // 是否显示内边距
+			showBorder:true, // 是否显示边框
+			showShadow:true, // 是否显示阴影
+			showCursor:true, // 是否显示鼠标手势
+			showCustom:true, // 是否显示自定义
+		}
+	}
+});
+</script>

package/components/runtime/views/assemblys/form/common/bar-code-rule.vue

@@ -0,0 +1,104 @@
+<template>
+	<el-dialog
+			model-value
+			title="解析规则"
+			width="50%"
+			:before-close="() =>{$emit('close')}"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="Plus"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+		</el-row>
+		<el-table :data="ruleList" style="width: 100%">
+			<el-table-column type="selection" width="55" />
+			<el-table-column label="序号" type="index" />
+			<el-table-column prop="name" label="规则组">
+				<template #default="scope">
+					<el-select v-model="scope.row.rules">
+						<el-option label="规则组1" value="pageVariable" />
+						<el-option label="规则组2" value="modelData" />
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="返回值">
+				<template #default="scope">
+					<el-select v-model="scope.row.returnedValue">
+						<el-option label="返回值1" value="pageVariable" />
+						<el-option label="返回值2" value="modelData" />
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="设置到">
+				<template #default="scope">
+					<el-select v-if="!scope.row.valueTepe" v-model="scope.row.valueTepe">
+						<el-option label="页面变量" value="pageVariable" />
+						<el-option label="模型数据" value="modelData" />
+					</el-select>
+					<el-select v-if="scope.row.valueTepe === 'pageVariable'" clearable v-model="scope.row.pageVariable">
+						<el-option label="页面变量1" value="pageVariable" />
+						<el-option label="页面变量2" value="modelData" />
+					</el-select>
+					<el-select v-if="scope.row.valueTepe === 'modelData'" clearable v-model="scope.row.modelData">
+						<el-option label="模型数据1" value="pageVariable" />
+						<el-option label="模型数据2" value="modelData" />
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="address" label="操作">
+				<template #default="scope">
+					<el-button
+							:icon="Delete"
+							plain
+							type="primary"
+							@click="remove(scope.row)"
+					>
+						删除
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="$emit('close')">取消</el-button>
+				<el-button type="primary" @click="$emit('close')">
+					确定
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+
+</template>
+
+<script setup lang="ts">
+import { Plus,Delete } from '@element-plus/icons-vue'
+import {ref,watch} from "vue";
+
+const props = defineProps({
+	ruleList:{
+		type:Array,
+		default:[]
+	}
+})
+
+const emit = defineEmits(['close','remove'])
+
+const dialogVisible = ref(false)
+
+function remove(row:object){
+	emit('remove',row)
+}
+
+function add(){
+	props.ruleList.push({ })
+}
+</script>
+
+<style scoped>
+
+</style>