@lx-frontend/wrap-element-ui 1.0.0-beta.8 → 1.0.1-7.beta-2

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

@@ -0,0 +1,39 @@
+<!-- 单选框 -->
+<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"
+      >
+        {{ item.text }}
+      </el-radio>
+    </el-radio-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/BizSortFilter.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/index.vue

@@ -0,0 +1,155 @@
+<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 name="custom">
+        <!-- 筛选中，或排序中，高亮 -->
+        <span
+          :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>
+      </slot>
+    </template>
+    <div class="editable-table-sort-filter">
+      <div class="editable-table-sort-filter__column-title">
+        {{ column.label }}
+      </div>
+
+      <div class="editable-table-sort-filter__item">
+        <BizSortFilter
+          v-if="column.isColumnSortable"
+          :column="column"
+          :temp-sort-prop="tempSortProp"
+          :temp-sort-type="tempSortType"
+          @update:sort="(type, prop) => emit('update:sort', type, prop)"
+        />
+      </div>
+
+      <template v-if="column.filters">
+        <div
+          v-for="(filterItem, index) in column.filters"
+          :key="index"
+          class="editable-table-sort-filter__item editable-table__filter-group__filter"
+        >
+          <component
+            :is="componentMap[filterItem.type]"
+            :config="filterItem"
+            :temp-filtered-value="tempFilteredValue"
+            @update:tempFilteredValue="onUpdate"
+          />
+        </div>
+      </template>
+
+      <div
+        v-if="column.summary"
+        class="editable-table-sort-filter__item 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 { ref } from 'vue'
+
+import BizCheckboxFilter from './BizCheckboxFilter.vue';
+import BizColorRadioFilter from './BizColorRadioFilter.vue';
+import BizDoubleDatePickerFilter from './BizDoubleDatePickerFilter.vue';
+import BizInputFilter from './BizInputFilter.vue';
+import BizMonthDayPicker from './BizMonthDayPicker.vue';
+import BizSortFilter from './BizSortFilter.vue';
+import BizRadioFilter from "./BizRadioFilter.vue";
+import { FilterItem, IColumnConfig } from '../../types'
+
+defineProps<{
+  headActive: boolean
+  column: IColumnConfig
+  tempSummaryList: string[]
+  tempSortType: 'ascending' | 'descending' | ''
+  tempSortProp: string
+  tempFilteredValue: Record<string, string | number | number[] | string[]>
+}>()
+
+const emit = defineEmits<{
+  (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
+}>()
+
+// 把 filterItem.type 映射到组件
+const componentMap: Record<FilterItem['type'], any> = {
+  /** 输入框 */
+  input: BizInputFilter,
+  /** 日期范围 */
+  doubleDatePicker: BizDoubleDatePickerFilter,
+  /** 单选框 */
+  radio: BizRadioFilter,
+  /** 复选框 */
+  checkbox: BizCheckboxFilter,
+  /** 月日选择器 */
+  monthDayPicker: BizMonthDayPicker,
+  /** 颜色选择器 */
+  colorRadio: BizColorRadioFilter,
+}
+
+const popoverRef = ref(null as any)
+
+// 统一的事件派发
+function onUpdate(key: string, val: any) {
+  emit('update:tempFilteredValue', key, val)
+}
+
+defineExpose({
+  close: () => {
+    popoverRef.value?.doClose()
+  }
+})
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <el-popover
+    ref="operationPopoverRef"
+    placement="bottom"
+    trigger="click"
+    popper-class="editable-table-operation-popover"
+  >
+    <div
+      slot="reference"
+      class="editable-table-operation-popover__operation-reference btn-pointer"
+    >
+      <el-button class="editable-table-operation-popover__operation-btn">
+        操作
+      </el-button>
+    </div>
+    <div class="editable-table-operation-popover__operation">
+      <div
+        v-if="defaultOperations.includes('delete')"
+        class="editable-table-operation-popover__operation-item btn-pointer"
+        @click="() => emit('delete')"
+      >
+        删除
+      </div>
+      <div
+        v-if="defaultOperations.includes('edit')"
+        class="editable-table-operation-popover__operation-item btn-pointer"
+        @click="() => emit('edit')"
+      >
+        编辑
+      </div>
+      <div
+        v-if="defaultOperations.includes('top')"
+        class="editable-table-operation-popover__operation-item btn-pointer"
+        @click="() => emit('rowPinToTop')"
+      >
+        置顶
+      </div>
+      <slot />
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IDefaultOperationType } from '../types';
+
+defineProps<{
+  defaultOperations: IDefaultOperationType[]
+  // hoveringCellInfo: {
+  //   rowIndex: number
+  //   columnProperty: string
+  // }
+  scope: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'edit'): void
+  (e: 'delete'): void
+  (e: 'rowPinToTop'): void
+}>()
+
+const operationPopoverRef = ref(null as any)
+
+defineExpose({
+  doClose: () => operationPopoverRef.value?.doClose?.()
+})
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    title="显示设置"
+    :visible.sync="viewSettingVisible"
+    width="750px"
+    top="12vh"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="editable-table-view-setting__dialog"
+  >
+    <div class="editable-table-view-setting__content">
+      <div class="editable-table-view-setting__content-left">
+        <div class="editable-table-view-setting__checkbox-wrapper">
+          <el-checkbox-group v-model="columnsToBeShown">
+            <el-checkbox
+              v-for="item in props.columnConfig"
+              :key="item.label"
+              :label="item.prop"
+              :disabled="item.isAlwaysShow"
+            >
+              <div class="editable-table-view-setting__content-left-item">
+                {{ item.label }}
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="editable-table-view-setting__content-right">
+        <div class="editable-table-view-setting__content-right-title">
+          已选择
+          <div class="editable-table-view-setting__selected-count">
+            {{ columnsToBeShown.length }}
+          </div>
+        </div>
+        <div class="editable-table-view-setting__content-right-frize">
+          冻结前
+          <el-input
+            class="editable-table-view-setting__content-right-input"
+            :value="tempLeftFixedColumnCount"
+            @input="handleInputTempLeftFixedColumnCount"
+          />
+          列
+        </div>
+        <div class="editable-table-view-setting__content-right-selected">
+          <div
+            v-for="(item, index) in viewSettingDragSortOptions"
+            :key="item.prop"
+            class="editable-table-view-setting__selected-item editable-table-view-setting-draggable-item"
+          >
+            <div class="editable-table-view-setting__selected-item-left">
+              <div
+                class="editable-table-view-setting-drag-target editable-table-view-setting__icon-wrapper"
+                :data-index="index"
+              >
+                <div
+                  class="editable-table-view-setting-drag-target editable-table-drag-icon"
+                  :data-index="index"
+                />
+              </div>
+              <div class="editable-table-view-setting__selected-item-name">
+                {{ item.label }}
+              </div>
+            </div>
+            <div
+              :class="['editable-table-view-setting__selected-item-close', item.isAlwaysShow ? 'editable-table-view-setting__selected-item-close--disabled' : '']"
+              @click="handleColumnClose(item)"
+            >
+              <i class="el-icon-close" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleViewSettingClose">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        @click="handleViewSettingConfirm"
+      >
+        确认
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useViewSetting } from '../bizHooks'
+import { IColumnConfig, IProps } from '../types';
+
+const emit = defineEmits<{
+  (e: 'update:leftFixedColumnCount', val: number): void
+  (e: 'update:showingColumns', val: string[]): void
+  (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+  (e: 'tableDoLayout'): void
+}>()
+
+const _props = defineProps<{
+  actualColumns: IColumnConfig[]
+  viewSettingDragSortOptions: IColumnConfig[]
+  showingColumns: string[]
+  props: IProps
+}>()
+
+const {
+  actualColumns,
+  showingColumns,
+  viewSettingDragSortOptions,
+} = toRefs(_props)
+
+const {
+  columnsToBeShown,
+  viewSettingVisible,
+  tempLeftFixedColumnCount,
+  handleInputTempLeftFixedColumnCount,
+  handleViewSettingShow,
+  handleViewSettingClose,
+  handleViewSettingConfirm
+} = useViewSetting({
+  showingColumns,
+  actualColumns,
+  viewSettingDragSortOptions,
+  props: _props.props,
+  emit,
+});
+
+const handleColumnClose = (item) => {
+  if (item.isAlwaysShow) return;
+  columnsToBeShown.value = columnsToBeShown.value.filter(c => c !== item.prop);
+};
+
+defineExpose({
+  open: handleViewSettingShow
+})
+</script>