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

package/package.json

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

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

@@ -16,11 +16,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
   // 生效中的排序配置
   const sortType = ref<'ascending' | 'descending' | null>(null);
-  const sortingColumn = ref<IColumnConfig | null>(null);
+  const sortProp = ref('')
 
   // 临时的排序配置
   const tempSortType = ref<'ascending' | 'descending' | ''>('');
-  const tempSortingColumn = ref<IColumnConfig | null>(null);
+  const tempSortProp = ref('')
 
   // 生效中的过滤配置 和 临时过滤配置
   const filteredValue = ref<Record<string, string | number | number[] | string[]>>({});
@@ -78,20 +78,28 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
       && (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
-        : 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 => {
+    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])
-    ) || hasPickerParams || sortingColumn.value?.prop === column.prop || summaryList.value.includes(column.prop);
+      : !!searchValue.value[column.prop]
+
+    return isUseFilter
+      || isUseSearch
+      || hasPickerParams
+      || isUseSort
+      || summaryList.value.includes(column.prop);
   }
 
   const handleHeaderPopoverShow = (column: IColumnConfig) => {
@@ -100,7 +108,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     tempFilteredValue.value = { ...filteredValue.value };
     tempSearchValue.value = { ...searchValue.value };
     tempSortType.value = sortType.value || '';
-    tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
+    tempSortProp.value = sortProp.value || '';
     // 临时合计项设置成实际的合计项
     tempSummaryList.value = [...summaryList.value];
   }
@@ -113,9 +121,9 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     });
   }
 
-  const handleSort = (type: 'ascending' | 'descending', column) => {
+  const handleSort = (type: 'ascending' | 'descending', prop: string) => {
     tempSortType.value = type;
-    tempSortingColumn.value = column;
+    tempSortProp.value = prop;
   }
 
   const columnMap = computed(() => {
@@ -192,18 +200,18 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     }
 
     summaryList.value = [...tempSummaryList.value];
-    sortingColumn.value = tempSortingColumn.value ? { ...tempSortingColumn.value } : null;
+    sortProp.value = tempSortProp.value || '';
     sortType.value = tempSortType.value || null;
 
-    if (sortingColumn.value) { // 确认时提交排序
+    if (sortProp.value) { // 确认时提交排序
       if (props.localSort) {
         // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
         inSorting.value = true;
         await nextTick();
-        tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
+        tableDomRef.value?.sort(sortProp.value, sortType.value);
         inSorting.value = false
       } else {
-        emit('sort-change', { order: sortType.value, prop: sortingColumn.value.prop });
+        emit('sort-change', { order: sortType.value, prop: sortProp.value });
       }
     }
 
@@ -223,7 +231,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   const clearSort = () => {
-    sortingColumn.value = null;
+    sortProp.value = '';
     sortType.value = null;
     if (props.localSort) { // 前端过滤
       tableDomRef.value?.clearSort();
@@ -233,9 +241,12 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   const setSort = (params: { order: 'ascending' | 'descending', prop: string }) => {
-    const column = props.columnConfig.find(c => c.prop === params.prop);
+    const column = props.columnConfig.find(c => Array.isArray(c.sortable)
+      ? c.sortable.some(v => v.prop === params.prop)
+      : c.prop === params.prop);
+
     if (column) {
-      sortingColumn.value = column;
+      sortProp.value = params.prop
       sortType.value = params.order;
       if (props.localSort) {
         tableDomRef.value?.sort(params.prop, params.order);
@@ -256,7 +267,12 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
-    if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
+    if (
+      sortProp.value &&
+      (Array.isArray(column._sortable)
+        ? column._sortable.some(v => v.prop === sortProp.value)
+        : sortProp.value === column.prop)
+    ) {
       clearSort();
     }
 
@@ -368,12 +384,12 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     tableSummaryMethod,
     filteredValue,
     showColumnHeadSortIcon,
-    tempSortingColumn,
+    tempSortProp,
     tempSearchValue,
     tempFilteredValue,
     tempSummaryList,
     tempSortType,
-    sortingColumn,
+    sortProp,
     isColumnFiltering,
     searchValue,
     inSorting,

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

@@ -26,50 +26,42 @@
       <div class="editable-table-sort-filter__column-title">
         {{ column.label }}
       </div>
+
       <div
         v-if="column.isColumnSortable"
         class="editable-table-sort-filter__sort"
       >
-        <div class="editable-table-sort-filter__sort-title">
-          排序
-        </div>
-        <div class="editable-table-sort-filter__sort-btns">
-          <el-button
-            :class="['editable-table-sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'editable-table-sort-filter__sort-btn--active']"
-            @click="() => emit('update:sort', 'ascending')"
-          >
-            升序
-          </el-button>
-          <el-button
-            :class="['editable-table-sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'editable-table-sort-filter__sort-btn--active']"
-            @click="() => emit('update:sort', 'descending')"
-          >
-            降序
-          </el-button>
-        </div>
-      </div>
-      <div
-        v-if="column.search && !Array.isArray(column.search)"
-        class="editable-table-sort-filter__search"
-      >
-        <div class="editable-table-sort-filter__search-title">
-          搜索
+        <div
+          v-for="item in sortConfigs"
+          :key="item.prop"
+        >
+          <div class="editable-table-sort-filter__sort-title">
+            {{ item.label }}
+          </div>
+          <div class="editable-table-sort-filter__sort-btns">
+            <el-button
+              :class="['editable-table-sort-filter__sort-btn', checkActiveProp('ascending', item.prop) && 'editable-table-sort-filter__sort-btn--active']"
+              @click="() => emit('update:sort', 'ascending', item.prop)"
+            >
+              升序
+            </el-button>
+            <el-button
+              :class="['editable-table-sort-filter__sort-btn', checkActiveProp('descending', item.prop) && 'editable-table-sort-filter__sort-btn--active']"
+              @click="() => emit('update:sort', 'descending', item.prop)"
+            >
+              降序
+            </el-button>
+          </div>
         </div>
-        <el-input
-          class="editable-table-sort-filter__search-input"
-          placeholder="请输入内容"
-          :value="tempSearchValue[column.prop]"
-          @input="val => emit('update:tempSearchValue', column.prop, val)"
-        />
       </div>
 
       <div
-        v-if="column.search && Array.isArray(column.search)"
+        v-if="!!column.search"
         class="editable-table-sort-filter__search"
         style="display: flex;flex-direction: column;gap: 12px;"
       >
         <div
-          v-for="item in column.search"
+          v-for="item in searchConfigs"
           :key="item.label"
         >
           <div class="editable-table-sort-filter__search-title">
@@ -83,10 +75,8 @@
               @input="val => emit('update:tempSearchValue', item.prop, val)"
             />
           </template>
-          <template v-if="item.type === 'dateRange'">
-            <div
-              style="display: flex;flex-direction: column;gap: 12px;"
-            >
+          <template v-if="item.type === 'doubleDatePicker'">
+            <div class="editable-table-sort-filter__search__date-range">
               <el-date-picker
                 @input="val => emit('update:tempSearchValue', item.prop[0], val || '')"
                 :value="tempSearchValue[item.prop[0]]"
@@ -95,6 +85,7 @@
                 type="date"
                 size="small"
                 placeholder="开始日期"
+                :picker-options="item.pickerOptions ?? {}"
               />
               <el-date-picker
                 @input="val => emit('update:tempSearchValue', item.prop[1], val || '')"
@@ -104,6 +95,7 @@
                 size="small"
                 type="date"
                 placeholder="结束日期"
+                :picker-options="item.pickerOptions ?? {}"
               />
             </div>
           </template>
@@ -122,7 +114,7 @@
           style="display: flex;flex-direction: column;gap: 12px;"
         >
           <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
+            @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"
@@ -131,7 +123,7 @@
             placeholder="开始日期"
           />
           <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
+            @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"
@@ -192,6 +184,7 @@
           </el-radio>
         </el-radio-group>
       </div>
+
       <div
         v-if="column.summary"
         class="editable-table-sort-filter__filter"
@@ -217,6 +210,7 @@
           </el-checkbox>
         </el-checkbox-group>
       </div>
+
       <div class="editable-table-sort-filter__footer">
         <el-button
           class="editable-table-sort-filter__reset-btn"
@@ -237,15 +231,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { IColumnConfig } from '../types'
 
-defineProps<{
+const props = defineProps<{
   headActive: boolean
   column: IColumnConfig
   tempSummaryList: string[]
-  tempSortingColumn: IColumnConfig | null
   tempSortType: 'ascending' | 'descending' | ''
+  tempSortProp: string
   tempSearchValue: Record<string, string>
   tempFilteredValue: Record<string, string | number | number[] | string[]>
 }>()
@@ -254,7 +248,7 @@ 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'): void
+  (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
   (e: 'popover-show'): void
   (e: 'reset'): void
   (e: 'confirm'): void
@@ -262,6 +256,20 @@ const emit = defineEmits<{
 
 const popoverRef = ref(null as any)
 
+const searchConfigs = computed(() => {
+  if (Array.isArray(props.column.search)) return props.column.search
+  return [{ prop: props.column.prop, label: '搜索' }]
+})
+
+const sortConfigs = computed(() => {
+  if (Array.isArray(props.column._sortable)) return props.column._sortable
+  return [{ ...props.column, label: '排序' }]
+})
+
+const checkActiveProp = (type: 'ascending' | 'descending', prop: string) => {
+  return props.tempSortType === type && props.tempSortProp === prop
+}
+
 defineExpose({
   close: () => {
     popoverRef.value?.doClose()

package/src/components/EditableTable/index.less

@@ -388,7 +388,6 @@
     }
 
     &__filter,
-    &__sort,
     &__search {
       padding: 14px;
 
@@ -433,6 +432,13 @@
       }
     }
 
+    &__sort {
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
     &__filter-title,
     &__sort-title,
     &__search-title {
@@ -442,9 +448,20 @@
       margin-bottom: 10px;
     }
 
-    &__search-input {
-      & .el-input__inner {
-        height: 32px;
+    &__search {
+      &-input {
+        & .el-input__inner {
+          height: 32px;
+        }
+      }
+      &__date-range {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .el-date-editor.el-input, .el-date-editor.el-input__inner {
+          width: 100%;
+        }
       }
     }
 

package/src/components/EditableTable/index.vue

@@ -111,7 +111,7 @@
             :column="colorFilterConfig"
             :showing-columns="showingColumns"
             :temp-summary-list="tempSummaryList"
-            :temp-sorting-column="tempSortingColumn"
+            :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
             :temp-search-value="tempSearchValue"
@@ -119,7 +119,7 @@
             @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
             @update:tempSearchValue="(key, value) => { $set(tempSearchValue, key, value) }"
             @popover-show="() => handleHeaderPopoverShow(colorFilterConfig)"
-            @update:sort="(type) => handleSort(type, colorFilterConfig)"
+            @update:sort="handleSort"
             @reset="() => handleHeaderOperationReset(colorFilterConfig, scope)"
             @confirm="() => handleHeaderOperationConfirm(colorFilterConfig, scope)"
           >
@@ -166,7 +166,7 @@
             :column="column"
             :showing-columns="showingColumns"
             :temp-summary-list="tempSummaryList"
-            :temp-sorting-column="tempSortingColumn"
+            :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
             :temp-search-value="tempSearchValue"
@@ -174,7 +174,7 @@
             @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)"
+            @update:sort="handleSort"
             @reset="() => handleHeaderOperationReset(column, scope)"
             @confirm="() => handleHeaderOperationConfirm(column, scope)"
           >
@@ -453,8 +453,9 @@ const actualColumns = computed(() => {
     const rawItem = props.columnConfig.find(c => c.prop === prop) ?? {} as IColumnConfig;
     const item: IColumnConfig = {
       ...rawItem,
-      isColumnSortable: rawItem.sortable,
-      sortable: inSorting.value ? rawItem.sortable : false
+      isColumnSortable: !!rawItem.sortable,
+      sortable: inSorting.value ? !!rawItem.sortable : false,
+      _sortable: rawItem.sortable,
     };
     if (cnt > 0) {
       item.fixed = 'left';
@@ -543,12 +544,12 @@ const {
   tableSummaryMethod,
   filteredValue,
   showColumnHeadSortIcon,
-  tempSortingColumn,
+  sortProp,
   tempSearchValue,
   tempFilteredValue,
   tempSummaryList,
   tempSortType,
-  sortingColumn,
+  tempSortProp,
   isColumnFiltering,
   searchValue,
   inSorting,
@@ -562,7 +563,7 @@ const {
 /************ 表格行拖拽和显示设置列拖拽 ************ */
 const beforeDragStart = () => {
   // 如果有列存在排序，不允许拖拽
-  if (sortingColumn.value) {
+  if (sortProp.value) {
     Message.warning('已有列正在排序，不允许拖拽。');
     return false;
   }

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

@@ -1,4 +1,4 @@
-import type { TableColumn } from 'element-ui'
+import type { TableColumn, DatePicker } from 'element-ui'
 
 export enum IEditType {
   INPUT = 'input',
@@ -11,7 +11,8 @@ type _IColumnConfigRequired = {
   label: string;
   editType?: IEditType; // 编辑格式
   editSlotName?: string; // 编辑时，自定义编辑组件的slotName
-  sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  sortable?: boolean | ISortOption[]; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  _sortable?: _IColumnConfigRequired['sortable']; // 内部使用，el-table 的 sortable 不支持数组，用来同步 sortable
   /** 内部使用， */
   isColumnSortable?: boolean;
   slotName?: string; // 如果要自定义，传入 slotName
@@ -48,22 +49,26 @@ export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableC
 
 type FiltersOption = { value: string | number; text: string; [key: string]: any }
 
+type ISortOption = {
+  prop: string
+  label: string
+}
+
 type InputSearchOption = {
-  prop: string,
-  label: string,
+  prop: string
+  label: string
   validator?: (value: string) => boolean
-  type?: 'input',
+  type?: 'input'
 }
 
-type DateRangeSearchOption = {
-  prop: [string, string],
-  label: string,
-  type: 'dateRange',
-  // max?: string,
-  // min?: string,
+type DoubleDatePickerSearchOption = {
+  prop: [string, string]
+  label: string
+  type: 'doubleDatePicker'
+  pickerOptions?: DatePicker['pickerOptions']
 }
 
-type ISearchOptions = (InputSearchOption | DateRangeSearchOption)[]
+type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption)[]
 
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;