@ganwei-web/gw-base-components-plus 1.0.6 → 1.0.8

package/element-plus-adapter/dist/ElementPlusAdapter.cjs

@@ -288,6 +288,21 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
 });
 const index_vue_vue_type_style_index_0_lang$d = "";
 /*! Element Plus Icons Vue v2.3.2 */
+var _sfc_main187 = /* @__PURE__ */ vue.defineComponent({
+  name: "Operation",
+  __name: "operation",
+  setup(__props) {
+    return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "M389.44 768a96.064 96.064 0 0 1 181.12 0H896v64H570.56a96.064 96.064 0 0 1-181.12 0H128v-64zm192-288a96.064 96.064 0 0 1 181.12 0H896v64H762.56a96.064 96.064 0 0 1-181.12 0H128v-64zm-320-288a96.064 96.064 0 0 1 181.12 0H896v64H442.56a96.064 96.064 0 0 1-181.12 0H128v-64z"
+      })
+    ]));
+  }
+}), operation_default = _sfc_main187;
 var _sfc_main197 = /* @__PURE__ */ vue.defineComponent({
   name: "Picture",
   __name: "picture",
@@ -307,7 +322,7 @@ var _sfc_main197 = /* @__PURE__ */ vue.defineComponent({
     ]));
   }
 }), picture_default = _sfc_main197;
-const _hoisted_1 = { class: "error-slot" };
+const _hoisted_1$1 = { class: "error-slot" };
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -364,7 +379,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         !_ctx.$slots.error ? {
           name: "error",
           fn: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", _hoisted_1$1, [
               vue.createVNode(_component_el_icon, null, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(picture_default))
@@ -706,30 +721,31 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function useResizeTable() {
+function useResizeTable(props) {
   const instance = vue.getCurrentInstance();
-  const height = vue.ref();
-  let el = null;
-  vue.onMounted(() => {
-    resizeTable();
-    window.addEventListener("resize", resizeTable);
-  });
-  vue.onBeforeUnmount(() => {
-    window.removeEventListener("resize", resizeTable);
-  });
+  const height = vue.ref(props.height);
+  if (props.autoHeight) {
+    vue.onMounted(() => {
+      resizeTable();
+      window.addEventListener("resize", resizeTable);
+    });
+    vue.onBeforeUnmount(() => {
+      window.removeEventListener("resize", resizeTable);
+    });
+  }
   function getPxNumber(value) {
     if (value.endsWith("px")) {
       return Number(value.slice(0, -2));
     }
     return 0;
   }
-  function getElementHeight(el2) {
-    const stylesheet = getComputedStyle(el2);
-    return el2.clientHeight || getPxNumber(stylesheet.height);
+  function getElementHeight(el) {
+    const stylesheet = getComputedStyle(el);
+    return el.clientHeight || getPxNumber(stylesheet.height);
   }
   function resizeTable() {
     var _a, _b;
-    el = (_b = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$el) == null ? void 0 : _b.parentElement;
+    let el = (_b = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$el) == null ? void 0 : _b.parentElement;
     if (el) {
       const stylesheet = getComputedStyle(el);
       height.value = getElementHeight(el) - getPxNumber(stylesheet.paddingTop) - getPxNumber(stylesheet.paddingBottom);
@@ -737,35 +753,509 @@ function useResizeTable() {
   }
   return height;
 }
+const _hoisted_1 = { class: "gw-table-container" };
+const _hoisted_2 = { class: "column-filter-content" };
+const _hoisted_3 = { class: "filter-input-container" };
+const _hoisted_4 = { class: "equipList-table-group-checkbox" };
+const _hoisted_5 = { class: "equipList-table-group-botton" };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
     height: {
       type: Number,
       default: null
+    },
+    autoHeight: {
+      type: Boolean,
+      default: true
+    },
+    showColumnFilter: {
+      type: Boolean,
+      default: false
+    },
+    tableName: {
+      type: String,
+      default: "default-table"
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    onFetchColumns: {
+      type: Function,
+      default: null
+    },
+    onSaveColumns: {
+      type: Function,
+      default: null
+    },
+    onColumnChange: {
+      type: Function,
+      default: null
     }
   },
   setup(__props, { expose: __expose }) {
     const proxyElement = vue.ref();
+    const attrs = vue.useAttrs();
+    const tableAttrs = vue.computed(() => {
+      const { height, autoHeight, showColumnFilter, tableName, columns, onFetchColumns, onSaveColumns, onColumnChange, ...restAttrs } = attrs;
+      return restAttrs;
+    });
     const expose = useExpose(proxyElement);
     __expose(expose);
-    const tableHeight = useResizeTable();
+    const props = __props;
+    const popoverVisible = vue.ref(false);
+    const filterKeyword = vue.ref("");
+    const checkedColumns = vue.ref([]);
+    const allColumns = vue.ref([]);
+    const contentLoading = vue.ref(false);
+    const resetLoading = vue.ref(false);
+    const loading = vue.ref(false);
+    const filteredColumnsList = vue.computed(() => {
+      if (!filterKeyword.value) {
+        return allColumns.value;
+      }
+      return allColumns.value.filter(
+        (column) => column.label.toLowerCase().includes(filterKeyword.value.toLowerCase())
+      );
+    });
+    const toggleFilterPopover = () => {
+      popoverVisible.value = !popoverVisible.value;
+      if (popoverVisible.value && allColumns.value.length === 0) {
+        initColumns();
+      }
+    };
+    const initColumns = () => {
+      if (props.columns && props.columns.length > 0) {
+        allColumns.value = [...props.columns];
+        checkedColumns.value = allColumns.value.map((col) => col.prop || col.label);
+        return;
+      }
+      vue.nextTick(() => {
+        if (proxyElement.value) {
+          const tableHeader = proxyElement.value.$el.querySelector(".el-table__header-wrapper");
+          if (tableHeader) {
+            const thElements = tableHeader.querySelectorAll("th");
+            const columns = [];
+            thElements.forEach((th, index2) => {
+              if (index2 > 0) {
+                const cell = th.querySelector(".cell");
+                if (cell) {
+                  const label = cell.textContent.trim();
+                  if (label) {
+                    columns.push({
+                      prop: `col_${index2}`,
+                      label
+                    });
+                  }
+                }
+              }
+            });
+            if (columns.length > 0) {
+              allColumns.value = columns;
+              checkedColumns.value = columns.map((col) => col.prop);
+            }
+          }
+        }
+      });
+    };
+    const fetchPageColumns = async () => {
+      if (!props.tableName || !props.onFetchColumns)
+        return;
+      contentLoading.value = true;
+      try {
+        const data = await props.onFetchColumns(props.tableName);
+        if (data && Array.isArray(data)) {
+          const selectedProps = data;
+          checkedColumns.value = allColumns.value.filter((col) => selectedProps.includes(col.label || col.prop)).map((col) => col.prop);
+          if (checkedColumns.value.length === 0 && allColumns.value.length > 0) {
+            checkedColumns.value = [allColumns.value[0].prop];
+          }
+          applyColumnFilter();
+        }
+      } catch (error) {
+        console.error("获取列配置失败:", error);
+        checkedColumns.value = allColumns.value.map((col) => col.prop);
+        applyColumnFilter();
+      } finally {
+        contentLoading.value = false;
+      }
+    };
+    const savePageColumns = async () => {
+      if (!props.tableName || !props.onSaveColumns) {
+        popoverVisible.value = false;
+        return;
+      }
+      loading.value = true;
+      try {
+        const selectedLabels = checkedColumns.value.map((prop) => {
+          const column = allColumns.value.find((col) => col.prop === prop);
+          return column ? column.label : prop;
+        });
+        await props.onSaveColumns(props.tableName, selectedLabels);
+        popoverVisible.value = false;
+      } catch (error) {
+        console.error("保存列配置失败:", error);
+      } finally {
+        loading.value = false;
+      }
+    };
+    const resetColumns = () => {
+      resetLoading.value = true;
+      checkedColumns.value = allColumns.value.map((col) => col.prop);
+      applyColumnFilter();
+      setTimeout(() => {
+        savePageColumns();
+      }, 300);
+    };
+    const saveColumns = () => {
+      applyColumnFilter();
+      savePageColumns();
+    };
+    const handleColumnChange = (value) => {
+      if (value.length === 0) {
+        checkedColumns.value = [allColumns.value[0].prop];
+        return;
+      }
+      applyColumnFilter();
+    };
+    const applyColumnFilter = () => {
+      if (!proxyElement.value)
+        return;
+      const tableHeader = proxyElement.value.$el.querySelector(".el-table__header-wrapper");
+      const tableBody = proxyElement.value.$el.querySelector(".el-table__body-wrapper");
+      if (!tableHeader || !tableBody)
+        return;
+      const thElements = tableHeader.querySelectorAll("th");
+      const trElements = tableBody.querySelectorAll("tr");
+      const propToTableIndex = {};
+      thElements.forEach((th, index2) => {
+        if (index2 > 0) {
+          const cell = th.querySelector(".cell");
+          if (cell) {
+            const label = cell.textContent.trim();
+            const column = allColumns.value.find((col) => col.label === label);
+            if (column) {
+              propToTableIndex[column.prop] = index2;
+            } else {
+              propToTableIndex[`col_${index2}`] = index2;
+            }
+          }
+        }
+      });
+      thElements.forEach((th, index2) => {
+        if (index2 > 0) {
+          const cell = th.querySelector(".cell");
+          if (cell) {
+            const label = cell.textContent.trim();
+            const column = allColumns.value.find((col) => col.label === label);
+            const prop = column ? column.prop : `col_${index2}`;
+            th.style.display = checkedColumns.value.includes(prop) ? "" : "none";
+          }
+        }
+      });
+      trElements.forEach((row) => {
+        const tdElements = row.querySelectorAll("td");
+        tdElements.forEach((td, index2) => {
+          if (index2 > 0) {
+            const prop = `col_${index2}`;
+            td.style.display = checkedColumns.value.includes(prop) ? "" : "none";
+          }
+        });
+      });
+      const data = {
+        tableName: props.tableName,
+        checkedColumns: [...checkedColumns.value]
+      };
+      if (props.onColumnChange) {
+        props.onColumnChange(data);
+      }
+      vue.nextTick(() => {
+        adjustTableWidth();
+      });
+    };
+    const adjustTableWidth = () => {
+      if (!proxyElement.value)
+        return;
+      const tableContainer = proxyElement.value.$el.querySelector(".el-table");
+      if (!tableContainer)
+        return;
+      tableContainer.classList.add("el-table--auto-width");
+      const tableWidth = tableContainer.offsetWidth;
+      const allThElements = proxyElement.value.$el.querySelectorAll(".el-table__header-wrapper th");
+      const visibleColumns = [];
+      allThElements.forEach((th, index2) => {
+        if (index2 > 0 && th.style.display !== "none") {
+          const cell = th.querySelector(".cell");
+          if (cell) {
+            const label = cell.textContent.trim();
+            const column = allColumns.value.find((col) => col.label === label);
+            if (column) {
+              visibleColumns.push({
+                index: index2,
+                prop: column.prop,
+                label,
+                minWidth: 80
+                // 最小宽度
+              });
+            }
+          }
+        }
+      });
+      if (visibleColumns.length === 0)
+        return;
+      const firstColumnWidth = allThElements[0] ? allThElements[0].offsetWidth : 50;
+      const availableWidth = tableWidth - firstColumnWidth - 20;
+      const minTotalWidth = visibleColumns.reduce((sum, col) => sum + col.minWidth, 0);
+      const table = proxyElement.value.$el.querySelector(".el-table__body-wrapper table");
+      if (table) {
+        table.style.tableLayout = "fixed";
+      }
+      const tableBody = proxyElement.value.$el.querySelector(".el-table__body");
+      const tableHeader = proxyElement.value.$el.querySelector(".el-table__header");
+      if (tableBody) {
+        tableBody.style.width = "100%";
+      }
+      if (tableHeader) {
+        tableHeader.style.width = "100%";
+      }
+      allThElements.forEach((th, index2) => {
+        if (index2 > 0) {
+          th.style.width = "auto";
+          th.style.minWidth = "80px";
+          th.style.maxWidth = "none";
+          const tdElements = proxyElement.value.$el.querySelectorAll(`.el-table__body-wrapper tr td:nth-child(${index2 + 1})`);
+          tdElements.forEach((td) => {
+            td.style.width = "auto";
+            td.style.minWidth = "80px";
+            td.style.maxWidth = "none";
+          });
+        }
+      });
+      vue.nextTick(() => {
+        var _a;
+        if (availableWidth <= minTotalWidth) {
+          visibleColumns.forEach((col) => {
+            const th = allThElements[col.index];
+            if (th) {
+              th.style.width = `${col.minWidth}px`;
+              th.style.minWidth = `${col.minWidth}px`;
+              th.style.maxWidth = "none";
+              const tdElements = proxyElement.value.$el.querySelectorAll(`.el-table__body-wrapper tr td:nth-child(${col.index + 1})`);
+              tdElements.forEach((td) => {
+                td.style.width = `${col.minWidth}px`;
+                td.style.minWidth = `${col.minWidth}px`;
+                td.style.maxWidth = "none";
+              });
+            }
+          });
+        } else {
+          let totalWeight = 0;
+          visibleColumns.forEach((col) => {
+            const contentLength = Math.max(col.label.length, 5);
+            col.weight = Math.max(contentLength * 10, col.minWidth);
+            totalWeight += col.weight;
+          });
+          let allocatedWidth = 0;
+          visibleColumns.forEach((col, i) => {
+            const th = allThElements[col.index];
+            if (th) {
+              let newWidth;
+              if (i === visibleColumns.length - 1) {
+                newWidth = availableWidth - allocatedWidth;
+              } else {
+                const weightedWidth = col.weight / totalWeight * availableWidth;
+                newWidth = Math.max(weightedWidth, col.minWidth);
+                allocatedWidth += newWidth;
+              }
+              newWidth = Math.max(newWidth, col.minWidth);
+              th.style.width = `${newWidth}px`;
+              th.style.minWidth = `${col.minWidth}px`;
+              th.style.maxWidth = "none";
+              const tdElements = proxyElement.value.$el.querySelectorAll(`.el-table__body-wrapper tr td:nth-child(${col.index + 1})`);
+              tdElements.forEach((td) => {
+                td.style.width = `${newWidth}px`;
+                td.style.minWidth = `${col.minWidth}px`;
+                td.style.maxWidth = "none";
+              });
+            }
+          });
+        }
+        if (table) {
+          table.style.width = "100%";
+          const tableInstance = (_a = tableContainer.__vueParentComponent) == null ? void 0 : _a.ctx;
+          if (tableInstance && tableInstance.doLayout) {
+            tableInstance.doLayout();
+          }
+        }
+      });
+    };
+    vue.watch(() => props.columns, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        allColumns.value = [...newVal];
+        checkedColumns.value = allColumns.value.map((col) => col.prop || col.label);
+        if (props.showColumnFilter) {
+          fetchPageColumns();
+        }
+      }
+    }, { immediate: true, deep: true });
+    vue.watch(() => props.showColumnFilter, (newVal) => {
+      if (newVal && allColumns.value.length > 0) {
+        fetchPageColumns();
+      }
+    }, { immediate: true });
+    const tableHeight = useResizeTable(props);
+    vue.onMounted(() => {
+      if (props.showColumnFilter) {
+        const observer = new MutationObserver((_mutations, obs) => {
+          var _a;
+          const tableHeader = (_a = proxyElement.value.$el) == null ? void 0 : _a.querySelector(".el-table__header-wrapper");
+          if (tableHeader) {
+            obs.disconnect();
+            requestAnimationFrame(() => {
+              setTimeout(() => {
+                initColumns();
+                fetchPageColumns();
+              }, 300);
+            });
+          }
+        });
+        observer.observe(proxyElement.value.$el, {
+          childList: true,
+          subtree: true
+        });
+        setTimeout(() => {
+          var _a;
+          if (!((_a = proxyElement.value.$el) == null ? void 0 : _a.querySelector(".el-table__header-wrapper"))) {
+            observer.disconnect();
+            requestAnimationFrame(() => {
+              initColumns();
+              fetchPageColumns();
+            });
+          }
+        }, 1e3);
+      }
+    });
     useDataTestId();
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTable), {
-        height: vue.unref(tableHeight),
-        ref_key: "proxyElement",
-        ref: proxyElement
-      }, vue.createSlots({ _: 2 }, [
-        vue.renderList(_ctx.$slots, (value, key) => {
-          return {
-            name: key,
-            fn: vue.withCtx((slotProps) => [
-              vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+      const _directive_loading = vue.resolveDirective("loading");
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createVNode(vue.unref(elementPlus.ElTable), vue.mergeProps(tableAttrs.value, {
+            height: vue.unref(tableHeight),
+            ref_key: "proxyElement",
+            ref: proxyElement
+          }), vue.createSlots({
+            empty: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "noDataTips" }, null, -1))
+              ])
+            ]),
+            _: 2
+          }, [
+            vue.renderList(_ctx.$slots, (_, key) => {
+              return {
+                name: key,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                ])
+              };
+            })
+          ]), 1040, ["height"]),
+          __props.showColumnFilter ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "filter-icon",
+            onClick: toggleFilterPopover
+          }, [
+            vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(operation_default))
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        vue.createVNode(vue.unref(elementPlus.ElPopover), {
+          visible: popoverVisible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => popoverVisible.value = $event),
+          placement: "bottom-end",
+          width: 220,
+          trigger: "click",
+          "popper-class": "equipList-table-popover",
+          teleported: true
+        }, {
+          reference: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+            vue.createElementVNode("div", { style: { "display": "none" } }, null, -1)
+          ])]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2, [
+              _cache[7] || (_cache[7] = vue.createElementVNode("p", { class: "filter-title" }, "展示列表", -1)),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(vue.unref(elementPlus.ElInput), {
+                  modelValue: filterKeyword.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterKeyword.value = $event),
+                  placeholder: "搜索列名...",
+                  clearable: "",
+                  size: "small"
+                }, null, 8, ["modelValue"])
+              ]),
+              vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                vue.createVNode(vue.unref(elementPlus.ElCheckboxGroup), {
+                  modelValue: checkedColumns.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checkedColumns.value = $event),
+                  onChange: handleColumnChange
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredColumnsList.value, (column) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: column.prop,
+                        class: "checkbox-item"
+                      }, [
+                        vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
+                          label: column.prop
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(vue.toDisplayString(column.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["label"])
+                      ]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"])
+              ])), [
+                [_directive_loading, contentLoading.value]
+              ]),
+              vue.createElementVNode("div", _hoisted_5, [
+                vue.createVNode(vue.unref(elementPlus.ElButton), {
+                  type: "primary",
+                  size: "small",
+                  onClick: resetColumns,
+                  loading: resetLoading.value
+                }, {
+                  default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
+                    vue.createTextVNode("重置", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["loading"]),
+                vue.createVNode(vue.unref(elementPlus.ElButton), {
+                  type: "primary",
+                  size: "small",
+                  onClick: saveColumns,
+                  loading: loading.value
+                }, {
+                  default: vue.withCtx(() => [..._cache[6] || (_cache[6] = [
+                    vue.createTextVNode("确认", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["loading"])
+              ])
             ])
-          };
-        })
-      ]), 1032, ["height"]);
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ], 64);
     };
   }
 });