yuang-framework-ui-pc/lib/ele-pro-table/components/table-tools.cjs

yuang-framework-ui-pc Library

"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;