y-admin-pro 0.0.1

package/packages/ele-table/style/index.scss

@@ -0,0 +1,222 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use '../../ele-data-table/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-table-var($ele);
+
+.ele-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  border-width: 0;
+  border-style: solid;
+  border-color: eleVar('table', 'border-color');
+
+  /* 单元格样式 */
+  & > tr,
+  & > thead > tr,
+  & > tbody > tr,
+  & > tfoot > tr {
+    & > th,
+    & > td {
+      color: eleVar('table', 'color');
+      font-size: eleVar('table', 'font-size');
+      font-weight: normal;
+      line-height: eleVar('table', 'line-height');
+      padding: eleVar('table', 'padding');
+      transition: background-color $transition-base;
+      border-width: 0;
+      border-style: solid;
+      border-color: eleVar('table', 'border-color');
+      border-bottom-width: 1px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      text-align: left;
+
+      /* 单元格对齐方式 */
+      &.is-align-left {
+        text-align: left;
+      }
+
+      &.is-align-center {
+        text-align: center;
+      }
+
+      &.is-align-right {
+        text-align: right;
+      }
+    }
+
+    & > td {
+      background: eleVar('table', 'tr-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-hover-bg');
+    }
+  }
+
+  /* 表头单元格 */
+  & > tr > th,
+  & > thead > tr > th,
+  & > tbody > tr > th,
+  & > tfoot > tr > th,
+  & > thead > tr > td {
+    color: eleVar('table', 'th-color');
+    font-weight: eleVar('table', 'th-font-weight');
+    background: eleVar('table', 'th-bg');
+  }
+
+  & > thead > tr > th {
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 0;
+      height: 20px;
+      border-right: 1px solid eleVar('table', 'border-color');
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -10px;
+    }
+  }
+
+  & > thead > tr > th:last-child::after,
+  &.is-border > thead > tr > th::after {
+    display: none;
+  }
+
+  /* 表尾 */
+  & > tfoot > tr > td {
+    background: eleVar('table', 'th-bg');
+  }
+
+  &:not(.is-border) > tfoot > tr:last-child > td {
+    border-bottom-width: 0;
+  }
+
+  /* 圆角 */
+  @include table-radius(eleVar('table', 'radius'));
+
+  /* 斑马纹 */
+  &.is-stripe {
+    & > tr:nth-child(even),
+    & > tbody > tr:nth-child(even) {
+      & > td {
+        background: eleVar('table', 'even-bg');
+      }
+
+      &:hover > td {
+        background: eleVar('table', 'tr-hover-bg');
+      }
+    }
+  }
+
+  /* 行选中 */
+  & > tr.is-active,
+  & > tbody > tr.is-active,
+  &.is-stripe > tr.is-active,
+  &.is-stripe > tbody > tr.is-active {
+    & > td {
+      background: eleVar('table', 'tr-active-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-active-hover-bg');
+    }
+  }
+
+  /* 大型尺寸 */
+  &.is-large {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'lg-size');
+        padding: eleVar('table', 'lg-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'lg-radius'));
+  }
+
+  /* 小型尺寸 */
+  &.is-small {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'sm-size');
+        padding: eleVar('table', 'sm-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'sm-radius'));
+  }
+
+  /* 全边框 */
+  &.is-border {
+    border-top-width: 1px;
+    border-left-width: 1px;
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.has-header) {
+    border-top-width: 1px;
+  }
+
+  /* 表格内组件样式优化 */
+  @include table-common-style();
+
+  /* 打印风格的皮肤 */
+  &.is-print-skin {
+    table-layout: fixed;
+    border-collapse: collapse;
+    word-break: break-all;
+
+    &.is-border {
+      border-right-width: 2px;
+
+      & > tr,
+      & > thead > tr,
+      & > tbody > tr,
+      & > tfoot > tr {
+        & > th,
+        & > td {
+          border-right-width: 0;
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
+}
+
+body table.ele-table.is-print-skin {
+  #{eleVarName('table', 'color')}: #000;
+  #{eleVarName('table', 'th-color')}: #000;
+  #{eleVarName('table', 'border-color')}: #000;
+  #{eleVarName('table', 'bg')}: transparent;
+  #{eleVarName('table', 'th-bg')}: transparent;
+  #{eleVarName('table', 'tr-bg')}: transparent;
+}
+
+table.ele-table.is-border.is-print-skin {
+  #{eleVarName('table', 'radius')}: 0;
+  #{eleVarName('table', 'sm-radius')}: 0;
+  #{eleVarName('table', 'lg-radius')}: 0;
+}

package/packages/ele-table/style/index.ts

@@ -0,0 +1 @@
+import './index.scss';

package/packages/ele-table-select/index.vue

@@ -0,0 +1,496 @@
+<!-- 表格下拉选择 -->
+<template>
+    {{ currentRowKey }}
+  <EleBasicSelect
+    ref="selectRef"
+    :value="modelValue"
+    :multiple="multiple"
+    :disabled="disabled"
+    :size="size"
+    :clearable="clearable"
+    :placeholder="placeholder"
+    :maxTagCount="maxTagCount"
+    :maxTagTextLength="maxTagTextLength"
+    :tagType="tagType"
+    :automaticDropdown="automaticDropdown"
+    :filterable="filterable"
+    :teleported="teleported"
+    :persistent="persistent"
+    :placement="placement"
+    :transition="transition"
+    :popperWidth="popperWidth"
+    :popperOptions="popperOptions"
+    :popperClass="selectPopperClass"
+    :selectStyle="selectStyle"
+    :inputStyle="inputStyle"
+    :selectTagsStyle="selectTagsStyle"
+    :selectedLabel="selectedLabel"
+    :selected="selectedItems"
+    :visible="selectVisible"
+    @update:visible="updateVisible"
+    @filterChange="handleSelectFilter"
+    @removeTag="handleSelectRemove"
+    @clear="handleSelectClear"
+    @focus="handleSelectFocus"
+    @blur="handleSelectBlur"
+  >
+    <slot name="popperTopExtra"></slot>
+    <EleProTable
+      @update:selectedRowKeys="updateSelectedRowKeys"
+      @update:currentRowKey="updateCurrentRowKey"
+      @selectionChange="handleTableSelectionChange"
+      @currentChange="handleTableCurrentChange"
+      @rowClick="handleTableRowClick"
+      @select="handleTableSelect"
+      @selectAll="handleTableSelectAll"
+      @done="handleTableDone"
+      v-bind="tableProps || {}"
+      ref="tableRef"
+      :rowKey="valueKey"
+      :reserveCurrent="true"
+      :highlightCurrentRow="!multiple"
+      :currentRowKey="currentRowKey"
+      :selectedRowKeys="selectedRowKeys"
+    >
+      <template
+        v-for="name in Object.keys($slots).filter(
+          (k) =>
+            ![
+              'popperTopExtra',
+              'popperBottomExtra',
+              'maxTagPlaceholder'
+            ].includes(k)
+        )"
+        #[name]="slotProps"
+      >
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </EleProTable>
+    <slot name="popperBottomExtra"></slot>
+    <template v-if="$slots.maxTagPlaceholder" #maxTagPlaceholder="slotProps">
+      <slot name="maxTagPlaceholder" v-bind="slotProps || {}"></slot>
+    </template>
+    {{ selectedItems }}
+  </EleBasicSelect>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch, nextTick, onMounted } from 'vue';
+  import type {
+    EleBasicSelectInstance,
+    EleProTableInstance
+  } from '../ele-app/plus';
+  import { useResponsive } from '../ele-pro-layout/util';
+  import EleBasicSelect from '../ele-basic-select/index.vue';
+  import type {
+    SingleValue,
+    MultipleValue,
+    SelectValue,
+    SelectedItem
+  } from '../ele-basic-select/types';
+  import {
+    isEmptyValue,
+    valueIsChanged,
+    useFormValidate
+  } from '../ele-basic-select/util';
+  import EleProTable from '../ele-pro-table/index.vue';
+  import { isDisableRow } from '../ele-data-table/util';
+  import type { DataKey, DataItem } from '../ele-data-table/types';
+  import { tableSelectProps, tableSelectEmits } from './props';
+
+  defineOptions({ name: 'EleTableSelect' });
+
+  const props = defineProps(tableSelectProps as any);
+
+  const emit = defineEmits(tableSelectEmits as any);
+
+  const { validateChange } = useFormValidate();
+
+  const isResponsive = useResponsive(props);
+
+  /** 下拉选择组件 */
+  const selectRef = ref<EleBasicSelectInstance>(null);
+
+  /** 表格组件 */
+  const tableRef = ref<EleProTableInstance>(null);
+
+  /** 下拉框是否显示 */
+  const selectVisible = ref<boolean>(false);
+
+  /** 选中的标签 */
+  const selectedItems = ref<SelectedItem[]>([]);
+
+  /** 单选选中显示文本 */
+  const selectedLabel = computed<string>(() => {
+    const selected = selectedItems.value;
+    return !props.multiple && selected.length ? selected[0].label : '';
+  });
+
+  /** 表格单选选中值 */
+  const currentRowKey = computed<DataKey | undefined>(() => {
+    if (props.multiple || isEmptyValue(props.modelValue)) {
+      return;
+    }
+    return props.modelValue as DataKey;
+  });
+
+  /** 表格多选选中值 */
+  const selectedRowKeys = computed<DataKey[] | undefined>(() => {
+    if (!props.multiple || isEmptyValue(props.modelValue)) {
+      return;
+    }
+    return props.modelValue as DataKey[];
+  });
+
+  /** 下拉框类名 */
+  const selectPopperClass = computed<string>(() => {
+    const classes: string[] = ['ele-table-select-popper'];
+    if (isResponsive.value) {
+      classes.push('is-responsive');
+    }
+    if (props.popperClass) {
+      classes.push(props.popperClass);
+    }
+    return classes.join(' ');
+  });
+
+  /** 更新气泡位置 */
+  const updatePopover = () => {
+    selectRef.value && selectRef.value.updatePopper();
+  };
+
+  /** 从缓存数据中获取值对应的数据 */
+  const getItemByValue = (value?: SingleValue): DataItem | undefined => {
+    if (isEmptyValue(value)) {
+      return;
+    }
+    if (props.cacheData != null) {
+      const temp = props.cacheData.find((d) => d[props.valueKey] === value);
+      if (temp != null) {
+        return temp;
+      }
+    }
+    // 已废弃属性兼容
+    if (!isEmptyValue(props.initValue as any)) {
+      if (!props.multiple) {
+        return props.initValue as DataItem;
+      }
+      return (props.initValue as DataItem[]).find(
+        (d) => d[props.valueKey] === value
+      );
+    }
+  };
+
+  /** 多选从缓存数据中获取值对应的数据 */
+  const getCacheItemByValue = (
+    value: SingleValue,
+    cacheKeys: DataKey[],
+    cacheData: DataItem[] | undefined,
+    tKeys: DataKey[],
+    initValue?: DataItem[]
+  ) => {
+    if (cacheData != null) {
+      const index = cacheKeys.indexOf(value as DataKey);
+      if (index !== -1) {
+        return cacheData[index];
+      }
+    }
+    if (initValue != null) {
+      const i = tKeys.indexOf(value as DataKey);
+      if (i !== -1) {
+        return initValue[i];
+      }
+    }
+  };
+
+  /** 获取多选的选中标签数据 */
+  const getMultipleItems = (): SelectedItem[] => {
+    const modelValue = props.modelValue as MultipleValue;
+    if (isEmptyValue(modelValue, true)) {
+      return [];
+    }
+    const selected: SelectedItem[] = [];
+    const keys: MultipleValue = [];
+    if (tableRef.value) {
+      const data = tableRef.value.getSelectionRows() || [];
+      data.forEach((item) => {
+        if (!item._isMock) {
+          const value = item[props.valueKey];
+          const index = modelValue.indexOf(value);
+          if (index !== -1) {
+            selected.push({ value, label: item[props.labelKey], index });
+            keys.push(value);
+          }
+        }
+      });
+    }
+    if (keys.length !== modelValue.length) {
+      const { valueKey, cacheData, initValue } = props;
+      const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+      const tKeys = initValue ? initValue.map((d: any) => d[valueKey]) : [];
+      modelValue.forEach((value) => {
+        if (!keys.includes(value)) {
+          const item = getCacheItemByValue(
+            value,
+            cacheKeys,
+            cacheData,
+            tKeys,
+            initValue as DataItem[]
+          );
+          const label = item ? item[props.labelKey] : String(value);
+          const index = modelValue.indexOf(value);
+          selected.push({ value, label, index });
+        }
+      });
+    }
+    selected.sort((a, b) => (a.index as number) - (b.index as number));
+    return selected;
+  };
+
+  /** 更新选中标签数据 */
+  const updateSelectedItems = (force?: boolean) => {
+    // 单选模式
+    if (!props.multiple) {
+      const value = props.modelValue as SingleValue;
+      const d = selectedItems.value.length ? selectedItems.value[0] : null;
+      if (isEmptyValue(value)) {
+        if (d != null) {
+          selectedItems.value = [];
+        }
+        return;
+      }
+      if (force || !d || d.value !== value) {
+        const temp = tableRef.value ? tableRef.value.getCurrentRow() : null;
+        console.log('item', temp);
+        const t = temp && temp[props.valueKey] === value ? temp : void 0;
+        const item = t || getItemByValue(value);
+        const label = item ? item[props.labelKey] : String(value);
+        selectedItems.value = [{ label, value }];
+      }
+      return;
+    }
+    // 多选模式
+    if (isEmptyValue(props.modelValue, true)) {
+      if (selectedItems.value.length) {
+        selectedItems.value = [];
+        nextTick(() => {
+          updatePopover();
+        });
+      }
+      return;
+    }
+    const keys = selectedItems.value.map((d) => d.value);
+    if (force || valueIsChanged(props.modelValue, keys, true)) {
+      selectedItems.value = getMultipleItems();
+      nextTick(() => {
+        updatePopover();
+      });
+    }
+  };
+
+  /** 让多选搜索框获取焦点 */
+  const focusSearchInput = () => {
+    selectRef.value && selectRef.value.focusSearchInput();
+  };
+
+  /** 初始值改变处理(已废弃) */
+  const handleInitValueChange = (initValue: DataItem | DataItem[]) => {
+    const valueKey = props.valueKey;
+    if (!props.multiple) {
+      const key = (initValue as DataItem)[valueKey];
+      if (key === props.modelValue) {
+        updateSelectedItems();
+      } else {
+        updateModelValue(key);
+      }
+      return;
+    }
+    const keys = (initValue as DataItem[]).map((d) => d[valueKey]);
+    if (!valueIsChanged(props.modelValue, keys, true)) {
+      updateSelectedItems();
+    } else {
+      updateModelValue(keys);
+    }
+  };
+
+  /** 更新选中值 */
+  const updateModelValue = (modelValue: SelectValue) => {
+    if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
+      emit('update:modelValue', modelValue);
+      validateChange();
+      emit('change', modelValue);
+    }
+  };
+
+  /** 更新下拉框显示状态 */
+  const updateVisible = (visible: boolean) => {
+    if (selectVisible.value !== visible) {
+      selectVisible.value = visible;
+      if (visible && props.tableProps?.virtual && tableRef.value) {
+        const virtualTableRef = tableRef.value.getTableRef() as any;
+        if (virtualTableRef != null && !virtualTableRef.wrapWidth) {
+          nextTick(() => {
+            virtualTableRef.updateWrapSize();
+            nextTick(() => {
+              updatePopover();
+            });
+          });
+        }
+      }
+      emit('visibleChange', visible);
+    }
+  };
+
+  /** 删除多选标签 */
+  const handleSelectRemove = (item: SelectedItem) => {
+    const values = (props.modelValue || []) as MultipleValue;
+    updateModelValue(values.filter((v) => v !== item.value));
+    emit('removeTag', item.value);
+  };
+
+  /** 清空 */
+  const handleSelectClear = () => {
+    updateModelValue(props.multiple ? [] : null);
+    updateVisible(false);
+    emit('clear');
+  };
+
+  /** 获取焦点事件 */
+  const handleSelectFocus = (e: FocusEvent) => {
+    emit('focus', e);
+  };
+
+  /** 失去焦点事件 */
+  const handleSelectBlur = (e: FocusEvent) => {
+    emit('blur', e);
+  };
+
+  /** 筛选关键字改变事件 */
+  const handleSelectFilter = (keywords: string) => {
+    emit('filterChange', keywords);
+  };
+
+  /** 表格多选选中值改变事件 */
+  const updateSelectedRowKeys = (rowKeys: DataKey[]) => {
+    if (props.multiple) {
+      updateModelValue(rowKeys);
+    }
+  };
+
+  /** 表格单选选中值改变事件 */
+  const updateCurrentRowKey = (rowKey?: DataKey) => {
+    console.log('rowKey', rowKey);
+    if (!props.multiple) {
+      updateModelValue(rowKey);
+    }
+  };
+
+  /** 表格单选选中数据改变事件 */
+  const handleTableCurrentChange = (row?: DataItem | null) => {
+    if (!props.multiple && row != null) {
+      updateSelectedItems(true);
+    }
+  };
+
+  /** 表格多选选中数据改变事件 */
+  const handleTableSelectionChange = () => {
+    if (props.multiple) {
+      updateSelectedItems(true);
+    }
+  };
+
+  /** 表格行点击事件 */
+  const handleTableRowClick = (row: DataItem) => {
+    if (!props.multiple) {
+      updateVisible(false);
+      emit('select', row);
+    } else if (
+      props.tableProps?.rowClickChecked &&
+      tableRef.value &&
+      !isDisableRow(
+        row,
+        tableRef.value.getData().indexOf(row),
+        tableRef.value.tableProps.columns
+      )
+    ) {
+      emit('select', tableRef.value.getSelectionRows() || []);
+    }
+  };
+
+  /** 表格多选复选框勾选事件 */
+  const handleTableSelect = (selection: DataItem[]) => {
+    emit('select', selection);
+  };
+
+  /** 表格多选全选复选框勾选事件 */
+  const handleTableSelectAll = (selection: DataItem[]) => {
+    emit('select', selection);
+  };
+
+  /** 表格渲染完成事件 */
+  const handleTableDone = () => {
+    nextTick(() => {
+      updatePopover();
+    });
+  };
+
+  /** 同步选中值更新 */
+  watch(
+    () => props.modelValue,
+    () => {
+      updateSelectedItems();
+    },
+    { deep: true }
+  );
+
+  /** 更新选中数据 */
+  watch(
+    () => props.cacheData,
+    () => {
+      updateSelectedItems(true);
+    }
+  );
+
+  watch(
+    () => props.initValue,
+    (initValue) => {
+      if (!isEmptyValue(initValue as any)) {
+        handleInitValueChange(initValue as DataItem | DataItem[]);
+      }
+    },
+    { deep: true }
+  );
+
+  /** 禁用时自动关闭气泡 */
+  watch(
+    () => props.disabled,
+    (disabled) => {
+      if (disabled) {
+        updateVisible(false);
+      }
+    }
+  );
+
+  /** 回显默认值 */
+  onMounted(() => {
+    if (!isEmptyValue(props.initValue as any, props.multiple)) {
+      handleInitValueChange(props.initValue as DataItem | DataItem[]);
+    } else if (!isEmptyValue(props.modelValue, props.multiple)) {
+      updateSelectedItems();
+    }
+  });
+
+  defineExpose({
+    selectRef,
+    tableRef,
+    selectVisible,
+    selectedItems,
+    selectedLabel,
+    currentRowKey,
+    selectedRowKeys,
+    updatePopover,
+    updateSelectedItems,
+    updateVisible,
+    focusSearchInput
+  });
+</script>