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

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

@@ -0,0 +1,131 @@
+import dayjs 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,115 @@
+<!-- 月/日选择器 -->
+<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">
+      <el-cascader
+        clearable
+        :value="startDate"
+        separator=""
+        size="small"
+        placeholder="开始日期"
+        popper-class="month-day-picker"
+        :options="startDateOptions"
+        @change="value => handleDateChange(config.prop[0], value)"
+      />
+      <el-cascader
+        clearable
+        :value="endDate"
+        separator=""
+        size="small"
+        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 './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,39 @@
+<!-- 单选框 -->
+<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"
+      >
+        {{ item.text }}
+      </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

@@ -9,98 +9,49 @@
     @show="() => emit('popover-show')"
   >
     <template slot="reference">
-      <slot
-        v-if="column.customColorLabel"
-        name="custom"
-      />
-      <!-- 筛选中，或排序中，高亮 -->
-      <span
-        v-else
-        :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
-      >
-        {{ column.label }}
-        <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
-      </span>
+      <slot name="custom">
+        <!-- 筛选中，或排序中，高亮 -->
+        <span
+          :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
+        >
+          {{ column.label }}
+          <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
+        </span>
+      </slot>
     </template>
     <div class="editable-table-sort-filter">
       <div class="editable-table-sort-filter__column-title">
         {{ column.label }}
       </div>
 
-      <Sort
-        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 class="editable-table-sort-filter__item">
+        <BizSortFilter
+          v-if="column.isColumnSortable"
+          :column="column"
+          :temp-sort-prop="tempSortProp"
+          :temp-sort-type="tempSortType"
+          @update:sort="(type, prop) => emit('update:sort', type, prop)"
+        />
+      </div>
 
-      <div
-        v-if="column.doubleDatePicker"
-        class="editable-table-sort-filter__sort"
-      >
-        <div class="editable-table-sort-filter__search-title">
-          {{ column.doubleDatePicker.label }}
-        </div>
+      <template v-if="column.filters">
         <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-sort-filter__item 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>
+      </template>
 
       <div
         v-if="column.summary"
-        class="editable-table-sort-filter__filter"
+        class="editable-table-sort-filter__item editable-table-sort-filter__filter"
       >
         <div class="editable-table-sort-filter__filter-title">
           统计
@@ -144,12 +95,16 @@
 </template>
 
 <script setup lang="ts">
-import Search from './search.vue'
-import Sort from './sort.vue'
-import BizFilter from './bizFilter.vue'
-
 import { ref } from 'vue'
-import { IColumnConfig } from '../../types'
+
+import BizCheckboxFilter from './BizCheckboxFilter.vue';
+import BizColorRadioFilter from './BizColorRadioFilter.vue';
+import BizDoubleDatePickerFilter from './BizDoubleDatePickerFilter.vue';
+import BizInputFilter from './BizInputFilter.vue';
+import BizMonthDayPicker from './BizMonthDayPicker.vue';
+import BizSortFilter from './BizSortFilter.vue';
+import BizRadioFilter from "./BizRadioFilter.vue";
+import { FilterItem, IColumnConfig } from '../../types'
 
 defineProps<{
   headActive: boolean
@@ -157,12 +112,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 +124,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.less

@@ -387,9 +387,28 @@
       border-bottom: 1px solid #d6dbe3;
     }
 
+    &__item {
+      margin-top: 14px;
+    }
+
+    &__date-picker-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 100%;
+      }
+    }
+
     &__filter,
     &__search {
-      padding: 14px;
+      padding: 0 14px;
+
+      .el-select {
+        width: 100%;
+      }
 
       .el-radio {
         width: 100%;
@@ -422,7 +441,6 @@
     }
 
     &__filter {
-      padding-top: 0;
 
       .el-radio-group,
       .el-checkbox-group {
@@ -433,10 +451,9 @@
     }
 
     &__sort {
-      padding: 14px;
+      padding: 0 14px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
     }
 
     &__filter-title,
@@ -454,22 +471,19 @@
           height: 32px;
         }
       }
+
       &__date-range {
         display: flex;
         flex-direction: column;
         gap: 12px;
 
-        .el-date-editor.el-input, .el-date-editor.el-input__inner {
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
           width: 100%;
         }
       }
     }
 
-    &__filter-title {
-      border-top: 1px solid #f3f3f3;
-      padding-top: 14px;
-    }
-
     &__sort-btns {
       display: flex;
       justify-content: space-between;
@@ -543,6 +557,7 @@
       justify-content: flex-end;
       align-items: center;
       padding: 0 15px;
+      margin-top: 14px;
     }
 
     &__reset-btn,
@@ -802,4 +817,4 @@
   &::before {
     bottom: -4px;
   }
-}
+}