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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.14",
+  "version": "1.0.15-beta.0",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",
@@ -23,6 +23,7 @@
     "src/components"
   ],
   "peerDependencies": {
+    "dayjs": "^1.11.13",
     "element-ui": "^2.15.14",
     "lodash": "^4.17.21",
     "vue": "~2.7.16"
@@ -51,6 +52,7 @@
     "ali-oss": "^6.20.0",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "gulp": "^4.0.2",

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,45 @@
+<!-- 复选框 -->
+<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"
+      >
+        <slot
+          name="filter-item"
+          v-bind="item"
+        >
+          {{ item.text }}
+        </slot>
+      </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,48 @@
+<!-- 日期范围选择（分开的两个日期选择器） -->
+<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"
+      style="display: flex;flex-direction: column;gap: 12px;"
+    >
+      <el-date-picker
+        @input="val => emit('update:tempFilteredValue', config.prop[0], val || '')"
+        :value="tempFilteredValue[config.prop[0]]"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        type="date"
+        size="small"
+        placeholder="开始日期"
+      />
+      <el-date-picker
+        @input="val => emit('update:tempFilteredValue', config.prop[1], val || '')"
+        :value="tempFilteredValue[config.prop[1]]"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        size="small"
+        type="date"
+        placeholder="结束日期"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IFilterDoubleDatePicker } from '../../types';
+
+defineProps<{
+  config: IFilterDoubleDatePicker
+  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/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>