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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.15-beta.7",
+  "version": "1.0.15",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",
@@ -23,7 +23,6 @@
     "src/components"
   ],
   "peerDependencies": {
-    "dayjs": "^1.11.13",
     "element-ui": "^2.15.14",
     "lodash": "^4.17.21",
     "vue": "~2.7.16"
@@ -52,7 +51,6 @@
     "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",
@@ -70,8 +68,5 @@
     "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.15-beta.1"
   }
-}
+}

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

@@ -1,11 +1,5 @@
 import { computed, nextTick, ref, Ref, watch } from 'vue'
-import {
-  FilterListType,
-  IColumnConfig,
-  IEmits,
-  IFilterInput,
-  IProps
-} from '../types';
+import { IColumnConfig, IEmits, IProps } from '../types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
@@ -15,6 +9,7 @@ interface IUseColumnHeaderOperationParams {
 }
 
 export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
+
   // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
   // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
   const inSorting = ref(false);
@@ -35,19 +30,17 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   const tempSummaryList = ref<string[]>([]);
   const summaryList = ref<string[]>([]);
 
-  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 searchValue = ref<Record<string, string>>({});
+  const tempSearchValue = ref<Record<string, string>>({});
 
-  const showColumnHeadSortIcon = ({ isColumnSortable, filters }: IColumnConfig) => {
-    return isColumnSortable || (filters && Array.isArray(filters) && filters.length > 0)
-  }
+  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => {
+    const value = tempFilteredValue.value[k]
+    if (!Array.isArray(value)) return value
+    return value.length;
+  }));
+
+  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary || column.doubleDatePicker;
 
   watch(
     () => props.columnConfig,
@@ -79,34 +72,41 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     return sums
   }
 
-  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 isColumnHeadActive = (column: IColumnConfig) => {
+    const hasPickerParams = !!(
+      column.doubleDatePicker
+      && (searchValue.value[column.doubleDatePicker.props[0]] || searchValue.value[column.doubleDatePicker.props[1]])
     )
 
-    const isUseSort = Array.isArray(_sortable)
-      ? _sortable.some(v => v.prop === sortProp.value)
-      : sortProp.value === prop
-
-    return currentFilterActive || isUseSort|| summaryList.value.includes(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 handleHeaderPopoverShow = (column: IColumnConfig) => {
     // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
     closeSortAndFilterPopover(column.prop);
     tempFilteredValue.value = { ...filteredValue.value };
+    tempSearchValue.value = { ...searchValue.value };
     tempSortType.value = sortType.value || '';
     tempSortProp.value = sortProp.value || '';
     // 临时合计项设置成实际的合计项
@@ -137,33 +137,39 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
   const emitSearch = () => {
     const params: Record<string, any> = {};
-
-    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[item.prop] = filteredValue.value[item.prop];
-        }
-      });
-    }
-
     // 仅提交显示的列的相关数据
     showingColumns.value.forEach(prop => {
-      const { filters = [] } = columnMap.value[prop] as IColumnConfig;
-      processFilter(filters);
-    });
+      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]
+            })
+          })
+        } else {
+          params[prop] = searchValue.value[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]]
+      }
+    })
 
     if (props.colorFilterConfig) {
-      const { filters = [] } = props.colorFilterConfig;
-      processFilter(filters);
+      const { prop } = props.colorFilterConfig
+      params[prop] = filteredValue.value[prop]
     }
 
     Object.keys(params).forEach(key => {
-      if (params[key] === undefined) delete params[key];
-    });
+      if (params[key] === undefined) delete params[key]
+    })
 
     emit('search', {
       ...params,
@@ -171,26 +177,32 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     });
   };
 
-
-  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] = ''
+  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] = ''
       }
-    )
+    }
 
     summaryList.value = [...tempSummaryList.value];
     sortProp.value = tempSortProp.value || '';
@@ -209,8 +221,15 @@ 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();
@@ -241,27 +260,18 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   function handleResetFilterValue (column: IColumnConfig) {
-    (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] = ''
-          }
-        }
-      )
+    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' ? '' : []
+      }
+    }
   }
 
-  const handleHeaderOperationReset = async (column: IColumnConfig) => {
+  const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
     if (
       sortProp.value &&
       (Array.isArray(column._sortable)
@@ -275,33 +285,94 @@ 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.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] ?? ''
-            }
-          }
-        )
+    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]] ?? '';
+      }
     })
 
+    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 }
   }
 
@@ -319,11 +390,13 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     filteredValue,
     showColumnHeadSortIcon,
     tempSortProp,
+    tempSearchValue,
     tempFilteredValue,
     tempSummaryList,
     tempSortType,
     sortProp,
     isColumnFiltering,
+    searchValue,
     inSorting,
   }
 }

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="editable-table-sort-filter__filter">
+    <div class="editable-table-sort-filter__filter-title">
+      筛选
+    </div>
+    <el-checkbox-group
+      v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
+      class="editable-table-sort-filter__filter-checkbox-group"
+      :value="tempFilteredValue[column.filters.prop || column.prop]"
+      @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
+    >
+      <el-checkbox
+        v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.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>
+
+    <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.filters.prop || column.prop]"
+      @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
+    >
+      <el-radio
+        v-for="item in column.filters.options"
+        :key="item.value"
+        :label="item.value"
+        :title="item.text"
+      >
+        <slot
+          name="filter-item"
+          v-bind="item"
+        >
+          {{ item.text }}
+        </slot>
+      </el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IColumnConfig } from '../../types';
+
+defineProps<{
+  column: IColumnConfig
+  tempFilteredValue: Record<string, string | number | number[] | string[]>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+</script>

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

@@ -27,34 +27,80 @@
         {{ column.label }}
       </div>
 
-      <div class="editable-table-sort-filter__item">
-        <BizSortFilter
-          v-if="column.isColumnSortable"
-          :column="column"
-          :temp-sort-prop="tempSortProp"
-          :temp-sort-type="tempSortType"
-          @update:sort="(type, prop) => emit('update:sort', type, prop)"
-        />
-      </div>
+      <Sort
+        v-if="column.isColumnSortable"
+        :column="column"
+        :temp-sort-prop="tempSortProp"
+        :temp-sort-type="tempSortType"
+        @update:sort="(type, prop) => emit('update:sort', type, prop)"
+      />
 
-      <template v-if="column.filters">
+      <Search
+        v-if="!!column.search"
+        :column="column"
+        :temp-search-value="tempSearchValue"
+        @update:tempSearchValue="(key, val) => emit('update:tempSearchValue', key, val)"
+      >
+        <template
+          v-for="searchOption in (Array.isArray(column.search) ? column.search : []).filter(v => v.type === 'slot')"
+          #[searchOption.slotName]="rest"
+        >
+          <slot
+            :name="searchOption.slotName"
+            v-bind="rest"
+          />
+        </template>
+      </Search>
+
+      <div
+        v-if="column.doubleDatePicker"
+        class="editable-table-sort-filter__sort"
+      >
+        <div class="editable-table-sort-filter__search-title">
+          {{ column.doubleDatePicker.label }}
+        </div>
         <div
-          v-for="(filterItem, index) in column.filters"
-          :key="index"
-          class="editable-table-sort-filter__item editable-table__filter-group__filter"
+          class="editable-table-sort-filter__date-picker-content"
+          style="display: flex;flex-direction: column;gap: 12px;"
         >
-          <component
-            :is="componentMap[filterItem.type]"
-            :config="filterItem"
-            :temp-filtered-value="tempFilteredValue"
-            @update:tempFilteredValue="onUpdate"
+          <el-date-picker
+            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
+            :value="tempSearchValue[column.doubleDatePicker.props[0]]"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+            type="date"
+            size="small"
+            placeholder="开始日期"
+          />
+          <el-date-picker
+            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
+            :value="tempSearchValue[column.doubleDatePicker.props[1]]"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+            size="small"
+            type="date"
+            placeholder="结束日期"
           />
         </div>
-      </template>
+      </div>
+
+      <BizFilter
+        v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
+        :column="column"
+        :temp-filtered-value="tempFilteredValue"
+        @update:tempFilteredValue="(key, val) => emit('update:tempFilteredValue', key, val)"
+      >
+        <template #filter-item="item">
+          <slot
+            name="filter-item"
+            v-bind="item"
+          />
+        </template>
+      </BizFilter>
 
       <div
         v-if="column.summary"
-        class="editable-table-sort-filter__item editable-table-sort-filter__filter"
+        class="editable-table-sort-filter__filter"
       >
         <div class="editable-table-sort-filter__filter-title">
           统计
@@ -98,16 +144,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import Search from './search.vue'
+import Sort from './sort.vue'
+import BizFilter from './bizFilter.vue'
 
-import BizCheckboxFilter from './BizCheckboxFilter.vue';
-import BizColorRadioFilter from './BizColorRadioFilter.vue';
-import BizDoubleDatePickerFilter from './BizDoubleDatePickerFilter.vue';
-import BizInputFilter from './BizInputFilter.vue';
-import BizMonthDayPicker from './BizMonthDayPicker.vue';
-import BizSortFilter from './BizSortFilter.vue';
-import BizRadioFilter from "./BizRadioFilter.vue";
-import { FilterItem, IColumnConfig } from '../../types'
+import { ref } from 'vue'
+import { IColumnConfig } from '../../types'
 
 defineProps<{
   headActive: boolean
@@ -115,10 +157,12 @@ defineProps<{
   tempSummaryList: string[]
   tempSortType: 'ascending' | 'descending' | ''
   tempSortProp: string
+  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', prop: string): void
@@ -127,29 +171,8 @@ const emit = defineEmits<{
   (e: 'confirm'): void
 }>()
 
-// 把 filterItem.type 映射到组件
-const componentMap: Record<FilterItem['type'], any> = {
-  /** 输入框 */
-  input: BizInputFilter,
-  /** 日期范围 */
-  doubleDatePicker: BizDoubleDatePickerFilter,
-  /** 单选框 */
-  radio: BizRadioFilter,
-  /** 复选框 */
-  checkbox: BizCheckboxFilter,
-  /** 月日选择器 */
-  monthDayPicker: BizMonthDayPicker,
-  /** 颜色选择器 */
-  colorRadio: BizColorRadioFilter,
-}
-
 const popoverRef = ref(null as any)
 
-// 统一的事件派发
-function onUpdate(key: string, val: any) {
-  emit('update:tempFilteredValue', key, val)
-}
-
 defineExpose({
   close: () => {
     popoverRef.value?.doClose()