@lx-frontend/wrap-element-ui 1.0.0-beta.8 → 1.0.1-7.beta-2

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

@@ -0,0 +1,125 @@
+import { ref, watch, Ref, computed, nextTick } from "vue"
+import { IColumnConfig, IProps } from "../types"
+
+interface IViewSettingParams {
+  showingColumns: Ref<string[]>
+  actualColumns: Ref<IColumnConfig[]>
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  props: IProps
+  emit: {
+    (e: 'update:leftFixedColumnCount', val: number): void
+    (e: 'update:showingColumns', val: string[]): void
+    (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+    (e: 'tableDoLayout'): void
+  }
+}
+
+export function useViewSetting({
+  showingColumns,
+  actualColumns,
+  props,
+  viewSettingDragSortOptions,
+  emit
+}: IViewSettingParams) {
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
+
+  const updateShowingColumns = (val: string[]) => emit('update:showingColumns', val);
+
+  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
+
+  const saveSettingToStorge = async() => {
+    await nextTick()
+    localStorage.setItem(storageKey.value, JSON.stringify({
+      showingColumns: showingColumns.value,
+      leftFixedColumnCount: leftFixedColumnCount.value
+    }))
+  };
+
+  const handleViewSettingShow = () => {
+    emit('update:viewSettingDragSortOptions', [...actualColumns.value.filter(v => v?.prop !== '$$operation')]);
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
+    viewSettingVisible.value = true;
+    columnsToBeShown.value = [...showingColumns.value];
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    updateShowingColumns(viewSettingDragSortOptions.value.map(c => c.prop));
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    await saveSettingToStorge()
+    emit('tableDoLayout')
+  }
+
+  const handleInputTempLeftFixedColumnCount = (value: string) => {
+    const _value = Number(value)
+    if (isNaN(_value)) return
+    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
+  }
+
+  watch(
+    () => props.columnConfig,
+    async(val) => {
+      const _keys = new Set(val.map(c => (c.prop)));
+      const _cache = localStorage.getItem(storageKey.value);
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
+      if (!_cache) {
+        setColumns();
+        leftFixedColumnCount.value = props.leftFixedCount as number;
+      } else {
+        try {
+          // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
+          const cache = JSON.parse(_cache);
+          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
+            setColumns();
+          } else {
+            updateShowingColumns(cache.showingColumns.filter(key => _keys.has(key)))
+          }
+          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
+          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
+          // 写入清理后的数据
+          saveSettingToStorge();
+        } catch (error) {
+          console.error(error);
+          localStorage.removeItem(storageKey.value);
+          setColumns();
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  watch(columnsToBeShown, (val, oldVal) => {
+    if (val.length === oldVal?.length) return // 排序调整时不做处理，避免出现死循环
+    const _map = new Map<string, IColumnConfig>()
+    props.columnConfig.forEach(c => _map.set(c.prop, c))
+    // 展示时保留顺序
+    emit('update:viewSettingDragSortOptions', val.map(prop => _map.get(prop)!))
+    if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
+  }, { immediate: true })
+
+  // 拖拽调整排序时，同时更新勾选数组的顺序，避免出现拖拽排序操作过程后再勾选新列时被还原成拖拽前的顺序的问题
+  watch(viewSettingDragSortOptions, (val, oldVal) => {
+    if (!val.length || val.length !== oldVal?.length) return // 不是排序调整
+    columnsToBeShown.value = val.map(c => c.prop)
+  }, { deep: true })
+
+  watch(leftFixedColumnCount, (val) => emit('update:leftFixedColumnCount', val), { immediate: true });
+
+  return {
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm,
+  }
+}

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

@@ -0,0 +1,63 @@
+<!-- 行颜色选择组件 -->
+<template>
+  <el-popover
+    v-model="visible"
+    placement="right"
+    trigger="click"
+    popper-class="editable-table-color-popover"
+  >
+    <div class="color-list">
+      <div
+        v-for="color in colorList"
+        :key="color.id"
+        class="color-list__item"
+        :style="{ backgroundColor: color.sampleColor }"
+        @click="() => {
+          visible = false
+          handleColorChange(color.id, scope)
+        }"
+      >
+        <span :style="{color: color.textColor}">{{ color.name }}</span>
+      </div>
+    </div>
+
+    <div slot="reference">
+      <div
+        v-if="isDefaultColor(scope.row.colorId)"
+        class="editable-table__color-icon"
+      />
+      <div
+        v-else
+        class="editable-table__selected-color"
+        :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
+      />
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IColorList, IEmits, ITableDataItem } from '../types';
+import { useRowBgColor } from '../bizHooks';
+
+const props = defineProps<{
+  colorList: IColorList,
+  scope: any
+}>();
+
+const emit = defineEmits<{
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+}>();
+
+const {
+  getColorById,
+  isDefaultColor,
+  handleColorChange,
+} = useRowBgColor({
+  colorList: props.colorList,
+  emit: emit as IEmits,
+});
+
+const visible = ref(false);
+
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-input
+      v-if="column.editType === 'input'"
+      clearable
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+
+    <el-select
+      v-if="column.editType === 'select'"
+      :value="value"
+      @input="val => emit('input', val)"
+    >
+      <el-option
+        v-for="item in column.selectOptions"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <el-date-picker
+      v-if="column.editType === 'date'"
+      type="date"
+      placeholder="选择日期"
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IColumnConfig } from '../types'
+
+defineProps<{
+  column: IColumnConfig;
+  value: any;
+}>()
+
+const emit = defineEmits<{
+  (e: 'input', value: any): void;
+}>()
+</script>

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

@@ -0,0 +1,40 @@
+<!-- 复选框 -->
+<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

@@ -0,0 +1,56 @@
+<!-- 单选框 -->
+<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

@@ -0,0 +1,91 @@
+<!-- 日期范围选择（分开的两个日期选择器） -->
+<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="startDateDisabledOptions"
+        @input="handleStartDateChange"
+      />
+      <el-date-picker
+        v-bind="datePickerCommonProps"
+        placeholder="结束日期"
+        :value="tempFilteredValue[config.prop[1]]"
+        :picker-options="endDateDisabledOptions"
+        @input="handleEndDateChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IFilterDoubleDatePicker } from '../../types';
+import dayjs from 'dayjs';
+import type { DatePickerOptions } from 'element-ui/types/date-picker';
+
+interface IFilterDoubleDatePickerProps {
+  /** 日期选择器配置 */
+  config: IFilterDoubleDatePicker;
+  /** 临时筛选值 */
+  tempFilteredValue: Record<string, string>;
+}
+
+const props = defineProps<IFilterDoubleDatePickerProps>();
+
+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 startDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const endDate = props.tempFilteredValue[props.config.prop[1]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!endDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isAfter(dayjs(endDate), 'day');
+    }
+  };
+});
+
+/** 结束日期禁用配置 */
+const endDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const startDate = props.tempFilteredValue[props.config.prop[0]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!startDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isBefore(dayjs(startDate), 'day');
+    }
+  };
+});
+
+/** 处理开始日期变更 */
+const handleStartDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[0], val || '');
+};
+
+/** 处理结束日期变更 */
+const handleEndDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[1], val || '');
+};
+</script>

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

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

@@ -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>