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

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

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

package/src/components/EditableTable/features/bizTableHeaderPopover/{BizSortFilter.vue → sort.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/index.less

@@ -387,28 +387,9 @@
       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: 0 14px;
-
-      .el-select {
-        width: 100%;
-      }
+      padding: 14px;
 
       .el-radio {
         width: 100%;
@@ -441,6 +422,7 @@
     }
 
     &__filter {
+      padding-top: 0;
 
       .el-radio-group,
       .el-checkbox-group {
@@ -451,9 +433,10 @@
     }
 
     &__sort {
-      padding: 0 14px;
+      padding: 14px;
       display: flex;
       flex-direction: column;
+      gap: 8px;
     }
 
     &__filter-title,
@@ -471,19 +454,22 @@
           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;
@@ -557,7 +543,6 @@
       justify-content: flex-end;
       align-items: center;
       padding: 0 15px;
-      margin-top: 14px;
     }
 
     &__reset-btn,
@@ -817,4 +802,4 @@
   &::before {
     bottom: -4px;
   }
-}
+}

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>
+        <template #header="scope">
           <biz-table-header-popover
             v-if="colorFilterConfig"
             :head-active="isColumnHeadActive(colorFilterConfig)"
@@ -114,12 +114,14 @@
             :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)"
-            @confirm="() => handleHeaderOperationConfirm(colorFilterConfig)"
+            @reset="() => handleHeaderOperationReset(colorFilterConfig, scope)"
+            @confirm="() => handleHeaderOperationConfirm(colorFilterConfig, scope)"
           >
             <template #custom>
               <div class="editable-table__color-icon" />
@@ -156,8 +158,8 @@
         v-bind="getColumnBindProps(column)"
       >
         <template
-          #header
           v-if="showColumnHeadSortIcon(column)"
+          #header="scope"
         >
           <biz-table-header-popover
             :head-active="isColumnHeadActive(column)"
@@ -167,12 +169,14 @@
             :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)"
-            @confirm="() => handleHeaderOperationConfirm(column)"
+            @reset="() => handleHeaderOperationReset(column, scope)"
+            @confirm="() => handleHeaderOperationConfirm(column, scope)"
           >
             <template #filter-item="item">
               <slot
@@ -190,6 +194,15 @@
                 {{ 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属性不为空数组时展示。编辑状态下隐藏 -->
@@ -421,7 +434,7 @@ const props = withDefaults(defineProps<IProps>(), {
   total: 0,
   defaultOperations: () => [],
   colorList: () => [],
-  colorFilterConfig: undefined,
+  colorFilterConfig: () => null,
   leftFixedCount: 1,
   dragSemiRange: 15,
   loading: false,
@@ -503,7 +516,7 @@ const {
 const {
   setRowStyle,
 } = useRowBgColor({
-  colorList: props.colorList || [],
+  colorList: props.colorList,
   emit
 });
 
@@ -541,11 +554,13 @@ const {
   filteredValue,
   showColumnHeadSortIcon,
   sortProp,
+  tempSearchValue,
   tempFilteredValue,
   tempSummaryList,
   tempSortType,
   tempSortProp,
   isColumnFiltering,
+  searchValue,
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,

package/src/components/EditableTable/types/index.ts

@@ -6,65 +6,6 @@ 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;
@@ -79,19 +20,65 @@ 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;
-  filters?: FilterListType;
+  customColorLabel?: boolean
 }
 
 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/SearchForm/index.vue

@@ -8,7 +8,7 @@
       v-for="({
         isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
         clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
-        doubleIsInline = true,
+        doubleIsInline = true, maxlength = 255,
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -18,6 +18,7 @@
         v-if="type === 'input'"
         :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
         :value="formData[prop]"
+        :maxlength="maxlength"
         @input="val => handleInput(val, prop, inputLimitCallback)"
       />
       <div

package/src/components/SearchForm/types/index.ts

@@ -16,6 +16,7 @@ type SlotOption = Omit<BaseOption, 'prop'> & {
 type InputOption = BaseOption & {
   type: 'input'
   inputLimitCallback?: (value: string) => boolean
+  maxlength?: number
 }
 
 type SelectOption = BaseOption & {

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

@@ -1,45 +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"
-      >
-        <slot
-          name="filter-item"
-          v-bind="item"
-        >
-          {{ item.text }}
-        </slot>
-      </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,47 +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
-        value-format="yyyy-MM-dd"
-        format="yyyy-MM-dd"
-        type="date"
-        size="small"
-        placeholder="开始日期"
-        :value="tempFilteredValue[config.prop[0]]"
-        :editable="false"
-        @input="val => emit('update:tempFilteredValue', config.prop[0], val || '')"
-      />
-      <el-date-picker
-        value-format="yyyy-MM-dd"
-        format="yyyy-MM-dd"
-        size="small"
-        type="date"
-        placeholder="结束日期"
-        :value="tempFilteredValue[config.prop[1]]"
-        :editable="false"
-        @input="val => emit('update:tempFilteredValue', config.prop[1], val || '')"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { IFilterDoubleDatePicker } from '../../types';
-
-defineProps<{
-  config: IFilterDoubleDatePicker
-  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/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>