@lx-frontend/wrap-element-ui 1.0.28 → 2.0.0-beta.2

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

@@ -1,6 +1,35 @@
 import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
 import { IColumnConfig, IDraggingData, IEmits, IProps } from "../types"
-import throttle from "lodash/throttle"
+
+/** 简单实现 throttle */
+function throttle<T extends (...args: any[]) => any>(fn: T, delay: number) {
+  let lastTime = 0;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const throttled = (...args: any[]) => {
+    const now = Date.now();
+    const remaining = delay - (now - lastTime);
+    if (remaining <= 0) {
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      lastTime = now;
+      fn(...args);
+    } else if (timer === null) {
+      timer = setTimeout(() => {
+        lastTime = Date.now();
+        timer = null;
+        fn(...args);
+      }, remaining);
+    }
+  };
+  throttled.cancel = () => {
+    if (timer !== null) clearTimeout(timer);
+    timer = null;
+    lastTime = 0;
+  };
+  return throttled as T & { cancel: () => void };
+}
 
 interface IUseDragSortParams {
   props: IProps
@@ -188,14 +217,18 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
   const handleDragDrop = (event, scope) => {
     if (!scope) return
     const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
-    const dataList = scope.store.states.data;
+    const dataList = scope.store.states.data.value ?? scope.store.states.data;
     const movedRow = dataList[draggingIndex];
     const newList = [
       ...dataList.slice(0, +draggingIndex),
       ...dataList.slice(draggingIndex + 1)
     ];
     newList.splice(dropIndex, 0, movedRow);
-    scope.store.states.data = newList;
+    if (typeof scope.store.states.data.value !== 'undefined') {
+      scope.store.states.data.value = newList;
+    } else {
+      scope.store.states.data = newList;
+    }
     emit('row-drag-drop', {
       row: movedRow,
       fromIndex: draggingIndex,

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

@@ -27,11 +27,15 @@ export function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
 
   const handleColorChange = async (colorId: number, scope) => {
     const { row, $index: rowIndex, store } = scope;
-    const dataList = store.states.data;
+    const dataList = store.states.data.value ?? store.states.data;
     const curRow = { ...dataList[rowIndex], colorId: +colorId };
     const newList = [...dataList];
     newList.splice(rowIndex, 1, curRow);
-    store.states.data = newList;
+    if (store.states.data.value !== undefined) {
+      store.states.data.value = newList;
+    } else {
+      store.states.data = newList;
+    }
     emit('row-bg-change', { colorId, row, rowIndex });
   };
 

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

@@ -115,7 +115,7 @@ export function useViewSetting({
     () => props.columnConfig,
     async(val) => {
       const _cache = localStorage.getItem(storageKey.value);
-      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide || v.isAlwaysShow).map(c => c.prop));
       if (!_cache) {
         setColumns();
         leftFixedColumnCount.value = props.leftFixedCount as number;
@@ -156,6 +156,7 @@ export function useViewSetting({
 
           updateShowingColumns(
             val.filter(v => {
+              if (v.isAlwaysShow) return true;
               return cache.config.fields[v.prop] ? !cache.config.fields[v.prop].hidden : !v.defaultHide
             }).sort((a, b) => {
               return (cache.config.fields[a.prop]?.order ?? 0) - (cache.config.fields[b.prop]?.order ?? 0)

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

@@ -1,7 +1,8 @@
 <!-- 行颜色选择组件 -->
 <template>
   <el-popover
-    v-model="visible"
+    v-model:visible="visible"
+    :width="'auto'"
     placement="right"
     trigger="click"
     popper-class="editable-table-color-popover"
@@ -21,7 +22,7 @@
       </div>
     </div>
 
-    <div slot="reference">
+    <template #reference>
       <div
         v-if="isDefaultColor(scope.row.colorId)"
         class="editable-table__color-icon"
@@ -31,7 +32,7 @@
         class="editable-table__selected-color"
         :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
       />
-    </div>
+    </template>
   </el-popover>
 </template>
 

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

@@ -3,14 +3,14 @@
     <el-input
       v-if="column.editType === 'input'"
       clearable
-      :value="value"
-      @input="val => emit('input', val)"
+      :model-value="value"
+      @update:modelValue="val => emit('input', val)"
     />
 
     <el-select
       v-if="column.editType === 'select'"
-      :value="value"
-      @input="val => emit('input', val)"
+      :model-value="value"
+      @update:modelValue="val => emit('input', val)"
     >
       <el-option
         v-for="item in column.selectOptions"
@@ -24,8 +24,8 @@
       v-if="column.editType === 'date'"
       type="date"
       placeholder="选择日期"
-      :value="value"
-      @input="val => emit('input', val)"
+      :model-value="value"
+      @update:modelValue="val => emit('input', val)"
     />
   </div>
 </template>

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

@@ -6,13 +6,13 @@
     </div>
     <el-checkbox-group
       class="editable-table-sort-filter__filter-checkbox-group"
-      :value="tempFilteredValue[config.prop]"
-      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+      :model-value="tempFilteredValue[config.prop]"
+      @update:modelValue="val => emit('update:tempFilteredValue', config.prop, val)"
     >
       <el-checkbox
         v-for="item in config.options"
         :key="item.value"
-        :label="item.value"
+        :value="item.value"
         :title="item.text"
         class="editable-table-sort-filter__filter-checkbox"
       >

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

@@ -5,14 +5,13 @@
       {{ 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)"
+      :model-value="tempFilteredValue[config.prop]"
+      @update:modelValue="val => emit('update:tempFilteredValue', config.prop, val)"
     >
       <el-radio
         v-for="item in config.options"
         :key="item.value"
-        :label="item.value"
+        :value="item.value"
         :title="item.text"
       >
         <span class="color-option">

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

@@ -8,16 +8,16 @@
       <el-date-picker
         v-bind="datePickerCommonProps"
         placeholder="开始日期"
-        :value="tempFilteredValue[config.prop[0]]"
-        :picker-options="pickerStartOptions"
-        @input="handleStartDateChange"
+        :model-value="tempFilteredValue[config.prop[0]]"
+        :disabled-date="(pickerStartOptions as any)?.disabledDate"
+        @update:modelValue="handleStartDateChange"
       />
       <el-date-picker
         v-bind="datePickerCommonProps"
         placeholder="结束日期"
-        :value="tempFilteredValue[config.prop[1]]"
-        :picker-options="pickerEndOptions"
-        @input="handleEndDateChange"
+        :model-value="tempFilteredValue[config.prop[1]]"
+        :disabled-date="(pickerEndOptions as any)?.disabledDate"
+        @update:modelValue="handleEndDateChange"
       />
     </div>
   </div>
@@ -44,8 +44,8 @@ const emit = defineEmits<{
 
 /** 日期选择器通用配置 */
 const datePickerCommonProps = {
-  valueFormat: 'yyyy-MM-dd',
-  format: 'yyyy-MM-dd',
+  valueFormat: 'YYYY-MM-DD',
+  format: 'YYYY-MM-DD',
   type: 'date',
   size: 'small',
   editable: false,

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

@@ -6,8 +6,8 @@
     <el-input
       class="editable-table-sort-filter__search-input"
       :placeholder="config.placeholder || '请输入内容'"
-      :value="tempFilteredValue[config.prop]"
-      @input="val => emit('update:tempFilteredValue', config.prop, val)"
+      :model-value="tempFilteredValue[config.prop]"
+      @update:modelValue="val => emit('update:tempFilteredValue', config.prop, val)"
     />
   </div>
 </template>

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

@@ -7,7 +7,7 @@
     <div class="editable-table-sort-filter__date-picker-content">
       <el-cascader
         clearable
-        :value="startDate"
+        :model-value="startDate"
         separator=""
         size="small"
         placeholder="开始日期"
@@ -17,7 +17,7 @@
       />
       <el-cascader
         clearable
-        :value="endDate"
+        :model-value="endDate"
         separator=""
         size="small"
         placeholder="结束日期"

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

@@ -5,14 +5,13 @@
       {{ 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)"
+      :model-value="tempFilteredValue[config.prop]"
+      @update:modelValue="val => emit('update:tempFilteredValue', config.prop, val)"
     >
       <el-radio
         v-for="item in config.options"
         :key="item.value"
-        :label="item.value"
+        :value="item.value"
         :title="item.text"
       >
         {{ item.text }}

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

@@ -1,14 +1,13 @@
 <template>
   <el-popover
     ref="popoverRef"
+    v-model:visible="visible"
     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">
+    <template #reference>
       <slot name="custom">
         <!-- 筛选中，或排序中，高亮 -->
         <span
@@ -63,11 +62,11 @@
         </div>
         <el-checkbox-group
           class="editable-table-sort-filter__filter-checkbox-group"
-          :value="tempSummaryList"
-          @input="val => emit('update:tempSummaryList', val)"
+          :model-value="tempSummaryList"
+          @update:modelValue="val => emit('update:tempSummaryList', val)"
         >
           <el-checkbox
-            :label="column.prop"
+            :value="column.prop"
             class="editable-table-sort-filter__filter-checkbox"
           >
             <slot
@@ -80,17 +79,17 @@
         </el-checkbox-group>
       </div>
 
-      <div class="editable-table-sort-filter__footer">
+      <div class="editable-table-sort-filter__footer" @click.stop>
         <el-button
           class="editable-table-sort-filter__reset-btn"
-          @click="() => emit('reset')"
+          @click.stop="handleReset"
         >
           重置
         </el-button>
         <el-button
           class="editable-table-sort-filter__confirm-btn"
           type="primary"
-          @click="() => emit('confirm')"
+          @click.stop="handleConfirm"
         >
           确定
         </el-button>
@@ -100,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, markRaw } from 'vue'
 
 import BizCheckboxFilter from './BizCheckboxFilter.vue';
 import BizColorRadioFilter from './BizColorRadioFilter.vue';
@@ -129,32 +128,42 @@ const emit = defineEmits<{
   (e: 'confirm'): void
 }>()
 
-// 把 filterItem.type 映射到组件
+// 把 filterItem.type 映射到组件（markRaw 防止 Vue 响应式代理包装组件定义）
 const componentMap: Record<Exclude<FilterItem['type'], 'slot'>, any> = {
   /** 输入框 */
-  input: BizInputFilter,
+  input: markRaw(BizInputFilter),
   /** 日期范围 */
-  doubleDatePicker: BizDoubleDatePickerFilter,
+  doubleDatePicker: markRaw(BizDoubleDatePickerFilter),
   /** 单选框 */
-  radio: BizRadioFilter,
+  radio: markRaw(BizRadioFilter),
   /** 复选框 */
-  checkbox: BizCheckboxFilter,
+  checkbox: markRaw(BizCheckboxFilter),
   /** 月日选择器 */
-  monthDayPicker: BizMonthDayPicker,
+  monthDayPicker: markRaw(BizMonthDayPicker),
   /** 颜色选择器 */
-  colorRadio: BizColorRadioFilter,
+  colorRadio: markRaw(BizColorRadioFilter),
 }
 
-const popoverRef = ref(null as any)
+const visible = ref(false)
 
 // 统一的事件派发
 function onUpdate(key: string, val: any) {
   emit('update:tempFilteredValue', key, val)
 }
 
+function handleReset() {
+  emit('reset')
+  visible.value = false
+}
+
+function handleConfirm() {
+  emit('confirm')
+  visible.value = false
+}
+
 defineExpose({
   close: () => {
-    popoverRef.value?.doClose()
+    visible.value = false
   }
 })
 </script>

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

@@ -1,18 +1,20 @@
 <template>
   <el-popover
     ref="operationPopoverRef"
+    :width="'auto'"
     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>
+    <template #reference>
+      <div
+        class="editable-table-operation-popover__operation-reference btn-pointer"
+      >
+        <el-button class="editable-table-operation-popover__operation-btn">
+          操作
+        </el-button>
+      </div>
+    </template>
     <div class="editable-table-operation-popover__operation">
       <div
         v-if="defaultOperations.includes('delete')"
@@ -62,6 +64,6 @@ const emit = defineEmits<{
 const operationPopoverRef = ref(null as any)
 
 defineExpose({
-  doClose: () => operationPopoverRef.value?.doClose?.()
+  doClose: () => operationPopoverRef.value?.hide?.()
 })
 </script>

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

@@ -1,12 +1,15 @@
 <template>
   <el-dialog
     title="显示设置"
-    :visible.sync="viewSettingVisible"
+    v-model="viewSettingVisible"
     width="750px"
     top="12vh"
     :close-on-click-modal="false"
     append-to-body
-    custom-class="editable-table-view-setting__dialog"
+    class="editable-table-view-setting__dialog"
+    header-class="editable-table-view-setting__header"
+    body-class="editable-table-view-setting__body"
+    footer-class="editable-table-view-setting__footer"
   >
     <div class="editable-table-view-setting__content">
       <div class="editable-table-view-setting__content-left">
@@ -15,7 +18,7 @@
             <el-checkbox
               v-for="item in props.columnConfig"
               :key="item.label"
-              :label="item.prop"
+              :value="item.prop"
               :disabled="item.isAlwaysShow"
             >
               <div class="editable-table-view-setting__content-left-item">
@@ -36,8 +39,8 @@
           冻结前
           <el-input
             class="editable-table-view-setting__content-right-input"
-            :value="tempLeftFixedColumnCount"
-            @input="handleInputTempLeftFixedColumnCount"
+            :model-value="tempLeftFixedColumnCount"
+            @update:modelValue="handleInputTempLeftFixedColumnCount"
           />
           列
         </div>
@@ -65,7 +68,7 @@
               :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" />
+              <el-icon><Close /></el-icon>
             </div>
           </div>
         </div>
@@ -86,6 +89,7 @@
 </template>
 
 <script setup lang="ts">
+import { Close } from '@element-plus/icons-vue';
 import { toRefs } from 'vue';
 import { useViewSetting } from '../bizHooks'
 import { IColumnConfig, IProps } from '../types';