yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-pro-table/components/table-tools.cjs

@@ -0,0 +1,365 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const EleDropdown = require("../../ele-dropdown/index");
+const receiver = require("../../ele-config-provider/receiver");
+const util = require("../util");
+const EleTool = require("../../ele-tool/index");
+const ToolColumn = require("./tool-column");
+const ToolExport = require("./tool-export");
+const ToolPrint = require("./tool-print");
+const ownSlots = ["default", "printTop", "printBottom"];
+const _sfc_main = vue.defineComponent({
+  name: "TableTools",
+  components: {
+    ElIcon: elementPlus.ElIcon,
+    ReloadOutlined: icons.ReloadOutlined,
+    DownloadOutlined: icons.DownloadOutlined,
+    PrinterOutlined: icons.PrinterOutlined,
+    ColumnHeightOutlined: icons.ColumnHeightOutlined,
+    FullscreenOutlined: icons.FullscreenOutlined,
+    FullscreenExitOutlined: icons.FullscreenExitOutlined,
+    EleDropdown,
+    EleTool,
+    ToolColumn,
+    ToolExport,
+    ToolPrint
+  },
+  props: {
+    /** 工具按钮布局 */
+    tools: {
+      type: Array,
+      required: true
+    },
+    /** 表格尺寸 */
+    size: String,
+    /** 表格列数据 */
+    columns: Array,
+    /** 是否开启列拖拽排序 */
+    columnSortable: Boolean,
+    /** 是否开启开关固定列 */
+    columnFixed: Boolean,
+    /** 是否最大化 */
+    maximized: Boolean,
+    /** 本地缓存的名称 */
+    cacheKey: String,
+    /** 国际化 */
+    locale: Object,
+    /** 表格选中数据 */
+    selections: Array,
+    /** 表格当前页数据 */
+    pageData: Array,
+    /** 单元格合并行列方法 */
+    spanMethod: Function,
+    /** 表格是否有表头 */
+    tableHeader: Boolean,
+    /** 是否显示合计行 */
+    showSummary: Boolean,
+    /** 合计行文本 */
+    sumText: String,
+    /** 合计行自定义方法 */
+    summaryMethod: Function,
+    /** 单元格样式 */
+    cellStyle: [Object, Function],
+    /** 单元格类名自定义 */
+    cellClassName: [String, Function],
+    /** 单元格样式 */
+    headerCellStyle: [Object, Function],
+    /** 单元格类名自定义 */
+    headerCellClassName: [String, Function],
+    /** 序号列起始索引 */
+    pageIndex: Number,
+    /** 树表字段名 */
+    treeProps: Object,
+    /** 表格请求数据方法 */
+    fetch: Function,
+    /** 导出配置 */
+    exportConfig: {
+      type: Object,
+      required: true
+    },
+    /** 打印配置 */
+    printConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    reload: () => true,
+    "update:size": (_size) => true,
+    "update:columns": (_columns, _tableColumns, _isReset) => true,
+    "update:maximized": (_maximized) => true
+  },
+  setup(props, { emit }) {
+    const { lang } = receiver.useLocale("table", props);
+    const toolExportRef = vue.ref(null);
+    const toolPrintRef = vue.ref(null);
+    const placement = vue.computed(() => props.maximized ? "bottom" : "top");
+    const sizeDropdownItems = vue.computed(() => {
+      return [
+        {
+          title: lang.value.sizeLarge,
+          command: "large",
+          icon: vue.markRaw(icons.SizeSlackOutlined)
+        },
+        {
+          title: lang.value.sizeDefault,
+          command: "default",
+          icon: vue.markRaw(icons.SizeMiddleOutlined)
+        },
+        {
+          title: lang.value.sizeSmall,
+          command: "small",
+          icon: vue.markRaw(icons.SizeCompactOutlined)
+        }
+      ];
+    });
+    const reload = () => {
+      emit("reload");
+    };
+    const updateSize = (size) => {
+      if (props.cacheKey) {
+        localStorage.setItem(util.getSizeCacheKey(props.cacheKey), size);
+      }
+      emit("update:size", size);
+    };
+    const updateColumns = (columns, tableColumns, isReset) => {
+      emit("update:columns", columns, tableColumns, isReset);
+    };
+    const toggleMaximized = () => {
+      emit("update:maximized", !props.maximized);
+    };
+    const openExportModal = () => {
+      if (toolExportRef.value) {
+        toolExportRef.value.openModal();
+      }
+    };
+    const openPrintModal = () => {
+      if (toolPrintRef.value) {
+        toolPrintRef.value.openModal();
+      }
+    };
+    const printData = (params) => {
+      if (toolPrintRef.value) {
+        toolPrintRef.value.printData(params);
+      }
+    };
+    const exportData = (params) => {
+      if (toolExportRef.value) {
+        toolExportRef.value.exportData(params);
+      }
+    };
+    return {
+      ownSlots,
+      lang,
+      toolExportRef,
+      toolPrintRef,
+      placement,
+      sizeDropdownItems,
+      reload,
+      updateSize,
+      updateColumns,
+      toggleMaximized,
+      openExportModal,
+      openPrintModal,
+      printData,
+      exportData
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ToolExport = vue.resolveComponent("ToolExport");
+  const _component_ToolPrint = vue.resolveComponent("ToolPrint");
+  const _component_ReloadOutlined = vue.resolveComponent("ReloadOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_EleTool = vue.resolveComponent("EleTool");
+  const _component_DownloadOutlined = vue.resolveComponent("DownloadOutlined");
+  const _component_PrinterOutlined = vue.resolveComponent("PrinterOutlined");
+  const _component_ColumnHeightOutlined = vue.resolveComponent("ColumnHeightOutlined");
+  const _component_EleDropdown = vue.resolveComponent("EleDropdown");
+  const _component_ToolColumn = vue.resolveComponent("ToolColumn");
+  const _component_FullscreenExitOutlined = vue.resolveComponent("FullscreenExitOutlined");
+  const _component_FullscreenOutlined = vue.resolveComponent("FullscreenOutlined");
+  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createVNode(_component_ToolExport, {
+      ref: "toolExportRef",
+      locale: _ctx.lang,
+      cacheKey: _ctx.cacheKey,
+      modalProps: _ctx.exportConfig.modalProps,
+      columns: _ctx.exportConfig.columns || _ctx.columns,
+      selections: _ctx.selections,
+      pageData: _ctx.pageData,
+      datasource: _ctx.exportConfig.datasource,
+      spanMethod: _ctx.spanMethod,
+      tableHeader: _ctx.exportConfig.showHeader ?? _ctx.tableHeader,
+      showSummary: _ctx.showSummary,
+      sumText: _ctx.sumText,
+      summaryMethod: _ctx.summaryMethod,
+      pageIndex: _ctx.pageIndex,
+      treeProps: _ctx.treeProps,
+      fetch: _ctx.fetch,
+      defaultFileName: _ctx.exportConfig.fileName,
+      defaultDataType: _ctx.exportConfig.dataType,
+      defaultShowFooter: _ctx.exportConfig.showFooter,
+      defaultShowTreeIndex: _ctx.exportConfig.showTreeIndex,
+      beforeExport: _ctx.exportConfig.beforeExport
+    }, null, 8, ["locale", "cacheKey", "modalProps", "columns", "selections", "pageData", "datasource", "spanMethod", "tableHeader", "showSummary", "sumText", "summaryMethod", "pageIndex", "treeProps", "fetch", "defaultFileName", "defaultDataType", "defaultShowFooter", "defaultShowTreeIndex", "beforeExport"]),
+    vue.createVNode(_component_ToolPrint, {
+      ref: "toolPrintRef",
+      locale: _ctx.lang,
+      cacheKey: _ctx.cacheKey,
+      modalProps: _ctx.printConfig.modalProps,
+      printerProps: _ctx.printConfig.printerProps,
+      tableProps: _ctx.printConfig.tableProps,
+      columns: _ctx.printConfig.columns || _ctx.columns,
+      selections: _ctx.selections,
+      pageData: _ctx.pageData,
+      datasource: _ctx.printConfig.datasource,
+      spanMethod: _ctx.spanMethod,
+      tableHeader: _ctx.printConfig.showHeader ?? _ctx.tableHeader,
+      showSummary: _ctx.showSummary,
+      sumText: _ctx.sumText,
+      summaryMethod: _ctx.summaryMethod,
+      cellStyle: _ctx.cellStyle,
+      cellClassName: _ctx.cellClassName,
+      headerCellStyle: _ctx.headerCellStyle,
+      headerCellClassName: _ctx.headerCellClassName,
+      pageIndex: _ctx.pageIndex,
+      treeProps: _ctx.treeProps,
+      fetch: _ctx.fetch,
+      defaultDataType: _ctx.printConfig.dataType,
+      defaultShowFooter: _ctx.printConfig.showFooter,
+      defaultShowTreeIndex: _ctx.printConfig.showTreeIndex,
+      beforePrint: _ctx.printConfig.beforePrint
+    }, vue.createSlots({ _: 2 }, [
+      vue.renderList(Object.keys(_ctx.$slots), (name) => {
+        return {
+          name,
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ])
+        };
+      })
+    ]), 1032, ["locale", "cacheKey", "modalProps", "printerProps", "tableProps", "columns", "selections", "pageData", "datasource", "spanMethod", "tableHeader", "showSummary", "sumText", "summaryMethod", "cellStyle", "cellClassName", "headerCellStyle", "headerCellClassName", "pageIndex", "treeProps", "fetch", "defaultDataType", "defaultShowFooter", "defaultShowTreeIndex", "beforePrint"]),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tools, (tool, index) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        tool === "reload" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+          key: index + "-reload",
+          placement: _ctx.placement,
+          title: _ctx.lang.refresh,
+          onClick: _ctx.reload
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_ReloadOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["placement", "title", "onClick"])) : tool === "export" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+          key: index + "-export",
+          title: _ctx.lang.export,
+          placement: _ctx.placement,
+          clickHideTooltip: true,
+          onClick: _ctx.openExportModal
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ElIcon, { style: { "transform": "scale(1.1)", "transform-origin": "bottom" } }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_DownloadOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["title", "placement", "onClick"])) : tool === "print" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+          key: index + "-print",
+          title: _ctx.lang.print,
+          placement: _ctx.placement,
+          clickHideTooltip: true,
+          onClick: _ctx.openPrintModal
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_PrinterOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["title", "placement", "onClick"])) : tool === "size" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+          key: index + "-size",
+          placement: _ctx.placement,
+          title: _ctx.lang.sizes
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_EleDropdown, {
+              trigger: "click",
+              placement: "bottom",
+              popperClass: "ele-tool-size-popper",
+              modelValue: _ctx.size,
+              items: _ctx.sizeDropdownItems,
+              popperOptions: {
+                modifiers: [{ name: "offset", options: { offset: [0, 10] } }]
+              },
+              onCommand: _ctx.updateSize
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_ElIcon, null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_ColumnHeightOutlined)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue", "items", "onCommand"])
+          ]),
+          _: 2
+        }, 1032, ["placement", "title"])) : tool === "columns" ? (vue.openBlock(), vue.createBlock(_component_ToolColumn, {
+          key: index + "-columns",
+          placement: _ctx.placement,
+          locale: _ctx.lang,
+          columns: _ctx.columns,
+          sortable: _ctx.columnSortable,
+          allowFixed: _ctx.columnFixed,
+          cacheKey: _ctx.cacheKey,
+          "onUpdate:columns": _ctx.updateColumns
+        }, null, 8, ["placement", "locale", "columns", "sortable", "allowFixed", "cacheKey", "onUpdate:columns"])) : tool === "maximized" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+          key: index + "-maximized",
+          placement: _ctx.placement,
+          title: _ctx.lang.maximized,
+          clickHideTooltip: true,
+          onClick: _ctx.toggleMaximized
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                _ctx.maximized ? (vue.openBlock(), vue.createBlock(_component_FullscreenExitOutlined, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_FullscreenOutlined, { key: 1 }))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["placement", "title", "onClick"])) : tool && !_ctx.ownSlots.includes(tool) && _ctx.$slots[tool] ? vue.renderSlot(_ctx.$slots, tool, {
+          key: 6,
+          pageIndex: _ctx.pageIndex,
+          fetch: _ctx.fetch
+        }) : vue.createCommentVNode("", true)
+      ], 64);
+    }), 256))
+  ], 64);
+}
+const tableTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = tableTools;

package/lib/ele-pro-table/components/tool-column-list.cjs

@@ -0,0 +1,209 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "ToolColumnList",
+  components: {
+    VueDraggable,
+    ElCheckbox: elementPlus.ElCheckbox,
+    ElIcon: elementPlus.ElIcon,
+    ElInput: elementPlus.ElInput,
+    HolderOutlined: icons.HolderOutlined,
+    VerticalRightOutlined: icons.VerticalRightOutlined,
+    VerticalLeftOutlined: icons.VerticalLeftOutlined
+  },
+  props: {
+    /** 列配置数据 */
+    data: Array,
+    /** 父级数据 */
+    parent: Object,
+    /** 是否开启列拖拽排序 */
+    sortable: Boolean,
+    /** 是否开启开关固定列 */
+    allowFixed: Boolean,
+    /** 是否开启列宽设置 */
+    allowWidth: Boolean,
+    /** 列宽输入框提示文本 */
+    columnWidthPlaceholder: String
+  },
+  emits: {
+    sortChange: (_colItems, _parent) => true,
+    checkedChange: (_item, _checked) => true,
+    fixedLeft: (_item) => true,
+    fixedRight: (_item) => true,
+    fixedLeftTooltip: (_el) => true,
+    fixedRightTooltip: (_el) => true,
+    colWidthChange: (_item, _width) => true
+  },
+  setup(props, { emit }) {
+    const handleSortChange = (colItems) => {
+      handleChildSortChange(colItems, props.parent);
+    };
+    const handleCheckedChange = (colItem, checked) => {
+      emit("checkedChange", colItem, checked);
+    };
+    const handleFixedLeft = (colItem) => {
+      emit("fixedLeft", colItem);
+    };
+    const handleFixedRight = (colItem) => {
+      emit("fixedRight", colItem);
+    };
+    const handleFixedLeftTooltip = (e) => {
+      handleChildFixedLeftTooltip(e.currentTarget);
+    };
+    const handleFixedRightTooltip = (e) => {
+      handleChildFixedRightTooltip(e.currentTarget);
+    };
+    const handleChildSortChange = (colItems, parent) => {
+      emit("sortChange", colItems, parent);
+    };
+    const handleChildFixedLeftTooltip = (el) => {
+      emit("fixedLeftTooltip", el);
+    };
+    const handleChildFixedRightTooltip = (el) => {
+      emit("fixedRightTooltip", el);
+    };
+    const handleColWidthChange = (item, width) => {
+      emit("colWidthChange", item, width);
+    };
+    return {
+      handleSortChange,
+      handleCheckedChange,
+      handleFixedLeft,
+      handleFixedRight,
+      handleFixedLeftTooltip,
+      handleFixedRightTooltip,
+      handleChildSortChange,
+      handleChildFixedLeftTooltip,
+      handleChildFixedRightTooltip,
+      handleColWidthChange
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-tool-column-item" };
+const _hoisted_2 = { class: "ele-tool-column-item-body" };
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-tool-column-handle"
+};
+const _hoisted_4 = { class: "ele-tool-column-label" };
+const _hoisted_5 = {
+  key: 1,
+  class: "ele-tool-column-fixed"
+};
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = {
+  key: 2,
+  class: "ele-tool-column-input"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HolderOutlined = vue.resolveComponent("HolderOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+  const _component_VerticalRightOutlined = vue.resolveComponent("VerticalRightOutlined");
+  const _component_VerticalLeftOutlined = vue.resolveComponent("VerticalLeftOutlined");
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_ToolColumnList = vue.resolveComponent("ToolColumnList", true);
+  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
+  return vue.openBlock(), vue.createBlock(_component_VueDraggable, {
+    itemKey: "uid",
+    animation: 300,
+    modelValue: _ctx.data,
+    setData: () => void 0,
+    handle: ".ele-tool-column-handle",
+    componentData: { class: "ele-tool-column-list" },
+    forceFallback: true,
+    "onUpdate:modelValue": _ctx.handleSortChange
+  }, {
+    item: vue.withCtx(({ element: d }) => [
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          _ctx.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.createVNode(_component_ElIcon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_HolderOutlined)
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createVNode(_component_ElCheckbox, {
+              label: d.label,
+              modelValue: d.checked,
+              "onUpdate:modelValue": (v) => _ctx.handleCheckedChange(d, v)
+            }, null, 8, ["label", "modelValue", "onUpdate:modelValue"])
+          ]),
+          _ctx.allowFixed ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([
+                "ele-tool-column-fixed-item",
+                { "is-active": d.fixed === true || d.fixed === "left" }
+              ]),
+              onClick: ($event) => _ctx.handleFixedLeft(d),
+              onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.handleFixedLeftTooltip && _ctx.handleFixedLeftTooltip(...args))
+            }, [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VerticalRightOutlined)
+                ]),
+                _: 1
+              })
+            ], 42, _hoisted_6),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([
+                "ele-tool-column-fixed-item",
+                { "is-active": d.fixed === "right" }
+              ]),
+              onClick: ($event) => _ctx.handleFixedRight(d),
+              onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.handleFixedRightTooltip && _ctx.handleFixedRightTooltip(...args))
+            }, [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VerticalLeftOutlined)
+                ]),
+                _: 1
+              })
+            ], 42, _hoisted_7)
+          ])) : vue.createCommentVNode("", true),
+          _ctx.allowWidth ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+            vue.createVNode(_component_ElInput, {
+              size: "small",
+              maxlength: 12,
+              modelValue: d.width,
+              placeholder: _ctx.columnWidthPlaceholder,
+              "onUpdate:modelValue": (v) => _ctx.handleColWidthChange(d, v)
+            }, null, 8, ["modelValue", "placeholder", "onUpdate:modelValue"])
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        d.children && d.children.length ? (vue.openBlock(), vue.createBlock(_component_ToolColumnList, {
+          key: 0,
+          data: d.children,
+          parent: d,
+          sortable: _ctx.sortable,
+          allowWidth: _ctx.allowWidth,
+          columnWidthPlaceholder: _ctx.columnWidthPlaceholder,
+          onSortChange: _ctx.handleChildSortChange,
+          onCheckedChange: _ctx.handleCheckedChange,
+          onFixedLeft: _ctx.handleFixedLeft,
+          onFixedRight: _ctx.handleFixedRight,
+          onFixedLeftTooltip: _ctx.handleChildFixedLeftTooltip,
+          onFixedRightTooltip: _ctx.handleChildFixedRightTooltip,
+          onColWidthChange: _ctx.handleColWidthChange
+        }, null, 8, ["data", "parent", "sortable", "allowWidth", "columnWidthPlaceholder", "onSortChange", "onCheckedChange", "onFixedLeft", "onFixedRight", "onFixedLeftTooltip", "onFixedRightTooltip", "onColWidthChange"])) : vue.createCommentVNode("", true)
+      ])
+    ]),
+    _: 1
+  }, 8, ["modelValue", "onUpdate:modelValue"]);
+}
+const toolColumnList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = toolColumnList;