@lx-frontend/wrap-element-ui 1.0.13 → 1.0.14-beta.1

package/package.json

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

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

@@ -80,13 +80,16 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
     return (
       !!(column.filters && (Array.isArray(column.filters)
-        ? ((filteredValue.value[column.filters.prop || column.prop] as any[]).length)
+        ? (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))
     ) || (
       !!(column.search
-        ? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
+        ? 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])
     ) || hasPickerParams || sortingColumn.value?.prop === column.prop || summaryList.value.includes(column.prop);
   }
@@ -130,12 +133,16 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     showingColumns.value.forEach(prop => {
       const column = columnMap.value[prop]
       if (column.filters) {
-        params[column.filters.prop || prop] = filteredValue.value[column.filters.prop || prop]
+        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 => {
-            params[v.prop] = searchValue.value[v.prop]
+            const props = typeof v.prop === 'string' ? [v.prop] : v.prop
+            props.forEach(p => {
+              params[p] = searchValue.value[p]
+            })
           })
         } else {
           params[prop] = searchValue.value[prop]
@@ -168,11 +175,13 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
       if (Array.isArray(column.search)) {
         let validate = true;
         column.search.forEach(v => {
-          if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
-          if (!validate) return
-          if (v.validator) {
-            const result = v.validator(tempSearchValue.value[v.prop]?.trim());
-            if (validate && !result) validate = false;
+          if (!('type' in v) || v.type === 'input') {
+            if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
+            if (!validate) return
+            if (v.validator) {
+              const result = v.validator(tempSearchValue.value[v.prop]?.trim());
+              if (validate && !result) validate = false;
+            }
           }
         })
         // 校验未通过
@@ -237,7 +246,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   function handleResetFilterValue (column: IColumnConfig) {
     if (column.filters) {
       if (Array.isArray(column.filters)) {
-        filteredValue.value[column.filters.prop || column.prop] = []
+        filteredValue.value[column.prop] = []
       } else if (column.filters.default) {
         filteredValue.value[column.filters.prop || column.prop] = column.filters.default
       } else {
@@ -260,7 +269,10 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
         searchValue.value[column.prop] = '';
       } else {
         column.search.forEach(v => {
-          searchValue.value[v.prop] = '';
+          const props = typeof v.prop === 'string' ? [v.prop] : v.prop
+          props.forEach(p => {
+            searchValue.value[p] = '';
+          })
         })
       }
     }
@@ -314,15 +326,19 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
       if (column.search) {
         if (Array.isArray(column.search)) {
           column.search.forEach(v => {
-            _searchValue[v.prop] = params[v.prop];
+            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 value = params[column.filters.prop || column.prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
-        _filteredValue[column.filters.prop || column.prop] = value;
+        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]] ?? '';
@@ -332,7 +348,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
     if (props.colorFilterConfig) {
       const { prop, filters } = props.colorFilterConfig
-      _filteredValue[prop] = params[prop] ?? (Array.isArray(filters) ? [] : filters.default);
+      _filteredValue[prop] = params[prop] ?? (Array.isArray(filters) ? [] : filters?.default);
     }
 
     searchValue.value = { ...searchValue.value, ..._searchValue }

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

@@ -70,17 +70,43 @@
       >
         <div
           v-for="item in column.search"
-          :key="item.prop"
+          :key="item.label"
         >
           <div class="editable-table-sort-filter__search-title">
             {{ item.label }}
           </div>
-          <el-input
-            class="editable-table-sort-filter__search-input"
-            placeholder="请输入内容"
-            :value="tempSearchValue[item.prop]"
-            @input="val => emit('update:tempSearchValue', item.prop, val)"
-          />
+          <template v-if="!('type' in item) || item.type === 'input'">
+            <el-input
+              class="editable-table-sort-filter__search-input"
+              placeholder="请输入内容"
+              :value="tempSearchValue[item.prop]"
+              @input="val => emit('update:tempSearchValue', item.prop, val)"
+            />
+          </template>
+          <template v-if="item.type === 'dateRange'">
+            <div
+              style="display: flex;flex-direction: column;gap: 12px;"
+            >
+              <el-date-picker
+                @input="val => emit('update:tempSearchValue', item.prop[0], val || '')"
+                :value="tempSearchValue[item.prop[0]]"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                type="date"
+                size="small"
+                placeholder="开始日期"
+              />
+              <el-date-picker
+                @input="val => emit('update:tempSearchValue', item.prop[1], val || '')"
+                :value="tempSearchValue[item.prop[1]]"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                size="small"
+                type="date"
+                placeholder="结束日期"
+              />
+            </div>
+          </template>
         </div>
       </div>
 

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

@@ -48,11 +48,22 @@ export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableC
 
 type FiltersOption = { value: string | number; text: string; [key: string]: any }
 
-type ISearchOptions = {
+type InputSearchOption = {
   prop: string,
   label: string,
   validator?: (value: string) => boolean
-}[]
+  type?: 'input',
+}
+
+type DateRangeSearchOption = {
+  prop: [string, string],
+  label: string,
+  type: 'dateRange',
+  // max?: string,
+  // min?: string,
+}
+
+type ISearchOptions = (InputSearchOption | DateRangeSearchOption)[]
 
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;