@lx-frontend/wrap-element-ui 1.0.26 → 1.0.27

package/src/components/EditableTable/bizHooks/useDragSort.ts

@@ -0,0 +1,291 @@
+import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
+import { IColumnConfig, IDraggingData, IEmits, IProps } from "../types"
+import throttle from "lodash/throttle"
+
+interface IUseDragSortParams {
+  props: IProps
+  emit: IEmits
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  beforeDragStart: () => boolean
+  currScope: Ref<any>
+  pageSize: Ref<number>
+  tableDomRef: Ref<any>
+}
+export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
+
+  const draggingData = ref<IDraggingData>({}); // 拖拽相关数据
+  const isMouseDown = ref(false);
+  const dragType = ref<'row' | 'view-setting'>('row');
+  // 如果页面存在多个table实例，如果没有这个值来区分正在操作哪个表格，拖拽功能会有异常
+  const isOperating = ref(false);
+
+  onMounted(() => {
+    tableDomRef.value.$el.addEventListener('mousedown', () => { isOperating.value = true });
+    document.addEventListener('mousedown', handleDocumentMouseDown);
+    document.addEventListener('mousemove', handleDocumentMouseMove);
+    document.addEventListener('mouseup', handleDocumentMouseUp);
+  })
+
+  onBeforeUnmount(() => {
+    tableDomRef.value.$el.removeEventListener('mousedown', () => isOperating.value = true);
+    document.removeEventListener('mousedown', handleDocumentMouseDown);
+    document.removeEventListener('mousemove', handleDocumentMouseMove);
+    document.removeEventListener('mouseup', handleDocumentMouseUp);
+  })
+
+  const handleDocumentMouseDown = (e) => {
+    isMouseDown.value = true;
+    const target = e.target as HTMLElement
+
+    if (typeof target.dataset?.index === 'undefined') return
+
+    if ([...target.classList].includes('row-drag-target')) {
+      dragType.value = 'row';
+      if (!isOperating.value) return
+      // 处理列表行拖拽
+      handleDragMouseDown(e, +target.dataset.index);
+    }
+
+    if ([...target.classList].includes('editable-table-view-setting-drag-target')) {
+      dragType.value = 'view-setting';
+      // 处理显示设置拖拽
+      handleViewSettingDragMouseDown(e, +target.dataset.index);
+    }
+  }
+
+  const handleDocumentMouseMove = (e) => {
+    if (!isMouseDown.value || typeof draggingData.value.draggingIndex === 'undefined') {
+      return;
+    }
+
+    throttledMoveHandler(e);
+  }
+
+  const handleDocumentMouseUp = (e) => {
+    isOperating.value = false;
+    isMouseDown.value = false;
+    if (typeof draggingData.value.draggingIndex === 'undefined') {
+      return;
+    }
+    if (dragType.value === 'row') {
+      handleDragDrop(e, currScope.value);
+    }
+
+    if (dragType.value === 'view-setting') {
+      handleViewSettingDragDrop();
+    }
+  }
+
+  const handleDragMouseDown = (event, draggingIndex) => {
+    if (!beforeDragStart()) return
+    const rows = [...document.getElementsByClassName(`custom-row-classname`)] as HTMLElement[];
+    const rowDoms: Record<number, HTMLElement[]> = [];
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const clsIndex = ([...row.classList].find(cls => cls.startsWith(`custom-row-classname-`)) ?? '').split('-').pop() ?? 'NaN';
+      if (typeof +clsIndex === 'number') {
+        rowDoms[+clsIndex] = rowDoms[+clsIndex] || [];
+        rowDoms[+clsIndex].push(row);
+      }
+    }
+
+    draggingData.value.isDragging = true;
+    draggingData.value.rowDoms = rowDoms;
+    draggingData.value.draggingIndex = +draggingIndex;
+    draggingData.value.rowsRange = [];
+
+    draggingData.value.startPosition = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    // 列表过大时拖拽有性能问题，所以拖拽范围限制在拖拽元素的上下15个元素内
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange) {
+        draggingData.value.rowsRange[i] = undefined
+        continue
+      }
+      const rowdom = rowDoms[i];
+      // 在Chrom中，relative加z-index可以让拖拽更流畅，然而在Safari中无效
+      // 如果在Safari中relative有效，其实蒙层都没有必要了
+      rowdom.forEach(el => el.style.setProperty('position', 'relative'));
+
+      if (i !== draggingData.value.draggingIndex) {
+        rowdom.forEach(el => el.style.setProperty('transition', 'transform 0.25s ease'));
+      } else {
+        rowdom.forEach(el => el.style.setProperty('z-index', '100'));
+        // 当有固定列时，一行的内容并不是一个tr，而是两个或多个tr的叠加显示，其中有的列内容被隐藏
+        // 所以拖拽时，需要同时拖拽所有的tr，并显示所有内容，否则拖拽效果会显示异常
+        const tds = rowdom
+          .map(dom => dom.querySelectorAll('td'))
+          .reduce((pre, curr) => ([...pre, ...curr]), [] as HTMLElement[])
+          .filter(td => td.classList.contains('is-hidden'));
+        draggingData.value.hiddenTds = tds;
+        tds.forEach(td => td.classList.remove('is-hidden'));
+
+        // 生成一个蒙层，防止拖动时文字被选中
+        const fullScreenDiv = document.createElement('div');
+        fullScreenDiv.style.position = 'fixed';
+        fullScreenDiv.style.top = '0';
+        fullScreenDiv.style.left = '0';
+        fullScreenDiv.style.right = '0';
+        fullScreenDiv.style.bottom = '0';
+        fullScreenDiv.style.zIndex = '999';
+        fullScreenDiv.style.cursor = 'grabbing';
+        document.body.appendChild(fullScreenDiv);
+        draggingData.value.fullScreenDiv = fullScreenDiv;
+      }
+      // 计算每一行的高度范围
+      const rect = rowdom[0].getBoundingClientRect()
+      draggingData.value.rowsRange = draggingData.value.rowsRange || [];
+      draggingData.value.rowsRange[i] = ([
+        rect.top,
+        rect.bottom
+      ]);
+    }
+  }
+
+  const calcPositionRowShouldBePlace = (rowsRange: ([number, number])[], draggingClientY: number) => {
+    if (!draggingData.value.rowsRange ||
+      typeof draggingData.value.draggingIndex === 'undefined' ||
+      typeof props.dragSemiRange === 'undefined'
+    ) return;
+    const rangeLeft = draggingData.value.draggingIndex - props.dragSemiRange <= 0 ? 0 : draggingData.value.draggingIndex - props.dragSemiRange
+    const rangeRight = draggingData.value.draggingIndex + props.dragSemiRange >= draggingData.value.rowsRange.length ? draggingData.value.rowsRange.length - 1 : draggingData.value.draggingIndex + props.dragSemiRange
+    if (!rowsRange) return -1;
+    if (draggingClientY <= rowsRange[rangeLeft][0]) return rangeLeft;
+    if (draggingClientY >= rowsRange[rangeRight][1]) return rangeRight;
+    for (let i = rangeLeft; i <= rangeRight; i++) {
+      const [top, bottom] = rowsRange[i];
+      if (draggingClientY > top && draggingClientY < bottom) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  const clearMovingData = () => {
+    const rowdoms = draggingData.value.rowDoms || [];
+    const draggingIndex = draggingData.value.draggingIndex ?? -1
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowdoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange) continue
+      const doms = rowdoms[i];
+      doms.forEach(el => {
+        el.style.removeProperty('position');
+        el.style.removeProperty('transition');
+        el.style.removeProperty('transform');
+        el.style.removeProperty('z-index');
+      });
+    }
+    draggingData.value.fullScreenDiv?.parentNode?.removeChild(draggingData.value.fullScreenDiv);
+    draggingData.value.hiddenTds?.forEach(el => el.classList.add('is-hidden'));
+    draggingData.value = {};
+    currScope.value = null
+  }
+
+  const handleDragDrop = (event, scope) => {
+    if (!scope) return
+    const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
+    const dataList = scope.store.states.data;
+    const movedRow = dataList[draggingIndex];
+    const newList = [
+      ...dataList.slice(0, +draggingIndex),
+      ...dataList.slice(draggingIndex + 1)
+    ];
+    newList.splice(dropIndex, 0, movedRow);
+    scope.store.states.data = newList;
+    emit('row-drag-drop', {
+      row: movedRow,
+      fromIndex: draggingIndex,
+      toIndex: dropIndex,
+      page: props.currentPage,
+      size: pageSize.value
+    });
+    // 清理工作
+    clearMovingData();
+  }
+
+  const handleViewSettingDragMouseDown = (event, index) => {
+    const rowDoms = [...document.getElementsByClassName('editable-table-view-setting-draggable-item')]
+      .reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
+    draggingData.value.isDragging = true;
+    draggingData.value.rowDoms = rowDoms;
+    draggingData.value.draggingIndex = +index;
+    draggingData.value.startPosition = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      const rowdoms = rowDoms[i];
+      rowdoms.forEach((el) => {
+        el.style.setProperty('position', 'relative');
+      });
+
+      if (i !== draggingData.value.draggingIndex) {
+        rowdoms.forEach(el => el.style.setProperty('transition', 'transform 0.25s ease'));
+      }
+      const rect = rowdoms[0].getBoundingClientRect();
+      draggingData.value.rowsRange = draggingData.value.rowsRange || [];
+      draggingData.value.rowsRange.push([
+        rect.top,
+        rect.bottom
+      ]);
+    }
+  }
+
+  const handleMove = (event) => {
+    if (!draggingData.value.isDragging) return;
+    const { y = 0 } = draggingData.value.startPosition || {};
+    const { draggingIndex = -1, rowDoms = {} } = draggingData.value;
+    const draggingRow = rowDoms?.[draggingIndex ?? 0];
+    for (let i = 0; i < draggingRow.length; i++) {
+      const dom = draggingRow[i];
+      dom?.style.setProperty('transform', `translateY(${event.clientY - y}px)`);
+    }
+
+    // 判断应该落在第几行
+    const idx = calcPositionRowShouldBePlace(draggingData.value.rowsRange as [number, number][], event.clientY);
+    if (typeof idx !== 'number') return;
+    const [top, bottom] = draggingData.value.rowsRange![draggingIndex] as [number, number];
+    draggingData.value.dropIndex = idx;
+    const rowHeight = bottom - top;
+    const dragSemiRange = props.dragSemiRange ?? 15;
+    for (const i of Object.keys(rowDoms).map(Number)) {
+      if (i < draggingIndex - dragSemiRange || i > draggingIndex + dragSemiRange || draggingIndex === i) continue
+      const doms = rowDoms[i];
+      if (idx < draggingIndex) {
+        if (i >= idx && i < draggingIndex) {
+          doms.forEach(el => el.style.setProperty('transform', `translateY(${rowHeight}px)`));
+        } else {
+          doms.forEach(el => el.style.removeProperty('transform'));
+        }
+      } else if (idx > draggingIndex) {
+        if (i <= idx && i > draggingIndex) {
+          doms.forEach(el => el.style.setProperty('transform', `translateY(${-rowHeight}px)`));
+        } else {
+          doms.forEach(el => el.style.removeProperty('transform'));
+        }
+      } else {
+        doms.forEach(el => el.style.removeProperty('transform'));
+      }
+    }
+  }
+
+  const handleViewSettingDragDrop = () => {
+    const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
+    const movedRow = viewSettingDragSortOptions.value[draggingIndex];
+    const newList = [
+      ...viewSettingDragSortOptions.value.slice(0, draggingIndex),
+      ...viewSettingDragSortOptions.value.slice(draggingIndex + 1)
+    ];
+    newList.splice(dropIndex, 0, movedRow);
+    viewSettingDragSortOptions.value = newList;
+    // 清理工作
+    clearMovingData();
+  }
+
+  const throttledMoveHandler = throttle(handleMove, 10);
+}

package/src/components/EditableTable/bizHooks/usePagination.ts

@@ -0,0 +1,31 @@
+import { ref } from "vue"
+import { IEmits } from "../types"
+
+interface IParams {
+  emit: IEmits
+  beforePageChange: () => void
+}
+
+export function usePagination({ emit, beforePageChange }: IParams) {
+
+  const pageSize = ref(10);
+
+  const handlePageSizeChange = (size: number) => {
+    pageSize.value = size;
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', { size, page: 1 });
+  }
+
+  const handleCurrPageChange = (curr: number) => {
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', { size: pageSize.value, page: curr });
+  }
+
+  return {
+    pageSize,
+    handlePageSizeChange,
+    handleCurrPageChange,
+  }
+}

package/src/components/EditableTable/bizHooks/useRowBgColor.ts

@@ -0,0 +1,44 @@
+import { IColorList, IEmits } from '../types';
+
+interface IUseRowBgColorParams {
+  colorList: IColorList;
+  emit: IEmits;
+}
+
+export function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
+  const isDefaultColor = (id: number) => {
+    if (!id) {
+      // 没有颜色id，则认为是默认色
+      return true;
+    }
+    return colorList.find(c => +c.id === +id)?.default;
+  };
+
+  const getColorById = (id: number, type: 'bg' | 'sample' = 'bg') => {
+    return colorList.find(c => +c.id === +id)?.[`${type}Color`] || '';
+  };
+
+  const setRowStyle = (scope) => {
+    const row = scope.row;
+    return {
+      backgroundColor: row.__static_bg_color__ ?? (row.colorId ? getColorById(row.colorId) : '')
+    };
+  };
+
+  const handleColorChange = async (colorId: number, scope) => {
+    const { row, $index: rowIndex, store } = scope;
+    const dataList = store.states.data;
+    const curRow = { ...dataList[rowIndex], colorId: +colorId };
+    const newList = [...dataList];
+    newList.splice(rowIndex, 1, curRow);
+    store.states.data = newList;
+    emit('row-bg-change', { colorId, row, rowIndex });
+  };
+
+  return {
+    isDefaultColor,
+    getColorById,
+    setRowStyle,
+    handleColorChange,
+  };
+}

package/src/components/EditableTable/bizHooks/useViewSetting.ts

@@ -0,0 +1,206 @@
+import { ref, watch, Ref, computed, nextTick } from "vue"
+import { IColumnConfig, IProps, SettingStorgeConfig } from "../types"
+
+interface IViewSettingParams {
+  showingColumns: Ref<string[]>
+  actualColumns: Ref<IColumnConfig[]>
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  props: IProps
+  emit: {
+    (e: 'update:leftFixedColumnCount', val: number): void
+    (e: 'update:showingColumns', val: string[]): void
+    (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+    (e: 'tableDoLayout'): void
+  }
+}
+
+/** 默认迁移配置 */
+const storgeSchemaMigrationConfig: Record<number, {
+  /** 迁移方法 */
+  migration: (
+    /** 当前本地配置 */
+    currentConfig: any,
+    /** 当前的列配置 */
+    columns: IColumnConfig[]
+  ) => ({ schemaVersion: number, config: any, version?: string })
+  /** 迁移到的下一个版本号 */
+  nextSchemaVersion?: number
+}> = {
+  '0': {
+    migration: (config: { showingColumns: string[], leftFixedColumnCount: number }, columns: IColumnConfig[]) => {
+      return {
+        config: {
+          fields: columns.reduce((acc, curr) => {
+            acc[curr.prop] = {
+              hidden: config.showingColumns.find(v => v === curr.prop) ? false : true,
+              order: config.showingColumns.findIndex(v => v === curr.prop) ?? 0,
+            }
+            return acc;
+          }, {} as Record<string, { hidden: boolean, order: number }>),
+          leftFixedColumnCount: config.leftFixedColumnCount,
+        },
+        schemaVersion: 1,
+      }
+    },
+    nextSchemaVersion: 1,
+  }
+}
+
+export function useViewSetting({
+  showingColumns,
+  actualColumns,
+  props,
+  viewSettingDragSortOptions,
+  emit
+}: IViewSettingParams) {
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
+
+  const updateShowingColumns = (val: string[]) => emit('update:showingColumns', val);
+
+  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
+
+  const saveSettingToStorge = async() => {
+    await nextTick()
+
+    const settingStorgeMigrationConfigs = props.settingStorgeMigrationConfigs ?? []
+    const len = settingStorgeMigrationConfigs.length
+    const version = len ? settingStorgeMigrationConfigs[len - 1].version.to : undefined
+
+    localStorage.setItem(storageKey.value, JSON.stringify({
+      config: {
+        fields: props.columnConfig.reduce((acc, curr, index) => {
+          const _index = showingColumns.value.findIndex(v => v === curr.prop)
+          acc[curr.prop] = {
+            hidden: showingColumns.value.find(v => v === curr.prop) ? false : true,
+            order: _index === -1 ? index : _index,
+          }
+          return acc;
+        }, {} as Record<string, { hidden: boolean, order: number }>),
+        leftFixedColumnCount: leftFixedColumnCount.value,
+      },
+      version,
+      schemaVersion: 1
+    }))
+  };
+
+  const handleViewSettingShow = () => {
+    emit('update:viewSettingDragSortOptions', [...actualColumns.value.filter(v => v?.prop !== '$$operation')]);
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
+    viewSettingVisible.value = true;
+    columnsToBeShown.value = [...showingColumns.value];
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    updateShowingColumns(viewSettingDragSortOptions.value.map(c => c.prop));
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    await saveSettingToStorge()
+    emit('tableDoLayout')
+  }
+
+  const handleInputTempLeftFixedColumnCount = (value: string) => {
+    const _value = Number(value)
+    if (isNaN(_value)) return
+    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
+  }
+
+  watch(
+    () => props.columnConfig,
+    async(val) => {
+      const _cache = localStorage.getItem(storageKey.value);
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
+      if (!_cache) {
+        setColumns();
+        leftFixedColumnCount.value = props.leftFixedCount as number;
+      } else {
+        try {
+          const handleMigration = (_cache: any) => {
+            const schemaVersion = _cache?.schemaVersion ?? 0
+            if (!storgeSchemaMigrationConfig[schemaVersion]) { // 没有 schema 变动时，查找需要处理的业务迁移配置
+              const bizMigrationConfigs = (props.settingStorgeMigrationConfigs ?? []).filter(v => (v.schemaVersion ?? 1) === _cache.schemaVersion)
+
+              const _versionIndex = bizMigrationConfigs.findIndex(v => v.version.form === _cache.version)
+              if (_versionIndex > -1) {
+                for (let i = _versionIndex; i < bizMigrationConfigs.length; i++) {
+                  const curr = bizMigrationConfigs[i]
+                  _cache = curr.migration(_cache.config, val)
+                }
+              }
+              return _cache
+            } else {
+              let __cache = storgeSchemaMigrationConfig[schemaVersion].migration(_cache, val)
+
+              // 处理当前schema版本需要处理的变更
+              const bizMigrationConfigs = (props.settingStorgeMigrationConfigs ?? []).filter(v => (v.schemaVersion ?? 1) === __cache.schemaVersion)
+              if (bizMigrationConfigs.length) {
+                __cache = bizMigrationConfigs.reduce((acc, curr) => ({
+                  ...curr.migration(acc.config, val),
+                  schemaVersion: __cache.schemaVersion,
+                }), __cache)
+              }
+
+              return storgeSchemaMigrationConfig[schemaVersion].nextSchemaVersion
+                ? handleMigration(__cache)
+                : __cache
+            }
+          }
+
+          const cache = handleMigration(JSON.parse(_cache)) as SettingStorgeConfig;
+
+          updateShowingColumns(
+            val.filter(v => {
+              return cache.config.fields[v.prop] ? !cache.config.fields[v.prop].hidden : !v.defaultHide
+            }).sort((a, b) => {
+              return (cache.config.fields[a.prop]?.order ?? 0) - (cache.config.fields[b.prop]?.order ?? 0)
+            }).map(v => v.prop)
+          );
+
+          const _leftFixedColumnCount = Number(cache?.config?.leftFixedColumnCount)
+          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
+          // 写入清理后的数据
+          saveSettingToStorge();
+        } catch (error) {
+          console.error(error);
+          localStorage.removeItem(storageKey.value);
+          setColumns();
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  watch(columnsToBeShown, (val, oldVal) => {
+    if (val.length === oldVal?.length) return // 排序调整时不做处理，避免出现死循环
+    const _map = new Map<string, IColumnConfig>()
+    props.columnConfig.forEach(c => _map.set(c.prop, c))
+    // 展示时保留顺序
+    emit('update:viewSettingDragSortOptions', val.map(prop => _map.get(prop)!))
+    if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
+  }, { immediate: true })
+
+  // 拖拽调整排序时，同时更新勾选数组的顺序，避免出现拖拽排序操作过程后再勾选新列时被还原成拖拽前的顺序的问题
+  watch(viewSettingDragSortOptions, (val, oldVal) => {
+    if (!val.length || val.length !== oldVal?.length) return // 不是排序调整
+    columnsToBeShown.value = val.map(c => c.prop)
+  }, { deep: true })
+
+  watch(leftFixedColumnCount, (val) => emit('update:leftFixedColumnCount', val), { immediate: true });
+
+  return {
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm,
+  }
+}

package/src/components/EditableTable/features/bizColorSelect.vue

@@ -0,0 +1,63 @@
+<!-- 行颜色选择组件 -->
+<template>
+  <el-popover
+    v-model="visible"
+    placement="right"
+    trigger="click"
+    popper-class="editable-table-color-popover"
+  >
+    <div class="color-list">
+      <div
+        v-for="color in colorList"
+        :key="color.id"
+        class="color-list__item"
+        :style="{ backgroundColor: color.sampleColor }"
+        @click="() => {
+          visible = false
+          handleColorChange(color.id, scope)
+        }"
+      >
+        <span :style="{color: color.textColor}">{{ color.name }}</span>
+      </div>
+    </div>
+
+    <div slot="reference">
+      <div
+        v-if="isDefaultColor(scope.row.colorId)"
+        class="editable-table__color-icon"
+      />
+      <div
+        v-else
+        class="editable-table__selected-color"
+        :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
+      />
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IColorList, IEmits, ITableDataItem } from '../types';
+import { useRowBgColor } from '../bizHooks';
+
+const props = defineProps<{
+  colorList: IColorList,
+  scope: any
+}>();
+
+const emit = defineEmits<{
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+}>();
+
+const {
+  getColorById,
+  isDefaultColor,
+  handleColorChange,
+} = useRowBgColor({
+  colorList: props.colorList,
+  emit: emit as IEmits,
+});
+
+const visible = ref(false);
+
+</script>

package/src/components/EditableTable/features/bizEditCell.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-input
+      v-if="column.editType === 'input'"
+      clearable
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+
+    <el-select
+      v-if="column.editType === 'select'"
+      :value="value"
+      @input="val => emit('input', val)"
+    >
+      <el-option
+        v-for="item in column.selectOptions"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <el-date-picker
+      v-if="column.editType === 'date'"
+      type="date"
+      placeholder="选择日期"
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IColumnConfig } from '../types'
+
+defineProps<{
+  column: IColumnConfig;
+  value: any;
+}>()
+
+const emit = defineEmits<{
+  (e: 'input', value: any): void;
+}>()
+</script>