@lx-frontend/wrap-element-ui 1.0.14-beta.3 → 1.0.14-beta.5

package/package.json

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

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

@@ -0,0 +1,62 @@
+<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/index.vue

@@ -0,0 +1,181 @@
+<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>
+
+      <Sort
+        v-if="column.isColumnSortable"
+        :column="column"
+        :temp-sort-prop="tempSortProp"
+        :temp-sort-type="tempSortType"
+        @update:sort="(type, prop) => emit('update:sort', type, prop)"
+      />
+
+      <Search
+        v-if="!!column.search"
+        :column="column"
+        :temp-search-value="tempSearchValue"
+        @update:tempSearchValue="(key, val) => emit('update:tempSearchValue', key, val)"
+      >
+        <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>
+      </Search>
+
+      <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>
+
+      <BizFilter
+        v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
+        :column="column"
+        :temp-filtered-value="tempFilteredValue"
+        @update:tempFilteredValue="(key, val) => emit('update:tempFilteredValue', key, val)"
+      >
+        <template #filter-item="item">
+          <slot
+            name="filter-item"
+            v-bind="item"
+          />
+        </template>
+      </BizFilter>
+
+      <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 Search from './search.vue'
+import Sort from './sort.vue'
+import BizFilter from './filter.vue'
+
+import { ref } from 'vue'
+import { IColumnConfig } from '../../types'
+
+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)
+
+defineExpose({
+  close: () => {
+    popoverRef.value?.doClose()
+  }
+})
+</script>

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/sort.vue

@@ -0,0 +1,50 @@
+<template>
+  <div 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>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IColumnConfig } from '../../types';
+
+const props = defineProps<{
+  column: IColumnConfig
+  tempSortType: 'ascending' | 'descending' | ''
+  tempSortProp: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
+}>()
+
+const checkActiveProp = (type: 'ascending' | 'descending', prop: string) => {
+  return props.tempSortType === type && props.tempSortProp === prop
+}
+
+const sortConfigs = computed(() => {
+  if (Array.isArray(props.column._sortable)) return props.column._sortable
+  return [{ ...props.column, label: '排序' }]
+})
+</script>

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

@@ -99,6 +99,13 @@
               />
             </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>
 

package/src/components/EditableTable/index.vue

@@ -194,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属性不为空数组时展示。编辑状态下隐藏 -->
@@ -331,7 +340,8 @@
 <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.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

@@ -68,7 +68,14 @@ type DoubleDatePickerSearchOption = {
   pickerOptions?: DatePicker['pickerOptions']
 }
 
-type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption)[]
+type SlotSearchOption = {
+  prop: string | string[]
+  label: string
+  type: 'slot',
+  slotName: '',
+}
+
+type ISearchOptions = (InputSearchOption | DoubleDatePickerSearchOption | SlotSearchOption)[]
 
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;