super-page-runtime 1.0.12 → 1.0.14

package/src/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/src/components/runtime/utils/charts/chart-util.ts

@@ -0,0 +1,37 @@
+  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/components/runtime/utils/common-util.ts

@@ -0,0 +1,96 @@
+import { getSystemBackendUrl } from 'agilebuilder-ui/src/utils/common-util'
+import { getLanguageWithLocale } from 'agilebuilder-ui/src/utils/util'
+import { getPageStoreKey } from './store-util'
+export function isArrayFn(value) {
+  // 首先判断浏览器是否支持Array.isArray这个方法
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(value)
+  } else {
+    return Object.prototype.toString.call(value) === '[object Array]'
+    // return obj.__proto__ === Array.prototype;
+  }
+}
+
+export function getBaseUrl(system) {
+  // window['$vueApp'].config.globalProperties.baseURL 应该是自定义扩展系统的后台访问路径
+  let baseUrl = window['$vueApp'].config.globalProperties.baseURL
+  if (system) {
+    baseUrl = getSystemBackendUrl(system.backendUrl)
+  }
+  return baseUrl
+}
+
+export function getRealRestApiPath(orgRestApiPath, system) {
+  let path = orgRestApiPath
+  if (orgRestApiPath) {
+    if (system && !isFullPath(orgRestApiPath)) {
+      const baseUrl = getBaseUrl(system)
+      if (system.standard === false) {
+        // 自定义系统
+        // 扩展系统的后台地址格式为：/dsc/systemCode/xxx/x，例如：/dsc/demo/orders/list,配置的路径为/orders/list即可
+        path = baseUrl + '/' + system.code + orgRestApiPath
+      } else {
+        // 标准系统
+        path = baseUrl + orgRestApiPath
+      }
+    }
+  }
+  return path
+}
+
+// 表示是全路径
+function isFullPath(path) {
+  return path.indexOf('http:') === 0 || path.indexOf('https:') === 0
+}
+
+/**
+ * 封装模板文件列表
+ * @param templateFiles
+ * @returns
+ */
+export function packageTemplateFiles(templateFiles) {
+  if (!templateFiles) {
+    return templateFiles
+  }
+  const currentLocale = getLanguageWithLocale()
+  if (Array.isArray(templateFiles)) {
+    // 表示是上传的多个模板
+    let templateFilesResult = []
+    let fileCodes = []
+    const fileSeperate = '~-~-'
+    templateFiles.forEach((template) => {
+      let showName = template.templateShowPath
+      if (showName.indexOf(fileSeperate) > 0) {
+        // 表示是多语言模板
+        const fileCode = showName.substring(0, showName.indexOf(fileSeperate))
+        const fileLanguage = showName.substring(
+          showName.indexOf(fileSeperate) + fileSeperate.length,
+          showName.lastIndexOf(fileSeperate)
+        )
+        const fileName = showName.substring(
+          showName.lastIndexOf(fileSeperate) + fileSeperate.length
+        )
+        if (currentLocale === fileLanguage && fileCodes.indexOf(fileCode) < 0) {
+          templateFilesResult.push({
+            templateUUID: template.templateUUID,
+            templateShowPath: fileName
+          })
+          fileCodes.push(fileCode)
+        }
+      } else {
+        templateFilesResult.push(template)
+      }
+    })
+    return templateFilesResult
+  }
+}
+
+// 首字母大写
+export function upperFirstCase(str) {
+  return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()) // 执行代码
+}
+
+// 获得列表编码
+export function getListCode(pageCode, pageVersion, tableUuid) {
+  return pageCode + ':V' + pageVersion + ':' + tableUuid
+}

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

@@ -0,0 +1,223 @@
+import type { Component } from "./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/eventBus.ts

@@ -0,0 +1,14 @@
+import mitt from 'mitt'
+
+const emitter = mitt()
+interface eventBus {
+  $on: any
+  $emit: any
+  $off: any
+}
+const bus: eventBus = {
+  $on: emitter.on,
+  $emit: emitter.emit,
+  $off: emitter.off
+}
+export default bus