ele-admin-plus 1.2.2-beta.4 → 1.3.1-beta.1

package/es/ele-pro-form-builder/components/tree-table.js

@@ -0,0 +1,239 @@
+import { defineComponent, ref, watch, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, normalizeStyle, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import EleTable from "../../ele-table/index";
+const _hoisted_1 = ["width"];
+const _hoisted_2 = ["colspan", "rowspan"];
+const _hoisted_3 = ["rowspan", "colspan"];
+const _hoisted_4 = {
+  key: 0,
+  class: "is-empty-tr"
+};
+const _hoisted_5 = ["colspan"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tree-table",
+  props: {
+    data: {},
+    columns: {},
+    headerStyle: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const tableHeader = ref([]);
+    const tableBody = ref([]);
+    const tableCols = ref([]);
+    const analyseTreeData = (data, childrenField, level = 0, parents = []) => {
+      const treeNodes = [];
+      let maxDepth = 0;
+      data.forEach((item, index) => {
+        const node = { item, index, level, childSize: 0 };
+        treeNodes.push(node);
+        parents.forEach((parent) => {
+          parent.childSize++;
+        });
+        const children = item[childrenField];
+        if (children && children.length) {
+          const { depth, nodes } = analyseTreeData(
+            children,
+            childrenField,
+            level + 1,
+            [...parents, node]
+          );
+          maxDepth = Math.max(maxDepth, depth);
+          nodes.forEach((n) => {
+            treeNodes.push(n);
+          });
+        }
+      });
+      return { depth: maxDepth + 1, nodes: treeNodes };
+    };
+    const getTableData = (data, columns, childrenField = "children") => {
+      const { nodes, depth } = analyseTreeData(data, childrenField);
+      const showTreeIndex = depth > 1;
+      const bodyCols = columns.map((col) => {
+        return {
+          key: col.key ?? col.prop,
+          width: col.width,
+          column: col
+        };
+      });
+      const bodyData = [];
+      nodes.forEach((node, index) => {
+        const item = node.item;
+        const bodyRowData = [];
+        bodyCols.forEach((col, colIndex) => {
+          const key = `${index}-${colIndex}-${col.key}`;
+          bodyRowData.push({
+            key,
+            item,
+            column: col.column,
+            treeLevel: node.level
+          });
+        });
+        bodyData.push(bodyRowData);
+        if (showTreeIndex) {
+          for (let i = depth - 1; i >= 0; i--) {
+            const colspan = i < node.level ? 0 : 1;
+            bodyRowData.unshift({
+              key: `_index_${index}-${i}`,
+              treeLevel: node.level,
+              colspan,
+              rowspan: i === node.level ? node.childSize + 1 : colspan,
+              isTreeIndex: true,
+              treeIndex: i === node.level ? node.index + 1 : void 0,
+              hideLeftBorder: i === node.level ? false : true
+            });
+          }
+        } else {
+          bodyRowData.unshift({
+            key: `_index_${index}-0`,
+            isTreeIndex: true,
+            treeIndex: index + 1
+          });
+        }
+      });
+      const headerData = [];
+      const headerRowData = [];
+      bodyCols.forEach((col, colIndex) => {
+        const key = `${colIndex}-${col.key}`;
+        headerRowData.push({ key, column: col.column });
+      });
+      headerData.push(headerRowData);
+      if (showTreeIndex) {
+        for (let i = depth - 1; i >= 0; i--) {
+          headerRowData.unshift({
+            key: `_index-${i}`,
+            colspan: i === 0 ? depth : 0,
+            rowspan: i === 0 ? 1 : 0,
+            isTreeIndex: true
+          });
+        }
+      } else {
+        headerRowData.unshift({ key: "_index-0", isTreeIndex: true });
+      }
+      if (showTreeIndex) {
+        for (let i = depth - 1; i >= 0; i--) {
+          bodyCols.unshift({ key: `_index_${i}`, width: "24px" });
+        }
+      } else {
+        bodyCols.unshift({ key: `_index_0`, width: "24px" });
+      }
+      return { headerData, bodyData, bodyCols };
+    };
+    watch(
+      [() => props.data, () => props.columns],
+      () => {
+        if (!props.columns || !props.columns.length) {
+          tableHeader.value = [];
+          tableBody.value = [];
+          tableCols.value = [];
+          return;
+        }
+        const { headerData, bodyData, bodyCols } = getTableData(
+          props.data || [],
+          props.columns
+        );
+        tableHeader.value = headerData;
+        tableBody.value = bodyData;
+        tableCols.value = bodyCols;
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(EleTable, {
+        border: true,
+        class: "ele-pro-form-builder-tree-table"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("colgroup", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tableCols.value, (col) => {
+              return openBlock(), createElementBlock("col", {
+                key: col.key,
+                width: col.width
+              }, null, 8, _hoisted_1);
+            }), 128))
+          ]),
+          createElementVNode("thead", {
+            style: normalizeStyle(_ctx.headerStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeader.value, (item, index) => {
+              return openBlock(), createElementBlock("tr", { key: index }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(item, (cell) => {
+                  var _a, _b;
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: cell.key
+                  }, [
+                    !cell.isTreeIndex ? (openBlock(), createElementBlock("th", {
+                      key: 0,
+                      style: normalizeStyle((_a = cell.column) == null ? void 0 : _a.style),
+                      class: normalizeClass((_b = cell.column) == null ? void 0 : _b.class)
+                    }, [
+                      renderSlot(_ctx.$slots, "headerCell", {
+                        column: cell.column
+                      }, () => {
+                        var _a2;
+                        return [
+                          createTextVNode(toDisplayString((_a2 = cell.column) == null ? void 0 : _a2.label), 1)
+                        ];
+                      })
+                    ], 6)) : cell.rowspan !== 0 && cell.colspan !== 0 ? (openBlock(), createElementBlock("th", {
+                      key: 1,
+                      colspan: cell.colspan,
+                      rowspan: cell.rowspan,
+                      class: "is-tree-index"
+                    }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ]);
+            }), 128))
+          ], 4),
+          createElementVNode("tbody", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tableBody.value, (item, index) => {
+              return openBlock(), createElementBlock("tr", { key: index }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(item, (cell) => {
+                  var _a, _b;
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: cell.key
+                  }, [
+                    !cell.isTreeIndex ? (openBlock(), createElementBlock("td", {
+                      key: 0,
+                      style: normalizeStyle((_a = cell.column) == null ? void 0 : _a.style),
+                      class: normalizeClass((_b = cell.column) == null ? void 0 : _b.class)
+                    }, [
+                      renderSlot(_ctx.$slots, "bodyCell", {
+                        row: cell.item,
+                        rowIndex: index,
+                        column: cell.column,
+                        treeLevel: cell.treeLevel
+                      }, () => [
+                        createTextVNode(toDisplayString(cell.item && cell.column && cell.column.prop != null ? cell.item[cell.column.prop] : ""), 1)
+                      ])
+                    ], 6)) : cell.rowspan !== 0 && cell.colspan !== 0 ? (openBlock(), createElementBlock("td", {
+                      key: 1,
+                      rowspan: cell.rowspan,
+                      colspan: cell.colspan,
+                      style: normalizeStyle({
+                        borderLeftColor: cell.hideLeftBorder ? "transparent" : void 0
+                      }),
+                      class: "is-tree-index"
+                    }, toDisplayString(cell.treeIndex), 13, _hoisted_3)) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ]);
+            }), 128)),
+            !tableBody.value.length ? (openBlock(), createElementBlock("tr", _hoisted_4, [
+              createElementVNode("td", {
+                colspan: tableCols.value.length
+              }, "无数据", 8, _hoisted_5)
+            ])) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};