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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.7-beta.1",
+  "version": "1.0.7-beta.3",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

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

@@ -46,7 +46,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
   watch(
     () => props.columnConfig,
     (val) => {
-      filteredValue.value = val.reduce((prev, curr) => ({ ...prev, [curr.prop]: [] }), {});
+      val?.forEach(v => handleResetFilterValue(v));
       tempFilteredValue.value = { ...filteredValue.value };
     },
     { immediate: true }
@@ -166,7 +166,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
           if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
           if (!validate) return
           if (v.validator) {
-            const result = v.validator(tempSearchValue.value[v.prop]);
+            const result = v.validator(tempSearchValue.value[v.prop]?.trim());
             if (validate && !result) validate = false;
           }
         })
@@ -194,7 +194,10 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     }
 
     filteredValue.value = { ...tempFilteredValue.value };
-    searchValue.value = { ...tempSearchValue.value };
+    searchValue.value = Object.keys(tempSearchValue.value).reduce((pre, key) => {
+      pre[key] = tempSearchValue.value[key]?.trim() ?? '';
+      return pre;
+    }, {});
 
     emitSearch();
 
@@ -226,6 +229,18 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     }
   }
 
+  function handleResetFilterValue (column: IColumnConfig) {
+    if (column.filters) {
+      if (Array.isArray(column.filters)) {
+        filteredValue.value[column.prop] = []
+      } else if (column.filters.default) {
+        filteredValue.value[column.prop] = column.filters.default
+      } else {
+        filteredValue.value[column.prop] = column.filters.type === 'radio' ? '' : []
+      }
+    }
+  }
+
   const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
     if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
       clearSort();
@@ -234,11 +249,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     // 合计
     summaryList.value = summaryList.value.filter(item => item !== column.prop);
 
-    if (column.filters) {
-      filteredValue.value[column.prop] = Array.isArray(column.filters)
-        ? []
-        : column.filters.default ?? []
-    }
+    handleResetFilterValue(column)
     if (column.search) {
       if (!Array.isArray(column.search)) {
         searchValue.value[column.prop] = '';

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

@@ -88,7 +88,7 @@
           style="display: flex;flex-direction: column;gap: 12px;"
         >
           <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val)"
+            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[0], val || '')"
             :value="tempSearchValue[column.doubleDatePicker.props[0]]"
             value-format="yyyy-MM-dd"
             format="yyyy-MM-dd"
@@ -97,7 +97,7 @@
             placeholder="开始日期"
           />
           <el-date-picker
-            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val)"
+            @input="val => emit('update:tempSearchValue', column.doubleDatePicker.props[1], val || '')"
             :value="tempSearchValue[column.doubleDatePicker.props[1]]"
             value-format="yyyy-MM-dd"
             format="yyyy-MM-dd"
@@ -125,6 +125,7 @@
             v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
             :key="item.value"
             :label="item.value"
+            :title="item.text"
             class="editable-table-sort-filter__filter-checkbox"
           >
             <slot
@@ -146,6 +147,7 @@
             v-for="item in column.filters.options"
             :key="item.value"
             :label="item.value"
+            :title="item.text"
           >
             <slot
               name="filter-item"

package/src/components/EditableTable/index.less

@@ -387,10 +387,26 @@
     &__sort,
     &__search {
       padding: 14px;
+
+      .el-radio__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calc(100% + 10px);
+        display: inline-block;
+        vertical-align: middle;
+      }
     }
 
     &__filter {
       padding-top: 0;
+
+      .el-radio-group,
+      .el-checkbox-group {
+        max-height: 166px;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
     }
 
     &__filter-title,
@@ -447,6 +463,7 @@
     }
 
     &__filter-checkbox-group {
+      width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
@@ -456,10 +473,20 @@
     &__filter-checkbox {
       margin-top: 10px;
       font-size: 14px;
+      width: 100%;
 
       &:first-child {
         margin-top: 0;
       }
+
+      .el-checkbox__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calc(100% - 20px);
+        display: inline-block;
+        vertical-align: middle;
+      }
     }
 
     &__footer {
@@ -496,6 +523,11 @@
       background: @--theme-blue--;
       border-color: @--theme-blue--;
     }
+
+    .el-checkbox__input.is-checked+.el-checkbox__label,
+    .el-radio__input.is-checked+.el-radio__label {
+      color: @--theme-blue--;
+    }
   }
 
   &__pin-top {
@@ -725,4 +757,4 @@
   &::before {
     bottom: -4px;
   }
-}
+}

package/src/components/EditableTable/index.vue

@@ -561,7 +561,7 @@ const doTableLayout = async () => {
 // 过滤出自定义属性，将其它属性全部透传给 el-table-column
 const getColumnBindProps = (column: IColumnConfig) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { editAble, editType, slotName, inputType, options, filters, ...rest } = column;
+  const { editType, slotName, inputType, options, filters, ...rest } = column;
   return rest;
 };
 

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

@@ -12,6 +12,8 @@ type _IColumnConfigRequired = {
   editType?: IEditType; // 编辑格式
   editSlotName?: string; // 编辑时，自定义编辑组件的slotName
   sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  /** 内部使用， */
+  isColumnSortable?: boolean;
   slotName?: string; // 如果要自定义，传入 slotName
   hoverSlotName?: string; // 悬浮时，自定义悬浮组件的slotName
   isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏

package/src/components/SearchForm/index.vue

@@ -54,7 +54,7 @@
         />
         <el-option
           v-for="({name, value, code, id}) in candidate"
-          :key="id || name"
+          :key="value || code || id"
           :value="value || code || id"
           :label="name"
         />