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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.14-beta.6",
+  "version": "1.0.14-beta.8",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

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

@@ -1,5 +1,5 @@
 import { computed, nextTick, ref, Ref, watch } from 'vue'
-import { IColumnConfig, IEmits, IProps } from '../types';
+import { IColumnConfig, IEmits, IProps, ISearchOptions, DoubleDatePickerSearchOption, SlotSearchOption } from '../types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
@@ -183,12 +183,17 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
       if (Array.isArray(column.search)) {
         let validate = true;
         column.search.forEach(v => {
+          if (!validate) return
           if (!('type' in v) || v.type === 'input') {
             if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
-            if (!validate) return
             if (v.validator) {
               const result = v.validator(tempSearchValue.value[v.prop]?.trim());
-              if (validate && !result) validate = false;
+              if (!result) validate = false;
+            }
+          } else if (v.type === 'doubleDatePicker' || v.type === 'slot') {
+            if (v.validator) {
+              const result = v.validator?.(tempSearchValue.value);
+              if (!result) validate = false;
             }
           }
         })

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

@@ -146,7 +146,7 @@
 <script setup lang="ts">
 import Search from './search.vue'
 import Sort from './sort.vue'
-import BizFilter from './filter.vue'
+import BizFilter from './bizFilter.vue'
 
 import { ref } from 'vue'
 import { IColumnConfig } from '../../types'

package/src/components/EditableTable/index.vue

@@ -340,7 +340,6 @@
 <script lang="ts" setup>
 import BizColorSelect from './features/bizColorSelect.vue';
 import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
-// import BizTableHeaderPopover from './features/bizTableHeaderPopover.vue'
 import BizTableHeaderPopover from './features/bizTableHeaderPopover/index.vue'
 import BizEditCell from './features/bizEditCell.vue'
 import BizTableOperatePopover from './features/bizTableOperatePopover.vue'

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

@@ -54,28 +54,30 @@ type ISortOption = {
   label: string
 }
 
-type InputSearchOption = {
+export type InputSearchOption = {
   prop: string
   label: string
   validator?: (value: string) => boolean
   type?: 'input'
 }
 
-type DoubleDatePickerSearchOption = {
+export type DoubleDatePickerSearchOption = {
   prop: [string, string]
   label: string
   type: 'doubleDatePicker'
   pickerOptions?: DatePicker['pickerOptions']
+  validator?: (tempSearchValue: Record<string, any>) => boolean
 }
 
-type SlotSearchOption = {
+export type SlotSearchOption = {
   prop: string | string[]
   label: string
   type: 'slot'
   slotName: string
+  validator?: (tempSearchValue: Record<string, any>) => boolean
 }
 
-type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption | SlotSearchOption)[]
+export type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption | SlotSearchOption)[]
 
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;

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

@@ -1,285 +0,0 @@
-<template>
-  <el-popover
-    ref="popoverRef"
-    placement="bottom"
-    trigger="click"
-    popper-class="editable-table-sort-filter"
-    data-popper-name="editable-table-sort-filter"
-    :data-prop="column.prop"
-    @show="() => emit('popover-show')"
-  >
-    <template slot="reference">
-      <slot
-        v-if="column.customColorLabel"
-        name="custom"
-      />
-      <!-- 筛选中，或排序中，高亮 -->
-      <span
-        v-else
-        :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
-      >
-        {{ column.label }}
-        <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
-      </span>
-    </template>
-    <div class="editable-table-sort-filter">
-      <div class="editable-table-sort-filter__column-title">
-        {{ column.label }}
-      </div>
-
-      <div
-        v-if="column.isColumnSortable"
-        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>
-
-      <div
-        v-if="!!column.search"
-        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>
-
-      <div
-        v-if="column.doubleDatePicker"
-        class="editable-table-sort-filter__sort"
-      >
-        <div class="editable-table-sort-filter__search-title">
-          {{ column.doubleDatePicker.label }}
-        </div>
-        <div
-          class="editable-table-sort-filter__date-picker-content"
-          style="display: flex;flex-direction: column;gap: 12px;"
-        >
-          <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
-            :value="tempSearchValue[column.doubleDatePicker.props[0]]"
-            value-format="yyyy-MM-dd"
-            format="yyyy-MM-dd"
-            type="date"
-            size="small"
-            placeholder="开始日期"
-          />
-          <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
-            :value="tempSearchValue[column.doubleDatePicker.props[1]]"
-            value-format="yyyy-MM-dd"
-            format="yyyy-MM-dd"
-            size="small"
-            type="date"
-            placeholder="结束日期"
-          />
-        </div>
-      </div>
-
-      <div
-        v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
-        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>
-
-      <div
-        v-if="column.summary"
-        class="editable-table-sort-filter__filter"
-      >
-        <div class="editable-table-sort-filter__filter-title">
-          统计
-        </div>
-        <el-checkbox-group
-          class="editable-table-sort-filter__filter-checkbox-group"
-          :value="tempSummaryList"
-          @input="val => emit('update:tempSummaryList', val)"
-        >
-          <el-checkbox
-            :label="column.prop"
-            class="editable-table-sort-filter__filter-checkbox"
-          >
-            <slot
-              name="summay-item"
-              v-bind="column"
-            >
-              {{ column.label }}
-            </slot>
-          </el-checkbox>
-        </el-checkbox-group>
-      </div>
-
-      <div class="editable-table-sort-filter__footer">
-        <el-button
-          class="editable-table-sort-filter__reset-btn"
-          @click="() => emit('reset')"
-        >
-          重置
-        </el-button>
-        <el-button
-          class="editable-table-sort-filter__confirm-btn"
-          type="primary"
-          @click="() => emit('confirm')"
-        >
-          确定
-        </el-button>
-      </div>
-    </div>
-  </el-popover>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { IColumnConfig } from '../types'
-
-const props = defineProps<{
-  headActive: boolean
-  column: IColumnConfig
-  tempSummaryList: string[]
-  tempSortType: 'ascending' | 'descending' | ''
-  tempSortProp: string
-  tempSearchValue: Record<string, string>
-  tempFilteredValue: Record<string, string | number | number[] | string[]>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:tempSearchValue', key: string, value: string): void
-  (e: 'update:tempFilteredValue', key: string, value: string): void
-  (e: 'update:tempSummaryList', value: string[]): void
-  (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
-  (e: 'popover-show'): void
-  (e: 'reset'): void
-  (e: 'confirm'): void
-}>()
-
-const popoverRef = ref(null as any)
-
-const searchConfigs = computed(() => {
-  if (Array.isArray(props.column.search)) return props.column.search
-  return [{ prop: props.column.prop, label: '搜索' }]
-})
-
-const sortConfigs = computed(() => {
-  if (Array.isArray(props.column._sortable)) return props.column._sortable
-  return [{ ...props.column, label: '排序' }]
-})
-
-const checkActiveProp = (type: 'ascending' | 'descending', prop: string) => {
-  return props.tempSortType === type && props.tempSortProp === prop
-}
-
-defineExpose({
-  close: () => {
-    popoverRef.value?.doClose()
-  }
-})
-</script>