yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-pro-table/components/table-tools.js

@@ -0,0 +1,366 @@
+import { defineComponent, ref, computed, markRaw, resolveComponent, createElementBlock, openBlock, Fragment, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createBlock, createCommentVNode } from "vue";
+import { ElIcon } from "element-plus";
+import { FullscreenExitOutlined, FullscreenOutlined, ColumnHeightOutlined, PrinterOutlined, DownloadOutlined, ReloadOutlined, SizeSlackOutlined, SizeMiddleOutlined, SizeCompactOutlined } from "../../icons";
+import EleDropdown from "../../ele-dropdown/index";
+import { useLocale } from "../../ele-config-provider/receiver";
+import { getSizeCacheKey } from "../util";
+import EleTool from "../../ele-tool/index";
+import ToolColumn from "./tool-column";
+import ToolExport from "./tool-export";
+import ToolPrint from "./tool-print";
+const ownSlots = ["default", "printTop", "printBottom"];
+const _sfc_main = defineComponent({
+  name: "TableTools",
+  components: {
+    ElIcon,
+    ReloadOutlined,
+    DownloadOutlined,
+    PrinterOutlined,
+    ColumnHeightOutlined,
+    FullscreenOutlined,
+    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 } = useLocale("table", props);
+    const toolExportRef = ref(null);
+    const toolPrintRef = ref(null);
+    const placement = computed(() => props.maximized ? "bottom" : "top");
+    const sizeDropdownItems = computed(() => {
+      return [
+        {
+          title: lang.value.sizeLarge,
+          command: "large",
+          icon: markRaw(SizeSlackOutlined)
+        },
+        {
+          title: lang.value.sizeDefault,
+          command: "default",
+          icon: markRaw(SizeMiddleOutlined)
+        },
+        {
+          title: lang.value.sizeSmall,
+          command: "small",
+          icon: markRaw(SizeCompactOutlined)
+        }
+      ];
+    });
+    const reload = () => {
+      emit("reload");
+    };
+    const updateSize = (size) => {
+      if (props.cacheKey) {
+        localStorage.setItem(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 = resolveComponent("ToolExport");
+  const _component_ToolPrint = resolveComponent("ToolPrint");
+  const _component_ReloadOutlined = resolveComponent("ReloadOutlined");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_EleTool = resolveComponent("EleTool");
+  const _component_DownloadOutlined = resolveComponent("DownloadOutlined");
+  const _component_PrinterOutlined = resolveComponent("PrinterOutlined");
+  const _component_ColumnHeightOutlined = resolveComponent("ColumnHeightOutlined");
+  const _component_EleDropdown = resolveComponent("EleDropdown");
+  const _component_ToolColumn = resolveComponent("ToolColumn");
+  const _component_FullscreenExitOutlined = resolveComponent("FullscreenExitOutlined");
+  const _component_FullscreenOutlined = resolveComponent("FullscreenOutlined");
+  return openBlock(), createElementBlock(Fragment, null, [
+    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"]),
+    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
+    }, createSlots({ _: 2 }, [
+      renderList(Object.keys(_ctx.$slots), (name) => {
+        return {
+          name,
+          fn: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, name, normalizeProps(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"]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tools, (tool, index) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        tool === "reload" ? (openBlock(), createBlock(_component_EleTool, {
+          key: index + "-reload",
+          placement: _ctx.placement,
+          title: _ctx.lang.refresh,
+          onClick: _ctx.reload
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_ReloadOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["placement", "title", "onClick"])) : tool === "export" ? (openBlock(), createBlock(_component_EleTool, {
+          key: index + "-export",
+          title: _ctx.lang.export,
+          placement: _ctx.placement,
+          clickHideTooltip: true,
+          onClick: _ctx.openExportModal
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_ElIcon, { style: { "transform": "scale(1.1)", "transform-origin": "bottom" } }, {
+              default: withCtx(() => [
+                createVNode(_component_DownloadOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["title", "placement", "onClick"])) : tool === "print" ? (openBlock(), createBlock(_component_EleTool, {
+          key: index + "-print",
+          title: _ctx.lang.print,
+          placement: _ctx.placement,
+          clickHideTooltip: true,
+          onClick: _ctx.openPrintModal
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_PrinterOutlined)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["title", "placement", "onClick"])) : tool === "size" ? (openBlock(), createBlock(_component_EleTool, {
+          key: index + "-size",
+          placement: _ctx.placement,
+          title: _ctx.lang.sizes
+        }, {
+          default: withCtx(() => [
+            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: withCtx(() => [
+                createVNode(_component_ElIcon, null, {
+                  default: withCtx(() => [
+                    createVNode(_component_ColumnHeightOutlined)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue", "items", "onCommand"])
+          ]),
+          _: 2
+        }, 1032, ["placement", "title"])) : tool === "columns" ? (openBlock(), 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" ? (openBlock(), createBlock(_component_EleTool, {
+          key: index + "-maximized",
+          placement: _ctx.placement,
+          title: _ctx.lang.maximized,
+          clickHideTooltip: true,
+          onClick: _ctx.toggleMaximized
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                _ctx.maximized ? (openBlock(), createBlock(_component_FullscreenExitOutlined, { key: 0 })) : (openBlock(), createBlock(_component_FullscreenOutlined, { key: 1 }))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 2
+        }, 1032, ["placement", "title", "onClick"])) : tool && !_ctx.ownSlots.includes(tool) && _ctx.$slots[tool] ? renderSlot(_ctx.$slots, tool, {
+          key: 6,
+          pageIndex: _ctx.pageIndex,
+          fetch: _ctx.fetch
+        }) : createCommentVNode("", true)
+      ], 64);
+    }), 256))
+  ], 64);
+}
+const tableTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  tableTools as default
+};