super-page-designer 0.0.1-tmp1

package/dist/es/components/design/utils/common-util.d.ts

@@ -0,0 +1,24 @@
+import { Component } from './interfaces/page-design-types';
+
+/**
+ * 深度复制
+ * @returns
+ */
+export declare function deepCopy(srcObj: any): any;
+/**
+ * 获取路径的请求地址
+ * 从Src下去获取
+ * @param {*} url
+ * @returns
+ */
+export declare function getSrcFileUrl(url: string): string;
+/**
+ * 获取UUID,去掉破折号
+ * @returns
+ */
+export declare function getUuidv4(): string;
+/**
+ * 根据UUID获取页面设计对象中的组件
+ * @returns
+ */
+export declare function findDesignItemByUuid(data: any, uuid: string): Component | null;

package/dist/es/components/design/utils/common-util.js

@@ -0,0 +1,41 @@
+import { v4 } from "uuid";
+function deepCopy(srcObj) {
+  if (typeof srcObj !== "object" || srcObj === null) {
+    return srcObj;
+  }
+  const copyObj = Array.isArray(srcObj) ? [] : {};
+  for (const key in srcObj) {
+    if (srcObj.hasOwnProperty(key)) {
+      copyObj[key] = deepCopy(srcObj[key]);
+    }
+  }
+  return copyObj;
+}
+function getSrcFileUrl(url) {
+  return url ? new URL("../../../" + url, import.meta.url).href : "";
+}
+function getUuidv4() {
+  return v4().replace(/-/g, "");
+}
+function findDesignItemByUuid(data, uuid) {
+  for (const item of data.items) {
+    if (item.uuid === uuid) {
+      return item;
+    }
+  }
+  for (const item of data.items) {
+    if (item.items && item.items.length > 0) {
+      const foundItem = findDesignItemByUuid(item, uuid);
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  }
+  return null;
+}
+export {
+  deepCopy,
+  findDesignItemByUuid,
+  getSrcFileUrl,
+  getUuidv4
+};

package/dist/es/components/design/utils/container-design-util.d.ts

@@ -0,0 +1,23 @@
+import { PageDesign } from './interfaces/page-design-types';
+
+/**
+ * 计算页面所需的样式
+ * @param configure
+ * @param designStyle
+ * @param designClass
+ */
+export declare function caculatePageStyle(configure: PageDesign, designStyle: any, designClass: any): void;
+/**
+ * 计算通用的样式
+ * @param configure
+ * @param designStyle
+ * @param designClass
+ */
+export declare function caculateCommonStyle(configure: any, designStyle: any, designClass: any): void;
+/**
+ * 样式转换
+ * @param configure
+ * @param designStyle 动态样式名
+ * @param designClass 动态class
+ */
+export declare function caculateComponentStyle(configure: any, designStyle: any, designClass: any, designHeaderStyle: any): void;

package/dist/es/components/design/utils/container-design-util.js

@@ -0,0 +1,223 @@
+function caculatePageStyle(configure, designStyle, designClass) {
+  const tempStyle = {};
+  let tempClass = "";
+  const pageInfo = configure;
+  if (pageInfo.props.isFlex) {
+    tempClass += "el-row";
+    if (!isNaN(pageInfo.props.flexGutter)) {
+      const num = parseInt(pageInfo.props.flexGutter) / 2;
+      tempStyle["margin-left"] = "-" + num + "px";
+      tempStyle["margin-right"] = "-" + num + "px";
+    }
+    if (pageInfo.props.flexJustify) {
+      tempClass += " is-justify-" + pageInfo.props.flexJustify;
+    }
+  }
+  const defineStyle = pageInfo.style ? pageInfo.style : {};
+  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.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.customClass) {
+    tempClass += " " + defineStyle.customClass.replace(/;/g, " ");
+  }
+  if (defineStyle.customStyle) {
+    const strs = defineStyle.customStyle.split(";");
+    for (let index = 0; index < strs.length; index++) {
+      const ss = strs[index].split(":");
+      if (ss.length > 1 && ss[0] && ss[1]) {
+        tempStyle[ss[0]] = ss[1];
+      }
+    }
+  }
+  designStyle.value = tempStyle;
+  designClass.value = tempClass;
+}
+function caculateCommonStyle(configure, designStyle, designClass) {
+  const tempStyle = {};
+  let tempClass = "";
+  const thisProps = configure.props ? configure.props : {};
+  const thisStyle = configure.style ? configure.style : {};
+  const thisSize = thisProps.size ? thisProps.size : {};
+  if (!thisSize["pc"]) {
+    thisSize["pc"] = {};
+  }
+  for (let dimensions in thisSize) {
+    const tempSizeConf = thisSize[dimensions];
+    const dimensionsStyle = {};
+    let dimensionsClass = "";
+    if (tempSizeConf.widthType == "fix" && tempSizeConf.fixWidth) {
+      dimensionsStyle["width"] = tempSizeConf.fixWidth;
+      if (!dimensionsStyle["width"].indexOf || dimensionsStyle["width"].indexOf("px") == -1) {
+        dimensionsStyle["width"] = dimensionsStyle["width"] + "px";
+      }
+    } else {
+      if (tempSizeConf.flexSpan) {
+        dimensionsClass += " el-col-" + tempSizeConf.flexSpan;
+      }
+    }
+    if (tempSizeConf.fixHeight) {
+      dimensionsStyle["height"] = tempSizeConf.fixHeight;
+      if (!dimensionsStyle["height"].indexOf || dimensionsStyle["height"].indexOf("px") == -1) {
+        dimensionsStyle["height"] = dimensionsStyle["height"] + "px";
+      }
+    }
+    tempStyle[dimensions + "_style"] = dimensionsStyle;
+    tempStyle[dimensions + "_class"] = dimensionsClass;
+  }
+  if (thisStyle.marginTop == 0 || thisStyle.marginTop) {
+    tempStyle["margin-top"] = thisStyle.marginTop + "px";
+  }
+  if (thisStyle.marginRight == 0 || thisStyle.marginRight) {
+    tempStyle["margin-right"] = thisStyle.marginRight + "px";
+  }
+  if (thisStyle.marginBottom == 0 || thisStyle.marginBottom) {
+    tempStyle["margin-bottom"] = thisStyle.marginBottom + "px";
+  }
+  if (thisStyle.marginLeft == 0 || thisStyle.marginLeft) {
+    tempStyle["margin-left"] = thisStyle.marginLeft + "px";
+  }
+  thisProps.position;
+  if (thisStyle.position) {
+    tempStyle["position"] = thisStyle.position;
+    if (thisStyle.position != "relative") {
+      if (thisStyle.left) {
+        tempStyle["left"] = thisStyle.left + "px";
+      }
+      if (thisStyle.top) {
+        tempStyle["top"] = thisStyle.top + "px";
+      }
+    }
+  }
+  designStyle.value = tempStyle;
+  designClass.value = tempClass;
+}
+function caculateComponentStyle(configure, designStyle, designClass, designHeaderStyle) {
+  const tempStyle = {};
+  const tempHeaderStyle = {};
+  let tempClass = "";
+  let defineStyle = {};
+  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 != void 0 && 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 == 0 || defineStyle.paddingTop) {
+    tempStyle["padding-top"] = defineStyle.paddingTop + "px";
+  }
+  if (defineStyle.paddingRight == 0 || defineStyle.paddingRight) {
+    tempStyle["padding-right"] = defineStyle.paddingRight + "px";
+  }
+  if (defineStyle.paddingBottom == 0 || defineStyle.paddingBottom) {
+    tempStyle["padding-bottom"] = defineStyle.paddingBottom + "px";
+  }
+  if (defineStyle.paddingLeft == 0 || 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;
+  }
+  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;
+  }
+}
+export {
+  caculateCommonStyle,
+  caculateComponentStyle,
+  caculatePageStyle
+};

package/dist/es/components/design/utils/data-table-util.d.ts

@@ -0,0 +1,29 @@
+export declare function formatConditionList(conditionList: any, attributeMap: [], fieldMap: []): string;
+export declare function getOperators(item: object): {
+    name: string;
+    label: string;
+}[];
+export declare function addColumnToGroupHeaders(column: any, parentUuid: any, groupHeaders: any): void;
+/**
+ * 设置字段在组合表头中的顺序
+ * @param parentUuid
+ * @param draggingGroupData
+ * @param groupHeaders
+ */
+export declare function setGroupHeaderDataDisplayOrder(parentUuid: any, draggingGroupData: any, groupHeaders: any): void;
+/**
+ * 根据字段uuid删除组合表头
+ * @param groupHeaders
+ * @param columnUuid
+ */
+export declare function deleteGroupHeaderByColumnUuid(groupHeaders: any, columnUuid: any): void;
+export declare function getTopGroupHeaderList(groupHeaders: any): any[];
+export declare function isLeafNode(headerCol: any, groupHeaders: any): boolean;
+/**
+ * 获得子节点
+ * @param parentUuid
+ * @param groupHeaders
+ * @returns
+ */
+export declare function getChildrenList(parentUuid: any, groupHeaders: any): any[];
+export declare function getColumnsWithGroupHeader(tableConfigure: any): any[];

package/dist/es/components/design/utils/data-table-util.js

@@ -0,0 +1,327 @@
+import { getUuidv4 } from "./common-util.js";
+import eventBus from "./eventBus.js";
+function formatConditionList(conditionList, attributeMap, fieldMap) {
+  if (conditionList) {
+    const jsonStr = JSON.parse(conditionList);
+    conditionList = [];
+    for (const i2 in jsonStr) {
+      conditionList.push(jsonStr[i2]);
+    }
+  }
+  let returnStr = "";
+  if (conditionList && conditionList.length > 0) {
+    for (var i = 0; i < conditionList.length; i++) {
+      const item = conditionList[i];
+      if (item && item.propName && attributeMap) {
+        const operatorsArr = getOperators(
+          fieldMap[item.propName]
+        );
+        if (operatorsArr && operatorsArr.length > 0) {
+          const operator = operatorsArr.filter((operItem) => {
+            return operItem.name === item.operator;
+          });
+          returnStr += item.leftBracket;
+          if (fieldMap[item.propName] && fieldMap[item.propName].label) {
+            returnStr += fieldMap[item.propName].label + " ";
+          }
+          if (operator && operator.length > 0) {
+            returnStr += operator[0].label + " ";
+          }
+          returnStr += item.defaultValue + item.rightBracket + " ";
+          if (item.joinSign) {
+            if (item.joinSign === "or") {
+              returnStr += "或者";
+            } else {
+              returnStr += "并且";
+            }
+          }
+        }
+      }
+    }
+  }
+  if (returnStr && returnStr !== "") {
+    const endStr = returnStr.substring(returnStr.length - 1);
+    if (endStr === "者" || endStr === "且") {
+      returnStr = returnStr.substring(0, returnStr.length - 2);
+    }
+  }
+  return returnStr;
+}
+function getOperators(item) {
+  if (item) {
+    if (item.type === "INTEGER" || item.type === "LONG" || item.type === "DOUBLE" || item.type === "FLOAT") {
+      return [
+        {
+          name: "GT",
+          label: "大于"
+        },
+        {
+          name: "LT",
+          label: "小于"
+        },
+        {
+          name: "EQ",
+          label: "等于"
+        },
+        {
+          name: "LET",
+          label: "不大于"
+        },
+        {
+          name: "GET",
+          label: "不小于"
+        },
+        {
+          name: "NET",
+          label: "不等于"
+        },
+        {
+          name: "IS_NULL",
+          label: "等于Null"
+        },
+        {
+          name: "IS_NOT_NULL",
+          label: "不等于Null"
+        }
+      ];
+    } else if (item.type === "DATE" || item.type === "TIME") {
+      return [
+        {
+          name: "GT",
+          label: "晚于"
+        },
+        {
+          name: "LT",
+          label: "早于"
+        },
+        {
+          name: "EQ",
+          label: "等于"
+        },
+        {
+          name: "LET",
+          label: "不晚于"
+        },
+        {
+          name: "GET",
+          label: "不早于"
+        },
+        {
+          name: "IS_NULL",
+          label: "等于Null"
+        },
+        {
+          name: "IS_NOT_NULL",
+          label: "不等于Null"
+        },
+        {
+          name: "BETWEEN",
+          label: "时间范围"
+        }
+      ];
+    } else if (item.type === "TEXT") {
+      return [
+        {
+          name: "EQ",
+          label: "等于"
+        },
+        {
+          name: "NET",
+          label: "不等于"
+        },
+        {
+          name: "CONTAIN",
+          label: "包含"
+        },
+        {
+          name: "NOT_CONTAIN",
+          label: "不包含"
+        },
+        {
+          name: "IS_NULL",
+          label: "等于Null"
+        },
+        {
+          name: "IS_NOT_NULL",
+          label: "不等于Null"
+        }
+      ];
+    } else {
+      return [
+        {
+          name: "EQ",
+          label: "等于"
+        },
+        {
+          name: "NET",
+          label: "不等于"
+        },
+        {
+          name: "IS_NULL",
+          label: "等于Null"
+        },
+        {
+          name: "IS_NOT_NULL",
+          label: "不等于Null"
+        }
+      ];
+    }
+  } else {
+    return [
+      {
+        name: "EQ",
+        label: "等于"
+      },
+      {
+        name: "NET",
+        label: "不等于"
+      },
+      {
+        name: "IS_NULL",
+        label: "等于Null"
+      },
+      {
+        name: "IS_NOT_NULL",
+        label: "不等于Null"
+      }
+    ];
+  }
+}
+function addColumnToGroupHeaders(column, parentUuid, groupHeaders) {
+  let columnHeader = {
+    uuid: getUuidv4(),
+    parentUuid,
+    columnUuid: column.uuid,
+    titleText: column.props.base.name,
+    isLeaf: true
+  };
+  setGroupHeaderDataDisplayOrder(parentUuid, columnHeader, groupHeaders);
+  groupHeaders.push(columnHeader);
+}
+function setGroupHeaderDataDisplayOrder(parentUuid, draggingGroupData, groupHeaders) {
+  let otherHeaders = [];
+  if (parentUuid) {
+    otherHeaders = groupHeaders.filter((item) => item.parentUuid === parentUuid);
+  } else {
+    otherHeaders = groupHeaders.filter((item) => !item.parentUuid);
+  }
+  if (otherHeaders && otherHeaders.length > 0) {
+    otherHeaders = otherHeaders.sort((a, b) => a.displayOrder - b.displayOrder);
+    const lastHeader = otherHeaders[otherHeaders.length - 1];
+    draggingGroupData.displayOrder = lastHeader.displayOrder + 1;
+  } else {
+    draggingGroupData.displayOrder = 1;
+  }
+}
+function deleteGroupHeaderByColumnUuid(groupHeaders, columnUuid) {
+  const index = groupHeaders.findIndex((item) => item.columnUuid === columnUuid);
+  if (index !== void 0 && index !== null && index >= 0) {
+    groupHeaders.splice(index, 1);
+  }
+}
+function getTopGroupHeaderList(groupHeaders) {
+  console.log("组合表头---groupHeaders=====", groupHeaders);
+  let topGroupHeaderList = [];
+  groupHeaders.forEach((item) => {
+    if (!item.parentUuid) {
+      item.isLeaf = isLeafNode(item, groupHeaders);
+      topGroupHeaderList.push(item);
+    } else {
+      item.isLeaf = true;
+    }
+  });
+  topGroupHeaderList = topGroupHeaderList.sort((a, b) => a.displayOrder - b.displayOrder);
+  return topGroupHeaderList;
+}
+function isLeafNode(headerCol, groupHeaders) {
+  const childrenList = groupHeaders.filter((item) => item.parentUuid === headerCol.uuid);
+  if (childrenList && childrenList.length > 0) {
+    return false;
+  }
+  return true;
+}
+function getChildrenList(parentUuid, groupHeaders) {
+  let childrenList = [];
+  groupHeaders.forEach((item) => {
+    if (item.parentUuid === parentUuid) {
+      item.isLeaf = isLeafNode(item, groupHeaders);
+      childrenList.push(item);
+    }
+  });
+  childrenList = childrenList.sort((a, b) => a.displayOrder - b.displayOrder);
+  return childrenList;
+}
+function getTopGroupHeaderColumnList(groupHeaders, columnItems) {
+  console.log("组合表头---groupHeaders=====", groupHeaders);
+  let topGroupHeaderList = [];
+  let compositeHeaderFieldGroup = [];
+  groupHeaders.forEach((item) => {
+    if (item.columnUuid) {
+      const columns = columnItems.filter((column) => column.uuid === item.columnUuid);
+      if (columns && columns.length > 0) {
+        Object.assign(item, columns[0]);
+      }
+    }
+    if (!item.parentUuid) {
+      item.isLeaf = isLeafNode(item, groupHeaders);
+      topGroupHeaderList.push(item);
+      compositeHeaderFieldGroup.push(item);
+    } else {
+      item.isLeaf = true;
+    }
+  });
+  eventBus.$emit("setFieldGroup", compositeHeaderFieldGroup);
+  columnItems.forEach((item) => {
+    if (item.props.base && item.props.base.prop == "$selection") {
+      topGroupHeaderList.unshift(item);
+    } else if (item.props.base && item.props.base.prop == "$index") {
+      topGroupHeaderList.splice(1, 0, item);
+    } else if (item.props.base && item.props.base.prop == "operation") {
+      topGroupHeaderList.push(item);
+    }
+  });
+  topGroupHeaderList = topGroupHeaderList.sort((a, b) => a.displayOrder - b.displayOrder);
+  return topGroupHeaderList;
+}
+function getAllChildrenList(parentItem, groupHeaders, columnItems) {
+  const parentUuid = parentItem.uuid;
+  let childrenList = groupHeaders.filter((item) => item.parentUuid === parentUuid);
+  if (childrenList && childrenList.length > 0) {
+    childrenList.forEach((item) => {
+      if (item.columnUuid) {
+        const columns = columnItems.filter((column) => column.uuid === item.columnUuid);
+        if (columns && columns.length > 0) {
+          Object.assign(item, columns[0]);
+        }
+      }
+    });
+    childrenList = childrenList.sort((a, b) => a.displayOrder - b.displayOrder);
+    parentItem.children = childrenList;
+    childrenList.forEach((item) => getAllChildrenList(item, groupHeaders, columnItems));
+  } else {
+    parentItem.children = [];
+  }
+}
+function getColumnsWithGroupHeader(tableConfigure) {
+  let columns = [];
+  let tableColumns = tableConfigure.items;
+  let groupHeaders = tableConfigure.props.groupHeaders;
+  if (!groupHeaders || groupHeaders.length === 0) {
+    columns = tableColumns.sort((a, b) => a.props.base.displayOrder - b.props.base.displayOrder);
+  } else {
+    columns = getTopGroupHeaderColumnList(groupHeaders, tableColumns);
+    columns.forEach((item) => getAllChildrenList(item, groupHeaders, tableColumns));
+  }
+  return columns;
+}
+export {
+  addColumnToGroupHeaders,
+  deleteGroupHeaderByColumnUuid,
+  formatConditionList,
+  getChildrenList,
+  getColumnsWithGroupHeader,
+  getOperators,
+  getTopGroupHeaderList,
+  isLeafNode,
+  setGroupHeaderDataDisplayOrder
+};

package/dist/es/components/design/utils/eventBus.js

@@ -0,0 +1,10 @@
+import mitt from "mitt";
+const emitter = mitt();
+const bus = {};
+bus.$on = emitter.on;
+bus.$emit = emitter.emit;
+bus.$off = emitter.off;
+const eventBus = bus;
+export {
+  eventBus as default
+};