super-page-runtime 1.0.14 → 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/{src → components}/index.ts

@@ -1,6 +1,6 @@
-import SuperPage from './components/runtime'
-import SuperPageDialog from './components/super-page-dialog'
-import WfEditor from './components/wf-editor'
+import SuperPage from './runtime'
+import SuperPageDialog from './super-page-dialog'
+import WfEditor from './wf-editor'
 export { SuperPage, SuperPageDialog, WfEditor }
 
 // import type { App } from 'vue'

package/{src/components → components}/runtime/views/assemblys/button/button/button-runtime.vue

@@ -29,8 +29,11 @@
 <script lang="ts" setup>
 import { SuperIcon } from 'agilebuilder-ui'
 import { ref } from 'vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
-import { handleEvent } from '../../../../utils/events/event-util'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { handleEvent } from '../../../../../../src/utils/events/event-util'
 
 interface MyProps {
   pageContext: PageContext

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/gauge/gauge-runtime.vue

@@ -0,0 +1,46 @@
+<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 { GaugeChart } from 'echarts/charts'
+
+import {
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent
+} from 'echarts/components'
+
+//统计图
+use([CanvasRenderer, GaugeChart, GridComponent, TitleComponent, TooltipComponent, ToolboxComponent])
+
+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
+//自定义主题
+const configureProps = props.configure.props ? props.configure.props : {}
+const customTheme: any = getCustomTheme(configureProps.customTheme)
+</script>

package/components/runtime/views/assemblys/chart/pie/pie-runtime.vue

@@ -0,0 +1,56 @@
+<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 { PieChart } from 'echarts/charts'
+
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent
+} from 'echarts/components'
+
+//统计图
+use([
+  CanvasRenderer,
+  PieChart,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent
+])
+
+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
+
+//自定义主题
+const configureProps = props.configure.props ? props.configure.props : {}
+const customTheme: any = getCustomTheme(configureProps.customTheme)
+</script>

package/components/runtime/views/assemblys/chart/radar/radar-runtime.vue

@@ -0,0 +1,55 @@
+<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 { RadarChart } from 'echarts/charts'
+
+import {
+  LegendComponent,
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent
+} from 'echarts/components'
+
+//统计图
+use([
+  CanvasRenderer,
+  RadarChart,
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent
+])
+
+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
+//自定义主题
+const configureProps = props.configure.props ? props.configure.props : {}
+const customTheme: any = getCustomTheme(configureProps.customTheme)
+</script>

package/components/runtime/views/assemblys/chart/scatter/scatter-runtime.vue

@@ -0,0 +1,57 @@
+<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 { ScatterChart } from 'echarts/charts'
+
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from 'echarts/components'
+
+//统计图
+use([
+  CanvasRenderer,
+  ScatterChart,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  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
+//自定义主题
+const configureProps = props.configure.props ? props.configure.props : {}
+const customTheme: any = getCustomTheme(configureProps.customTheme)
+</script>

package/components/runtime/views/assemblys/common/export-form-report-dialog.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :show-close="true"
+    :append-to-body="true"
+    :title="$t('superPageRuntimeMessage.selectTemplate')"
+    model-value
+    @close="closeExportForm"
+  >
+    <el-table :data="templateFiles" style="width: 100%">
+      <el-table-column :label="$t('superPageRuntimeMessage.temlpate')" prop="templateShowPath">
+        <template v-slot="scope">
+          {{ scope.row.templateShowPath }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('superPageRuntimeMessage.operating')" width="200" fixed="right">
+        <template v-slot="scope">
+          <el-button type="text" size="small" @click="exportForm(scope.row)">
+            {{ $t('superPageRuntimeMessage.export') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { packageTemplateFiles } from '../../../../../src/utils/common-util'
+const props = defineProps({
+  configure: {
+    type: Object,
+    required: true
+  },
+  pageContext: {
+    type: Object
+  }
+})
+const emits = defineEmits(['export', 'close'])
+const prefix = '${'
+const suffix = '}'
+const templateFiles = ref([])
+const fields = ref([])
+const configureBase = props.configure.props.base
+const dataModel = props.pageContext.entity.data
+onMounted(() => {
+  if (configureBase.templateFiles && configureBase.templateFiles.length > 0) {
+    templateFiles.value = packageTemplateFiles(configureBase.templateFiles)
+  } else if (configureBase.templateUUID && configureBase.templateShowPath) {
+    templateFiles.value.push({
+      templateUUID: configureBase.templateUUID,
+      templateShowPath: configureBase.templateShowPath
+    })
+  }
+  templateFiles.value.forEach((item) => {
+    if (item && item.templateShowPath) {
+      item.templateShowPath = formatTemplateShowPath(item.templateShowPath)
+    }
+  })
+})
+
+function getFileds(templateShowPath) {
+  console.log('templateShowPath', templateShowPath)
+  let field
+  let formatStr
+  let newValue = templateShowPath
+  const prefixIndex = newValue.indexOf(prefix)
+  const suffixIndex = newValue.indexOf(suffix)
+  console.log('prefixIndex', prefixIndex)
+  console.log('suffixIndex', suffixIndex)
+  if (prefixIndex !== -1 && suffixIndex !== -1) {
+    if (prefixIndex > suffixIndex) {
+      newValue =
+        newValue.substring(0, suffixIndex) + newValue.substring(suffixIndex + suffix.length)
+      console.log('non replacement value === newValue', newValue)
+    } else {
+      field = newValue.substring(prefixIndex + prefix.length, suffixIndex)
+      formatStr = newValue.substring(prefixIndex, suffixIndex + suffix.length)
+      console.log('field', field)
+      console.log('formatStr', formatStr)
+      fields.value.push(field)
+      console.log('fields', fields.value)
+      newValue = newValue.replace(formatStr, '')
+      console.log('newValue', newValue)
+    }
+    return getFileds(newValue)
+  }
+  return fields.value
+}
+function formatTemplateShowPath(templateShowPath) {
+  const fields = getFileds(templateShowPath)
+  console.log('fields', fields)
+
+  fields.forEach((field) => {
+    const formatStr = prefix + field + suffix
+    let formatValue
+    if (templateShowPath.indexOf(formatStr) !== -1 && dataModel.hasOwnProperty(field)) {
+      formatValue = dataModel[field] ? dataModel[field] : ''
+      templateShowPath = templateShowPath.replace(formatStr, formatValue)
+    }
+  })
+  return templateShowPath
+}
+function exportForm(row) {
+  emits('export', row)
+}
+function closeExportForm() {
+  emits('close')
+}
+</script>

package/{src/components → components}/runtime/views/assemblys/container/card/card-runtime.vue

@@ -23,7 +23,10 @@ import { ref, onMounted } from 'vue'
 import { ElCard } from 'element-plus'
 import { SuperIcon } from 'agilebuilder-ui'
 import ObjectRender from '../../object-render.vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
 
 interface MyProps {
   pageContext: PageContext

package/{src/components → components}/runtime/views/assemblys/container/collapse/collapse-runtime.vue

@@ -31,8 +31,11 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import ObjectDesign from '../../object-render.vue'
-import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
-import { addComponentRef } from '../../../../utils/global-refs'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
 
 interface MyProps {
   pageContext: PageContext

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

@@ -0,0 +1,41 @@
+<template>
+  <el-container ref="thisRef">
+    <el-aside v-if="configure.props.useLeft" :style="leftStyle">
+      <template v-for="(element, itemIndex) in configure.leftAslides" :key="element.uuid">
+        <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+      </template>
+    </el-aside>
+    <el-main :style="mainStyle" :class="mainClass">
+      <template v-for="(element, itemIndex) in configure.items" :key="element.uuid">
+        <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+      </template>
+    </el-main>
+    <el-aside v-if="configure.props.useRight" :style="rightStyle">
+      <template v-for="(element, itemIndex) in configure.rightAslides" :key="element.uuid">
+        <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+      </template>
+    </el-aside>
+  </el-container>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+//自身引用
+const thisRef = ref(null)
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+//运行时的自身详细参数
+const leftStyle = runtimeInfo.leftStyle
+const rightStyle = runtimeInfo.rightStyle
+const mainStyle = runtimeInfo.style
+const mainClass = runtimeInfo.class
+</script>

package/components/runtime/views/assemblys/container/flex/flex-runtime.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-row
+    ref="thisRef"
+    :justify="designProperty.flexJustify"
+    :gutter="designProperty.flexGutter"
+    :align="designProperty.alignItems"
+    :style="runtimeStyle"
+    :class="runtimeClass"
+  >
+    <template v-for="(element, itemIndex) in configure.items" :key="element.uuid">
+      <ObjectRender :pageContext="pageContext" :configure="element"></ObjectRender>
+    </template>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import ObjectRender from '../../object-render.vue'
+import type {
+  Component,
+  PageContext
+} from '../../../../../../src/utils/interfaces/page-design-types'
+import { addComponentRef } from '../../../../../../src/utils/global-refs'
+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 designProperty: any = runtimeInfo.props ? runtimeInfo.props : {}
+</script>