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

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';