super-page-runtime 1.0.12 → 1.0.14

package/src/components/runtime/views/assemblys/workflow/picture-flow/pictureflow-attr.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="amb-design-attr-content">
+		<AttrHeader v-model="currentConfigType"/>
+		<div class="amb-design-attr-list">
+			<AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+			<AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+			<AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+		</div>
+	</div>
+</template>
+<script lang='ts' setup>
+import AttrBase from './pictureflow-attr-base.vue';
+import AttrStyle from './pictureflow-attr-style.vue';
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './pictureflow-attr-event.vue';
+import { ref } from 'vue';
+
+defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ title: 'Text',props: {type: 'input-text'} }) // 设置默认值
+	}
+});
+let currentConfigType = ref("base")
+
+</script>
+<style >
+@import '../../../../../../assets/design-attr.css';
+</style>

package/src/components/runtime/views/assemblys/workflow/picture-flow/pictureflow-design.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="text-align: center">
+	  <img style="width: 100px;height: 100px" src="../../../../../../assets/images/workflow/workflow-imagehistory.png">
+  </div>
+</template>
+<script lang='ts' setup>
+import { ref,confineProps } from 'vue';
+const props = defineProps({
+    configure:Object
+});
+if(props.configure.title==undefined){
+    props.configure.title = 'button';
+}
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/workflow/text-history/texthistory-attr-base.vue

@@ -0,0 +1,60 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<el-collapse-item
+					title="基本"
+					name="base"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item label="组件类型" class="amb-design-attr-item">
+						<el-select v-model="configure.name" placeholder="请选择" >
+							<el-option
+									v-for="item in getFormComponentOptions()"
+									:key="item.name"
+									:label="item.label"
+									:value="item.name"
+							/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="组件名" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.name" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="标题" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.title" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="任务变量" class="amb-design-attr-item">
+						<el-input v-model="configure.props.base.prop" placeholder="请输入" />
+					</el-form-item>
+				</div>
+			</el-collapse-item>
+			<el-collapse-item
+					title="外观"
+					name="appearance"
+					class="amb-design-attr-group-header">
+				<div style="padding:8px 0px 0px 0px;">
+					<el-form-item label="布局" class="amb-design-attr-item">
+						<el-radio-group v-model="configure.props.base.layout" class="ml-4">
+							<el-radio value="default">表格</el-radio>
+							<el-radio value="landscape">水平时间线</el-radio>
+							<el-radio value="lengthways">纵向时间线</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</div>
+			</el-collapse-item>
+			<CommonAttrSize :size="configure.props.size" />
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue';
+import { getFormComponentOptions } from '../../../../utils/assemblys-config.js'
+import CommonAttrSize from '../../common/common-attr-size.vue'
+import Title from '../../form/common/title.vue'
+
+defineProps({
+	configure: Object,
+	default: () => ({props: {}})
+});
+const openCollapseItems = ref("")
+
+</script>

package/src/components/runtime/views/assemblys/workflow/text-history/texthistory-attr-event.vue

@@ -0,0 +1,14 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<AttrEvent :events="events"></AttrEvent>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { ref, computed, defineEmits } from 'vue';
+import AttrEvent from '../../form/common/attr-event.vue'
+import {getFormComponentOptions} from '../../../../utils/assemblys-config.js'
+defineProps({
+	configure:Object
+});
+const events = ['show', 'hidden']
+</script>

package/src/components/runtime/views/assemblys/workflow/text-history/texthistory-attr-style.vue

@@ -0,0 +1,27 @@
+<template>
+	<el-form label-width="80px" size="small">
+		<el-collapse v-model="openCollapseItems" style="margin-top:6px;">
+			<AttrStyle :blankOption="blankOption" :configure="configure"></AttrStyle>
+		</el-collapse>
+	</el-form>
+</template>
+<script lang='ts' setup>
+import { defineProps } from 'vue';
+import AttrStyle from '../../form/common/attr-style.vue'
+defineProps({
+	configure:Object
+});
+
+const blankOption = {
+	showTittleFont:false, // 是否显示标题字体
+	showBackground:false, // 是否显示背景
+	showPosition:true, // 是否显示定位
+	showMargin:true, // 是否显示外边距
+	showPadding:true, // 是否显示内边距
+	showBorder:false, // 是否显示边框
+	showShadow:false, // 是否显示阴影
+	showCursor:false, // 是否显示鼠标手势
+	showCustom:false, // 是否显示自定义
+}
+
+</script>

package/src/components/runtime/views/assemblys/workflow/text-history/texthistory-attr.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="amb-design-attr-content">
+		<AttrHeader v-model="currentConfigType"/>
+		<div class="amb-design-attr-list">
+			<AttrBase v-show="currentConfigType === 'base'" :configure="configure"></AttrBase>
+			<AttrStyle v-show="currentConfigType === 'style'" :configure="configure"></AttrStyle>
+			<AttrEvent v-show="currentConfigType === 'event'" :configure="configure"></AttrEvent>
+		</div>
+	</div>
+</template>
+<script lang='ts' setup>
+import AttrBase from './texthistory-attr-base.vue';
+import AttrStyle from './texthistory-attr-style.vue';
+import AttrHeader from '../../form/common/attr-header.vue'
+import AttrEvent from './texthistory-attr-event.vue';
+import { ref } from 'vue';
+
+defineProps({
+	configure: {
+		type: Object,
+		default: () => ({ title: 'Text',props: {type: 'input-text'} }) // 设置默认值
+	}
+});
+let currentConfigType = ref("base")
+
+</script>
+<style >
+@import '../../../../../../assets/design-attr.css';
+</style>

package/src/components/runtime/views/assemblys/workflow/text-history/texthistory-design.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="text-align: center">
+	  <img style="width: 100px;height: 100px" src="../../../../../../assets/images/workflow/workflow-texthistory .png">
+  </div>
+</template>
+<script lang='ts' setup>
+    import { ref,confineProps } from 'vue';
+    const props = defineProps({
+        configure:Object
+    });
+    if(props.configure.title==undefined){
+        props.configure.title = 'button';
+    }
+</script>
+<style scoped>
+
+</style>

package/src/components/runtime/views/assemblys/workflow/workflow-button/workflowbutton-runtime.vue

@@ -0,0 +1,61 @@
+<template>
+  <span>
+    <template v-for="(element, itemIndex) in visibleBtns">
+      <ObjectRender
+        :key="itemIndex"
+        v-if="element.check"
+        :pageContext="pageContext"
+        :configure="element"
+      ></ObjectRender>
+    </template>
+  </span>
+</template>
+<script lang='ts' setup>
+import { ref } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type { Component, PageContext } from '@/components/design/utils/interfaces/page-design-types'
+import { getClickEventFuncByType } from '../../../../utils/events/event-util'
+import { isVisibleWorkflowButton } from '../../../../utils/events/standard-event'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//自身引用
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const runtimeStyle = ref(runtimeInfo.style ? runtimeInfo.style : {})
+const runtimeClass = runtimeInfo.class
+
+const buttonInfo = props.pageContext.workflowButtonComponent
+const completeTaskParam = props.pageContext.completeTaskParam
+const visibleBtns = ref([])
+props.configure.items.forEach(item=>{
+	const pageCode = props.pageContext.code
+const pageVersion = props.pageContext.version
+	if(isVisibleBtn(item, pageCode, pageVersion)){
+		visibleBtns.value.push(item)
+	}
+})
+
+function getStandardClickEvent(events, pageCode, pageVersion) {
+  const clickEventFunObj = getClickEventFuncByType(pageCode, pageVersion, events, 'click')
+  if (clickEventFunObj) {
+    const isStandardEvent = clickEventFunObj.isStandard
+    if (isStandardEvent) {
+      return clickEventFunObj.event.eventName
+    }
+  }
+}
+
+function isVisibleBtn(btnConfigure, pageCode, pageVersion) {
+  const events = btnConfigure.events
+	const workflowStandardEventName = getStandardClickEvent(events, pageCode, pageVersion)
+	const isVisible = isVisibleWorkflowButton(
+		workflowStandardEventName,
+		buttonInfo,
+		completeTaskParam
+	)
+	return isVisible
+}
+</script>

package/src/components/runtime/views/render/page-view.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="amb-page-container">
+      <div class="amb-page-container-header">
+          <div class="amb-page-container-header-type">
+              <label :class="{ selected: clickType === 'page' }" @click="clickType='page'">页面设计</label>
+              <label :class="{ selected: clickType === 'pageEvent' }" @click="clickType='pageEvent'">页面事件</label>
+              <label :class="{ selected: clickType === 'workflow' }" @click="clickType='workflow'">工作流设计</label>
+              <label :class="{ selected: clickType === 'front' }" @click="clickType='front'">前端逻辑</label>
+              <label :class="{ selected: clickType === 'service' }" @click="clickType='service'">服务编排</label>
+          </div>
+      </div>
+      <div class="amb-page-container-main">
+          <ViewDesign v-show="clickType === 'page'" :configure="pageInfo"></ViewDesign>
+          <PageEventDesign v-show="clickType === 'pageEvent'" :configure="pageInfo"></PageEventDesign>
+      </div>
+  </div>
+</template>
+<script lang='ts' setup>
+    import { ref,reactive,computed } from 'vue';
+    import ViewDesign from './view/view-design.vue';
+    import {initComponentRefState} from '../../utils/page-helper-util';
+    import type {PageDesign} from '../../utils/interfaces/page-design-types';
+    import {queryTableFields} from '../../utils/page-table-util';
+    import PageEventDesign from './page-event/page-event-design.vue';
+    //点击分组时变化的方法
+    const clickType = ref('page');
+    //设计元素的列表
+    const pageDesign:PageDesign = {
+      code:'XXXXX',
+      name:'page',
+      label:'页面',
+      version:1,
+      systemCode:'Test1',
+      systemVersion:1,
+      dbName:'',
+      tableName:'',
+      workflowCode:'',
+      workflowVersion:0,
+      //模型的字段
+      modelFields:[],
+      logicDesigns:[],
+      //子集对象
+      items:[],
+      props:{},
+      style:{},
+      events:[{
+        name:'beforeload',
+        label:'加载前'
+      },{
+        name:'load',
+        label:'加载后'
+      },{
+        name:'resize',
+        label:'尺寸变化',
+        params:[{
+          name:'width',
+          label:'宽度',
+          type:'number'
+        },{
+          name:'height',
+          label:'高度',
+          type:'number'
+        }]
+      }]
+    };
+    //const pageInfo = initPageDesignState(pageDesign);
+    const pageInfo = reactive(pageDesign);
+    //初始化渲染组件引用方法
+    initComponentRefState(pageInfo);
+    //检查是否有表模型，有时查询字段到页面对象
+    if(pageInfo.tableName){
+      const systemCode = pageInfo.tableSysCode?pageInfo.tableSysCode:pageInfo.systemCode;
+      const systemVersion = pageInfo.tableSysVersion?pageInfo.tableSysVersion:pageInfo.systemVersion;
+      //查询表字段,设置到页面对象中
+      queryTableFields(systemCode,systemVersion,pageInfo.tableName)
+          .then((tableFields)=>{
+            pageInfo.modelFields = tableFields;
+          });
+    }
+</script>../../utils/interfaces/page-runtime-types

package/src/components/runtime/views/super-page copy.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-container>
+    <template v-for="(element,itemIndex) in pageItems" :key="element.uuid">
+      <ObjectRender
+          :configure="element"
+          :pageDesign="thisPageDesign"></ObjectRender>
+    </template>
+  </el-container>
+</template>
+<script lang='ts' setup>
+    import { ref,reactive} from 'vue';
+    import ObjectRender from './assemblys/object-render.vue'
+    import type { PageDesign } from '../utils/interfaces/page-design-types';
+    import {initComponentRefState,addComponentRef} from '../utils/page-helper-util';
+    import {queryPageDesign} from '../utils/page-init-util';
+
+    //定义初始化的参数
+    interface MyProps{
+      //页面编码
+      pageCode?:string,
+      //页面版本
+      pageVersion?:number,
+      //页面ID
+      pageId?:number,
+      //表单数据ID
+      dataIds?:string,
+      //测试对象
+      pageDesign:PageDesign
+    }
+    const props = defineProps<MyProps>();
+
+    //绑定页面对象
+    const thisRef = ref(null);
+
+    const pageItems:any = ref([]);
+    //查询页面设计对象
+    let thisPageDesign:PageDesign;
+    if(props.pageDesign!=null){
+      thisPageDesign = props.pageDesign;
+      initPageDesign(thisPageDesign);
+    }else{
+      queryPageDesign(props.pageId).then((result)=>{
+        thisPageDesign = result;
+        initPageDesign(thisPageDesign);
+      });
+    }
+    /**
+     * 初始化页面对象
+     * @param pageDesign 
+     */
+    function initPageDesign(pageDesign:PageDesign){
+      //页面元素
+      pageItems.value = thisPageDesign.items?thisPageDesign.items:[];
+      console.log("pageDesignRuntime",pageItems);
+      //初始化页面组件缓存
+      initComponentRefState(pageDesign);
+      
+      //定义页面对象的编码为-1
+      addComponentRef(pageDesign,'-1',thisRef);
+    }
+</script>