super-page-runtime 1.0.15 → 1.0.16

package/.eslintrc.cjs

@@ -0,0 +1,26 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

package/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

package/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'App',
+}
+</script>

package/components/index.ts

@@ -0,0 +1,17 @@
+import SuperPage from './runtime'
+import SuperPageDialog from './super-page-dialog'
+import WfEditor from './wf-editor'
+export { SuperPage, SuperPageDialog, WfEditor }
+
+// import type { App } from 'vue'
+// import SuperPage from './components/runtime'
+// import SuperPageDialog from './components/super-page-dialog'
+// import WfEditor from './components/wf-editor'
+// const components = [SuperPage, SuperPageDialog, WfEditor]
+// const install = (app: App): void => {
+//   components.forEach((component) => {
+//     app.component(component.name as string, component)
+//   })
+// }
+// export { SuperPage, SuperPageDialog, WfEditor }
+// export default install

package/components/runtime/index.ts

@@ -0,0 +1,2 @@
+import SuperPage from './views/super-page.vue'
+export default SuperPage

package/components/runtime/utils/assemblys-config.js

@@ -0,0 +1,294 @@
+import {defineAsyncComponent} from 'vue';
+
+/**
+ * 定义的可选类型
+ */
+export const assemblyGroups = [{
+  name:'container',
+  label:'容器',
+  icon:'assets/images/group-container.png',
+  items:[{
+    name:'form',
+    label:'表单',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/form/form-runtime.vue')
+    })
+  },{
+    name:'card',
+    label:'卡片',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/card/card-runtime.vue')
+    })
+  },{
+    name:'collapse',
+    label:'折叠面板',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/collapse/collapse-runtime.vue')
+    })
+  },{
+    name:'layout',
+    label:'Flex',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/flex/flex-runtime.vue')
+    })
+  },{
+    name:'tabs',
+    label:'Tabs',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/tabs/tabs-runtime.vue')
+    })
+  },{
+    name:'tools',
+    label:'工具栏',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/tools/tools-runtime.vue')
+    })
+  },{
+    name:'iframe',
+    label:'Iframe',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/iframe/iframe-runtime.vue')
+    })
+  },{
+    name:'container',
+    label:'布局',
+    runtimeComponent:defineAsyncComponent(()=>{
+      return import('../views/assemblys/container/container/container-runtime.vue')
+    })
+  }]},{
+    name:'form',
+    label:'表单',
+    items:[{
+      name:'input-text',
+      label:'文本框',
+        runtimeComponent:defineAsyncComponent(()=>{
+          return import('../views/assemblys/form/input-text/inputtext-runtime.vue')
+        })
+    },{
+      name:'select',
+      label:'下拉框',
+        runtimeComponent:defineAsyncComponent(()=>{
+          return import('../views/assemblys/form/select/select-runtime.vue')
+        })
+    },{
+      name:'radio',
+      label:'单选框',
+        runtimeComponent:defineAsyncComponent(()=>{
+          return import('../views/assemblys/form/radio/radio-runtime.vue')
+        })
+    },{
+      name:'checkbox',
+      label:'复选框',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/checkbox/checkbox-runtime.vue')
+      })
+    },{
+      name:'textarea',
+      label:'文本域',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/textarea/textarea-runtime.vue')
+      })
+    },{
+      name:'datePicker',
+      label:'日期/时间',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/date-picker/datepicker-runtime.vue')
+      })
+    },{
+      name:'switch',
+      label:'开关',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/switch/switch-runtime.vue')
+      })
+    },{
+      name:'inputNumber',
+      label:'计数器',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/input-number/input-number-runtime.vue')
+      })
+    },{
+      name:'tag',
+      label:'标签',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/tag/tag-runtime.vue')
+      })
+    },{
+      name:'richText',
+      label:'富文本',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/rich-text/richtext-runtime.vue')
+      })
+    },{
+      name:'divider',
+      label:'分割线',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/divider/divider-runtime.vue')
+      })
+    },{
+      name:'placeholder',
+      label:'占位符',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/placeholder/placeholder-runtime.vue')
+      })
+    },{
+      name:'link',
+      label:'链接',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/link/link-runtime.vue')
+      })
+    },{
+      name:'label',
+      label:'Label组件',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/label/label-runtime.vue')
+      })
+    },{
+      name:'dept-tree',
+      label:'组织树',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/dept-tree/depttree-runtime.vue')
+      })
+    },{
+      name:'file-upload',
+      label:'文件上传',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/form/file-upload/fileupload-runtime.vue')
+      })
+    }]
+  },{
+    name:'button',
+    label:'按钮',
+    items:[{
+      name:'button-detail',
+      label:'按钮',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/button/button/button-runtime.vue')
+      })
+    },{
+      name:'button-group',
+      label:'按钮组',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/button/button-group/buttongroup-runtime.vue')
+      })
+    },{
+      name:'dropdown',
+      label:'下拉菜单',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/button/dropdown/dropdown-runtime.vue')
+      })
+    }]
+  },{
+    name:'workflow',
+    label:'工作流',
+    items:[{
+      name:'workflow-button',
+      label:'工作流按钮',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/workflow/workflow-button/workflowbutton-runtime.vue')
+      })
+    }]
+  },{
+    name:'chart',
+    label:'统计图',
+    items:[{
+      name:'chart-column-line',
+      label:'柱/折图',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/chart/column-line/column-line-runtime.vue')
+      })
+    },{
+      name:'chart-pie',
+      label:'饼图',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/chart/pie/pie-runtime.vue')
+      })
+    },{
+      name:'chart-gauge',
+      label:'仪表盘',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/chart/gauge/gauge-runtime.vue')
+      })
+    },{
+      name:'chart-radar',
+      label:'雷达图',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/chart/radar/radar-runtime.vue')
+      })
+    },{
+      name:'chart-scatter',
+      label:'散点图',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/chart/scatter/scatter-runtime.vue')
+      })
+    }]
+  },{
+    name:'data',
+    label:'数据',
+    items:[{
+      name:'table',
+      label:'表格',
+      runtimeComponent:defineAsyncComponent(()=>{
+        return import('../views/assemblys/data/table/table-runtime.vue')
+      })
+    }]
+  }
+]
+
+/**
+ * 根据组件名称获取运行时的组件
+ * @param {} name
+ * @returns
+ */
+export function getRuntimeComponentByName(name){
+  if(!name){
+    return null;
+  }
+  for(let i =0;i<assemblyGroups.length;i++){
+    let items = assemblyGroups[i].items;
+    for(let j =0;j<items.length;j++){
+      let item = items[j];
+      if(item.name==name){
+        return item.runtimeComponent;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ *
+ * @returns 获取所有属于表单的组件集合
+ */
+export function getFormComponentOptions () {
+	for (let assemblyGroup of assemblyGroups) {
+		if (assemblyGroup.name === 'form') {
+			const options = []
+			assemblyGroup.items.forEach(item => {
+				options.push({name: item.name, label: item.label})
+			})
+			return options
+		}
+	}
+}
+/**
+ *
+ * @param componentName 图表组件时值为固定的chart
+ * @returns 获取指定组件的事件集合
+ */
+export function getComponentEventOptions (componentName) {
+  if(componentName && componentName === 'page') {
+    // 为了提升效率，当点击的是页面节点时，不再遍历该数组
+    return
+  }
+	for (let assemblyGroup of assemblyGroups) {
+		if (assemblyGroup.name === componentName) {
+			return assemblyGroup.events
+		} else {
+      for (let item of assemblyGroup.items) {
+        if(item.name === componentName) {
+          return item.events
+        }
+      }
+    }
+	}
+}

package/components/runtime/views/assemblys/button/button/button-runtime.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-button
+    :disabled="designProperty.state === 'disabled'"
+    :class="runtimeClass"
+    :style="runtimeStyle"
+    :type="designProperty.type"
+    :size="designProperty.size"
+    :text="designProperty.text"
+    :round="designProperty.round"
+    :plain="designProperty.plain"
+    @click="handleEvent($event, pageContext, configure, 'click')"
+  >
+    <template v-if="designProperty.title && designProperty.iconPosition == 'right'">
+      {{ designProperty.title }}
+      <template v-if="designProperty.iconValue"> &nbsp; </template>
+    </template>
+    <template v-if="designProperty.iconType && designProperty.iconValue">
+      <SuperIcon
+        :iconType="designProperty.iconType"
+        :iconValue="designProperty.iconValue"
+      ></SuperIcon>
+    </template>
+    <template v-if="designProperty.title && designProperty.iconPosition != 'right'">
+      <template v-if="designProperty.iconValue"> &nbsp; </template>
+      {{ designProperty.title }}
+    </template>
+  </el-button>
+</template>
+<script lang="ts" setup>
+import { SuperIcon } from 'agilebuilder-ui'
+import { ref } from 'vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { handleEvent } from '../../../../../../src/utils/events/event-util'
+
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+//获取默认的样式及配置
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+const designProperty = runtimeInfo.props ? runtimeInfo.props : {}
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+</script>

package/components/runtime/views/assemblys/button/button-group/buttongroup-runtime.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-button-group :class="runtimeClass" :style="runtimeStyle">
+    <template v-for="(element, itemIndex) in configure.items" :key="element.uuid">
+      <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+    </template>
+  </el-button-group>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+
+//自身引用
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+</script>

package/components/runtime/views/assemblys/button/dropdown/dropdown-runtime.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-dropdown
+    :class="runtimeClass"
+    :style="runtimeStyle"
+    :placement="designProperty.placement"
+    :split-button="designProperty.splitButton"
+    :disabled="designProperty.state === 'disabled'"
+    :type="designProperty.buttonType"
+    :size="designProperty.size"
+    :trigger="designProperty.trigger"
+  >
+    <template v-if="designProperty.triggerElement === 'button'">
+      <el-button
+        v-if="!designProperty.splitButton"
+        :size="designProperty.size"
+        :type="designProperty.buttonType"
+      >
+        {{ designProperty.title }}
+      </el-button>
+      <span v-else>{{ designProperty.title }}</span>
+    </template>
+    <el-text v-else>
+      {{ designProperty.title }}
+      <el-icon>
+        <ArrowDown />
+      </el-icon>
+    </el-text>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="(item, index) in listOptions" :key="item">{{
+          item.label
+        }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ref, computed } from 'vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { formatVariableValue } from '../../../../../../src/utils/page-helper-util'
+
+//定义的属性对象
+interface MyProps {
+  //页面对象
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//运行时信息
+const runtimeInfo: any = props.configure.runtime ? props.configure.runtime : {}
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+const designProperty: any = runtimeInfo.props ? runtimeInfo.props : {}
+
+//菜单数据
+let listOptions: any = null
+//检查数据源
+const dataOrigin =
+  props.configure.props && props.configure.props.dataOrigin ? props.configure.props.dataOrigin : {}
+const valueType = dataOrigin.optionValueSetType
+//绑定变量时，重新设置
+if (valueType == 'variable') {
+  listOptions = computed(() => {
+    let options: any
+    const menuValues: any = formatVariableValue(props.pageContext, designProperty.menuField)
+    if (menuValues && Array.isArray(menuValues)) {
+      options = menuValues
+      for (let i = 0; i < options.length; i++) {
+        const option = options[i]
+        if (!option.label) {
+          option.label = i + 1
+        }
+      }
+    } else {
+      const strs = (menuValues ? menuValues + '' : '').trim().split(',')
+      options = []
+      for (let str of strs) {
+        options.push({
+          value: str,
+          label: str
+        })
+      }
+    }
+    return options
+  })
+} else {
+  listOptions = ref(designProperty.options ? designProperty.options : [])
+}
+</script>

package/components/runtime/views/assemblys/chart/column-line/column-line-runtime.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :style="runtimeStyle" :class="runtimeClass" class="amb-widget-chart" ref="thisRef">
+    <v-chart ref="chartRef" :theme="customTheme" :option="chartOption" autoresize />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getCustomTheme } from '../../../../../../src/utils/charts/chart-util'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart } from 'echarts/charts'
+
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from 'echarts/components'
+
+//统计图
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  BarChart,
+  ToolboxComponent,
+  DataZoomComponent
+])
+import VChart from 'vue-echarts'
+
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//自身引用
+const thisRef = ref(null)
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+
+const chartOption: any = runtimeInfo.chartOption
+console.log('chartOption-runtime', chartOption)
+
+//自定义主题
+const configureProps = props.configure.props ? props.configure.props : {}
+const customTheme: any = getCustomTheme(configureProps.customTheme)
+</script>

package/components/runtime/views/assemblys/chart/common/common-attr-assistant.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-collapse-item
+            title="辅助功能"  
+            name="propsAssistant"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;margin-bottom:-35px;">
+        <el-row>
+            <el-col :span=12>
+            <el-form-item
+                    label="下载按钮">
+                    <el-switch v-model="configure.props.enableDownloadBtn"/>
+            </el-form-item>
+            </el-col>
+            <el-col :span=12>
+            <el-form-item
+                label="数据按钮">
+                <el-switch v-model="configure.props.enableDataBtn"/>
+            </el-form-item>
+            </el-col>
+        </el-row>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/components/runtime/views/assemblys/chart/common/common-attr-base.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-collapse-item
+              title="基本"  
+              name="propsBase"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="组件类型" style="margin-top:4px;">
+            <el-text>{{configure.label}}({{configure.name}})</el-text>
+            </el-form-item>
+            <el-form-item
+                label="组件名" style="margin-top:-10px;">
+                <el-text>{{configure.props.refId}}</el-text>
+            </el-form-item>
+            <el-form-item
+                label="主标题" style="margin-top:-10px">
+                <el-input v-model="configure.props.title" placeholder="请输入">
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                label="副标题" style="margin-top:-10px">
+                <el-input v-model="configure.props.subTitle" placeholder="请输入">
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                v-show="chartType=='columnLine'"
+                label="条形图" style="margin-top:-10px">
+                <el-switch v-model="configure.props.isBar"/>
+            </el-form-item>
+            <el-form-item
+                label="主题" style="margin-top:-10px">
+                <el-radio-group v-model="configure.props.theme">
+                <el-radio-button value="default">默认</el-radio-button>
+                <el-radio-button value="dark">暗黑</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item
+                label="定时刷新" style="margin-top:-10px">
+                <el-input v-model="configure.props.refreshInterval">
+                    <template #suffix>
+                    秒
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                label="状态" style="margin-top:-10px;margin-bottom:-10px;">
+                <el-radio-group v-model="configure.props.state">
+                <el-radio-button value="show">显示</el-radio-button>
+                <el-radio-button value="hide">隐藏</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:Object,
+        chartType:Object
+    });
+</script>
+