@lx-frontend/wrap-element-ui 1.0.6 → 1.0.7-beta.1

package/package.json

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

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

@@ -41,7 +41,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     return value.length;
   }));
 
-  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary;
+  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary || column.doubleDatePicker;
 
   watch(
     () => props.columnConfig,
@@ -74,6 +74,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
   }
 
   const isColumnHeadActive = (column: IColumnConfig) => {
+    const hasPickerParams = !!(
+      column.doubleDatePicker
+      && (searchValue.value[column.doubleDatePicker.props[0]] || searchValue.value[column.doubleDatePicker.props[1]])
+    )
+
     return (
       !!(column.filters && (Array.isArray(column.filters)
         ? ((filteredValue.value[column.prop] as any[]).length)
@@ -84,9 +89,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
         !!(column.search
           ? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
           : searchValue.value[column.prop])
-      ) ||
-      sortingColumn.value?.prop === column.prop ||
-      summaryList.value.includes(column.prop);
+      ) || hasPickerParams || sortingColumn.value?.prop === column.prop || summaryList.value.includes(column.prop);
   }
 
   const handleHeaderPopoverShow = (column: IColumnConfig) => {
@@ -138,13 +141,20 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
           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]]
+      }
     })
 
     Object.keys(params).forEach(key => {
       if (params[key] === undefined) delete params[key]
     })
 
-    emit('search', params);
+    emit('search', {
+      ...params,
+      page: 1
+    });
   };
 
   const handleHeaderOperationConfirm = async (column: IColumnConfig, scope) => {
@@ -238,6 +248,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
         })
       }
     }
+    if (column.doubleDatePicker) {
+      searchValue.value[column.doubleDatePicker.props[0]] = '';
+      searchValue.value[column.doubleDatePicker.props[1]] = '';
+    }
+
 
     emitSearch();
 
@@ -294,6 +309,10 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
         const value = params[column.prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
         _filteredValue[column.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]] ?? '';
+      }
     })
 
     searchValue.value = { ...searchValue.value, ..._searchValue }
@@ -323,4 +342,4 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     searchValue,
     inSorting,
   }
-}
+}

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

@@ -28,4 +28,4 @@ export function usePagination({ emit, beforePageChange }: IParams) {
     handlePageSizeChange,
     handleCurrPageChange,
   }
-}
+}

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

@@ -75,6 +75,38 @@
           />
         </div>
       </div>
+      
+      <div
+        v-if="column.doubleDatePicker"
+        class="editable-table-sort-filter__sort"
+      >
+        <div class="editable-table-sort-filter__search-title">
+          {{ column.doubleDatePicker.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: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>
+      </div>
 
       <div
         v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
@@ -199,4 +231,4 @@ defineExpose({
     popoverRef.value?.doClose()
   }
 })
-</script>
+</script>

package/src/components/EditableTable/index.vue

@@ -138,8 +138,8 @@
             :temp-filtered-value="tempFilteredValue"
             :temp-search-value="tempSearchValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
-            @update:tempFilteredValue="(key, value) => { tempFilteredValue[key] = value }"
-            @update:tempSearchValue="(key, value) => { tempSearchValue[key] = value }"
+            @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+            @update:tempSearchValue="(key, value) => { $set(tempSearchValue, key, value) }"
             @popover-show="() => handleHeaderPopoverShow(column)"
             @update:sort="(type) => handleSort(type, column)"
             @reset="() => handleHeaderOperationReset(column, scope)"
@@ -448,7 +448,7 @@ const currScope = ref<any>(null);
 
 /************ 分页相关 *************/
 const beforePageChange = () => {
-  searchValue.value = {};
+  // searchValue.value = {};
 };
 const {
   pageSize,
@@ -567,8 +567,8 @@ const getColumnBindProps = (column: IColumnConfig) => {
 
 const setRowClassName = (scope) => {
   return `
-    custom-row-classname 
-    custom-row-classname-${scope.rowIndex} 
+    custom-row-classname
+    custom-row-classname-${scope.rowIndex}
     ${scope.row.isPinned ? 'custom-row-classname-pinned' : ''}
   `;
 };
@@ -602,4 +602,4 @@ watch([
 
 <style lang="less">
 @import './index.less';
-</style>
+</style>

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

@@ -31,6 +31,10 @@ type _IColumnConfigRequired = {
   formatter?: (row: any, column: IColumnConfig, value: any, index: number) => string | number;
   width?: number | string;
   minWidth?: number | string;
+  doubleDatePicker?: {
+    props: [string, string],
+    label: string,
+  }; // 是否开启日期范围选择器
 }
 
 export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>