super-page-designer 0.0.1-tmp1

package/dist/es/components/design/views/assemblys/data/table/table-attr-base.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./table-attr-base.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr-event.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, unref } from "vue";
+import AttrEvent from "../../form/common/attr-event.vue.js";
+import "../../../../utils/assemblys-config.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-attr-event",
+  props: {
+    configure: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const events = props.configure.events;
+    return (_ctx, _cache) => {
+      const _component_el_form = resolveComponent("el-form");
+      return openBlock(), createBlock(_component_el_form, {
+        "label-width": "80px",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createVNode(AttrEvent, {
+            configure: __props.configure,
+            events: unref(events)
+          }, null, 8, ["configure", "events"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr-event.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./table-attr-event.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr-style.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode } from "vue";
+import _sfc_main$1 from "../component/attr-style.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-attr-style",
+  props: {
+    configure: Object
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_el_collapse = resolveComponent("el-collapse");
+      const _component_el_form = resolveComponent("el-form");
+      return openBlock(), createBlock(_component_el_form, {
+        "label-width": "80px",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_collapse, { style: { "margin-top": "6px" } }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, { configure: __props.configure }, null, 8, ["configure"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr-style.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./table-attr-style.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./table-attr.vue2.js";
+/* empty css                */
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-attr.vue2.js

@@ -0,0 +1,99 @@
+import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, isRef, createElementVNode, withDirectives, vShow } from "vue";
+import _sfc_main$4 from "./table-attr-base.vue.js";
+import _sfc_main$5 from "./table-attr-advanced.vue.js";
+import _sfc_main$6 from "./table-attr-style.vue.js";
+import AttrHeader$1 from "../component/attr-header.vue.js";
+import _sfc_main$7 from "./table-attr-event.vue.js";
+import AttrHeader from "../../form/common/attr-header.vue.js";
+import _sfc_main$1 from "./tablecolumn-attr-base.vue.js";
+import _sfc_main$2 from "./tablecolumn-attr-style.vue.js";
+import _sfc_main$3 from "./tablecolumn-attr-event.vue.js";
+import eventBus from "../../../../utils/eventBus.js";
+import "../../../../utils/assemblys-config.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "amb-design-attr-content"
+};
+const _hoisted_2 = { class: "amb-design-attr-list" };
+const _hoisted_3 = {
+  key: 1,
+  class: "amb-design-attr-content"
+};
+const _hoisted_4 = { class: "amb-design-attr-list" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-attr",
+  props: {
+    // 页面设置对象
+    pageDesign: {
+      type: Object,
+      default: () => {
+      }
+    },
+    configure: {
+      type: Object,
+      default: () => ({ title: "Text", props: { type: "input-text" } })
+      // 设置默认值
+    }
+  },
+  setup(__props) {
+    let currentConfigType = ref("base");
+    const ColumnData = ref({});
+    const tableConfigure = ref({});
+    eventBus.$on("selectColumn", (val) => {
+      ColumnData.value = val.columnData;
+      tableConfigure.value = val.tableConfigure;
+    });
+    return (_ctx, _cache) => {
+      return Object.keys(ColumnData.value).length > 0 && !_ctx.formModu ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(AttrHeader, {
+          modelValue: unref(currentConfigType),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentConfigType) ? currentConfigType.value = $event : currentConfigType = $event)
+        }, null, 8, ["modelValue"]),
+        createElementVNode("div", _hoisted_2, [
+          withDirectives(createVNode(_sfc_main$1, {
+            pageDesign: __props.pageDesign,
+            configure: ColumnData.value,
+            tableConfigure: tableConfigure.value
+          }, null, 8, ["pageDesign", "configure", "tableConfigure"]), [
+            [vShow, unref(currentConfigType) === "base"]
+          ]),
+          withDirectives(createVNode(_sfc_main$2, { configure: ColumnData.value }, null, 8, ["configure"]), [
+            [vShow, unref(currentConfigType) === "style"]
+          ]),
+          withDirectives(createVNode(_sfc_main$3, { configure: ColumnData.value }, null, 8, ["configure"]), [
+            [vShow, unref(currentConfigType) === "event"]
+          ])
+        ])
+      ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+        createVNode(AttrHeader$1, {
+          modelValue: unref(currentConfigType),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(currentConfigType) ? currentConfigType.value = $event : currentConfigType = $event)
+        }, null, 8, ["modelValue"]),
+        createElementVNode("div", _hoisted_4, [
+          withDirectives(createVNode(_sfc_main$4, {
+            pageDesign: __props.pageDesign,
+            configure: __props.configure
+          }, null, 8, ["pageDesign", "configure"]), [
+            [vShow, unref(currentConfigType) === "base"]
+          ]),
+          withDirectives(createVNode(_sfc_main$5, {
+            pageDesign: __props.pageDesign,
+            configure: __props.configure,
+            tableConfigure: tableConfigure.value
+          }, null, 8, ["pageDesign", "configure", "tableConfigure"]), [
+            [vShow, unref(currentConfigType) === "advanced"]
+          ]),
+          withDirectives(createVNode(_sfc_main$6, { configure: __props.configure }, null, 8, ["configure"]), [
+            [vShow, unref(currentConfigType) === "style"]
+          ]),
+          withDirectives(createVNode(_sfc_main$7, { configure: __props.configure }, null, 8, ["configure"]), [
+            [vShow, unref(currentConfigType) === "event"]
+          ])
+        ])
+      ]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-design.css

@@ -0,0 +1,18 @@
+
+/*不显示列样式*/
+.hiddenBorder{
+	border-right: solid 1px #ebebeb !important;
+	border-left: solid 1px #ebebeb !important;
+	background-color: #ebebeb !important;
+}
+/*选中列样式*/
+.addBorder{
+	border-right: solid 1px #5893ef !important;
+	border-left: solid 1px #5893ef !important;
+	background-color: #5893ef !important;
+	color: #FFFFFF;
+}
+.ghost {
+	opacity: 0.5;
+	background: #c8ebfb;
+}

package/dist/es/components/design/views/assemblys/data/table/table-design.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./table-design.vue2.js";
+/* empty css                  */
+/* empty css                  */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const tableDesign = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d20e187"]]);
+export {
+  tableDesign as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-design.vue2.js

@@ -0,0 +1,336 @@
+import { defineComponent, ref, onMounted, watch, resolveComponent, openBlock, createElementBlock, createVNode, normalizeClass, normalizeStyle, withCtx, Fragment, renderList, createBlock, createElementVNode, withDirectives, unref, createTextVNode, createCommentVNode, vShow } from "vue";
+import eventBus from "../../../../utils/eventBus.js";
+import { useDraggable } from "vue-draggable-plus";
+import { caculateDetailComponentStyle, caculateComponentProps } from "../../../../utils/form-design-util.js";
+import "../../../../utils/assemblys-config.js";
+import { Plus, Delete } from "@element-plus/icons-vue";
+import { ElMessageBox } from "element-plus";
+import { getColumnsWithGroupHeader, addColumnToGroupHeaders, deleteGroupHeaderByColumnUuid } from "../../../../utils/data-table-util.js";
+import { getUuidv4 } from "../../../../utils/common-util.js";
+import "@element-plus/icons";
+import "super-page-runtime/src/utils/page-permission-util";
+import "../../../../../../stores/page-store.js";
+import _sfc_main$1 from "../component/table-children-column.vue.js";
+const _hoisted_1 = {
+  id: "tableDesignMenu",
+  ref: "headerMenu",
+  class: "context-menu"
+};
+const _hoisted_2 = {
+  key: 0,
+  style: { "width": "100%", "display": "flex", "justify-content": "center", "padding-top": "20px" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-design",
+  props: {
+    pageDesign: {},
+    configure: {},
+    selectWidget: {},
+    indexObj: {}
+  },
+  emits: ["selectColumn", "onSelectWidget"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tableData = ref([
+      {}
+    ]);
+    const currentPage = ref(1);
+    const pageSize = ref(1);
+    const designStyle = ref({});
+    const designClass = ref("");
+    const designHeaderStyle = ref({});
+    const designProperty = ref({});
+    const menuVisible = ref(false);
+    const groupHeaders = props.configure.props.groupHeaders;
+    const listColumns = ref([]);
+    const tableRef = ref(null);
+    const hiddenColumsName = ref([]);
+    function getRestsParameter() {
+      let defineProps = props.configure.props;
+      const tempProps = {};
+      if (defineProps["base"]["subPaging"]) {
+        tempProps["subPaging"] = defineProps["base"]["subPaging"];
+      }
+      if (defineProps["base"]["layout"]) {
+        tempProps["layout"] = defineProps["base"]["layout"].join(",");
+      }
+      if (defineProps["base"]["pageSizes"]) {
+        tempProps["pageSizes"] = defineProps["base"]["pageSizes"].split(",");
+      }
+      if (defineProps["base"]["alignTittle"]) {
+        tempProps["alignTittle"] = defineProps["base"]["alignTittle"];
+      }
+      if (defineProps["base"]["alignContent"]) {
+        tempProps["alignContent"] = defineProps["base"]["alignContent"];
+      }
+      if (tempProps != {}) {
+        for (const tempPropsKey in tempProps) {
+          designProperty.value[tempPropsKey] = tempProps[tempPropsKey];
+        }
+      }
+    }
+    onMounted(() => {
+      listColumns.value = getColumnsWithGroupHeader(props.configure);
+      listColumns.value.forEach((item) => {
+        if (!item.props.base.visible) {
+          hiddenColumsName.value.push(item.props.base.name);
+        }
+      });
+    });
+    eventBus.$on("setHiddenColumsName", (data) => {
+      if (!data.value) {
+        hiddenColumsName.value.push(data.name);
+      } else {
+        hiddenColumsName.value = hiddenColumsName.value.filter((item) => item != data.name);
+      }
+    });
+    watch(props.configure.style, () => {
+      caculateDetailComponentStyle(props.configure, designStyle, designClass, designHeaderStyle);
+      props.configure.runtime.style = designStyle.value;
+      props.configure.runtime.class = designClass.value;
+      props.configure.runtime.headerStyle = designHeaderStyle.value;
+    }, { immediate: true });
+    watch(props.configure.props, () => {
+      caculateComponentProps(props.configure, designProperty);
+      getRestsParameter();
+      props.configure.runtime.props = designProperty.value;
+    }, { immediate: true });
+    watch(() => props.configure.props.isChangeGroupHeader, () => {
+      if (props.configure.props.isChangeGroupHeader) {
+        listColumns.value = getColumnsWithGroupHeader(props.configure);
+        tableRef.value.doLayout();
+      }
+    });
+    eventBus.$on("reloadTable", () => {
+      listColumns.value = getColumnsWithGroupHeader(props.configure);
+      tableRef.value.doLayout();
+    });
+    function onSelectWidget(selIndex, objConfigure) {
+      emit("onSelectWidget", selIndex, objConfigure);
+    }
+    const headerLabel = ref("");
+    function rowClick() {
+      headerLabel.value = "";
+      columnData.value = {};
+      closeMenuVisible();
+      let obj = {
+        columnData: {}
+      };
+      eventBus.$emit("selectColumn", obj);
+    }
+    function headerContextmenu(column, event) {
+      var evt = event || window.event;
+      evt.preventDefault();
+      getColumnData(column);
+      menuVisible.value = true;
+      const menu = document.querySelector("#tableDesignMenu");
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      menu.style.display = "block";
+      menu.style.left = event.clientX + 30 + "px";
+      menu.style.top = event.clientY + scrollTop - 22 + "px";
+    }
+    function closeMenuVisible() {
+      menuVisible.value = false;
+    }
+    function getColumnData(columnInfo) {
+      props.configure.items.forEach((Ttime, index) => {
+        if (Ttime.props.base.name == columnInfo.label) {
+          columnData.value = Ttime;
+          columnDataIndex.value = index;
+        }
+      });
+    }
+    function operationalMenuFun(type) {
+      closeMenuVisible();
+      if (type === "createCombinedHeader") {
+        let newObj = {
+          uuid: getUuidv4(),
+          name: "",
+          props: {
+            base: { name: "字段名称", tittleShow: false, sortable: true, visible: true },
+            size: {},
+            editLine: {
+              plugType: ""
+            },
+            scan: {},
+            preSuffix: {},
+            verification: {},
+            dataOrigin: {
+              staticState: [{ label: "选项1", vaule: 1 }],
+              displayQuantity: 20
+            },
+            defaultValue: {},
+            inParameter: {},
+            title: {},
+            definition: {},
+            uploadConfig: {},
+            singleWidth: {},
+            suffixModule: {},
+            tableCell: [{ value: "", label: "" }],
+            format: { icon: "" }
+          },
+          style: {
+            titleFont: {},
+            contentFont: {},
+            width: {},
+            background: {},
+            tableCell: [{ type: "", model: "" }],
+            conentPadding: {},
+            tittlePadding: {},
+            border: {},
+            shadow: {},
+            tittleClass: ""
+          }
+        };
+        props.configure.items.splice(columnDataIndex.value + 1, 0, newObj);
+        if (props.configure.props.base.isEnableGroupHeader) {
+          addColumnToGroupHeaders(props.configure.items[columnDataIndex.value + 1], null, props.configure.props.groupHeaders);
+        }
+      } else if (type === "deleteNode") {
+        ElMessageBox.confirm("当前操作会删除当前列", "Warning", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          console.log("%c描述-103732", "color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px", columnData.value);
+          deleteGroupHeaderByColumnUuid(groupHeaders, columnData.value.uuid);
+        }).catch(() => {
+        });
+      }
+    }
+    const columnData = ref({});
+    const columnDataIndex = ref(null);
+    function setColumnData(item) {
+      columnData.value = item;
+    }
+    function headerDragend(newWidth, oldWidth, column, event) {
+      event.stopPropagation();
+      console.log("%c描述-163044", "color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px", 222);
+      if (columnData.value.props && columnData.value.props.base) {
+        columnData.value.props.base.columnWidth = newWidth;
+      }
+    }
+    function addClass({ row, column, rowIndex, columnIndex }) {
+      let className = "";
+      if (hiddenColumsName.value.includes(column.label)) {
+        className = "hiddenBorder";
+      }
+      if (column.label === headerLabel.value) {
+        className = "addBorder";
+      }
+      return className;
+    }
+    function setHeaderLabel(labelValue) {
+      headerLabel.value = labelValue;
+    }
+    function cellMouseEnter(row, column) {
+      var selrange = document.getElementsByClassName(column.id);
+      for (var i = 0; i < selrange.length; i++) {
+        selrange[i].style.backgroundColor = "rgba(88, 147, 239,.1)";
+      }
+    }
+    function cellMouseLeave(row, column) {
+      var selrange = document.getElementsByClassName(column.id);
+      for (var i = 0; i < selrange.length; i++) {
+        selrange[i].style.backgroundColor = "";
+      }
+    }
+    useDraggable(".el-table__header-wrapper tr", props.configure.items, {
+      animation: 150,
+      ghostClass: "ghost",
+      onStart(event) {
+        console.log(event);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_table = resolveComponent("el-table");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_pagination = resolveComponent("el-pagination");
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(_component_el_table, {
+          ref_key: "tableRef",
+          ref: tableRef,
+          "cell-class-name": addClass,
+          "header-cell-class-name": addClass,
+          border: "",
+          class: normalizeClass(designClass.value),
+          data: tableData.value,
+          onHeaderDragend: headerDragend,
+          onHeaderContextmenu: headerContextmenu,
+          onRowClick: rowClick,
+          onCellMouseEnter: cellMouseEnter,
+          onCellMouseLeave: cellMouseLeave,
+          style: normalizeStyle(designStyle.value)
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(listColumns.value, (item) => {
+              return openBlock(), createBlock(_sfc_main$1, {
+                key: item,
+                listColumns: item,
+                designProperty: designProperty.value,
+                configure: _ctx.configure,
+                indexObj: _ctx.indexObj,
+                onSetHeaderLabel: setHeaderLabel,
+                onOnSelectWidget: onSelectWidget,
+                onSetColumnData: setColumnData,
+                onCloseMenuVisible: closeMenuVisible,
+                selectWidget: _ctx.selectWidget
+              }, null, 8, ["listColumns", "designProperty", "configure", "indexObj", "selectWidget"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["class", "data", "style"]),
+        createElementVNode("div", {
+          onClick: rowClick,
+          style: { "width": "100%", "height": "30px" }
+        }),
+        withDirectives(createElementVNode("div", null, [
+          createElementVNode("ul", _hoisted_1, [
+            createElementVNode("li", {
+              tabindex: "-1",
+              onClick: _cache[0] || (_cache[0] = () => operationalMenuFun("createCombinedHeader"))
+            }, [
+              createVNode(_component_el_icon, null, {
+                default: withCtx(() => [
+                  createVNode(unref(Plus))
+                ]),
+                _: 1
+              }),
+              createTextVNode(" 创建 ")
+            ]),
+            columnData.value.props && columnData.value.props.base && columnData.value.props.base.prop !== "$selection" && columnData.value.props.base.prop !== "$index" ? (openBlock(), createElementBlock("li", {
+              key: 0,
+              tabindex: "-1",
+              onClick: _cache[1] || (_cache[1] = () => operationalMenuFun("deleteNode"))
+            }, [
+              createVNode(_component_el_icon, null, {
+                default: withCtx(() => [
+                  createVNode(unref(Delete))
+                ]),
+                _: 1
+              }),
+              createTextVNode(" 删除 ")
+            ])) : createCommentVNode("", true)
+          ], 512)
+        ], 512), [
+          [vShow, menuVisible.value]
+        ]),
+        designProperty.value.subPaging ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_el_pagination, {
+            "current-page": currentPage.value,
+            "onUpdate:currentPage": _cache[2] || (_cache[2] = ($event) => currentPage.value = $event),
+            "page-size": pageSize.value,
+            "onUpdate:pageSize": _cache[3] || (_cache[3] = ($event) => pageSize.value = $event),
+            "page-sizes": designProperty.value.pageSizes,
+            layout: designProperty.value.layout,
+            total: 400
+          }, null, 8, ["current-page", "page-size", "page-sizes", "layout"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/design/views/assemblys/data/table/table-design2.css

@@ -0,0 +1,32 @@
+
+li[data-v-7d20e187] {
+	color: #333;
+}
+.context-menu[data-v-7d20e187] {
+	position: fixed;
+	background: #fff;
+	z-index: 999;
+	padding: 5px;
+	margin: 0;
+	margin-top: 30px;
+}
+.context-menu li[data-v-7d20e187] {
+	min-width: 75px;
+	height: 28px;
+	line-height: 28px;
+	text-align: left;
+	color: #1a1a1a;
+	cursor: pointer;
+}
+.context-menu li[data-v-7d20e187]:hover {
+	background: #5893ef;
+	color: #fff;
+}
+.context-menu[data-v-7d20e187] {
+	border: 1px solid #eee;
+	box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+}
+li[data-v-7d20e187] {
+	list-style-type: none;
+}