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

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,26 +114,16 @@
             :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" />
             </template>
-            <template #filter-item="item">
-              <slot
-                :name="colorFilterConfig.prop + '-filter-item'"
-                v-bind="item"
-              >
-                {{ item.text }}
-              </slot>
-            </template>
           </biz-table-header-popover>
           <div
             v-else
@@ -158,8 +148,8 @@
         v-bind="getColumnBindProps(column)"
       >
         <template
+          #header
           v-if="showColumnHeadSortIcon(column)"
-          #header="scope"
         >
           <biz-table-header-popover
             :head-active="isColumnHeadActive(column)"
@@ -169,23 +159,13 @@
             :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
-                :name="column.prop + '-filter-item'"
-                v-bind="item"
-              >
-                {{ item.text }}
-              </slot>
-            </template>
             <template #summay-item>
               <slot
                 :name="column.prop + '-summay-item'"
@@ -194,15 +174,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属性不为空数组时展示。编辑状态下隐藏 -->
@@ -346,6 +317,7 @@ import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
 
 import { computed, nextTick, ref, watch } from 'vue';
 import { Message } from 'element-ui';
+import omit from 'lodash/omit';
 
 import {
   usePagination,
@@ -434,7 +406,7 @@ const props = withDefaults(defineProps<IProps>(), {
   total: 0,
   defaultOperations: () => [],
   colorList: () => [],
-  colorFilterConfig: () => null,
+  colorFilterConfig: undefined,
   leftFixedCount: 1,
   dragSemiRange: 15,
   loading: false,
@@ -516,7 +488,7 @@ const {
 const {
   setRowStyle,
 } = useRowBgColor({
-  colorList: props.colorList,
+  colorList: props.colorList || [],
   emit
 });
 
@@ -554,13 +526,11 @@ const {
   filteredValue,
   showColumnHeadSortIcon,
   sortProp,
-  tempSearchValue,
   tempFilteredValue,
   tempSummaryList,
   tempSortType,
   tempSortProp,
   isColumnFiltering,
-  searchValue,
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,
@@ -605,9 +575,14 @@ const doTableLayout = async () => {
 
 // 过滤出自定义属性，将其它属性全部透传给 el-table-column
 const getColumnBindProps = (column: IColumnConfig) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { editType, slotName, inputType, options, filters, ...rest } = column;
-  return rest;
+  // 过滤掉自定义属性，只保留 el-table-column 支持的属性
+  return omit(column, [
+    'editType',
+    'slotName',
+    'inputType',
+    'options',
+    'filters'
+  ]);
 };
 
 const setRowClassName = (scope) => {

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>