@lx-frontend/wrap-element-ui 1.0.1-beta.6 → 1.0.1-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.1-beta.6",
+  "version": "1.0.1-beta.8",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

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

@@ -0,0 +1,17 @@
+import usePagination from './usePagination';
+import useCellHover from './useCellHover';
+import useViewSetting from './useViewSetting';
+import useRowBgColor from './useRowBgColor';
+import useDefaultOperation from './useDefaultOperation';
+import useColumnHeaderOperation from './useColumnHeaderOperation';
+import useDragSort from './useDragSort';
+
+export {
+  usePagination,
+  useCellHover,
+  useViewSetting,
+  useRowBgColor,
+  useDefaultOperation,
+  useColumnHeaderOperation,
+  useDragSort,
+}

package/src/components/EditableTable/{useColumnHeaderOperation.ts → bizHooks/useColumnHeaderOperation.ts}

@@ -1,5 +1,5 @@
 import { computed, ref, watch, nextTick, Ref } from "vue"
-import { IColumnConfig, IEmits, IProps } from './types';
+import { IColumnConfig, IEmits, IProps } from '../types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
@@ -20,7 +20,7 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
   const sortingColumn = ref<IColumnConfig | null>(null);
 
   // 临时的排序配置
-  const tempSortType = ref<'ascending' | 'descending' | null>(null);
+  const tempSortType = ref<'ascending' | 'descending' | ''>('');
   const tempSortingColumn = ref<IColumnConfig | null>(null);
 
   // 生效中的过滤配置 和 临时过滤配置
@@ -90,12 +90,12 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
       summaryList.value.includes(column.prop);
   }
 
-  const handleHeaderPopoverShow = (column) => {
+  const handleHeaderPopoverShow = (column: IColumnConfig) => {
     // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
     closeSortAndFilterPopover(column.prop);
     tempFilteredValue.value = { ...filteredValue.value };
     tempSearchValue.value = { ...searchValue.value };
-    tempSortType.value = sortType.value;
+    tempSortType.value = sortType.value || '';
     tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
     // 临时合计项设置成实际的合计项
     tempSummaryList.value = [...summaryList.value];
@@ -104,7 +104,7 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
   const closeSortAndFilterPopover = (exceptProp?: string) => {
     sortFilterPopoverRef.value?.forEach((item: any) => {
       if (!exceptProp || exceptProp !== item.$el.dataset.prop) {
-        item.doClose();
+        item.close();
       }
     });
   }
@@ -170,7 +170,7 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
 
     summaryList.value = [...tempSummaryList.value];
     sortingColumn.value = tempSortingColumn.value ? { ...tempSortingColumn.value } : null;
-    sortType.value = tempSortType.value;
+    sortType.value = tempSortType.value || null;
 
     if (sortingColumn.value) { // 确认时提交排序
       if (props.localSort) {

package/src/components/EditableTable/{useDefaultOperation.ts → bizHooks/useDefaultOperation.ts}

@@ -1,5 +1,5 @@
 import { Ref, ref } from "vue"
-import { IEmits, IProps } from "./types"
+import { IEmits, IProps } from "../types"
 
 interface IParams {
   emit: IEmits;

package/src/components/EditableTable/{useDragSort.ts → bizHooks/useDragSort.ts}

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
-import { IColumnConfig, IDraggingData, IEmits, IProps } from "./types"
+import { IColumnConfig, IDraggingData, IEmits, IProps } from "../types"
 import throttle from "lodash/throttle"
 
 interface IUseDragSortParams {

package/src/components/EditableTable/{usePagination.ts → bizHooks/usePagination.ts}

@@ -1,5 +1,5 @@
 import { ref } from "vue"
-import { IEmits } from "./types"
+import { IEmits } from "../types"
 
 interface IParams {
   emit: IEmits

package/src/components/EditableTable/{useRowBgColor.ts → bizHooks/useRowBgColor.ts}

@@ -1,4 +1,4 @@
-import { IColorList, IEmits } from "./types"
+import { IColorList, IEmits } from '../types';
 
 interface IUseRowBgColorParams {
   colorList: IColorList;
@@ -12,18 +12,18 @@ export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams)
       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.colorId ? getColorById(row.colorId) : ''
-    }
-  }
+    };
+  };
 
   const handleColorChange = async (colorId: number, scope) => {
     const { row, $index: rowIndex, store } = scope;
@@ -33,12 +33,12 @@ export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams)
     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/{useViewSetting.ts → bizHooks/useViewSetting.ts}

@@ -1,33 +1,74 @@
-import { ref, nextTick, watch, ComputedRef, Ref, onMounted, computed } from "vue"
-import { IColumnConfig, IProps } from "./types"
+import { ref, watch, Ref, computed, nextTick } from "vue"
+import { IColumnConfig, IProps } from "../types"
 
 interface IViewSettingParams {
-  tableDomRef: any
   showingColumns: Ref<string[]>
-  actualColumns: ComputedRef<IColumnConfig[]>
+  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
+  }
 }
 
-export default function useViewSetting({ tableDomRef, showingColumns, actualColumns, props }: IViewSettingParams) {
-  const viewSettingDragSortOptions = ref<IColumnConfig[]>([]);
+export default 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 = () => localStorage.setItem(storageKey.value, JSON.stringify({
-    showingColumns: showingColumns.value,
-    leftFixedColumnCount: leftFixedColumnCount.value
-  }));
+  const saveSettingToStorge = async() => {
+    await nextTick()
+    localStorage.setItem(storageKey.value, JSON.stringify({
+      showingColumns: showingColumns.value,
+      leftFixedColumnCount: leftFixedColumnCount.value
+    }))
+  };
+
+  const handleViewSettingShow = () => {
+    emit('update:viewSettingDragSortOptions', [...actualColumns.value]);
+    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,
-    (val) => {
-      const _keys = new Set(props.columnConfig.map(c => (c.prop)));
+    async(val) => {
+      const _keys = new Set(val.map(c => (c.prop)));
       const _cache = localStorage.getItem(storageKey.value);
-      const setColumns = () => (showingColumns.value = val.filter(v => !v.defaultHide).map(c => c.prop));
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
       if (!_cache) {
         setColumns();
         leftFixedColumnCount.value = props.leftFixedCount as number;
@@ -38,7 +79,7 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
           if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
             setColumns();
           } else {
-            showingColumns.value = cache.showingColumns.filter(key => _keys.has(key));
+            updateShowingColumns(cache.showingColumns.filter(key => _keys.has(key)))
           }
           const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
           leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
@@ -54,59 +95,17 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
     { immediate: true }
   )
 
-  watch(
-    () => columnsToBeShown.value,
-    (val) => {
-      viewSettingDragSortOptions.value = props.columnConfig
-        .filter(c => val.includes(c.prop));
-      if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
-    },
-    { immediate: true }
-  )
+  watch(columnsToBeShown, (val) => {
+    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(
-    () => showingColumns.value,
-    (val) => {
-      // 只要正在显示的列发生变化，dialog中的显示项也要同步变化，反之不然
-      columnsToBeShown.value = [...val];
-    },
-    { immediate: true }
-  )
-
-  onMounted(() => {
-    leftFixedColumnCount.value = props.leftFixedCount as number;
-  })
-
-  const handleViewSettingShow = () => {
-    viewSettingDragSortOptions.value = actualColumns.value
-      .filter(c => columnsToBeShown.value.includes(c.prop));
-    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
-    viewSettingVisible.value = true;
-  }
-
-  const handleViewSettingClose = () => {
-    viewSettingVisible.value = false;
-    // 恢复显示的列
-    showingColumns.value = actualColumns.value.map(c => c.prop);
-  }
-
-  const handleViewSettingConfirm = async () => {
-    viewSettingVisible.value = false;
-    showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
-    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
-    saveSettingToStorge()
-    await nextTick();
-    tableDomRef.value?.doLayout();
-  }
-
-  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(leftFixedColumnCount, (val) => emit('update:leftFixedColumnCount', val), { immediate: true });
 
   return {
-    viewSettingDragSortOptions,
     columnsToBeShown,
     viewSettingVisible,
     leftFixedColumnCount,
@@ -114,6 +113,6 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
     handleInputTempLeftFixedColumnCount,
     handleViewSettingShow,
     handleViewSettingClose,
-    handleViewSettingConfirm
+    handleViewSettingConfirm,
   }
 }

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

@@ -0,0 +1,63 @@
+<!-- 行颜色选择组件 -->
+<template>
+  <el-popover
+    v-model="visible"
+    placement="right"
+    trigger="click"
+    popper-class="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>

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

@@ -0,0 +1,202 @@
+<template>
+  <el-popover
+    ref="popoverRef"
+    placement="bottom"
+    trigger="click"
+    popper-class="editable-table__sort-filter"
+    :data-prop="column.prop"
+    @show="() => emit('popover-show')"
+  >
+    <template slot="reference">
+      <!-- 筛选中，或排序中，高亮 -->
+      <span :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']">
+        {{ column.label }}
+        <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
+      </span>
+    </template>
+    <div class="sort-filter">
+      <div class="sort-filter__column-title">
+        {{ column.label }}
+      </div>
+      <div
+        v-if="column.isColumnSortable"
+        class="sort-filter__sort"
+      >
+        <div class="sort-filter__sort-title">
+          排序
+        </div>
+        <div class="sort-filter__sort-btns">
+          <el-button
+            :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
+            @click="() => emit('update:sort', 'ascending')"
+          >
+            升序
+          </el-button>
+          <el-button
+            :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
+            @click="() => emit('update:sort', 'descending')"
+          >
+            降序
+          </el-button>
+        </div>
+      </div>
+      <div
+        v-if="column.search && !Array.isArray(column.search)"
+        class="sort-filter__search"
+      >
+        <div class="sort-filter__search-title">
+          搜索
+        </div>
+        <el-input
+          class="sort-filter__search-input"
+          placeholder="请输入内容"
+          :value="tempSearchValue[column.prop]"
+          @input="val => emit('update:tempSearchValue', column.prop, val)"
+        />
+      </div>
+
+      <div
+        v-if="column.search && Array.isArray(column.search)"
+        class="sort-filter__search"
+        style="display: flex;flex-direction: column;gap: 12px;"
+      >
+        <div
+          v-for="item in column.search"
+          :key="item.prop"
+        >
+          <div class="sort-filter__search-title">
+            {{ item.label }}
+          </div>
+          <el-input
+            class="sort-filter__search-input"
+            placeholder="请输入内容"
+            :value="tempSearchValue[item.prop]"
+            @input="val => emit('update:tempSearchValue', item.prop, val)"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
+        class="sort-filter__filter"
+      >
+        <div class="sort-filter__filter-title">
+          筛选
+        </div>
+        <el-checkbox-group
+          v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
+          class="sort-filter__filter-checkbox-group"
+          :value="tempFilteredValue[column.prop]"
+          @input="val => emit('update:tempFilteredValue', column.prop, val)"
+        >
+          <el-checkbox
+            v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
+            :key="item.value"
+            :label="item.value"
+            class="sort-filter__filter-checkbox"
+          >
+            <slot
+              name="filter-item"
+              v-bind="item"
+            >
+              {{ item.text }}
+            </slot>
+          </el-checkbox>
+        </el-checkbox-group>
+
+        <el-radio-group
+          v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
+          style="display: flex;flex-direction: column;gap: 6px;"
+          :value="tempFilteredValue[column.prop]"
+          @input="val => emit('update:tempFilteredValue', column.prop, val)"
+        >
+          <el-radio
+            v-for="item in column.filters.options"
+            :key="item.value"
+            :label="item.value"
+          >
+            <slot
+              name="filter-item"
+              v-bind="item"
+            >
+              {{ item.text }}
+            </slot>
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <div
+        v-if="column.summary"
+        class="sort-filter__filter"
+      >
+        <div class="sort-filter__filter-title">
+          统计
+        </div>
+        <el-checkbox-group
+          class="sort-filter__filter-checkbox-group"
+          :value="tempSummaryList"
+          @input="val => emit('update:tempSummaryList', val)"
+        >
+          <el-checkbox
+            :label="column.prop"
+            class="sort-filter__filter-checkbox"
+          >
+            <slot
+              name="summay-item"
+              v-bind="column"
+            >
+              {{ column.label }}
+            </slot>
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="sort-filter__footer">
+        <el-button
+          class="sort-filter__reset-btn"
+          @click="() => emit('reset')"
+        >
+          重置
+        </el-button>
+        <el-button
+          class="sort-filter__confirm-btn"
+          type="primary"
+          @click="() => emit('confirm')"
+        >
+          确定
+        </el-button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IColumnConfig } from '../types'
+
+defineProps<{
+  headActive: boolean
+  column: IColumnConfig
+  tempSummaryList: string[]
+  tempSortingColumn: IColumnConfig | null
+  tempSortType: 'ascending' | 'descending' | ''
+  tempSearchValue: Record<string, string>
+  tempFilteredValue: Record<string, string | number | number[] | string[]>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempSearchValue', key: string, value: string): void
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+  (e: 'update:tempSummaryList', value: string[]): void
+  (e: 'update:sort', type: 'ascending' | 'descending'): void
+  (e: 'popover-show'): void
+  (e: 'reset'): void
+  (e: 'confirm'): void
+}>()
+
+const popoverRef = ref(null as any)
+
+defineExpose({
+  close: () => {
+    popoverRef.value?.doClose()
+  }
+})
+</script>