y-admin-pro 0.0.1

package/packages/ele-virtual-table/components/cell-filter.vue

@@ -0,0 +1,180 @@
+<!-- 表头筛选 -->
+<template>
+  <div class="ele-table-filter" @click.stop="">
+    <EleTooltip
+      ref="popperRef"
+      trigger="click"
+      :showArrow="false"
+      :placement="filterPlacement"
+      popperClass="ele-table-filter-popper"
+      :gpuAcceleration="true"
+      effect="light"
+      :isPopover="true"
+      :popperOptions="{
+        strategy: 'fixed',
+        modifiers: [{ name: 'offset', options: { offset: [0, 4] } }]
+      }"
+      @before-show="handleBeforeEnter"
+    >
+      <ElIcon>
+        <FilterFilled />
+      </ElIcon>
+      <template #body>
+        <template v-if="filterMultiple">
+          <ElScrollbar class="ele-table-filter-body">
+            <ElCheckboxGroup v-model="checkedValue">
+              <ElCheckbox
+                v-for="item in filters"
+                :key="item.value"
+                :value="item.value"
+                :label="item.text"
+              />
+            </ElCheckboxGroup>
+          </ElScrollbar>
+          <div class="ele-table-filter-footer">
+            <ElButton size="small" :text="true" @click="handleReset">
+              {{ resetText }}
+            </ElButton>
+            <ElButton
+              size="small"
+              type="primary"
+              :disabled="!checkedValue.length"
+              @click="handleConfirm"
+            >
+              {{ confirmText }}
+            </ElButton>
+          </div>
+        </template>
+        <div v-else class="ele-table-filter-list">
+          <div
+            :class="[
+              'ele-table-filter-item',
+              { 'is-active': filteredValue == null }
+            ]"
+            @click="handleItemClick()"
+          >
+            {{ clearFilterText }}
+          </div>
+          <div
+            v-for="d in filters"
+            :key="d.value"
+            :class="[
+              'ele-table-filter-item',
+              { 'is-active': filteredValue === d.value }
+            ]"
+            @click="handleItemClick(d.value)"
+          >
+            {{ d.text }}
+          </div>
+        </div>
+      </template>
+    </EleTooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, computed } from 'vue';
+  import {
+    useLocale,
+    ElIcon,
+    ElButton,
+    ElScrollbar,
+    ElCheckboxGroup,
+    ElCheckbox
+  } from 'element-plus';
+  import type { Column, FilterValue } from '../../ele-data-table/types';
+  import type { EleTooltipProps, EleTooltipInstance } from '../../ele-app/plus';
+  import EleTooltip from '../../ele-tooltip/index.vue';
+  import { FilterFilled } from '../../icons/index';
+
+  defineOptions({ name: 'CellFilter' });
+
+  const props = defineProps({
+    /** 选中项 */
+    filtered: Array as PropType<FilterValue>,
+    /** 是否多选 */
+    filterMultiple: Boolean,
+    /** 数据项 */
+    filters: Array as PropType<Column['filters']>,
+    /** 弹出框定位 */
+    filterPlacement: {
+      type: String as PropType<EleTooltipProps['placement']>,
+      default: 'bottom-start'
+    }
+  });
+
+  const emit = defineEmits({
+    /** 选中改变事件 */
+    change: (_filtered: FilterValue) => true
+  });
+
+  const { t } = useLocale();
+
+  /** 气泡组件 */
+  const popperRef = ref<EleTooltipInstance>(null);
+
+  /** 多选选中数据 */
+  const checkedValue = ref<string[]>([]);
+
+  /** 清空项文本 */
+  const clearFilterText = computed<string>(() => {
+    return t('el.table.clearFilter');
+  });
+
+  /** 单选选中 */
+  const filteredValue = computed<string | undefined>(() => {
+    if (!props.filtered || !props.filtered.length) {
+      return;
+    }
+    return props.filtered[0];
+  });
+
+  /** 确认按钮文字 */
+  const confirmText = computed(() => {
+    return t('el.table.confirmFilter');
+  });
+
+  /** 重置按钮文字 */
+  const resetText = computed(() => {
+    return t('el.table.resetFilter');
+  });
+
+  /** 关闭下拉气泡 */
+  const hidePopper = () => {
+    popperRef.value && popperRef.value.hide();
+  };
+
+  /** 多选下拉展开事件 */
+  const handleBeforeEnter = () => {
+    checkedValue.value = props.filtered ?? [];
+  };
+
+  /** 单选选中改变 */
+  const handleItemClick = (value?: string) => {
+    handleFilterChange(value == null ? [] : [value]);
+    hidePopper();
+  };
+
+  /** 多选选中改变 */
+  const handleFilterChange = (filtered: FilterValue) => {
+    emit('change', filtered);
+  };
+
+  /** 多选确认 */
+  const handleConfirm = () => {
+    handleFilterChange(checkedValue.value);
+    hidePopper();
+  };
+
+  /** 多选重置 */
+  const handleReset = () => {
+    checkedValue.value = [];
+    handleFilterChange([]);
+    hidePopper();
+  };
+
+  defineExpose({
+    popperRef
+  });
+</script>

package/packages/ele-virtual-table/components/expand-row.vue

@@ -0,0 +1,27 @@
+<!-- 展开行 -->
+<template>
+  <div class="el-table-v2__row-cell ele-table-td">
+    <template v-if="column && column.slot">
+      <slot
+        :name="column.slot"
+        v-bind="{ row: rowData, column: column, $index: rowIndex }"
+      ></slot>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { DataItem, Column } from '../../ele-data-table/types';
+
+  defineOptions({ name: 'ExpandRow' });
+
+  defineProps({
+    /** 列配置(原始配置) */
+    column: Object as PropType<Column>,
+    /** 行索引 */
+    rowIndex: Number,
+    /** 行数据(原始数据) */
+    rowData: Object as PropType<DataItem>
+  });
+</script>

package/packages/ele-virtual-table/components/footer-row.vue

@@ -0,0 +1,110 @@
+<!-- 表尾行 -->
+<template>
+  <div
+    class="ele-table-foot-tr"
+    :style="{ width: (sumWidth || 0) + 'px', height: (rowHeight || 0) + 'px' }"
+  >
+    <div
+      v-for="col in sumCols"
+      :key="col.key"
+      :class="[
+        '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="{
+        width: col.width + 'px',
+        left: col.fixedLeft,
+        right: col.fixedRight
+      }"
+      @mouseenter="handleMouseenter"
+    >
+      <div class="ele-table-cell">
+        <CellRender :render="() => col.text" :params="[]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType, VNode } from 'vue';
+  import { computed } from 'vue';
+  import type { DataItem, SummaryMethod } from '../../ele-data-table/types';
+  import type { BodyColumns, SumCol, ColSize, VirtualRow } from '../types';
+  import { getSumValue, getUserSums, CellRender } from '../util';
+
+  defineOptions({ name: 'FooterRow' });
+
+  const props = defineProps({
+    /** 表格主体列配置 */
+    bodyCols: {
+      type: Array as PropType<BodyColumns>,
+      required: true
+    },
+    /** 表格数据 */
+    tableData: {
+      type: Array as PropType<VirtualRow[]>,
+      required: true
+    },
+    /** 表格主体列宽 */
+    colSizes: {
+      type: Array as PropType<ColSize[]>,
+      required: true
+    },
+    /** 表格主体所有列合计宽度 */
+    sumWidth: Number,
+    /** 表格行高 */
+    rowHeight: Number,
+    /** 合计行文本 */
+    sumText: String,
+    /** 合计行自定义方法 */
+    summaryMethod: Function as PropType<SummaryMethod>
+  });
+
+  const emit = defineEmits({
+    /** 单元格鼠标移入事件 */
+    mouseenter: (_e: MouseEvent) => true
+  });
+
+  /** 表格原始数据 */
+  const data = computed<DataItem[]>(() => {
+    return props.tableData.map((row) => row.rowData);
+  });
+
+  /** 自定义的合计列 */
+  const userSums = computed<(string | VNode)[] | undefined>(() => {
+    return getUserSums(props.summaryMethod, props.bodyCols, data.value);
+  });
+
+  /** 合计列 */
+  const sumCols = computed<SumCol[]>(() => {
+    const sums = userSums.value;
+    return props.bodyCols.map<SumCol>((column, i) => {
+      const colSize = props.colSizes[i];
+      const sumValue = getSumValue(data.value, 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 handleMouseenter = (e: MouseEvent) => {
+    emit('mouseenter', e);
+  };
+</script>

package/packages/ele-virtual-table/components/header-cell.vue

@@ -0,0 +1,283 @@
+<!-- 表头单元格 -->
+<template>
+  <div
+    :class="cellClass"
+    :style="cellStyle"
+    @click="handleClick"
+    @contextmenu="handleContextmenu"
+    @mouseenter="handleMouseenter"
+  >
+    <div v-if="originalCol" class="ele-table-cell">
+      <div class="ele-cell-title" :title="headerEllipsis ? cellTitle : void 0">
+        <CellCheckbox
+          v-if="originalCol.type === 'selection'"
+          :checked="isCheckAll"
+          :indeterminate="isIndeterminate"
+          :disabled="disabledCheckbox"
+          :size="tableSize"
+          @change="handleCheckedChange"
+        />
+        <CellRender v-else v-bind="renderOpt">{{ cellTitle }}</CellRender>
+      </div>
+      <div v-if="originalCol.sortable" class="ele-table-sorter"></div>
+      <CellFilter
+        v-if="originalCol.filters && originalCol.filters.length"
+        :filtered="filterValue"
+        :filterMultiple="originalCol.filterMultiple"
+        :filters="originalCol.filters"
+        :filterPlacement="originalCol.filterPlacement"
+        @change="handleFilterChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { computed, useSlots } from 'vue';
+  import type { StyleValues } from '../../ele-app/types';
+  import type {
+    Column,
+    FilterValue,
+    TableSize,
+    HeaderCellClass,
+    HeaderCellStyle
+  } from '../../ele-data-table/types';
+  import type {
+    HeaderColumn,
+    SortBy,
+    CellFilterChangeParams,
+    CustomRenderProps,
+    ColSize
+  } from '../types';
+  import { CellRender, getColKey, getOrderValue } from '../util';
+  import CellCheckbox from './cell-checkbox.vue';
+  import CellFilter from './cell-filter.vue';
+
+  defineOptions({ name: 'HeaderCell' });
+
+  const props = defineProps({
+    /** 当前列配置 */
+    column: Object as PropType<HeaderColumn>,
+    /** 当前列索引 */
+    columnIndex: Number,
+    /** 当前行索引 */
+    headerIndex: Number,
+    /** 当前列宽 */
+    colSize: Object as PropType<ColSize>,
+    /** 表格排序状态 */
+    sortBy: Object as PropType<SortBy>,
+    /** 表格当前筛选值 */
+    filterValue: Object as PropType<FilterValue>,
+    /** 表格是否是全选状态 */
+    isCheckAll: Boolean,
+    /** 表格是否是半选状态 */
+    isIndeterminate: Boolean,
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: Boolean,
+    /** 表格尺寸 */
+    tableSize: String as PropType<TableSize>,
+    /** 单元格类名自定义 */
+    headerCellClass: [String, Function] as PropType<HeaderCellClass>,
+    /** 单元格样式自定义 */
+    headerCellStyle: [Object, Function] as PropType<HeaderCellStyle>,
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: Boolean,
+    /** 表格行高 */
+    rowHeight: Number
+  });
+
+  const emit = defineEmits({
+    /** 多选框选中改变事件 */
+    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
+  });
+
+  const slots = useSlots();
+
+  /** 原始列数据 */
+  const originalCol = computed<Column | undefined>(() => {
+    return props.column ? props.column.originalCol : void 0;
+  });
+
+  /** 自定义方法参数 */
+  const cellParam = computed<any>(() => {
+    return {
+      column: originalCol.value,
+      columnIndex: props.columnIndex,
+      rowIndex: props.headerIndex
+    };
+  });
+
+  /** 类名 */
+  const cellClass = computed<string>(() => {
+    const classes: string[] = ['el-table-v2__header-cell', 'ele-table-td'];
+    if (props.column) {
+      // 跨行跨列
+      if (!props.column.colspan) {
+        classes.push('is-none'); // 被跨列
+      } else if (props.column.colspan > 1) {
+        classes.push('is-multi-cell'); // 跨列
+      }
+      if (!props.column.rowspan) {
+        classes.push('is-placeholder'); // 被跨行
+      } else if (props.column.rowspan > 1) {
+        classes.push('is-multi-row'); // 跨行
+      }
+    }
+    const col = originalCol.value;
+    if (col) {
+      // 对齐方式
+      const align = col.headerAlign || col.align;
+      if (align) {
+        classes.push('is-align-' + align);
+      }
+      // 可排序
+      if (col.sortable === true || col.sortable === 'custom') {
+        classes.push('is-sortable');
+      }
+      // 排序状态
+      if (props.sortBy != null && getColKey(col) === props.sortBy.key) {
+        const sortClass = getOrderValue(props.sortBy.order as any);
+        if (sortClass) {
+          classes.push('is-' + sortClass);
+        }
+      }
+      // 筛选状态
+      if (
+        col.filters &&
+        col.filters.length &&
+        props.filterValue &&
+        props.filterValue.length
+      ) {
+        classes.push('is-filtered');
+      }
+      // 多选列
+      if (col.type === 'selection') {
+        classes.push('is-selection');
+      }
+      // 展开列
+      if (col.type === 'expand') {
+        classes.push('is-expand');
+      }
+      // 溢出省略
+      if (props.headerEllipsis) {
+        classes.push('is-ellipsis');
+      }
+      // 固定列
+      if (col.fixed === 'right') {
+        classes.push('is-fixed-right');
+      } else if (col.fixed === 'left' || col.fixed === true) {
+        classes.push('is-fixed-left');
+      }
+      if (props.column) {
+        if (props.column.isFixedLeftLast) {
+          classes.push('is-fixed-left-last');
+        }
+        if (props.column.isFixedRightFirst) {
+          classes.push('is-fixed-right-first');
+        }
+      }
+      // 自定义类名
+      if (typeof props.headerCellClass === 'function') {
+        const temp = props.headerCellClass(cellParam.value);
+        if (temp) {
+          classes.push(temp);
+        }
+      } else if (props.headerCellClass) {
+        classes.push(props.headerCellClass);
+      }
+      if (col.labelClassName) {
+        classes.push(col.labelClassName);
+      }
+    }
+    return classes.join(' ');
+  });
+
+  /** 行高 */
+  const cellHeight = computed<string | undefined>(() => {
+    if (
+      props.rowHeight == null ||
+      props.column == null ||
+      !props.column.rowspan ||
+      props.column.rowspan <= 1
+    ) {
+      return;
+    }
+    return props.column.rowspan * props.rowHeight + 'px';
+  });
+
+  /** 样式 */
+  const cellStyle = computed<StyleValues | undefined>(() => {
+    if (!props.colSize) {
+      return;
+    }
+    const { width, fixedLeft, fixedRight } = props.colSize;
+    const userStyle = props.headerCellStyle;
+    const param = cellParam.value;
+    return [
+      {
+        width: width + 'px',
+        height: cellHeight.value,
+        left: fixedLeft,
+        right: fixedRight
+      },
+      (typeof userStyle === 'function' ? userStyle(param) : userStyle) || {}
+    ];
+  });
+
+  /** 标题文本 */
+  const cellTitle = computed<string | undefined>(() => {
+    return originalCol.value ? originalCol.value.label : void 0;
+  });
+
+  /** 自定义渲染方法 */
+  const renderOpt = computed<CustomRenderProps>(() => {
+    const col = originalCol.value;
+    if (col) {
+      const param = { column: col, $index: props.columnIndex };
+      if (col.headerSlot) {
+        const headerSlot = slots[col.headerSlot];
+        if (typeof headerSlot === 'function') {
+          return { render: headerSlot, params: [param] };
+        }
+      }
+      if (typeof col.renderHeader === 'function') {
+        return { render: col.renderHeader, params: [param] };
+      }
+    }
+    return {};
+  });
+
+  /** 多选框选中改变事件 */
+  const handleCheckedChange = (checked: boolean) => {
+    emit('checkedChange', checked);
+  };
+
+  /** 列筛选改变事件 */
+  const handleFilterChange = (value: FilterValue) => {
+    emit('filterChange', { column: originalCol.value as Column, value });
+  };
+
+  /** 点击事件 */
+  const handleClick = (e: MouseEvent) => {
+    emit('click', originalCol.value as Column, e);
+  };
+
+  /** 右键事件 */
+  const handleContextmenu = (e: MouseEvent) => {
+    emit('contextmenu', originalCol.value as Column, e);
+  };
+
+  /** 单元格鼠标移入事件 */
+  const handleMouseenter = (e: MouseEvent) => {
+    emit('mouseenter', originalCol.value as Column, e);
+  };
+</script>