@lx-frontend/wrap-element-ui 1.0.15 → 1.0.16-beta.0

package/README.md

@@ -34,9 +34,9 @@ export default {
 
 ### 开发指南
 
-新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
+新增或修改组件时，使用 `pnpm dev` 可以实时预览 stories。
 
-开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
+开发完成后，可以使用 `pnpm dist` 预览打包后的组件是否能正常工作。与 `pnpm dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
 
 `build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.15",
+  "version": "1.0.16-beta.0",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
-    "sb:dev": "cross-env MODE=development storybook dev -p 6006",
-    "sb:dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
+    "dev": "cross-env MODE=development storybook dev -p 6006",
+    "dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
     "build:lib": "pnpm clean && vite build",
     "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
     "preview": "serve ./storybook-static",
@@ -23,6 +23,7 @@
     "src/components"
   ],
   "peerDependencies": {
+    "dayjs": "^1.11.13",
     "element-ui": "^2.15.14",
     "lodash": "^4.17.21",
     "vue": "~2.7.16"
@@ -68,5 +69,8 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-tsconfig-paths": "^4.3.2",
     "vue-template-compiler": "^2.6.10"
+  },
+  "dependencies": {
+    "@lx-frontend/wrap-element-ui": "1.0.10"
   }
-}
+}

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

@@ -1,5 +1,11 @@
 import { computed, nextTick, ref, Ref, watch } from 'vue'
-import { IColumnConfig, IEmits, IProps } from '../types';
+import {
+  FilterListType,
+  IColumnConfig,
+  IEmits,
+  IFilterInput,
+  IProps
+} from '../types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
@@ -9,7 +15,6 @@ interface IUseColumnHeaderOperationParams {
 }
 
 export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
-
   // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
   // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
   const inSorting = ref(false);
@@ -30,17 +35,19 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   const tempSummaryList = ref<string[]>([]);
   const summaryList = ref<string[]>([]);
 
-  // 生效中的搜索配置 和 临时搜索配置
-  const searchValue = ref<Record<string, string>>({});
-  const tempSearchValue = ref<Record<string, string>>({});
-
-  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => {
-    const value = tempFilteredValue.value[k]
-    if (!Array.isArray(value)) return value
-    return value.length;
-  }));
+  const isColumnFiltering = computed(() => {
+    return Object.keys(tempFilteredValue.value).some(
+      (key) => {
+        const value = tempFilteredValue.value[key]
+        if (Array.isArray(value)) return value.length
+        return value;
+      }
+    )
+  });
 
-  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary || column.doubleDatePicker;
+  const showColumnHeadSortIcon = ({ isColumnSortable, filters }: IColumnConfig) => {
+    return isColumnSortable || (filters && Array.isArray(filters) && filters.length > 0)
+  }
 
   watch(
     () => props.columnConfig,
@@ -72,41 +79,34 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     return sums
   }
 
-  const isColumnHeadActive = (column: IColumnConfig) => {
-    const hasPickerParams = !!(
-      column.doubleDatePicker
-      && (searchValue.value[column.doubleDatePicker.props[0]] || searchValue.value[column.doubleDatePicker.props[1]])
+  const isColumnHeadActive = ({ prop, filters, _sortable }: IColumnConfig) => {
+    const hasFilters = filters && Array.isArray(filters) && filters.length > 0
+    const currentFilterActive = hasFilters && filters?.some(
+      (item) => {
+        if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+          const [start, end] = item.prop
+          return !!(filteredValue.value[start] || filteredValue.value[end])
+        }
+
+        if (item.type === 'checkbox') {
+          return !!(filteredValue.value[item.prop] as any[]).length
+        }
+
+        return !!filteredValue.value[item.prop]
+      }
     )
 
-    const isUseFilter = !!(column.filters && (Array.isArray(column.filters)
-      ? (filteredValue.value[column.prop] as any[]).length
-      : column.filters.type === 'radio'
-        ? filteredValue.value[column.filters.prop || column.prop]
-        : (filteredValue.value[column.filters.prop || column.prop] as any[]).length))
-
-    const isUseSort = Array.isArray(column._sortable)
-      ? column._sortable.some(v => v.prop === sortProp.value)
-      : sortProp.value === column.prop
-
-    const isUseSearch = Array.isArray(column.search)
-      ? column.search?.some(v => {
-          const props = typeof v.prop === 'string' ? [v.prop] : v.prop
-          return props.some(p => searchValue.value[p])
-        })
-      : !!searchValue.value[column.prop]
-
-    return isUseFilter
-      || isUseSearch
-      || hasPickerParams
-      || isUseSort
-      || summaryList.value.includes(column.prop);
+    const isUseSort = Array.isArray(_sortable)
+      ? _sortable.some(v => v.prop === sortProp.value)
+      : sortProp.value === prop
+
+    return currentFilterActive || isUseSort|| summaryList.value.includes(prop);
   }
 
   const handleHeaderPopoverShow = (column: IColumnConfig) => {
     // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
     closeSortAndFilterPopover(column.prop);
     tempFilteredValue.value = { ...filteredValue.value };
-    tempSearchValue.value = { ...searchValue.value };
     tempSortType.value = sortType.value || '';
     tempSortProp.value = sortProp.value || '';
     // 临时合计项设置成实际的合计项
@@ -137,39 +137,33 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
   const emitSearch = () => {
     const params: Record<string, any> = {};
-    // 仅提交显示的列的相关数据
-    showingColumns.value.forEach(prop => {
-      const column = columnMap.value[prop]
-      if (column.filters) {
-        const _prop = (Array.isArray(column.filters) ? prop : column.filters.prop) || prop
-        params[_prop] = filteredValue.value[_prop]
-      }
-      if (column.search) {
-        if (Array.isArray(column.search)) {
-          column.search.forEach(v => {
-            const props = typeof v.prop === 'string' ? [v.prop] : v.prop
-            props.forEach(p => {
-              params[p] = searchValue.value[p]
-            })
-          })
+
+    const processFilter = (filters: FilterListType) => {
+      filters.forEach((item) => {
+        if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+          const [start, end] = item.prop
+          params[start] = filteredValue.value[start];
+          params[end] = filteredValue.value[end];
         } else {
-          params[prop] = searchValue.value[prop]
+          params[item.prop] = filteredValue.value[item.prop];
         }
-      }
-      if (column.doubleDatePicker) {
-        params[column.doubleDatePicker.props[0]] = searchValue.value[column.doubleDatePicker.props[0]]
-        params[column.doubleDatePicker.props[1]] = searchValue.value[column.doubleDatePicker.props[1]]
-      }
-    })
+      });
+    }
+
+    // 仅提交显示的列的相关数据
+    showingColumns.value.forEach(prop => {
+      const { filters = [] } = columnMap.value[prop] as IColumnConfig;
+      processFilter(filters);
+    });
 
     if (props.colorFilterConfig) {
-      const { prop } = props.colorFilterConfig
-      params[prop] = filteredValue.value[prop]
+      const { filters = [] } = props.colorFilterConfig;
+      processFilter(filters);
     }
 
     Object.keys(params).forEach(key => {
-      if (params[key] === undefined) delete params[key]
-    })
+      if (params[key] === undefined) delete params[key];
+    });
 
     emit('search', {
       ...params,
@@ -177,33 +171,27 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     });
   };
 
-  const handleHeaderOperationConfirm = async (column: IColumnConfig, scope) => {
-    if (column.search) {
-      // 校验
-      if (Array.isArray(column.search)) {
-        let validate = true;
-        column.search.forEach(v => {
-          if (!validate) return
-          if (!('type' in v) || v.type === 'input') {
-            if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
-            if (v.validator) {
-              const result = v.validator(tempSearchValue.value[v.prop]?.trim());
-              if (!result) validate = false;
-            }
-          } else if (v.type === 'doubleDatePicker' || v.type === 'slot') {
-            if (v.validator) {
-              const result = v.validator(tempSearchValue.value);
-              if (!result) validate = false;
-            }
-          }
-        })
-        // 校验未通过
-        if (!validate) return
-      } else {
-        if (!tempSearchValue.value[column.prop]) tempSearchValue.value[column.prop] = ''
-      }
+
+  const handleHeaderOperationConfirm = async (column: IColumnConfig) => {
+    const inputFilters = (column.filters ?? []).filter(
+      (item): item is IFilterInput => item.type === 'input'
+    );
+    
+    const hasValidatorError = inputFilters.some(
+      (item) => item.validator
+        && !item.validator((tempFilteredValue.value[item.prop] as string).trim())
+    )
+
+    if (hasValidatorError) {
+      return
     }
 
+    inputFilters.forEach(
+      (item) => {
+        if (!tempFilteredValue.value[item.prop]) tempFilteredValue.value[item.prop] = ''
+      }
+    )
+
     summaryList.value = [...tempSummaryList.value];
     sortProp.value = tempSortProp.value || '';
     sortType.value = tempSortType.value || null;
@@ -221,15 +209,8 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     }
 
     filteredValue.value = { ...tempFilteredValue.value };
-    searchValue.value = Object.keys(tempSearchValue.value).reduce((pre, key) => {
-      pre[key] = tempSearchValue.value[key]?.trim() ?? '';
-      return pre;
-    }, {});
 
     emitSearch();
-
-    filterColumns(scope.store);
-
     closeSortAndFilterPopover();
     await nextTick()
     tableDomRef.value?.doLayout();
@@ -260,18 +241,27 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   function handleResetFilterValue (column: IColumnConfig) {
-    if (column.filters) {
-      if (Array.isArray(column.filters)) {
-        filteredValue.value[column.prop] = []
-      } else if (column.filters.default) {
-        filteredValue.value[column.filters.prop || column.prop] = column.filters.default
-      } else {
-        filteredValue.value[column.filters.prop || column.prop] = column.filters.type === 'radio' ? '' : []
-      }
-    }
+    (column.filters || [])
+      .forEach(
+        (item) => {
+          if (item.type === 'radio' || item.type === 'checkbox') {
+            if (item.defaultValue) {
+              filteredValue.value[item.prop] = item.defaultValue
+            } else {
+              filteredValue.value[item.prop] = item.type === 'radio' ? '' : []
+            }
+          } else if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+            const [start, end] = item.prop
+            filteredValue.value[start] = '';
+            filteredValue.value[end] = '';
+          } else {
+            filteredValue.value[item.prop] = ''
+          }
+        }
+      )
   }
 
-  const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
+  const handleHeaderOperationReset = async (column: IColumnConfig) => {
     if (
       sortProp.value &&
       (Array.isArray(column._sortable)
@@ -285,94 +275,33 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     summaryList.value = summaryList.value.filter(item => item !== column.prop);
 
     handleResetFilterValue(column)
-    if (column.search) {
-      if (!Array.isArray(column.search)) {
-        searchValue.value[column.prop] = '';
-      } else {
-        column.search.forEach(v => {
-          const props = typeof v.prop === 'string' ? [v.prop] : v.prop
-          props.forEach(p => {
-            searchValue.value[p] = '';
-          })
-        })
-      }
-    }
-    if (column.doubleDatePicker) {
-      searchValue.value[column.doubleDatePicker.props[0]] = '';
-      searchValue.value[column.doubleDatePicker.props[1]] = '';
-    }
-
     emitSearch();
-
-    filterColumns(scope.store);
-
     closeSortAndFilterPopover();
     await nextTick();
     tableDomRef.value?.doLayout();
   }
 
-  const filterColumns = (store) => {
-    if (!props.localFilter) return
-    store.states.columns.forEach(column => {
-      if (filteredValue.value[column.property]) {
-        store.commit('filterChange', {
-          column,
-          values: filteredValue.value[column.property],
-        });
-      }
-    });
-
-    // 根据searchValue过滤数据
-    const data = store.states.data.filter(item => {
-      const flag = Object.keys(searchValue.value)
-        .filter(key => searchValue.value[key])
-        .reduce((pre, key) => {
-          const value = searchValue.value[key];
-
-          return pre && item[key] && `${item[key]}`.indexOf(value) > -1;
-        }, true);
-
-      return flag;
-    });
-
-    store.states.data = data;
-  }
-
   const setSearchParams = (params: Record<string, any>) => {
-    const _searchValue = {};
     const _filteredValue = {};
 
     // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
-    props.columnConfig.forEach(column => {
-      if (column.search) {
-        if (Array.isArray(column.search)) {
-          column.search.forEach(v => {
-            const props = typeof v.prop === 'string' ? [v.prop] : v.prop
-            props.forEach(p => {
-              _searchValue[p] = params[p];
-            })
-          });
-        } else {
-          _searchValue[column.prop] = params[column.prop] ?? '';
-        }
-      }
-      if (column.filters) {
-        const _prop = (Array.isArray(column.filters) ? column.prop : column.filters.prop) || column.prop
-        const value = params[_prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
-        _filteredValue[_prop] = value;
-      }
-      if (column.doubleDatePicker) {
-        _searchValue[column.doubleDatePicker.props[0]] = params[column.doubleDatePicker.props[0]] ?? '';
-        _searchValue[column.doubleDatePicker.props[1]] = params[column.doubleDatePicker.props[1]] ?? '';
-      }
+    [props.colorFilterConfig, ...props.columnConfig].forEach(column => {
+      (column?.filters ?? [])
+        .forEach(
+          (item) => {
+            if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+              const [start, end] = item.prop
+              _filteredValue[start] = params[start]
+              _filteredValue[end] = params[end]
+            } else if (item.type === 'checkbox') {
+              _filteredValue[item.prop] = params[item.prop] ?? item.defaultValue ?? []
+            } else {
+              _filteredValue[item.prop] = params[item.prop] ?? ''
+            }
+          }
+        )
     })
 
-    if (props.colorFilterConfig) {
-      const { prop, filters } = props.colorFilterConfig
-      _filteredValue[prop] = params[prop] ?? (Array.isArray(filters) ? [] : filters?.default);
-    }
-
-    searchValue.value = { ...searchValue.value, ..._searchValue }
     filteredValue.value = { ...filteredValue.value, ..._filteredValue }
   }
 
@@ -390,13 +319,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     filteredValue,
     showColumnHeadSortIcon,
     tempSortProp,
-    tempSearchValue,
     tempFilteredValue,
     tempSummaryList,
     tempSortType,
     sortProp,
     isColumnFiltering,
-    searchValue,
     inSorting,
   }
 }

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

@@ -0,0 +1,40 @@
+<!-- 复选框 -->
+<template>
+  <div class="editable-table-sort-filter__filter">
+    <div class="editable-table-sort-filter__filter-title">
+      {{ config.label || '筛选' }}
+    </div>
+    <el-checkbox-group
+      class="editable-table-sort-filter__filter-checkbox-group"
+      :value="tempFilteredValue[config.prop]"
+      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+    >
+      <el-checkbox
+        v-for="item in config.options"
+        :key="item.value"
+        :label="item.value"
+        :title="item.text"
+        class="editable-table-sort-filter__filter-checkbox"
+      >
+        {{ item.text }}
+      </el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IFilterSelect } from '../../types';
+
+defineProps<{
+  config: IFilterSelect
+  tempFilteredValue: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,56 @@
+<!-- 单选框 -->
+<template>
+  <div class="editable-table-sort-filter__filter">
+    <div class="editable-table-sort-filter__filter-title">
+      {{ config.label || '筛选' }}
+    </div>
+    <el-radio-group
+      style="display: flex;flex-direction: column;gap: 6px;"
+      :value="tempFilteredValue[config.prop]"
+      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+    >
+      <el-radio
+        v-for="item in config.options"
+        :key="item.value"
+        :label="item.value"
+        :title="item.text"
+      >
+        <span class="color-option">
+          <span
+            class="icon"
+            :style="{ background: item.color }"
+          />
+          <span>{{ item.text }}</span>
+        </span>
+      </el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IFilterColorRadio } from '../../types';
+
+defineProps<{
+  config: IFilterColorRadio
+  tempFilteredValue: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+</script>
+
+<style scoped lang="less">
+.color-option {
+  display: flex;
+  align-items: center;
+  
+  .icon {
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.3em;
+    border: 1px solid #ccc;
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+<!-- 日期范围选择（分开的两个日期选择器） -->
+<template>
+  <div class="editable-table-sort-filter__sort">
+    <div class="editable-table-sort-filter__search-title">
+      {{ config.label || '筛选' }}
+    </div>
+    <div class="editable-table-sort-filter__date-picker-content">
+      <el-date-picker
+        v-bind="datePickerCommonProps"
+        placeholder="开始日期"
+        :value="tempFilteredValue[config.prop[0]]"
+        :picker-options="startDateDisabledOptions"
+        @input="handleStartDateChange"
+      />
+      <el-date-picker
+        v-bind="datePickerCommonProps"
+        placeholder="结束日期"
+        :value="tempFilteredValue[config.prop[1]]"
+        :picker-options="endDateDisabledOptions"
+        @input="handleEndDateChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IFilterDoubleDatePicker } from '../../types';
+import dayjs from 'dayjs';
+import type { DatePickerOptions } from 'element-ui/types/date-picker';
+
+interface IFilterDoubleDatePickerProps {
+  /** 日期选择器配置 */
+  config: IFilterDoubleDatePicker;
+  /** 临时筛选值 */
+  tempFilteredValue: Record<string, string>;
+}
+
+const props = defineProps<IFilterDoubleDatePickerProps>();
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void;
+}>();
+
+/** 日期选择器通用配置 */
+const datePickerCommonProps = {
+  valueFormat: 'yyyy-MM-dd',
+  format: 'yyyy-MM-dd',
+  type: 'date',
+  size: 'small',
+  editable: false,
+} as const;
+
+/** 开始日期禁用配置 */
+const startDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const endDate = props.tempFilteredValue[props.config.prop[1]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!endDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isAfter(dayjs(endDate), 'day');
+    }
+  };
+});
+
+/** 结束日期禁用配置 */
+const endDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const startDate = props.tempFilteredValue[props.config.prop[0]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!startDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isBefore(dayjs(startDate), 'day');
+    }
+  };
+});
+
+/** 处理开始日期变更 */
+const handleStartDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[0], val || '');
+};
+
+/** 处理结束日期变更 */
+const handleEndDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[1], val || '');
+};
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="editable-table-sort-filter__search">
+    <div class="editable-table-sort-filter__search-title">
+      {{ config.label || '搜索' }}
+    </div>
+    <el-input
+      class="editable-table-sort-filter__search-input"
+      :placeholder="config.placeholder || '请输入内容'"
+      :value="tempFilteredValue[config.prop]"
+      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IFilterInput } from '../../types';
+
+defineProps<{
+  config: IFilterInput
+  tempFilteredValue: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+</script>