ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,208 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const icons = require("../../icons");
+const useReceiver = require("../../ele-config-provider/use-receiver");
+const EleTool = require("../../ele-tool/index");
+const ToolColumn = require("./tool-column");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "TableTools",
+  components: {
+    ElDropdown: elementPlus.ElDropdown,
+    ElDropdownMenu: elementPlus.ElDropdownMenu,
+    ElDropdownItem: elementPlus.ElDropdownItem,
+    ElIcon: elementPlus.ElIcon,
+    RefreshRight: iconsVue.RefreshRight,
+    ColumnHeightOutlined: icons.ColumnHeightOutlined,
+    FullscreenOutlined: icons.FullscreenOutlined,
+    FullscreenExitOutlined: icons.FullscreenExitOutlined,
+    EleTool,
+    ToolColumn
+  },
+  props: {
+    // 表格尺寸
+    size: String,
+    // 表格列数据
+    columns: Array,
+    // 工具按钮布局
+    tools: Array,
+    // 是否开启列拖拽排序
+    columnSortable: Boolean,
+    // 是否开启开关固定列
+    columnFixed: Boolean,
+    // 是否最大化
+    maximized: Boolean,
+    // 列配置缓存的名称
+    cacheKey: String,
+    // 国际化
+    locale: Object
+  },
+  emits: {
+    reload: () => true,
+    "update:size": (_size) => true,
+    "update:columns": (_columns) => true,
+    "update:maximized": (_maximized) => true
+  },
+  setup(props, { emit }) {
+    const { lang } = useReceiver.useLocale("table", props);
+    const placement = vue.computed(() => {
+      return props.maximized ? "bottom" : "top";
+    });
+    const reload = () => {
+      emit("reload");
+    };
+    const updateSize = (size) => {
+      if (props.cacheKey) {
+        localStorage.setItem(util.getSizeCacheKey(props.cacheKey), size);
+      }
+      emit("update:size", size);
+    };
+    const updateColumns = (columns) => {
+      emit("update:columns", columns);
+    };
+    const toggleMaximized = () => {
+      emit("update:maximized", !props.maximized);
+    };
+    return {
+      lang,
+      placement,
+      reload,
+      updateSize,
+      updateColumns,
+      toggleMaximized
+    };
+  }
+});
+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_RefreshRight = vue.resolveComponent("RefreshRight");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_EleTool = vue.resolveComponent("EleTool");
+  const _component_ColumnHeightOutlined = vue.resolveComponent("ColumnHeightOutlined");
+  const _component_ElDropdownItem = vue.resolveComponent("ElDropdownItem");
+  const _component_ElDropdownMenu = vue.resolveComponent("ElDropdownMenu");
+  const _component_ElDropdown = vue.resolveComponent("ElDropdown");
+  const _component_ToolColumn = vue.resolveComponent("ToolColumn");
+  const _component_FullscreenExitOutlined = vue.resolveComponent("FullscreenExitOutlined");
+  const _component_FullscreenOutlined = vue.resolveComponent("FullscreenOutlined");
+  return 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_RefreshRight, { style: { "transform": "scale(1.2)" } })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 2
+      }, 1032, ["placement", "title", "onClick"])) : vue.createCommentVNode("", true),
+      tool === "size" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+        key: index + "-size",
+        placement: _ctx.placement,
+        title: _ctx.lang.sizes
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_ElDropdown, {
+            trigger: "click",
+            placement: "bottom-end",
+            popperClass: "ele-tool-size-popper",
+            onCommand: _ctx.updateSize
+          }, {
+            dropdown: vue.withCtx(() => [
+              vue.createVNode(_component_ElDropdownMenu, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ElDropdownItem, {
+                    command: "large",
+                    class: vue.normalizeClass({ "is-active": _ctx.size === "large" })
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(_ctx.lang.sizeLarge), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"]),
+                  vue.createVNode(_component_ElDropdownItem, {
+                    command: "default",
+                    class: vue.normalizeClass({ "is-active": _ctx.size === "default" })
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(_ctx.lang.sizeDefault), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"]),
+                  vue.createVNode(_component_ElDropdownItem, {
+                    command: "small",
+                    class: vue.normalizeClass({ "is-active": _ctx.size === "small" })
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(_ctx.lang.sizeSmall), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
+                ]),
+                _: 1
+              })
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ColumnHeightOutlined)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["onCommand"])
+        ]),
+        _: 2
+      }, 1032, ["placement", "title"])) : vue.createCommentVNode("", true),
+      tool === "columns" ? (vue.openBlock(), vue.createBlock(_component_ToolColumn, {
+        key: index + "-columns",
+        title: _ctx.lang.columns,
+        placement: _ctx.placement,
+        checkAllText: _ctx.lang.columnTitle,
+        resetText: _ctx.lang.columnReset,
+        untitledText: _ctx.lang.columnUntitled,
+        fixedLeftText: _ctx.lang.columnFixedLeft,
+        fixedRightText: _ctx.lang.columnFixedRight,
+        columns: _ctx.columns,
+        sortable: _ctx.columnSortable,
+        allowFixed: _ctx.columnFixed,
+        cacheKey: _ctx.cacheKey,
+        "onUpdate:columns": _ctx.updateColumns
+      }, null, 8, ["title", "placement", "checkAllText", "resetText", "untitledText", "fixedLeftText", "fixedRightText", "columns", "sortable", "allowFixed", "cacheKey", "onUpdate:columns"])) : vue.createCommentVNode("", true),
+      tool === "maximized" ? (vue.openBlock(), vue.createBlock(_component_EleTool, {
+        key: index + "-maximized",
+        placement: _ctx.placement,
+        title: _ctx.lang.maximized,
+        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"])) : vue.createCommentVNode("", true)
+    ], 64);
+  }), 256);
+}
+const tableTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = tableTools;