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

package/src/components/EditableTable/index.less

@@ -164,189 +164,6 @@
       margin-left: 4px;
     }
 
-    &__dialog {
-      padding: 0px;
-
-      .el-dialog__body {
-        max-height: 70vh;
-      }
-
-      .el-dialog__body {
-        padding: 0;
-      }
-
-      & .el-button--primary {
-        background-color: @--theme-blue-- !important;
-        border-color: @--theme-blue-- !important;
-      }
-
-      & .el-checkbox.is-checked:not(.is-disabled) {
-        .el-checkbox__input .el-checkbox__inner {
-          background-color: @--theme-blue-- !important;
-          border-color: @--theme-blue-- !important;
-        }
-
-        .el-checkbox__label {
-          color: @--theme-blue-- !important;
-        }
-      }
-
-      & .el-button {
-        border-radius: 2px;
-      }
-
-      .el-dialog__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 14px;
-        background-color: #eeeeee;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 20px;
-      }
-
-      .el-dialog__title {
-        font-size: 14px;
-        line-height: 20px;
-        color: #333333;
-      }
-
-      .el-dialog__footer {
-        background-color: #eeeeee;
-        height: 42px;
-        line-height: 42px;
-        padding: 0 20px;
-
-        & .el-button {
-          height: 24px;
-          // line-height: 24px;
-          font-size: 12px;
-          padding: 5px 12px;
-        }
-      }
-    }
-
-    &__content {
-      display: flex;
-      min-height: 500px;
-    }
-
-    &__content-left {
-      min-width: 417px;
-      width: 417px;
-
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-
-    &__content-left-item {
-      width: 130px;
-      margin-bottom: 15px;
-    }
-
-    &__content-right {
-      border-left: 1px solid #d9d9d9;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-
-    &__content-right-title,
-    &__content-left-title {
-      border-bottom: 1px solid #d9d9d9;
-      width: 100%;
-      height: 46px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      padding-left: 20px;
-    }
-
-    &__selected-count {
-      margin-left: 20px;
-    }
-
-    &__checkbox-wrapper {
-      padding-left: 37px;
-      padding-top: 24px;
-    }
-
-    &__content-right {
-      flex-grow: 1;
-    }
-
-    &__content-right-frize {
-      width: 100%;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      height: 50px;
-      border-bottom: 1px solid #d9d9d9;
-      padding-left: 20px;
-    }
-
-    &__content-right-input.el-input {
-      width: 140px;
-      margin: 0 4px;
-
-      .el-input__inner {
-        height: 28px;
-        line-height: 28px;
-      }
-    }
-
-    &__content-right-selected {
-      display: flex;
-      justify-content: flex-start;
-      flex-direction: column;
-      align-items: flex-start;
-      width: 100%;
-      flex-grow: 1;
-      padding-left: 18px;
-      padding-top: 17px;
-      padding-right: 23px;
-    }
-
-    &__selected-item-left {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-    }
-
-    &__icon-wrapper {
-      width: 14px;
-      height: 14px;
-      line-height: 14px;
-      padding: 2px 4px;
-      margin-right: 10px;
-      cursor: grab;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &__selected-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      line-height: 30px;
-      height: 30px;
-      width: 100%;
-    }
-
-    &__selected-item-close {
-      cursor: pointer;
-
-      &--disabled {
-        cursor: not-allowed;
-        color: #989ea9;
-      }
-    }
   }
 
   &-color-popover {
@@ -354,7 +171,8 @@
     width: 102px !important;
     padding: 0 !important;
 
-    & .popper__arrow::after {
+    & .popper__arrow::after,
+    & .el-popper__arrow::before {
       left: 0 !important;
     }
 
@@ -448,6 +266,10 @@
         overflow-y: auto;
         overflow-x: hidden;
       }
+
+      .el-radio-group {
+        flex-flow: wrap;
+      }
     }
 
     &__sort {
@@ -764,13 +586,13 @@
     & .el-pagination.is-background {
       padding: 0;
 
-      .el-pager li.number {
+      .el-pager li {
         background-color: #fff;
         border: 1px solid #d6dbe3;
         font-weight: 400;
         font-size: 14px;
 
-        &.active {
+        &.is-active {
           background-color: @--theme-blue--;
           color: #fff;
         }
@@ -817,4 +639,185 @@
   &::before {
     bottom: -4px;
   }
+}
+
+// 弹窗使用了 append-to-body，被传送到 <body> 下，脱离了 .editable-table 的 DOM 层级
+// 因此弹窗相关样式不能嵌套在 .editable-table 下
+// class 通过 $attrs 穿透到 dialog-content 根元素
+// header-class / body-class / footer-class 通过 el-dialog 的对应属性注入
+.editable-table-view-setting__dialog {
+  padding: 0px;
+}
+
+.editable-table-view-setting__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: #eeeeee;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 20px;
+
+  .el-dialog__title {
+    font-size: 14px;
+    line-height: 20px;
+    color: #333333;
+  }
+}
+
+.editable-table-view-setting__body {
+  max-height: 70vh;
+  padding: 0;
+}
+
+.editable-table-view-setting__footer {
+  background-color: #eeeeee;
+  height: 42px;
+  line-height: 42px;
+  padding: 0 20px;
+
+  & .el-button {
+    height: 24px;
+    font-size: 12px;
+    padding: 5px 12px;
+    border-radius: 2px;
+  }
+
+  & .el-button--primary {
+    background-color: @--theme-blue-- !important;
+    border-color: @--theme-blue-- !important;
+  }
+}
+
+.editable-table-view-setting__content {
+  display: flex;
+  min-height: 500px;
+
+  .el-checkbox.is-checked:not(.is-disabled) {
+    .el-checkbox__input .el-checkbox__inner {
+      background-color: @--theme-blue-- !important;
+      border-color: @--theme-blue-- !important;
+    }
+
+    .el-checkbox__label {
+      color: @--theme-blue-- !important;
+    }
+  }
+}
+
+.editable-table-view-setting__content-left {
+  min-width: 417px;
+  width: 417px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.editable-table-view-setting__content-left-item {
+  width: 130px;
+  margin-bottom: 15px;
+}
+
+.editable-table-view-setting__content-right {
+  border-left: 1px solid #d9d9d9;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
+.editable-table-view-setting__content-right-title,
+.editable-table-view-setting__content-left-title {
+  border-bottom: 1px solid #d9d9d9;
+  width: 100%;
+  height: 46px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.editable-table-view-setting__selected-count {
+  margin-left: 20px;
+}
+
+.editable-table-view-setting__checkbox-wrapper {
+  padding-left: 37px;
+  padding-top: 24px;
+
+  .el-checkbox {
+    align-items: flex-start !important;
+  }
+}
+
+.editable-table-view-setting__content-right-frize {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid #d9d9d9;
+  padding-left: 20px;
+}
+
+.editable-table-view-setting__content-right-input.el-input {
+  width: 140px;
+  margin: 0 4px;
+
+  .el-input__inner {
+    height: 28px;
+    line-height: 28px;
+  }
+}
+
+.editable-table-view-setting__content-right-selected {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  flex-grow: 1;
+  padding-left: 18px;
+  padding-top: 17px;
+  padding-right: 23px;
+}
+
+.editable-table-view-setting__selected-item-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.editable-table-view-setting__icon-wrapper {
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  padding: 2px 4px;
+  margin-right: 10px;
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.editable-table-view-setting__selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 30px;
+  height: 30px;
+  width: 100%;
+}
+
+.editable-table-view-setting__selected-item-close {
+  cursor: pointer;
+
+  &--disabled {
+    cursor: not-allowed;
+    color: #989ea9;
+  }
 }

package/src/components/EditableTable/index.vue

@@ -9,7 +9,7 @@
           class="editable-table-view-setting__btn btn-pointer"
           @click="handleViewSettingShow"
         >
-          <i class="el-icon-setting" />
+          <el-icon><Setting /></el-icon>
           <div class="editable-table-view-setting__btn-text">
             显示设置
           </div>
@@ -115,7 +115,7 @@
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
-            @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+            @update:tempFilteredValue="(key, value) => { tempFilteredValue[key] = value }"
             @popover-show="() => handleHeaderPopoverShow(colorFilterConfig)"
             @update:sort="handleSort"
             @reset="() => handleHeaderOperationReset(colorFilterConfig)"
@@ -159,7 +159,7 @@
             :temp-sort-type="tempSortType"
             :temp-filtered-value="tempFilteredValue"
             @update:tempSummaryList="val => { tempSummaryList = val }"
-            @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+            @update:tempFilteredValue="(key, value) => { tempFilteredValue[key] = value }"
             @popover-show="() => handleOpenFilter(column)"
             @update:sort="handleSort"
             @reset="() => handleResetFilter(column)"
@@ -304,22 +304,25 @@
     </el-table>
     <div class="pagination-wrap">
       <div>共{{ total }}项数据</div>
-      <el-pagination
-        background
-        layout="sizes, prev, pager, next, jumper"
-        :page-sizes="pageSizes"
-        :page-size.sync="pageSize"
-        :pager-count="pagerCount"
-        :current-page="currentPage"
-        :total="total"
-        @size-change="handlePageSizeChange"
-        @current-change="handleCurrPageChange"
-      />
+      <el-config-provider :locale="zhCn">
+        <el-pagination
+          background
+          layout="sizes, prev, pager, next, jumper"
+          :page-sizes="pageSizes"
+          v-model:page-size="pageSize"
+          :pager-count="pagerCount"
+          v-model:current-page="innerCurrentPage"
+          :total="total"
+          @size-change="handlePageSizeChange"
+          @current-change="handleCurrPageChange"
+        />
+      </el-config-provider>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { Setting } from '@element-plus/icons-vue';
 import BizColorSelect from './features/bizColorSelect.vue';
 import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
 import BizTableHeaderPopover from './features/bizTableHeaderPopover/index.vue'
@@ -327,8 +330,8 @@ import BizEditCell from './features/bizEditCell.vue'
 import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
 
 import { computed, nextTick, ref, watch } from 'vue';
-import { Message } from 'element-ui';
-import omit from 'lodash/omit';
+import { ElMessage as Message, ElConfigProvider } from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 
 import {
   usePagination,
@@ -443,6 +446,7 @@ const props = withDefaults(defineProps<IProps>(), {
   pageSize: 10,
   pageSizes: () => [10, 15, 30, 60, 100],
   pagerCount: 11,
+  settingStorgeMigrationConfigs: undefined,
 });
 
 // 同defineProps一样，不支持泛型参数从外部导入
@@ -456,6 +460,15 @@ const returnAnyType = (params): any => {
   return params
 }
 
+/** 简单实现 omit，排除对象中指定的 key */
+const omit = <T extends Record<string, any>, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> => {
+  const result = { ...obj } as T;
+  for (const key of keys) {
+    delete result[key];
+  }
+  return result as Omit<T, K>;
+};
+
 const actualColumns = computed(() => {
   const res: IColumnConfig[] = [];
   let cnt = leftFixedColumnCount.value;
@@ -497,6 +510,11 @@ const tableDomRef = ref<any>(null);
 const currScope = ref<any>(null);
 
 /************ 分页相关 *************/
+const innerCurrentPage = ref(props.currentPage);
+watch(() => props.currentPage, (val) => {
+  innerCurrentPage.value = val;
+});
+
 const beforePageChange = () => {
   // searchValue.value = {};
 };

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

@@ -1,4 +1,4 @@
-import type { TableColumn, DatePicker } from 'element-ui'
+import type { TableColumnCtx, DatePickerProps } from 'element-plus'
 
 export enum IEditType {
   INPUT = 'input',
@@ -44,8 +44,8 @@ export interface IFilterDoubleDatePickerBase {
 
 export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
   pickerOptions?: {
-    start?: DatePicker['pickerOptions']
-    end?: DatePicker['pickerOptions']
+    start?: DatePickerProps['disabledDate']
+    end?: DatePickerProps['disabledDate']
   }
 }
 
@@ -108,7 +108,7 @@ type _IColumnConfigRequired = {
   selectOptions?: any
 }
 
-export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>
+export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumnCtx<any>, keyof _IColumnConfigRequired>>
 
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;