ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,81 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const tableProps = require("element-plus/es/components/table/src/table/defaults");
+const core = require("../../utils/core");
+const util = require("../util");
+const props = require("../props");
+const tableView = vue.defineComponent({
+  name: "TableView",
+  props: {
+    ...tableProps,
+    // 列配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    // 起始编号
+    pageIndex: Number,
+    // 加载状态
+    loading: Boolean
+  },
+  emits: props.tableEmits,
+  setup(props2, { emit, slots, expose }) {
+    const tableIns = util.useTableMethods(() => tableRef.value);
+    const tableEvents = util.useTableEvents(emit);
+    const tableRef = vue.ref(null);
+    const renderCols = (cols, index) => {
+      const nodes = [];
+      if (cols) {
+        cols.forEach((col) => {
+          const tSlot = col.slot ? slots[col.slot] : void 0;
+          nodes.push(
+            vue.h(
+              elementPlus.ElTableColumn,
+              {
+                ...core.omit(
+                  col,
+                  "index",
+                  "id",
+                  "slot",
+                  "headerSlot",
+                  "hideInTable",
+                  "hideInSetting",
+                  "children"
+                ),
+                key: col.id,
+                index: col.index ?? index
+              },
+              {
+                default: tSlot ? tSlot : () => renderCols(col.children, index),
+                header: col.headerSlot ? slots[col.headerSlot] : void 0
+              }
+            )
+          );
+        });
+      }
+      return nodes;
+    };
+    const exposeValue = { ...tableIns, tableRef };
+    expose(exposeValue);
+    return () => {
+      return vue.withDirectives(
+        vue.h(
+          elementPlus.ElTable,
+          {
+            ...core.omit(props2, "columns", "pageIndex", "loading"),
+            ...tableEvents,
+            ref: tableRef
+          },
+          {
+            default: () => renderCols(props2.columns, props2.pageIndex),
+            append: slots.append,
+            empty: slots.empty
+          }
+        ),
+        [[elementPlus.vLoading, props2.loading]]
+      );
+    };
+  }
+});
+module.exports = tableView;

package/lib/ele-pro-table/components/tool-column.d.ts

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { Columns, ColItem } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: StringConstructor;
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    checkAllText: StringConstructor;
+    resetText: StringConstructor;
+    untitledText: StringConstructor;
+    fixedLeftText: StringConstructor;
+    fixedRightText: StringConstructor;
+    columns: PropType<Columns>;
+    sortable: BooleanConstructor;
+    allowFixed: BooleanConstructor;
+    cacheKey: StringConstructor;
+}, {
+    data: import("vue").Ref<{
+        id: string;
+        prop?: string | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        checked?: boolean | undefined;
+        fixed?: string | boolean | undefined;
+    }[]>;
+    checkedIds: import("vue").Ref<string[]>;
+    isChecked: import("vue").Ref<boolean>;
+    isIndeterminate: import("vue").Ref<boolean>;
+    tooltipContent: import("vue").Ref<string>;
+    virtualRef: import("vue").Ref<any>;
+    popperClass: import("vue").ComputedRef<string>;
+    onCheckedChange: () => void;
+    onCheckAllChange: () => void;
+    onReset: () => void;
+    onSortChange: () => void;
+    onItemFixedLeft: (col: ColItem) => void;
+    onItemFixedRight: (col: ColItem) => void;
+    openTooltip: (e: MouseEvent, content?: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:columns': (_columns: Columns) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    checkAllText: StringConstructor;
+    resetText: StringConstructor;
+    untitledText: StringConstructor;
+    fixedLeftText: StringConstructor;
+    fixedRightText: StringConstructor;
+    columns: PropType<Columns>;
+    sortable: BooleanConstructor;
+    allowFixed: BooleanConstructor;
+    cacheKey: StringConstructor;
+}>> & {
+    "onUpdate:columns"?: ((_columns: Columns) => any) | undefined;
+}, {
+    sortable: boolean;
+    allowFixed: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-pro-table/components/tool-column.js

@@ -0,0 +1,363 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const icons = require("../../icons");
+const EleTool = require("../../ele-tool/index");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "ToolColumn",
+  components: {
+    VueDraggable,
+    ElPopover: elementPlus.ElPopover,
+    ElCheckbox: elementPlus.ElCheckbox,
+    ElCheckboxGroup: elementPlus.ElCheckboxGroup,
+    ElTooltip: elementPlus.ElTooltip,
+    ElIcon: elementPlus.ElIcon,
+    ElLink: elementPlus.ElLink,
+    Setting: iconsVue.Setting,
+    HolderOutlined: icons.HolderOutlined,
+    VerticalRightOutlined: icons.VerticalRightOutlined,
+    VerticalLeftOutlined: icons.VerticalLeftOutlined,
+    EleTool
+  },
+  props: {
+    // 提示文字
+    title: String,
+    // 提示位置
+    placement: String,
+    // 全选文字
+    checkAllText: String,
+    // 重置文字
+    resetText: String,
+    // 无标题列文字
+    untitledText: String,
+    // 固定在左侧文字
+    fixedLeftText: String,
+    // 固定在右侧文字
+    fixedRightText: String,
+    // 列数据
+    columns: Array,
+    // 是否开启列拖拽排序
+    sortable: Boolean,
+    // 是否开启开关固定列
+    allowFixed: Boolean,
+    // 列配置缓存本地的名称
+    cacheKey: String
+  },
+  emits: {
+    "update:columns": (_columns) => true
+  },
+  setup(props, { emit }) {
+    const data = vue.ref([]);
+    const checkedIds = vue.ref([]);
+    const isChecked = vue.ref(false);
+    const isIndeterminate = vue.ref(false);
+    const tooltipContent = vue.ref("");
+    const virtualRef = vue.ref();
+    const popperClass = vue.computed(() => {
+      const classes = ["ele-tool-column"];
+      if (props.sortable) {
+        classes.push("is-sortable");
+      }
+      return classes.join(" ");
+    });
+    const onCheckedChange = () => {
+      data.value.forEach((d) => {
+        d.checked = checkedIds.value.includes(d.id);
+      });
+      isChecked.value = data.value.length > 0 && data.value.length === checkedIds.value.length;
+      isIndeterminate.value = checkedIds.value.length !== 0 && data.value.length !== checkedIds.value.length;
+      const columns = util.getCheckedColumns(
+        props.columns,
+        data.value,
+        checkedIds.value,
+        props.sortable
+      );
+      cacheSettingCols();
+      emit("update:columns", columns);
+    };
+    const onCheckAllChange = () => {
+      if (isChecked.value) {
+        checkedIds.value = data.value.map((d) => d.id);
+      } else {
+        checkedIds.value = [];
+      }
+      isIndeterminate.value = false;
+      data.value.forEach((d) => {
+        d.checked = checkedIds.value.includes(d.id);
+      });
+      const columns = util.getCheckedColumns(
+        props.columns,
+        data.value,
+        checkedIds.value,
+        props.sortable
+      );
+      cacheSettingCols();
+      emit("update:columns", columns);
+    };
+    const onReset = () => {
+      const result = util.getSettingCols(props.columns, props.untitledText);
+      data.value = result.data;
+      checkedIds.value = result.checkedIds;
+      isChecked.value = result.isChecked;
+      isIndeterminate.value = result.isIndeterminate;
+      const columns = util.getCheckedColumns(
+        props.columns,
+        result.data,
+        result.checkedIds,
+        props.sortable
+      );
+      cleanSettingCols();
+      emit("update:columns", columns);
+    };
+    const onSortChange = () => {
+      const columns = util.getCheckedColumns(
+        props.columns,
+        data.value,
+        checkedIds.value,
+        props.sortable
+      );
+      cacheSettingCols();
+      emit("update:columns", columns);
+    };
+    const onItemFixedLeft = (col) => {
+      col.fixed = col.fixed === true || col.fixed === "left" ? false : "left";
+      onSortChange();
+    };
+    const onItemFixedRight = (col) => {
+      col.fixed = col.fixed === "right" ? false : "right";
+      onSortChange();
+    };
+    const cacheSettingCols = () => {
+      if (props.cacheKey) {
+        localStorage.setItem(
+          util.getColsCacheKey(props.cacheKey),
+          JSON.stringify(data.value)
+        );
+      }
+    };
+    const cleanSettingCols = () => {
+      if (props.cacheKey) {
+        localStorage.removeItem(util.getColsCacheKey(props.cacheKey));
+      }
+    };
+    const openTooltip = (e, content) => {
+      virtualRef.value = e.currentTarget;
+      tooltipContent.value = content ?? "";
+    };
+    vue.watch(
+      () => props.columns,
+      (columns) => {
+        if (!columns) {
+          return;
+        }
+        const result = util.getSettingCols(
+          columns,
+          props.untitledText,
+          props.cacheKey
+        );
+        data.value = result.data;
+        checkedIds.value = result.checkedIds;
+        isChecked.value = result.isChecked;
+        isIndeterminate.value = result.isIndeterminate;
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      data,
+      checkedIds,
+      isChecked,
+      isIndeterminate,
+      tooltipContent,
+      virtualRef,
+      popperClass,
+      onCheckedChange,
+      onCheckAllChange,
+      onReset,
+      onSortChange,
+      onItemFixedLeft,
+      onItemFixedRight,
+      openTooltip
+    };
+  }
+});
+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-label" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-tool-column-handle"
+};
+const _hoisted_3 = { class: "ele-tool-column-label" };
+const _hoisted_4 = {
+  key: 1,
+  class: "ele-tool-column-fixed"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Setting = vue.resolveComponent("Setting");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+  const _component_ElLink = vue.resolveComponent("ElLink");
+  const _component_HolderOutlined = vue.resolveComponent("HolderOutlined");
+  const _component_VerticalRightOutlined = vue.resolveComponent("VerticalRightOutlined");
+  const _component_VerticalLeftOutlined = vue.resolveComponent("VerticalLeftOutlined");
+  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
+  const _component_ElCheckboxGroup = vue.resolveComponent("ElCheckboxGroup");
+  const _component_ElPopover = vue.resolveComponent("ElPopover");
+  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  const _component_EleTool = vue.resolveComponent("EleTool");
+  return vue.openBlock(), vue.createBlock(_component_EleTool, {
+    title: _ctx.title,
+    placement: _ctx.placement
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_ElPopover, {
+        trigger: "click",
+        placement: "bottom-end",
+        transition: "el-zoom-in-top",
+        popperClass: _ctx.popperClass
+      }, {
+        reference: vue.withCtx(() => [
+          vue.createVNode(_component_ElIcon, null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_Setting, { style: { "transform": "scale(1.08)" } })
+            ]),
+            _: 1
+          })
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: "ele-tool-column-header",
+            onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createVNode(_component_ElCheckbox, {
+                modelValue: _ctx.isChecked,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.isChecked = $event),
+                indeterminate: _ctx.isIndeterminate,
+                onChange: _ctx.onCheckAllChange
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.checkAllText), 1)
+                ]),
+                _: 1
+              }, 8, ["modelValue", "indeterminate", "onChange"])
+            ]),
+            vue.createVNode(_component_ElLink, {
+              type: "primary",
+              underline: false,
+              onClick: _ctx.onReset
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(_ctx.resetText), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ]),
+          vue.createVNode(_component_ElCheckboxGroup, {
+            modelValue: _ctx.checkedIds,
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.checkedIds = $event),
+            onChange: _ctx.onCheckedChange
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_VueDraggable, {
+                itemKey: "id",
+                modelValue: _ctx.data,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.data = $event),
+                animation: 300,
+                setData: () => void 0,
+                componentData: { class: "ele-tool-column-body" },
+                handle: ".ele-tool-column-handle",
+                onChange: _ctx.onSortChange
+              }, {
+                item: vue.withCtx(({ element: d }) => [
+                  vue.createElementVNode("div", {
+                    class: "ele-tool-column-item",
+                    onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+                    }, ["stop"]))
+                  }, [
+                    _ctx.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                      vue.createVNode(_component_ElIcon, null, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_component_HolderOutlined)
+                        ]),
+                        _: 1
+                      })
+                    ])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("div", _hoisted_3, [
+                      vue.createVNode(_component_ElCheckbox, {
+                        label: d.id
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(d.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["label"])
+                    ]),
+                    _ctx.allowFixed ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                      vue.createElementVNode("div", {
+                        class: vue.normalizeClass([
+                          "ele-tool-fixed-item",
+                          { "is-active": d.fixed === true || d.fixed === "left" }
+                        ]),
+                        onClick: ($event) => _ctx.onItemFixedLeft(d),
+                        onMouseover: _cache[2] || (_cache[2] = (e) => _ctx.openTooltip(e, _ctx.fixedLeftText))
+                      }, [
+                        vue.createVNode(_component_ElIcon, null, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_component_VerticalRightOutlined)
+                          ]),
+                          _: 1
+                        })
+                      ], 42, _hoisted_5),
+                      vue.createElementVNode("div", {
+                        class: vue.normalizeClass([
+                          "ele-tool-fixed-item",
+                          { "is-active": d.fixed === "right" }
+                        ]),
+                        onClick: ($event) => _ctx.onItemFixedRight(d),
+                        onMouseover: _cache[3] || (_cache[3] = (e) => _ctx.openTooltip(e, _ctx.fixedRightText))
+                      }, [
+                        vue.createVNode(_component_ElIcon, null, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_component_VerticalLeftOutlined)
+                          ]),
+                          _: 1
+                        })
+                      ], 42, _hoisted_6)
+                    ])) : vue.createCommentVNode("", true)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["modelValue", "onChange"])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "onChange"])
+        ]),
+        _: 1
+      }, 8, ["popperClass"]),
+      vue.createVNode(_component_ElTooltip, {
+        placement: "top",
+        virtualRef: _ctx.virtualRef,
+        content: _ctx.tooltipContent,
+        virtualTriggering: true
+      }, null, 8, ["virtualRef", "content"])
+    ]),
+    _: 1
+  }, 8, ["title", "placement"]);
+}
+const toolColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = toolColumn;