super-page-runtime 1.0.15 → 1.0.16

package/components/runtime/views/assemblys/workflow/component/set-dialog.vue

@@ -0,0 +1,130 @@
+<template>
+	<el-dialog
+			model-value
+			title="自动设值"
+			append-to-body
+			@before-close="$emit('close')"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="CirclePlus"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+			<el-button
+					:icon="Delete"
+					plain
+					type="primary"
+					@click="remove"
+			>
+				删除
+			</el-button>
+		</el-row>
+		<el-table highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
+			<el-table-column prop="date" label="填写方式" align="center">
+				<template #default="scope">
+					<el-select
+							v-model="scope.row.type"
+							clearable
+							size="default"
+					>
+						<el-option label="覆盖" value="cover"/>
+						<el-option label="追加" value="append"/>
+						<el-option label="插入最前面" value="prepend"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="date" label="前置条件" align="center">
+				<template #default="scope">
+					<el-input size="default" @click="opencombinationDialog(scope.row)" />
+				</template>
+			</el-table-column>
+			<el-table-column label="执行方法时设置" align="center">
+				<el-table-column prop="name" label="字段" align="center">
+					<template #default="scope">
+						<el-select
+								v-model="scope.row.type"
+								clearable
+								size="default"
+						>
+							<el-option label="1" value="1"/>
+						</el-select>
+					</template>
+				</el-table-column>
+				<el-table-column prop="address" label="值" align="center">
+					<template #default="scope">
+						<el-select
+								v-model="scope.row.type"
+								clearable
+								size="default"
+						>
+							<el-option label="手动填写" value="input"/>
+							<el-option label="环境变量" value="context"/>
+							<el-option label="请求参数" value="request"/>
+							<el-option label="数据库字段" value="obj"/>
+						</el-select>
+					</template>
+				</el-table-column>
+			</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>
+		<combinationDialog
+				:list="combinationList"
+				@close="closeCombination"
+				v-if="combinationVisible" />
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import {CirclePlus,Delete} from '@element-plus/icons-vue'
+import combinationDialog from './combination.vue'
+import {ref} from "vue";
+
+const props = defineProps({
+	list:Object
+});
+const currentRow = ref({})
+const combinationVisible = ref(false)
+const combinationList = ref({})
+
+function closeCombination(){
+	combinationVisible.value = false
+	console.log('%c描述-154646','color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',props.list);
+}
+
+function opencombinationDialog(row:object){
+	combinationList.value = row.combination
+	combinationVisible.value = true
+}
+
+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/workflow/component/task-trigger-dialog.vue

@@ -0,0 +1,96 @@
+<template>
+	<el-dialog
+			model-value
+			title="可执行条件"
+			append-to-body
+			@before-close="$emit('close')"
+	>
+		<el-row style="padding-bottom: 8px">
+			<el-button
+					:icon="CirclePlus"
+					plain
+					type="primary"
+					@click="add"
+			>
+				添加
+			</el-button>
+			<el-button
+					:icon="Delete"
+					plain
+					type="primary"
+					@click="remove"
+			>
+				删除
+			</el-button>
+		</el-row>
+		<el-table highlight-current-row @current-change="handleCurrentChange" :data="list" style="width: 100%">
+			<el-table-column prop="name" label="事件" align="center">
+				<template #default="scope">
+					<el-select v-model="scope.row.eventName">
+						<el-option label="1" value="1"></el-option>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column prop="date" label="组合条件" align="center">
+				<template #default="scope">
+					<el-input size="default" @click="opencombinationDialog(scope.row)" />
+				</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>
+		<combinationDialog
+				:list="combinationList"
+				@close="closeCombination"
+				v-if="combinationVisible" />
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import {CirclePlus,Delete} from '@element-plus/icons-vue'
+import combinationDialog from './combination.vue'
+import {ref} from "vue";
+
+const props = defineProps({
+	list:Array
+});
+const currentRow = ref({})
+const combinationVisible = ref(false)
+const combinationList = ref({})
+
+function closeCombination(){
+	combinationVisible.value = false
+}
+
+function opencombinationDialog(row:object){
+	combinationList.value = row.combination
+	combinationVisible.value = true
+}
+
+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/workflow/picture-flow/pictureflow-attr-base.vue

@@ -0,0 +1,43 @@
+<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.prop" placeholder="请输入" />
+					</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/components/runtime/views/assemblys/workflow/picture-flow/pictureflow-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/components/runtime/views/assemblys/workflow/picture-flow/pictureflow-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/components/runtime/views/assemblys/workflow/picture-flow/pictureflow-attr.vue

@@ -0,0 +1,28 @@
+<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/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/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/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/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/components/runtime/views/assemblys/workflow/text-history/texthistory-attr.vue

@@ -0,0 +1,28 @@
+<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/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/components/runtime/views/assemblys/workflow/workflow-button/workflowbutton-runtime.vue

@@ -0,0 +1,64 @@
+<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 '../../../../../../src/utils/interfaces/page-design-types'
+import { getClickEventFuncByType } from '../../../../../../src/utils/events/event-util'
+import { isVisibleWorkflowButton } from '../../../../../../src/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/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