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

package/src/components/EditableTable/features/bizTableHeaderPopover/BizMonthDayPicker.helper.ts

@@ -0,0 +1,131 @@
+import dayjs, { OpUnitType } from 'dayjs';
+
+// 月份配置 - 月份对应的天数
+const monthConfig = [
+	{ month: 1, day: 31 },
+	{ month: 2, day: 29 },
+	{ month: 3, day: 31 },
+	{ month: 4, day: 30 },
+	{ month: 5, day: 31 },
+	{ month: 6, day: 30 },
+	{ month: 7, day: 31 },
+	{ month: 8, day: 31 },
+	{ month: 9, day: 30 },
+	{ month: 10, day: 31 },
+	{ month: 11, day: 30 },
+	{ month: 12, day: 31 },
+];
+
+/**
+ * 组装极联选择组件默认选项
+ * example: [
+ *   {
+ *     value: '1',
+ *     label: '1月',
+ *     children: [
+ *       { value: '1', label: '1日' },
+ *       ... // 1月份的每一天
+ *     ]
+ *   },
+ *   ... // 其他月份的选项
+ * ]
+ */
+export function getMonthDayPickerDefaultOptions() {
+	return monthConfig.map(
+		(item) => ({
+			value: item.month.toString(),
+			label: `${ item.month }月`,
+			children: Array.from(
+				{ length: item.day },
+				(_, i) => (
+					{ value: `${ i + 1 }`, label: `${ i + 1 }日` }
+				)
+			)
+		})
+	);
+}
+
+/**
+ * 组装日期范围级联选择组件禁用选项
+ * @param date 日期 - 级联选择组件值
+ * @param isStartDate 区分传递的date是 开始日期 / 结束日期
+ * @param digits 时间范围 n个月
+ */
+export function disableOutOfRangeOptions({
+	date = [],
+	isStartDate = false,
+	digits = 3
+}: { date: string[], isStartDate?: boolean, digits: number }) {
+	// 写死一个闰年年份 仅用于比较时间
+	// 如果非闰年 dayjs('year-02-29') 会输出 year-3-1 导致日期范围选择器出错
+	const year = 2024;
+	const baseMonthDay = 30;
+	const options = getMonthDayPickerDefaultOptions();
+	
+	return options.map(
+		(month) => {
+			const children = month.children.map(
+				(day) => {
+					// 组装日期 - 当前这个选项对应的完整日期
+					const currentDate = dayjs([year, month.value, day.value].join('-'));
+					
+					// 是否需要禁用当前日期
+					let disabled = false;
+					
+					// 如果有传入日期，则判断是否在禁用日期范围内
+					if (date.length > 0) {
+						// 组装日期 - 传入日期对应的完整日期
+						const baseDate = dayjs([year, ...date].join('-'));
+						
+						// 如果是开始时间，则结束时间范围为 baseDate + digits
+						// 如果是结束时间，则开始时间范围为 baseDate - digits
+						if (isStartDate) {
+							const maxDate = baseDate.add(digits * baseMonthDay - 1, 'day');
+							// 推算时间范围超过12月31号，结束时间可选年初时间
+							if (maxDate.year() > year) {
+								disabled = currentDate.isAfter(maxDate.subtract(366, 'day'), 'day') && currentDate.isBefore(baseDate, 'day');
+							} else {
+								disabled = currentDate.isAfter(maxDate, 'day') || currentDate.isBefore(baseDate, 'day');
+							}
+						} else {
+							const minDate = baseDate.subtract(digits * baseMonthDay - 1, 'day');
+							// 推算时间范围在1月1号前，开始时间可选年末时间
+							if (minDate.year() < year) {
+								disabled = currentDate.isBefore(minDate.add(366, 'day'), 'day') && currentDate.isAfter(baseDate, 'day');
+							} else {
+								disabled = currentDate.isBefore(minDate, 'day') || currentDate.isAfter(baseDate, 'day');
+							}
+						}
+					}
+					
+					return {
+						...day,
+						disabled
+					};
+				}
+			);
+			
+			// 如果当前月份每天都是禁用日期，则整个月份禁用
+			const disabled = children.every((day) => day.disabled);
+			
+			return {
+				...month,
+				disabled,
+				children
+			};
+		}
+	);
+}
+
+/**
+ * 格式化月日级联选择组件值 MM-dd
+ * @param date 日期 - 级联选择组件值
+ * @returns 格式化后的日期字符串
+ */
+export function formatMonthDayPickerValue(date: string[]) {
+	return date
+		.map(
+			(str) => str.padStart(2, '0')
+		)
+		.join('-');
+}

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

@@ -0,0 +1,116 @@
+<!-- 月/日选择器 -->
+<template>
+  <div class="editable-table-sort-filter__sort">
+    <div class="editable-table-sort-filter__search-title">
+      {{ config.label || '筛选' }}
+    </div>
+    <div
+      class="editable-table-sort-filter__date-picker-content"
+      style="display: flex;flex-direction: column;gap: 12px;"
+    >
+      <el-cascader
+        clearable
+        :value="startDate"
+        separator=""
+        placeholder="开始日期"
+        popper-class="month-day-picker"
+        :options="startDateOptions"
+        @change="value => handleDateChange(config.prop[0], value)"
+      />
+      <el-cascader
+        clearable
+        :value="endDate"
+        separator=""
+        placeholder="结束日期"
+        popper-class="month-day-picker"
+        :options="endDateOptions"
+        @change="value => handleDateChange(config.prop[1], value)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  disableOutOfRangeOptions, formatMonthDayPickerValue,
+  getMonthDayPickerDefaultOptions
+} from '@/components/EditableTable/features/bizTableHeaderPopover/BizMonthDayPicker.helper';
+import { computed, toRefs } from 'vue';
+import { IFilterMonthDayPicker } from '../../types';
+
+const props = defineProps<{
+  config: IFilterMonthDayPicker
+  tempFilteredValue: Record<string, string>
+}>()
+const { config, tempFilteredValue } = toRefs(props)
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+
+const formatDate = (date: string) => {
+  if (date) {
+    return date
+      .split('-')
+      // 01 -> 1
+      .map(
+        (v) => String(Number(v))
+      )
+  }
+  
+  return []
+}
+
+const startDate = computed(() => {
+  const { prop } = config.value;
+  return formatDate(tempFilteredValue.value[prop[0]]);
+})
+
+const endDate = computed(() => {
+  const { prop } = config.value;
+  return formatDate(tempFilteredValue.value[prop[1]]);
+})
+
+// 开始日期范围限制
+const startDateOptions = computed(
+  () => {
+    if (endDate.value.length === 0) {
+      return getMonthDayPickerDefaultOptions();
+    }
+    
+    return disableOutOfRangeOptions({
+      date: endDate.value,
+      isStartDate: false,
+      digits: config.value.limit
+    });
+  }
+);
+
+// 结束日期范围限制
+const endDateOptions = computed(
+  () => {
+    if (startDate.value.length === 0) {
+      return getMonthDayPickerDefaultOptions();
+    }
+    
+    return disableOutOfRangeOptions({
+      date: startDate.value,
+      isStartDate: true,
+      digits: config.value.limit
+    });
+  }
+);
+
+/**
+ * 选择时间更改统一回调
+ */
+const handleDateChange = (key: string, value: string[]) => {
+  const currentValue = value.length === 0
+    ? ''
+    : formatMonthDayPickerValue(value)
+  emit('update:tempFilteredValue', key, currentValue);
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,44 @@
+<!-- 单选框 -->
+<template>
+  <div class="editable-table-sort-filter__filter">
+    <div class="editable-table-sort-filter__filter-title">
+      {{ config.label || '筛选' }}
+    </div>
+    <el-radio-group
+      style="display: flex;flex-direction: column;gap: 6px;"
+      :value="tempFilteredValue[config.prop]"
+      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+    >
+      <el-radio
+        v-for="item in config.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 { IFilterSelect } from '../../types';
+
+defineProps<{
+  config: IFilterSelect
+  tempFilteredValue: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+}>()
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/EditableTable/features/bizTableHeaderPopover/{sort.vue → BizSortFilter.vue}

@@ -5,7 +5,7 @@
       :key="item.prop"
     >
       <div class="editable-table-sort-filter__sort-title">
-        {{ item.label }}
+        {{ item.label || '排序' }}
       </div>
       <div class="editable-table-sort-filter__sort-btns">
         <el-button
@@ -47,4 +47,4 @@ const sortConfigs = computed(() => {
   if (Array.isArray(props.column._sortable)) return props.column._sortable
   return [{ ...props.column, label: '排序' }]
 })
-</script>
+</script>

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

@@ -27,77 +27,32 @@
         {{ column.label }}
       </div>
 
-      <Sort
+      <BizSortFilter
         v-if="column.isColumnSortable"
         :column="column"
         :temp-sort-prop="tempSortProp"
         :temp-sort-type="tempSortType"
         @update:sort="(type, prop) => emit('update:sort', type, prop)"
       />
-
-      <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"
+        v-if="column.filters"
+        class="editable-table__filter-group"
       >
-        <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;"
+          v-for="(filterItem, index) in column.filters"
+          :key="index"
+          class="editable-table__filter-group__filter"
         >
-          <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="结束日期"
+          <component
+            :is="componentMap[filterItem.type]"
+            :config="filterItem"
+            :temp-filtered-value="tempFilteredValue"
+            @update:tempFilteredValue="onUpdate"
           />
         </div>
       </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__filter"
@@ -144,12 +99,17 @@
 </template>
 
 <script setup lang="ts">
-import Search from './search.vue'
-import Sort from './sort.vue'
-import BizFilter from './bizFilter.vue'
+import BizCheckboxFilter from '@/components/EditableTable/features/bizTableHeaderPopover/BizCheckboxFilter.vue';
+import BizColorRadioFilter from '@/components/EditableTable/features/bizTableHeaderPopover/BizColorRadioFilter.vue';
+import BizDoubleDatePickerFilter
+  from '@/components/EditableTable/features/bizTableHeaderPopover/BizDoubleDatePickerFilter.vue';
+import BizInputFilter from '@/components/EditableTable/features/bizTableHeaderPopover/BizInputFilter.vue';
+import BizMonthDayPicker from '@/components/EditableTable/features/bizTableHeaderPopover/BizMonthDayPicker.vue';
+import BizRadioFilter from '@/components/EditableTable/features/bizTableHeaderPopover/BizRadioFilter.vue';
+import BizSortFilter from '@/components/EditableTable/features/bizTableHeaderPopover/BizSortFilter.vue';
 
 import { ref } from 'vue'
-import { IColumnConfig } from '../../types'
+import { FilterItem, IColumnConfig } from '../../types'
 
 defineProps<{
   headActive: boolean
@@ -157,12 +117,10 @@ 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
@@ -171,8 +129,29 @@ 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()

package/src/components/EditableTable/index.vue

@@ -104,7 +104,7 @@
         :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         :filtered-value="Array.isArray(filteredValue[colorFilterConfig?.prop]) ? filteredValue[colorFilterConfig?.prop] : []"
       >
-        <template #header="scope">
+        <template #header>
           <biz-table-header-popover
             v-if="colorFilterConfig"
             :head-active="isColumnHeadActive(colorFilterConfig)"
@@ -114,14 +114,12 @@
             :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
-            :temp-search-value="tempSearchValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
             @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
-            @update:tempSearchValue="(key, value) => { $set(tempSearchValue, key, value) }"
             @popover-show="() => handleHeaderPopoverShow(colorFilterConfig)"
             @update:sort="handleSort"
-            @reset="() => handleHeaderOperationReset(colorFilterConfig, scope)"
-            @confirm="() => handleHeaderOperationConfirm(colorFilterConfig, scope)"
+            @reset="() => handleHeaderOperationReset(colorFilterConfig)"
+            @confirm="() => handleHeaderOperationConfirm(colorFilterConfig)"
           >
             <template #custom>
               <div class="editable-table__color-icon" />
@@ -158,8 +156,8 @@
         v-bind="getColumnBindProps(column)"
       >
         <template
+          #header
           v-if="showColumnHeadSortIcon(column)"
-          #header="scope"
         >
           <biz-table-header-popover
             :head-active="isColumnHeadActive(column)"
@@ -169,14 +167,12 @@
             :temp-sort-prop="tempSortProp"
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
-            :temp-search-value="tempSearchValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
             @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
-            @update:tempSearchValue="(key, value) => { $set(tempSearchValue, key, value) }"
             @popover-show="() => handleHeaderPopoverShow(column)"
             @update:sort="handleSort"
-            @reset="() => handleHeaderOperationReset(column, scope)"
-            @confirm="() => handleHeaderOperationConfirm(column, scope)"
+            @reset="() => handleHeaderOperationReset(column)"
+            @confirm="() => handleHeaderOperationConfirm(column)"
           >
             <template #filter-item="item">
               <slot
@@ -194,15 +190,6 @@
                 {{ column.label }}
               </slot>
             </template>
-            <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>
           </biz-table-header-popover>
         </template>
         <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
@@ -434,7 +421,7 @@ const props = withDefaults(defineProps<IProps>(), {
   total: 0,
   defaultOperations: () => [],
   colorList: () => [],
-  colorFilterConfig: () => null,
+  colorFilterConfig: undefined,
   leftFixedCount: 1,
   dragSemiRange: 15,
   loading: false,
@@ -516,7 +503,7 @@ const {
 const {
   setRowStyle,
 } = useRowBgColor({
-  colorList: props.colorList,
+  colorList: props.colorList || [],
   emit
 });
 
@@ -554,13 +541,11 @@ const {
   filteredValue,
   showColumnHeadSortIcon,
   sortProp,
-  tempSearchValue,
   tempFilteredValue,
   tempSummaryList,
   tempSortType,
   tempSortProp,
   isColumnFiltering,
-  searchValue,
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,

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

@@ -6,6 +6,65 @@ export enum IEditType {
   DATE_ONLY = 'date'
 }
 
+export interface ISortOption {
+	prop: string
+	label: string
+}
+
+/** 筛选组件 - 输入框 */
+export interface IFilterInput {
+  type: 'input'
+  prop: string,
+  label?: string,
+  validator?: (value: string) => boolean
+  placeholder?: string
+}
+
+export interface IFilterSelectOptions {
+  value: any;
+  text: string;
+  [key: string]: any;
+}
+
+/** 筛选组件 - 单选/多选 */
+export interface IFilterSelect {
+  type: 'radio' | 'checkbox'
+  prop: string
+  options: IFilterSelectOptions[]
+  label?: string
+  defaultValue?: any | any[]
+}
+
+/** 筛选组件 - 日期范围（拆分两个日期选择器） */
+export interface IFilterDoubleDatePicker {
+  type: 'doubleDatePicker',
+  prop: [string, string],
+  label?: string,
+	pickerOptions?: DatePicker['pickerOptions']
+}
+
+/** 筛选组件 - 月日选择器 */
+export interface IFilterMonthDayPicker {
+  type: 'monthDayPicker',
+  prop: [string, string],
+  label?: string,
+  /** 可选择的范围 */
+  limit: number,
+}
+
+/** 筛选组件 - 颜色选择器 */
+export interface IFilterColorRadio {
+  type: 'colorRadio',
+  prop: string,
+  label?: string,
+  options: IFilterSelectOptions[]
+}
+
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio
+
+/** 筛选组件类型 */
+export type FilterListType = Array<FilterItem>
+
 type _IColumnConfigRequired = {
   prop: string;
   label: string;
@@ -20,65 +79,19 @@ type _IColumnConfigRequired = {
   isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
   /** 默认隐藏，显示设置中，该列默认隐藏 */
   defaultHide?: boolean;
-  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
-  search?: boolean | ISearchOptions
   summary?: boolean; // 是否可以显示该列的统计
   summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
-  /** 过滤，传数组时默认复选框 */
-  filters?: {
-    type?: 'checkbox' | 'radio',
-    options: FiltersOption[]
-    default?: string | number | string[] | number[],
-    /** 自定义参数 优先于最外层的prop */
-    prop?: string
-  } | FiltersOption[]
   /** 格式化函数，用于自定义渲染 */
   formatter?: (row: any, column: IColumnConfig, value: any, index: number) => string | number;
   width?: number | string;
   minWidth?: number | string;
-  /** 是否开启日期范围选择器 */
-  doubleDatePicker?: {
-    props: [string, string],
-    label: string,
-  };
   /** 自定义颜色表头label */
-  customColorLabel?: boolean
+  customColorLabel?: boolean;
+  filters?: FilterListType;
 }
 
 export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>
 
-type FiltersOption = { value: string | number; text: string; [key: string]: any }
-
-type ISortOption = {
-  prop: string
-  label: string
-}
-
-type InputSearchOption = {
-  prop: string
-  label: string
-  validator?: (value: string) => boolean
-  type?: 'input'
-}
-
-type DoubleDatePickerSearchOption = {
-  prop: [string, string]
-  label: string
-  type: 'doubleDatePicker'
-  pickerOptions?: DatePicker['pickerOptions']
-  validator?: (tempSearchValue: Record<string, any>) => boolean
-}
-
-type SlotSearchOption = {
-  prop: string | string[]
-  label: string
-  type: 'slot'
-  slotName: string
-  validator?: (tempSearchValue: Record<string, any>) => boolean
-}
-
-type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption | SlotSearchOption)[]
-
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;
 }