@lx-frontend/wrap-element-ui 1.0.25 → 2.0.0

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

@@ -1,40 +0,0 @@
-<!-- 复选框 -->
-<template>
-  <div class="editable-table-sort-filter__filter">
-    <div class="editable-table-sort-filter__filter-title">
-      {{ config.label || '筛选' }}
-    </div>
-    <el-checkbox-group
-      class="editable-table-sort-filter__filter-checkbox-group"
-      :value="tempFilteredValue[config.prop]"
-      @input="val => emit('update:tempFilteredValue', config.prop, val)"
-    >
-      <el-checkbox
-        v-for="item in config.options"
-        :key="item.value"
-        :label="item.value"
-        :title="item.text"
-        class="editable-table-sort-filter__filter-checkbox"
-      >
-        {{ item.text }}
-      </el-checkbox>
-    </el-checkbox-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/BizColorRadioFilter.vue

@@ -1,56 +0,0 @@
-<!-- 单选框 -->
-<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"
-      >
-        <span class="color-option">
-          <span
-            class="icon"
-            :style="{ background: item.color }"
-          />
-          <span>{{ item.text }}</span>
-        </span>
-      </el-radio>
-    </el-radio-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { IFilterColorRadio } from '../../types';
-
-defineProps<{
-  config: IFilterColorRadio
-  tempFilteredValue: Record<string, string>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:tempFilteredValue', key: string, value: string): void
-}>()
-</script>
-
-<style scoped lang="less">
-.color-option {
-  display: flex;
-  align-items: center;
-  
-  .icon {
-    border-radius: 50%;
-    width: 1em;
-    height: 1em;
-    margin-right: 0.3em;
-    border: 1px solid #ccc;
-  }
-}
-</style>

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

@@ -1,94 +0,0 @@
-<!-- 日期范围选择（分开的两个日期选择器） -->
-<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-date-picker
-        v-bind="datePickerCommonProps"
-        placeholder="开始日期"
-        :value="tempFilteredValue[config.prop[0]]"
-        :picker-options="pickerStartOptions"
-        @input="handleStartDateChange"
-      />
-      <el-date-picker
-        v-bind="datePickerCommonProps"
-        placeholder="结束日期"
-        :value="tempFilteredValue[config.prop[1]]"
-        :picker-options="pickerEndOptions"
-        @input="handleEndDateChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { IFilterDoubleDatePicker, IFilterDoubleDatePickerLimit } from '../../types';
-import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../../../helper';
-import { computed, toRefs } from 'vue';
-
-interface IFilterDoubleDatePickerProps {
-  /** 日期选择器配置 */
-  config: IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit;
-  /** 临时筛选值 */
-  tempFilteredValue: Record<string, string>;
-}
-
-const props = defineProps<IFilterDoubleDatePickerProps>();
-const { config, tempFilteredValue } = toRefs(props)
-
-const emit = defineEmits<{
-  (e: 'update:tempFilteredValue', key: string, value: string): void;
-}>();
-
-/** 日期选择器通用配置 */
-const datePickerCommonProps = {
-  valueFormat: 'yyyy-MM-dd',
-  format: 'yyyy-MM-dd',
-  type: 'date',
-  size: 'small',
-  editable: false,
-} as const;
-
-
-const pickerStartOptions = computed(() => {
-  // 自定义禁用选项优先级最高
-  if ('pickerOptions' in config.value && config.value.pickerOptions?.start) {
-    return config.value.pickerOptions.start;
-  }
-
-  // 限制天数范围 自动生成禁用选项
-  if ('limit' in config.value) {
-    return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]], config.value.limit);
-  }
-
-  // 默认（只限制起止时间，不限制范围）
-  return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]]);
-});
-
-const pickerEndOptions = computed(() => {
-  // 自定义禁用选项优先级最高
-  if ('pickerOptions' in config.value && config.value.pickerOptions?.end) {
-    return config.value.pickerOptions.end;
-  }
-
-  // 限制天数范围 自动生成禁用选项
-  if ('limit' in config.value) {
-    return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]], config.value.limit);
-  }
-
-  // 默认（只限制起止时间，不限制范围）
-  return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]]);
-})
-
-/** 处理开始日期变更 */
-const handleStartDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', config.value.prop[0], val || '');
-};
-
-/** 处理结束日期变更 */
-const handleEndDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', config.value.prop[1], val || '');
-};
-</script>

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

@@ -1,26 +0,0 @@
-<template>
-  <div class="editable-table-sort-filter__search">
-    <div class="editable-table-sort-filter__search-title">
-      {{ config.label || '搜索' }}
-    </div>
-    <el-input
-      class="editable-table-sort-filter__search-input"
-      :placeholder="config.placeholder || '请输入内容'"
-      :value="tempFilteredValue[config.prop]"
-      @input="val => emit('update:tempFilteredValue', config.prop, val)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { IFilterInput } from '../../types';
-
-defineProps<{
-  config: IFilterInput
-  tempFilteredValue: Record<string, string>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:tempFilteredValue', key: string, value: string): void
-}>()
-</script>

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

@@ -1,131 +0,0 @@
-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

@@ -1,115 +0,0 @@
-<!-- 月/日选择器 -->
-<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

@@ -1,39 +0,0 @@
-<!-- 单选框 -->
-<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/BizSortFilter.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="editable-table-sort-filter__sort">
-    <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>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { IColumnConfig } from '../../types';
-
-const props = defineProps<{
-  column: IColumnConfig
-  tempSortType: 'ascending' | 'descending' | ''
-  tempSortProp: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
-}>()
-
-const checkActiveProp = (type: 'ascending' | 'descending', prop: string) => {
-  return props.tempSortType === type && props.tempSortProp === prop
-}
-
-const sortConfigs = computed(() => {
-  if (Array.isArray(props.column._sortable)) return props.column._sortable
-  return [{ ...props.column, label: '排序' }]
-})
-</script>