@lx-frontend/wrap-element-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "wrap-element-ui",
   "author": "",
   "main": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -14,6 +15,7 @@
     "preview": "serve ./storybook-static",
     "publish:dev": "npm publish --access public --tag beta",
     "publish:prod": "npm publish --access public",
+    "cdn": "gulp oss",
     "lint": "eslint src"
   },
   "files": [
@@ -49,12 +51,11 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "ali-oss": "^6.20.0",
+    "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^4.0.0",
-    "gulp-cssmin": "^0.1.7",
     "less": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -64,7 +65,7 @@
     "storybook": "7.6.19",
     "through2": "^4.0.2",
     "typescript": "^4.9.5",
-    "vite": "^4.5.3",
+    "vite": "^3.2.7",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-tsconfig-paths": "^4.3.2",

package/src/components/EditableTable/index.less

@@ -180,6 +180,31 @@
       border-right: 2px #e4e8ef solid;
     }
   }
+
+  .el-table-filter,
+  th.el-table__cell .el-table__column-filter-trigger,
+  th.is-sortable .caret-wrapper {
+    display: none;
+  }
+
+  .el-table__body tr.current-row > td,
+  .el-table__body tr.hover-row > td {
+    background-color: #fafafa;
+  }
+
+  table tbody tr td {
+    & .el-date-editor.el-input {
+      width: 100%;
+    }
+
+    & .cell {
+      font-size: 14px;
+    }
+  }
+
+  .el-table__fixed-body-wrapper {
+    background: #fff;
+  }
 }
 
 .view-setting {
@@ -207,7 +232,7 @@
     padding: 0px;
 
     .el-dialog__body {
-      max-height: 800px;
+      max-height: 70vh;
     }
 
     .el-dialog__body {
@@ -497,6 +522,12 @@
     background-color: @--theme-blue--;
     border-color: @--theme-blue--;
   }
+
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-radio__input.is-checked .el-radio__inner {
+    background: #2468f2;
+    border-color: #2468f2;
+  }
 }
 
 .btn-pointer {
@@ -576,6 +607,8 @@
   margin-top: 12px;
 
   & .el-pagination {
+    padding: 0;
+
     .el-pager li.number {
       background-color: #fff;
       border: 1px solid #d6dbe3;
@@ -605,26 +638,7 @@
   }
 }
 
-.el-table__body tr.current-row > td,
-.el-table__body tr.hover-row > td {
-  background-color: #fafafa;
-}
-
-.el-table-filter,
-th.el-table__cell .el-table__column-filter-trigger,
-th.is-sortable .caret-wrapper {
-  display: none;
-}
 
-table tbody tr td {
-  & .el-date-editor.el-input {
-    width: 100%;
-  }
-
-  & .cell {
-    font-size: 14px;
-  }
-}
 
 .editable-table {
   & table th {
@@ -674,12 +688,6 @@ table tbody tr td {
   }
 }
 
-.el-select-dropdown {
-  &__item {
-    text-align: center;
-  }
-}
-
 .el-dialog__header {
   display: flex;
   justify-content: space-between;

package/src/components/EditableTable/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="editable-table">
     <div class="view-setting">
-      <div class="view-setting__btn-wrapper">
+      <div
+        v-if="!hideViewSettingBtn"
+        class="view-setting__btn-wrapper"
+      >
         <div
           class="view-setting__btn btn-pointer"
           @click="handleViewSettingShow"
@@ -17,6 +20,7 @@
         title="显示设置"
         :visible.sync="viewSettingVisible"
         width="750px"
+        top="12vh"
         :close-on-click-modal="false"
         :append-to-body="true"
         custom-class="view-setting__dialog"
@@ -218,7 +222,7 @@
         :key="column.prop + index"
         resizable
         class-name="editable-table__data-column"
-        :filtered-value="filteredValue[column.prop] || []"
+        :filtered-value="Array.isArray(filteredValue[column.prop]) ? filteredValue[column.prop] : []"
         v-bind="getColumnBindProps(column)"
       >
         <template
@@ -267,7 +271,7 @@
                 </div>
               </div>
               <div
-                v-if="column.isColumnSearchAble"
+                v-if="column.search && !Array.isArray(column.search)"
                 class="sort-filter__search"
               >
                 <div class="sort-filter__search-title">
@@ -279,19 +283,41 @@
                   placeholder="请输入内容"
                 />
               </div>
+
               <div
-                v-if="column.filters && column.filters.length > 0"
+                v-if="column.search && Array.isArray(column.search)"
+                class="sort-filter__search"
+                style="display: flex;flex-direction: column;gap: 12px;"
+              >
+                <div
+                  v-for="item in column.search"
+                  :key="item.prop"
+                >
+                  <div class="sort-filter__search-title">
+                    {{ item.label }}
+                  </div>
+                  <el-input
+                    v-model="tempSearchValue[item.prop]"
+                    class="sort-filter__search-input"
+                    placeholder="请输入内容"
+                  />
+                </div>
+              </div>
+
+              <div
+                v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
                 class="sort-filter__filter"
               >
                 <div class="sort-filter__filter-title">
                   筛选
                 </div>
                 <el-checkbox-group
+                  v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
                   v-model="tempFilteredValue[column.prop]"
                   class="sort-filter__filter-checkbox-group"
                 >
                   <el-checkbox
-                    v-for="item in column.filters"
+                    v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
                     :key="item.value"
                     :label="item.value"
                     class="sort-filter__filter-checkbox"
@@ -304,6 +330,25 @@
                     </slot>
                   </el-checkbox>
                 </el-checkbox-group>
+
+                <el-radio-group
+                  v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
+                  v-model="tempFilteredValue[column.prop]"
+                  style="display: flex;flex-direction: column;gap: 6px;"
+                >
+                  <el-radio
+                    v-for="item in column.filters.options"
+                    :key="item.value"
+                    :label="item.value"
+                  >
+                    <slot
+                      :name="column.prop + '-filter-item'"
+                      v-bind="item"
+                    >
+                      {{ item.text }}
+                    </slot>
+                  </el-radio>
+                </el-radio-group>
               </div>
               <div
                 v-if="column.summary"
@@ -339,7 +384,7 @@
                 <el-button
                   class="sort-filter__confirm-btn"
                   type="primary"
-                  @click="handleHeaderOperationConfirm(scope)"
+                  @click="handleHeaderOperationConfirm(column, scope)"
                 >
                   确定
                 </el-button>
@@ -538,7 +583,7 @@
         :page-sizes="[10, 15, 30, 60, 100]"
         :page-size.sync="pageSize"
         :pager-count="11"
-        :current-page.sync="currentPage"
+        :current-page="currentPage"
         :total="total"
         @size-change="handlePageSizeChange"
         @current-change="handleCurrPageChange"
@@ -565,7 +610,7 @@ interface IProps {
   dataList: ITableDataItem[];
   /** 列配置 */
   columnConfig: IColumnConfig[];
-  /** 是否展示展开行 */ 
+  /** 是否展示展开行 */
   hasExpandRow?: boolean;
   /** 是否展示序号 */
   hasIndexColumn?: boolean;
@@ -585,6 +630,16 @@ interface IProps {
   dragSemiRange?: number;
   /** 是否显示加载 */
   loading?: boolean;
+  /** 是否隐藏显示设置按钮 */
+  hideViewSettingBtn?: boolean
+  /** 设置的缓存的key */
+  settingStorgeKey?: string
+  /** 前端排序，默认关闭 */
+  localSort?: boolean
+  /** 前端过滤，默认关闭 */
+  localFilter?: boolean
+  /** 页码 */
+  currentPage: number
 }
 
 interface IEmits {
@@ -606,6 +661,10 @@ interface IEmits {
   (e: 'row-edit-cancel', param: { row: any; page: number; size: number;}): void
   /** 页码改变 */
   (e: 'page-change', param: { page: number, size: number }): void
+  /** 查询 */
+  (e: 'search', param: Record<string, any>): void
+  /** 排序 */
+  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -620,7 +679,12 @@ const props = withDefaults(defineProps<IProps>(), {
   colorList: () => [],
   leftFixedCount: 1,
   dragSemiRange: 15,
-  loading: false
+  loading: false,
+  hideViewSettingBtn: false,
+  settingStorgeKey: '',
+  localSort: false,
+  localFilter: false,
+  currentPage: 1,
 })
 
 // 同defineProps一样，不支持泛型参数从外部导入
@@ -640,16 +704,14 @@ const actualColumns = computed(() => {
       isColumnSortable: rawItem.sortable,
       sortable: inSorting.value ? rawItem.sortable : false
     };
-    if (item) {
-      if (cnt > 0) {
-        item.fixed = 'left';
-        // eslint-disable-next-line no-plusplus
-        cnt--;
-      } else {
-        item.fixed = undefined;
-      }
-      res.push(item);
+    if (cnt > 0) {
+      item.fixed = 'left';
+      // eslint-disable-next-line no-plusplus
+      cnt--;
+    } else {
+      item.fixed = undefined;
     }
+    res.push(item);
   }
 
   // 使用默认操作项，添加默认操作列。该列在编辑模式下隐藏
@@ -675,9 +737,8 @@ const beforePageChange = () => {
 }
 const {
   pageSize,
-  currentPage,
   handleCurrPageChange,
-  handlePageSizeChange
+  handlePageSizeChange,
 } = usePagination({
   emit,
   beforePageChange
@@ -717,7 +778,7 @@ const {
   emit,
   tableDomRef,
   pageSize,
-  currentPage,
+  props,
   hasExpandRow: props.hasExpandRow
 })
 
@@ -739,6 +800,9 @@ const {
 
 /************ 列头部操作相关 ************ */
 const {
+  setSort,
+  clearSort,
+  setSearchParams,
   isColumnHeadActive,
   handleSort,
   handleHeaderPopoverShow,
@@ -756,11 +820,13 @@ const {
   sortingColumn,
   isColumnFiltering,
   searchValue,
-  inSorting
+  inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,
   sortFilterPopoverRef,
-  props
+  props,
+  emit,
+  showingColumns,
 })
 
 /************ 表格行拖拽和显示设置列拖拽 ************ */
@@ -787,7 +853,6 @@ useDragSort({
   props,
   viewSettingDragSortOptions,
   beforeDragStart,
-  currentPage,
   pageSize,
   currScope,
   tableDomRef,
@@ -798,18 +863,10 @@ const doTableLayout = async () => {
   tableDomRef.value?.doLayout();
 }
 
-watch(
-  () => props.columnConfig,
-  (val) => {
-    showingColumns.value = val.map(c => c.prop);
-  },
-  { immediate: true }
-)
-
 // 过滤出自定义属性，将其它属性全部透传给 el-table-column
 const getColumnBindProps = (column: IColumnConfig) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { editAble, editType, slotName, inputType, options, ...rest } = column;
+  const { editAble, editType, slotName, inputType, options, filters, ...rest } = column;
   return rest;
 }
 
@@ -832,7 +889,20 @@ const handleColumnClose = (item) => {
 
 defineExpose({
   closeAllExpandedRows,
-  elTableRef: tableDomRef
+  openViewSetting: handleViewSettingShow,
+  elTableRef: tableDomRef,
+  setSort,
+  clearSort,
+  setSearchParams,
+})
+
+// loading 结束和页码变化时滚动到顶部
+watch([
+  () => props.loading,
+  () => props.currentPage,
+], ([loading]) => {
+  if (loading) return;
+  tableDomRef.value.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
 })
 
 </script>

package/src/components/EditableTable/types.ts

@@ -11,24 +11,40 @@ export interface IColumnConfigRequired {
   sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
   slotName?: string; // 如果要自定义，传入 slotName
   isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
-  isColumnSearchAble?: boolean; // 列是否允许搜索，true则表头弹窗会多一个搜索框
+  /** 默认隐藏，显示设置中，该列默认隐藏 */
+  defaultHide?: boolean;
+  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
+  search?: boolean | ISearchOptions
   summary?: boolean; // 是否可以显示该列的统计
   summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
-  // filters?: {value: string | number; text: string; [key: string]: any}[];
+  /** 过滤，传数组时默认复选框 */
+  filters?: {
+    type?: 'checkbox' | 'radio',
+    options: FiltersOption[]
+    default?: string | number | string[] | number[]
+  } | FiltersOption[]
   // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
   [key: string]: any;
 }
 
+type FiltersOption = { value: string | number; text: string; [key: string]: any }
+
+type ISearchOptions = {
+  prop: string,
+  label: string,
+  validator?: (value: string) => boolean
+}[]
+
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;
 }
 
 type ISelectColumn = IColumnConfigRequired & {
-  options: {key: string; value: string | number; [key: string]: any}[];
+  options: { key: string; value: string | number; [key: string]: any }[];
 }
 
-type IDateOnlyColumn = IColumnConfigRequired & {}
-type IDateTimeColumn = IColumnConfigRequired & {}
+type IDateOnlyColumn = IColumnConfigRequired
+type IDateTimeColumn = IColumnConfigRequired
 
 export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
 
@@ -79,16 +95,22 @@ export interface IProps {
   leftFixedCount?: number;
   dragSemiRange?: number;
   loading?: boolean;
+  settingStorgeKey?: string
+  localSort?: boolean
+  localFilter?: boolean
+  currentPage: number
 }
 
 export interface IEmits {
   (e: 'selection-change', selection: any): void
-  (e: 'row-bg-change', param: {colorId: number; row: ITableDataItem; rowIndex: number}): void
-  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number;}): void
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
   (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
-  (e: 'row-edit', param: { row: any, index: number; page: number; size: number;}): void
-  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number;}): void
+  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
+  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
   (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
-  (e: 'row-edit-cancel', param: { row: any; page: number; size: number;}): void
+  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
   (e: 'page-change', param: { page: number, size: number }): void
+  (e: 'search', param: Record<string, any>): void
+  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
 }