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

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: Array<IFilterSelectOptions & { color: string }>
+}
+
+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;
 }

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

@@ -1,62 +0,0 @@
-<template>
-  <div class="editable-table-sort-filter__filter">
-    <div class="editable-table-sort-filter__filter-title">
-      筛选
-    </div>
-    <el-checkbox-group
-      v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
-      class="editable-table-sort-filter__filter-checkbox-group"
-      :value="tempFilteredValue[column.filters.prop || column.prop]"
-      @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
-    >
-      <el-checkbox
-        v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
-        :key="item.value"
-        :label="item.value"
-        :title="item.text"
-        class="editable-table-sort-filter__filter-checkbox"
-      >
-        <slot
-          name="filter-item"
-          v-bind="item"
-        >
-          {{ item.text }}
-        </slot>
-      </el-checkbox>
-    </el-checkbox-group>
-
-    <el-radio-group
-      v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
-      style="display: flex;flex-direction: column;gap: 6px;"
-      :value="tempFilteredValue[column.filters.prop || column.prop]"
-      @input="val => emit('update:tempFilteredValue', column.filters?.prop || column.prop, val)"
-    >
-      <el-radio
-        v-for="item in column.filters.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 { IColumnConfig } from '../../types';
-
-defineProps<{
-  column: IColumnConfig
-  tempFilteredValue: Record<string, string | number | number[] | string[]>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:tempFilteredValue', key: string, value: string): void
-}>()
-</script>

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

@@ -1,74 +0,0 @@
-<template>
-  <div
-    class="editable-table-sort-filter__search"
-    style="display: flex;flex-direction: column;gap: 12px;"
-  >
-    <div
-      v-for="item in searchConfigs"
-      :key="item.label"
-    >
-      <div class="editable-table-sort-filter__search-title">
-        {{ item.label }}
-      </div>
-      <template v-if="!('type' in item) || item.type === 'input'">
-        <el-input
-          class="editable-table-sort-filter__search-input"
-          placeholder="请输入内容"
-          :value="tempSearchValue[item.prop]"
-          @input="val => emit('update:tempSearchValue', item.prop, val)"
-        />
-      </template>
-      <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]]"
-            value-format="yyyy-MM-dd"
-            format="yyyy-MM-dd"
-            type="date"
-            size="small"
-            placeholder="开始日期"
-            :picker-options="item.pickerOptions ?? {}"
-          />
-          <el-date-picker
-            @input="val => emit('update:tempSearchValue', item.prop[1], val || '')"
-            :value="tempSearchValue[item.prop[1]]"
-            value-format="yyyy-MM-dd"
-            format="yyyy-MM-dd"
-            size="small"
-            type="date"
-            placeholder="结束日期"
-            :picker-options="item.pickerOptions ?? {}"
-          />
-        </div>
-      </template>
-      <template v-if="item.type === 'slot'">
-        <slot
-          :name="item.slotName"
-          :data="tempSearchValue"
-          :set="(key, value) => emit('update:tempSearchValue', key, value)"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { IColumnConfig } from '../../types';
-
-
-const props = defineProps<{
-  column: IColumnConfig
-  tempSearchValue: Record<string, string>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:tempSearchValue', key: string, value: string): void
-}>()
-
-const searchConfigs = computed(() => {
-  if (Array.isArray(props.column.search)) return props.column.search
-  return [{ prop: props.column.prop, label: '搜索' }]
-})
-</script>