super-page-runtime 1.0.14 → 1.0.15

package/src/utils/charts/chart-util.ts

@@ -0,0 +1,41 @@
+import theme1 from '../../assets/chart-themes/theme1'
+import theme2 from '../../assets/chart-themes/theme2'
+import theme3 from '../../assets/chart-themes/theme3'
+
+//缓存主题
+const themeMap: any = {
+  theme1: theme1,
+  theme2: theme2,
+  theme3: theme3
+}
+
+/**
+ * 获取主题对象
+ * @param themeName 获取自定义的主题名称
+ * @returns
+ */
+export function getCustomTheme(themeName: string) {
+  console.log('getdd', themeName)
+  return themeMap[themeName]
+}
+
+/**
+ * 获取所有主题对象
+ * @returns
+ */
+export function getCustomThemeOptions(): Array<any> {
+  return [
+    {
+      value: 'theme1',
+      label: '主题1'
+    },
+    {
+      value: 'theme2',
+      label: '主题2'
+    },
+    {
+      value: 'theme3',
+      label: '主题3'
+    }
+  ]
+}

package/src/utils/container-style-util.ts

@@ -0,0 +1,237 @@
+import type { Component } from '../../../src/utils/interfaces/page-design-types'
+/**
+ * 生成通用的样式和Class
+ */
+export function caculateCommonStyle(
+  configure: Component,
+  commonStyle: any,
+  commonClass: any
+): void {
+  //清空设置
+  const tempStyle: any = {}
+  let tempClass = ''
+  const thisProps = configure.props ? configure.props : {}
+  const thisStyle = configure.style ? configure.style : {}
+  const thisSize = thisProps.size ? thisProps.size : {}
+  //宽度
+  //固定
+  //默认按100
+  if (thisSize.widthType == 'fix' && thisSize.fixWidth) {
+    tempStyle['width'] = thisSize.fixWidth
+    if (!tempStyle['width'].indexOf || tempStyle['width'].indexOf('px') == -1) {
+      tempStyle['width'] = tempStyle['width'] + 'px'
+    }
+  } else {
+    if (thisSize.flexSpan) {
+      tempClass += ' el-col-' + thisSize.flexSpan
+    } else {
+      tempClass += ' el-col-24'
+    }
+  }
+  //margin
+  //外边距 设计有套一层，在此设置外部的边距
+  if (thisStyle.marginTop) {
+    tempStyle['margin-top'] = thisStyle.marginTop + 'px'
+  }
+  if (thisStyle.marginRight) {
+    tempStyle['margin-right'] = thisStyle.marginRight + 'px'
+  }
+  if (thisStyle.marginBottom) {
+    tempStyle['margin-bottom'] = thisStyle.marginBottom + 'px'
+  }
+  if (thisStyle.marginLeft) {
+    tempStyle['margin-left'] = thisStyle.marginLeft + 'px'
+  }
+  //高度
+  if (thisSize.fixHeight) {
+    tempStyle['height'] = thisSize.fixHeight
+    if (!tempStyle['height'].indexOf || tempStyle['height'].indexOf('px') == -1) {
+      tempStyle['height'] = tempStyle['height'] + 'px'
+    }
+  }
+  //检查是否固定位置
+  const position = thisProps.position
+  //工具栏位置
+  if (position == 'top' || position == 'bottom') {
+    //position: -webkit-sticky
+    tempStyle['position'] = 'fixed !important'
+    tempStyle['z-index'] = '1'
+    //找展示容器的位置
+    //const contentObj = document.getElementsByClassName("amb-design-board");
+    const contentObj = [thisRef.value.parentNode]
+    if (contentObj && contentObj.length > 0) {
+      const contentRec = contentObj[0].getBoundingClientRect()
+      if (position == 'top') {
+        tempStyle['top'] = contentRec.top + 'px'
+      }
+      if (position == 'bottom') {
+        tempStyle['bottom'] = '10px'
+      }
+    }
+    //宽
+    const thisRec = thisRef.value.getBoundingClientRect()
+    tempStyle['width'] = thisRec.width + 'px'
+  } else if (thisStyle.position) {
+    //按定位设置
+    tempStyle['position'] = thisStyle.position
+    if (thisStyle.position != 'relative') {
+      //其余需要默认当前的宽度
+      if (!tempStyle['width']) {
+        const thisRec = thisRef.value.getBoundingClientRect()
+        tempStyle['width'] = thisRec.width + 'px'
+      }
+      if (thisStyle.left) {
+        tempStyle['left'] = thisStyle.left + 'px'
+      }
+      if (thisStyle.top) {
+        tempStyle['top'] = thisStyle.top + 'px'
+      }
+    }
+  }
+  commonStyle.value = tempStyle
+  commonClass.value = tempClass
+}
+
+/**
+ * 样式转换
+ * @param configure
+ * @param designStyle 动态样式名
+ * @param designClass 动态class
+ */
+export function caculateComponentStyle(
+  configure: any,
+  designStyle: any,
+  designClass: any,
+  designHeaderStyle: any
+): void {
+  //清空设置
+  const tempStyle: any = {}
+  const tempHeaderStyle: any = {}
+  let tempClass = ''
+  //从默认值中获取
+  let defineStyle: any = {}
+  if (configure.default && configure.default.style) {
+    Object.assign(defineStyle, configure.default.style)
+  }
+  //设计内容覆盖
+  if (configure.style) {
+    for (let pro in configure.style) {
+      const proValue = configure.style[pro]
+      if (proValue != undefined && proValue != null && proValue != '') {
+        defineStyle[pro] = proValue
+      }
+    }
+  }
+
+  //加粗
+  if (defineStyle.fontWeight) {
+    tempStyle['font-weight'] = 'bold'
+  }
+  //倾斜
+  if (defineStyle.incline) {
+    tempStyle['font-style'] = 'italic'
+  }
+  //字号
+  if (defineStyle.fontSize) {
+    tempStyle['font-size'] = defineStyle.fontSize
+  }
+  //颜色
+  if (defineStyle.color) {
+    tempStyle['color'] = defineStyle.color
+  }
+  if (defineStyle.textAlign) {
+    tempStyle['text-align'] = defineStyle.textAlign
+  }
+  //背景颜色
+  if (defineStyle.backgroundColor) {
+    tempStyle['background-color'] = defineStyle.backgroundColor
+  }
+  //背景图片 待设置
+  //内边距
+  if (defineStyle.paddingTop) {
+    tempStyle['padding-top'] = defineStyle.paddingTop + 'px'
+  }
+  if (defineStyle.paddingRight) {
+    tempStyle['padding-right'] = defineStyle.paddingRight + 'px'
+  }
+  if (defineStyle.paddingBottom) {
+    tempStyle['padding-bottom'] = defineStyle.paddingBottom + 'px'
+  }
+  if (defineStyle.paddingLeft) {
+    tempStyle['padding-left'] = defineStyle.paddingLeft + 'px'
+  }
+  //线宽
+  if (defineStyle.borderWidth && defineStyle.borderColor) {
+    tempStyle['border'] =
+      defineStyle.borderWidth +
+      'px ' +
+      (defineStyle.borderType ? defineStyle.borderType : 'solid') +
+      ' ' +
+      defineStyle.borderColor
+    //线框圆角
+    if (defineStyle.radius) {
+      tempStyle['border-radius'] = defineStyle.radius + 'px'
+    }
+  }
+
+  //阴影
+  if (defineStyle.shadowColor) {
+    let shadow = (defineStyle.shadowTop ? defineStyle.shadowTop : '0') + 'px '
+    shadow += (defineStyle.shadowRight ? defineStyle.shadowRight : '0') + 'px '
+    shadow += (defineStyle.shadowBottom ? defineStyle.shadowBottom : '0') + 'px '
+    shadow += (defineStyle.shadowLeft ? defineStyle.shadowLeft : '0') + 'px '
+    shadow += defineStyle.shadowColor
+    tempStyle['box-shadow'] = shadow
+  }
+
+  //自定义class
+  if (defineStyle.customClass) {
+    tempClass += ' ' + defineStyle.customClass.replace(/;/g, ' ')
+  }
+
+  //自定义样式
+  if (defineStyle.customStyle) {
+    const strs = defineStyle.customStyle.replace(/[\r\n]/g, '').split(';')
+    for (let index = 0; index < strs.length; index++) {
+      const ss = strs[index].split(':')
+      if (ss.length > 1 && ss[0] && ss[1]) {
+        if (!isNaN(ss[0])) {
+          continue
+        }
+        tempStyle[ss[0]] = ss[1]
+      }
+    }
+  }
+  //标题的样式
+  //加粗
+  if (defineStyle.headerFontWeight) {
+    tempHeaderStyle['font-weight'] = 'bold'
+  }
+  //倾斜
+  if (defineStyle.headerIncline) {
+    tempHeaderStyle['font-style'] = 'italic'
+  }
+  //字号
+  if (defineStyle.headerFontSize) {
+    tempHeaderStyle['font-size'] = defineStyle.headerFontSize
+  }
+  //颜色
+  if (defineStyle.headerColor) {
+    tempHeaderStyle['color'] = defineStyle.headerColor
+  }
+  if (defineStyle.headerTextAlign) {
+    tempHeaderStyle['text-align'] = defineStyle.headerTextAlign
+  } else {
+    tempHeaderStyle['text-align'] = 'left'
+  }
+  //背景颜色
+  if (defineStyle.headerBackgroundColor) {
+    tempHeaderStyle['background-color'] = defineStyle.headerBackgroundColor
+  }
+
+  designStyle.value = tempStyle
+  designClass.value = tempClass
+  if (designHeaderStyle) {
+    designHeaderStyle.value = tempHeaderStyle
+  }
+}

package/src/{components/runtime/utils → utils}/events/event-util.ts

@@ -1,9 +1,8 @@
-import type { PageDesign } from '../interfaces/page-design-types'
-import type { Component, PageContext } from '../interfaces/page-design-types'
+import type { Component, PageContext, PageDesign } from '../../utils/interfaces/page-design-types'
 import { isPromise } from 'agilebuilder-ui/src/utils/common-util'
 import { standardEvents, dealAfterOperate, judgeDataNumber } from './standard-event'
 import { validateDataModelFunc } from './validator-util'
-import { getComponentRef } from '../global-refs'
+import { getComponentRef } from '../../utils/global-refs'
 import { ElMessage } from 'element-plus'
 import { analysisCondition } from 'agilebuilder-ui/src/utils/util'
 import { getListCode } from '../common-util'

package/src/{components/runtime/utils → utils}/events/standard-event.ts

@@ -10,7 +10,7 @@ import { getI18n } from 'agilebuilder-ui/src/utils/util'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { setSessionCache, getToken } from 'agilebuilder-ui/src/utils/auth'
-import { getComponentRef } from '../global-refs'
+import { getComponentRef } from '../../utils/global-refs'
 // import eventBus from '../eventBus'
 import axios from 'axios'
 import { doAfterClickEvent } from './event-util'

package/src/{components/runtime/utils → utils}/events/validator-util.ts

@@ -1,6 +1,6 @@
 import Validator from 'async-validator'
 import { ElMessage, ElMessage as Message } from 'element-plus'
-import { getComponentRef } from '../global-refs'
+import { getComponentRef } from '../../utils/global-refs'
 import { getI18n } from 'agilebuilder-ui/src/utils/util'
 
 export function setObjectPropRule(prop, rules, leafRule) {

package/dist/es/components/runtime/utils/charts/chart-util.js

@@ -1,15 +0,0 @@
-import theme1 from "../../../../assets/chart-themes/theme1.js";
-import theme2 from "../../../../assets/chart-themes/theme2.js";
-import theme3 from "../../../../assets/chart-themes/theme3.js";
-const themeMap = {
-  "theme1": theme1,
-  "theme2": theme2,
-  "theme3": theme3
-};
-function getCustomTheme(themeName) {
-  console.log("getdd", themeName);
-  return themeMap[themeName];
-}
-export {
-  getCustomTheme
-};

package/dist/es/index.d.ts

@@ -1,5 +0,0 @@
-import { default as SuperPage } from './components/runtime';
-import { default as SuperPageDialog } from './components/super-page-dialog';
-import { default as WfEditor } from './components/wf-editor';
-
-export { SuperPage, SuperPageDialog, WfEditor };

package/dist/es/index.js

@@ -1,8 +0,0 @@
-import { default as default2 } from "./components/runtime/views/super-page.vue.js";
-import { default as default3 } from "./components/super-page-dialog/super-page-dialog.vue.js";
-import { default as default4 } from "./components/wf-editor/wf-editor.vue.js";
-export {
-  default2 as SuperPage,
-  default3 as SuperPageDialog,
-  default4 as WfEditor
-};

package/dist/lib/components/runtime/utils/charts/chart-util.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const theme1 = require("../../../../assets/chart-themes/theme1.js");
-const theme2 = require("../../../../assets/chart-themes/theme2.js");
-const theme3 = require("../../../../assets/chart-themes/theme3.js");
-const themeMap = {
-  "theme1": theme1,
-  "theme2": theme2,
-  "theme3": theme3
-};
-function getCustomTheme(themeName) {
-  console.log("getdd", themeName);
-  return themeMap[themeName];
-}
-exports.getCustomTheme = getCustomTheme;

package/dist/lib/index.d.ts

@@ -1,5 +0,0 @@
-import { default as SuperPage } from './components/runtime';
-import { default as SuperPageDialog } from './components/super-page-dialog';
-import { default as WfEditor } from './components/wf-editor';
-
-export { SuperPage, SuperPageDialog, WfEditor };

package/src/App.vue

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

package/src/components/runtime/index.ts

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

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

@@ -1,294 +0,0 @@
-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
-        }
-      }
-    }
-	}
-}