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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.12",
+  "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/features/bizTableOperatePopover.vue

@@ -9,7 +9,7 @@
       slot="reference"
       class="editable-table-operation-popover__operation-reference btn-pointer"
     >
-      <el-button :class="['editable-table-operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'editable-table-operation-popover__operation-btn--active']">
+      <el-button class="editable-table-operation-popover__operation-btn">
         操作
       </el-button>
     </div>
@@ -46,10 +46,10 @@ import { IDefaultOperationType } from '../types';
 
 defineProps<{
   defaultOperations: IDefaultOperationType[]
-  hoveringCellInfo: {
-    rowIndex: number
-    columnProperty: string
-  }
+  // hoveringCellInfo: {
+  //   rowIndex: number
+  //   columnProperty: string
+  // }
   scope: any
 }>()
 

package/src/components/EditableTable/index.less

@@ -412,12 +412,13 @@
 
       .el-radio__label {
         white-space: nowrap;
-        overflow: hidden;
+        overflow-x: hidden;
         text-overflow: ellipsis;
         width: calc(100% - 20px);
         display: inline-block;
         vertical-align: middle;
         font-size: 12px;
+        line-height: normal;
       }
     }
 
@@ -508,12 +509,13 @@
 
       .el-checkbox__label {
         white-space: nowrap;
-        overflow: hidden;
+        overflow-x: hidden;
         text-overflow: ellipsis;
         width: calc(100% - 20px);
         display: inline-block;
         vertical-align: middle;
         font-size: 12px;
+        line-height: normal;
       }
     }
 
@@ -717,9 +719,7 @@
     }
 
     &__operation-btn {
-      &--active {
-        color: @--theme-blue-- !important;
-      }
+      color: @--theme-blue-- !important;
     }
   }
 

package/src/components/EditableTable/index.vue

@@ -205,7 +205,6 @@
             v-if="editingRowIndex !== scope.$index"
             ref="operationPopoverRef"
             :default-operations="defaultOperations"
-            :hovering-cell-info="hoveringCellInfo"
             :scope="scope"
             @edit="() => handleEdit(scope)"
             @delete="() => handleDelete(scope.row, scope.$index)"

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;