ele-admin-plus 1.1.4 → 1.1.5-beta.2

package/lib/ele-virtual-table/components/cell-filter.js

@@ -0,0 +1,210 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleTooltip = require("../../ele-tooltip/index");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "CellFilter",
+  components: {
+    ElIcon: elementPlus.ElIcon,
+    ElButton: elementPlus.ElButton,
+    ElScrollbar: elementPlus.ElScrollbar,
+    EleTooltip,
+    FilterFilled: icons.FilterFilled
+  },
+  props: {
+    /** 选中项 */
+    filtered: Array,
+    /** 是否多选 */
+    filterMultiple: Boolean,
+    /** 数据项 */
+    filters: Array,
+    /** 弹出框定位 */
+    filterPlacement: {
+      type: String,
+      default: "bottom-start"
+    }
+  },
+  emits: {
+    /** 选中改变事件 */
+    change: (_filtered) => true
+  },
+  setup(props, { emit }) {
+    const { t } = elementPlus.useLocale();
+    const tooltipRef = vue.ref(null);
+    const checkedValue = vue.ref([]);
+    const clearFilterText = vue.computed(() => {
+      return t("el.table.clearFilter");
+    });
+    const filteredValue = vue.computed(() => {
+      if (!props.filtered || !props.filtered.length) {
+        return;
+      }
+      return props.filtered[0];
+    });
+    const confirmText = vue.computed(() => {
+      return t("el.table.confirmFilter");
+    });
+    const resetText = vue.computed(() => {
+      return t("el.table.resetFilter");
+    });
+    const hidePopper = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const onBeforeEnter = () => {
+      checkedValue.value = props.filtered ?? [];
+    };
+    const onItemClick = (value) => {
+      onFilterChange(value == null ? [] : [value]);
+      hidePopper();
+    };
+    const onFilterChange = (filtered) => {
+      emit("change", filtered);
+    };
+    const onConfirm = () => {
+      onFilterChange(checkedValue.value);
+      hidePopper();
+    };
+    const onReset = () => {
+      checkedValue.value = [];
+      onFilterChange([]);
+      hidePopper();
+    };
+    return {
+      tooltipRef,
+      checkedValue,
+      clearFilterText,
+      filteredValue,
+      confirmText,
+      resetText,
+      onItemClick,
+      onFilterChange,
+      onConfirm,
+      onReset,
+      onBeforeEnter
+    };
+  }
+});
+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-table-filter-footer" };
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-table-filter-list"
+};
+const _hoisted_3 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FilterFilled = vue.resolveComponent("FilterFilled");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+  const _component_ElCheckboxGroup = vue.resolveComponent("ElCheckboxGroup");
+  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "ele-table-filter",
+    onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+    }, ["stop"]))
+  }, [
+    vue.createVNode(_component_EleTooltip, {
+      ref: "tooltipRef",
+      trigger: "click",
+      showArrow: false,
+      placement: _ctx.filterPlacement,
+      popperClass: "ele-table-filter-popper",
+      gpuAcceleration: true,
+      effect: "light",
+      isPopover: true,
+      popperOptions: {
+        modifiers: [{ name: "offset", options: { offset: [0, 4] } }]
+      },
+      onBeforeShow: _ctx.onBeforeEnter
+    }, {
+      body: vue.withCtx(() => [
+        _ctx.filterMultiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.createVNode(_component_ElScrollbar, { class: "ele-table-filter-body" }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ElCheckboxGroup, {
+                modelValue: _ctx.checkedValue,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.checkedValue = $event)
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (item) => {
+                    return vue.openBlock(), vue.createBlock(_component_ElCheckbox, {
+                      key: item.value,
+                      label: item.value
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(item.text), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["label"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            _: 1
+          }),
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(_component_ElButton, {
+              size: "small",
+              text: true,
+              onClick: _ctx.onReset
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(_ctx.resetText), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            vue.createVNode(_component_ElButton, {
+              size: "small",
+              type: "primary",
+              disabled: !_ctx.checkedValue.length,
+              onClick: _ctx.onConfirm
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([
+              "ele-table-filter-item",
+              { "is-active": _ctx.filteredValue == null }
+            ]),
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onItemClick())
+          }, vue.toDisplayString(_ctx.clearFilterText), 3),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (d) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: d.value,
+              class: vue.normalizeClass([
+                "ele-table-filter-item",
+                { "is-active": _ctx.filteredValue === d.value }
+              ]),
+              onClick: ($event) => _ctx.onItemClick(d.value)
+            }, vue.toDisplayString(d.text), 11, _hoisted_3);
+          }), 128))
+        ]))
+      ]),
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_ElIcon, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_FilterFilled)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["placement", "onBeforeShow"])
+  ]);
+}
+const cellFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = cellFilter;

package/lib/ele-virtual-table/components/expand-row.d.ts

@@ -0,0 +1,18 @@
+import type { PropType } from 'vue';
+import type { DataItem } from '../../ele-data-table/types';
+declare const _default: import("vue").DefineComponent<{
+    /** 列配置 */
+    column: PropType<Partial<import("element-plus").Column<DataItem>>>;
+    /** 行索引 */
+    rowIndex: NumberConstructor;
+    /** 行数据 */
+    rowData: PropType<DataItem>;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 列配置 */
+    column: PropType<Partial<import("element-plus").Column<DataItem>>>;
+    /** 行索引 */
+    rowIndex: NumberConstructor;
+    /** 行数据 */
+    rowData: PropType<DataItem>;
+}>>, {}, {}>;
+export default _default;

package/lib/ele-virtual-table/components/expand-row.js

@@ -0,0 +1,28 @@
+"use strict";
+const vue = require("vue");
+const _sfc_main = vue.defineComponent({
+  name: "ExpandRow",
+  props: {
+    /** 列配置 */
+    column: Object,
+    /** 行索引 */
+    rowIndex: Number,
+    /** 行数据 */
+    rowData: Object
+  }
+});
+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: "el-table-v2__row-cell ele-table-td" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.column && _ctx.column.originalCol && _ctx.column.originalCol.slot ? vue.renderSlot(_ctx.$slots, _ctx.column.originalCol.slot, vue.normalizeProps(vue.mergeProps({ key: 0 }, { row: _ctx.rowData, column: _ctx.column.originalCol, $index: _ctx.rowIndex }))) : vue.createCommentVNode("", true)
+  ]);
+}
+const expandRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = expandRow;

package/lib/ele-virtual-table/components/footer-row.d.ts

@@ -0,0 +1,43 @@
+import type { PropType } from 'vue';
+import type { DataItem } from '../../ele-data-table/types';
+import type { BodyColumns, SumCol, ColSize } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    /** 表格主体列配置 */
+    bodyCols: PropType<BodyColumns>;
+    /** 表格主体列宽 */
+    colSizes: PropType<ColSize[]>;
+    /** 表格主体所有列合计宽度 */
+    sumWidth: NumberConstructor;
+    /** 表格数据 */
+    tableData: PropType<DataItem[]>;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+    /** 合计行文本 */
+    sumText: StringConstructor;
+    /** 合计行自定义方法 */
+    summaryMethod: FunctionConstructor;
+}, {
+    sumCols: import("vue").ComputedRef<SumCol[]>;
+    onMouseenter: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** 单元格鼠标移入事件 */
+    mouseenter: (_e: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 表格主体列配置 */
+    bodyCols: PropType<BodyColumns>;
+    /** 表格主体列宽 */
+    colSizes: PropType<ColSize[]>;
+    /** 表格主体所有列合计宽度 */
+    sumWidth: NumberConstructor;
+    /** 表格数据 */
+    tableData: PropType<DataItem[]>;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+    /** 合计行文本 */
+    sumText: StringConstructor;
+    /** 合计行自定义方法 */
+    summaryMethod: FunctionConstructor;
+}>> & {
+    onMouseenter?: ((_e: MouseEvent) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/lib/ele-virtual-table/components/footer-row.js

@@ -0,0 +1,104 @@
+"use strict";
+const vue = require("vue");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "FooterRow",
+  props: {
+    /** 表格主体列配置 */
+    bodyCols: Array,
+    /** 表格主体列宽 */
+    colSizes: Array,
+    /** 表格主体所有列合计宽度 */
+    sumWidth: Number,
+    /** 表格数据 */
+    tableData: Array,
+    /** 表格行高 */
+    rowHeight: Number,
+    /** 合计行文本 */
+    sumText: String,
+    /** 合计行自定义方法 */
+    summaryMethod: Function
+  },
+  emits: {
+    /** 单元格鼠标移入事件 */
+    mouseenter: (_e) => true
+  },
+  setup(props, { emit }) {
+    const userSums = vue.computed(() => {
+      if (typeof props.summaryMethod !== "function" || !props.bodyCols) {
+        return;
+      }
+      const columns = props.bodyCols.map((col) => {
+        return { ...col.originalCol || {}, property: col.dataKey };
+      });
+      return props.summaryMethod({ columns, data: props.tableData });
+    });
+    const sumCols = vue.computed(() => {
+      if (!props.bodyCols) {
+        return [];
+      }
+      const sums = userSums.value;
+      return props.bodyCols.map((column, i) => {
+        const colSize = props.colSizes ? props.colSizes[i] : void 0;
+        const sumValue = util.getSumValue(props.tableData, column.dataKey);
+        const col = column.originalCol;
+        return {
+          key: i + "-" + column.key,
+          width: colSize && colSize.width || 0,
+          fixedLeft: colSize ? colSize.fixedLeft : void 0,
+          fixedRight: colSize ? colSize.fixedRight : void 0,
+          text: sums == null ? i === 0 ? props.sumText : sumValue : sums[i],
+          align: col ? col.align : void 0,
+          fixed: col ? col.fixed : void 0,
+          isFixedLeftLast: column.isFixedLeftLast,
+          isFixedRightFirst: column.isFixedRightFirst
+        };
+      });
+    });
+    const onMouseenter = (e) => {
+      emit("mouseenter", e);
+    };
+    return { sumCols, onMouseenter };
+  }
+});
+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-table-cell" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "ele-table-foot-tr",
+    style: vue.normalizeStyle({ width: (_ctx.sumWidth || 0) + "px", height: (_ctx.rowHeight || 0) + "px" })
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.sumCols, (col) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: col.key,
+        class: vue.normalizeClass([
+          "ele-table-td",
+          "is-ellipsis",
+          { "is-align-left": col.align === "left" },
+          { "is-align-center": col.align === "center" },
+          { "is-align-right": col.align === "right" },
+          { "is-fixed-left": col.fixed === "left" || col.fixed === true },
+          { "is-fixed-right": col.fixed === "right" },
+          { "is-fixed-left-last": col.isFixedLeftLast },
+          { "is-fixed-right-first": col.isFixedRightFirst }
+        ]),
+        style: vue.normalizeStyle({
+          width: col.width + "px",
+          left: col.fixedLeft,
+          right: col.fixedRight
+        }),
+        onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseenter && _ctx.onMouseenter(...args))
+      }, [
+        vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(col.text), 1)
+      ], 38);
+    }), 128))
+  ], 4);
+}
+const footerRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = footerRow;

package/lib/ele-virtual-table/components/header-cell.d.ts

@@ -0,0 +1,97 @@
+import type { PropType } from 'vue';
+import { StyleValues } from '../../ele-app/types';
+import type { Column, FilterValue } from '../../ele-data-table/types';
+import type { HeaderColumn, SortBy, CellFilterChangeParams, CustomRenderProps, ColSize } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    /** 当前列配置 */
+    column: PropType<HeaderColumn>;
+    /** 当前列索引 */
+    columnIndex: NumberConstructor;
+    /** 当前行索引 */
+    headerIndex: NumberConstructor;
+    /** 当前列宽 */
+    colSize: PropType<ColSize>;
+    /** 表格排序状态 */
+    sortBy: PropType<SortBy>;
+    /** 表格当前筛选值 */
+    filterValue: PropType<FilterValue>;
+    /** 表格是否是全选状态 */
+    isCheckAll: BooleanConstructor;
+    /** 表格是否是半选状态 */
+    isIndeterminate: BooleanConstructor;
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 单元格类名自定义 */
+    headerCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 单元格样式自定义 */
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: BooleanConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+}, {
+    originalCol: import("vue").ComputedRef<Column | undefined>;
+    cellClass: import("vue").ComputedRef<string>;
+    cellStyle: import("vue").ComputedRef<StyleValues | undefined>;
+    cellTitle: import("vue").ComputedRef<string | undefined>;
+    renderOpt: import("vue").ComputedRef<CustomRenderProps>;
+    onCheckedChange: (checked: boolean) => void;
+    onFilterChange: (value: FilterValue) => void;
+    onClick: (e: MouseEvent) => void;
+    onContextmenu: (e: MouseEvent) => void;
+    onMouseenter: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked: boolean) => true;
+    /** 列筛选改变事件 */
+    filterChange: (_params: CellFilterChangeParams) => true;
+    /** 点击事件 */
+    click: (_col: Column, _e: MouseEvent) => true;
+    /** 右键事件 */
+    contextmenu: (_col: Column, _e: MouseEvent) => true;
+    /** 鼠标移入事件 */
+    mouseenter: (_col: Column, _e: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 当前列配置 */
+    column: PropType<HeaderColumn>;
+    /** 当前列索引 */
+    columnIndex: NumberConstructor;
+    /** 当前行索引 */
+    headerIndex: NumberConstructor;
+    /** 当前列宽 */
+    colSize: PropType<ColSize>;
+    /** 表格排序状态 */
+    sortBy: PropType<SortBy>;
+    /** 表格当前筛选值 */
+    filterValue: PropType<FilterValue>;
+    /** 表格是否是全选状态 */
+    isCheckAll: BooleanConstructor;
+    /** 表格是否是半选状态 */
+    isIndeterminate: BooleanConstructor;
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 单元格类名自定义 */
+    headerCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 单元格样式自定义 */
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: BooleanConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+}>> & {
+    onMouseenter?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onClick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onContextmenu?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onFilterChange?: ((_params: CellFilterChangeParams) => any) | undefined;
+    onCheckedChange?: ((_checked: boolean) => any) | undefined;
+}, {
+    headerEllipsis: boolean;
+    isCheckAll: boolean;
+    isIndeterminate: boolean;
+    disabledCheckbox: boolean;
+}, {}>;
+export default _default;