@lx-frontend/wrap-element-ui 1.0.15-beta.8 → 1.0.16-beta.0

package/README.md

@@ -34,9 +34,9 @@ export default {
 
 ### 开发指南
 
-新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
+新增或修改组件时，使用 `pnpm dev` 可以实时预览 stories。
 
-开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
+开发完成后，可以使用 `pnpm dist` 预览打包后的组件是否能正常工作。与 `pnpm dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
 
 `build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.15-beta.8",
+  "version": "1.0.16-beta.0",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
-    "sb:dev": "cross-env MODE=development storybook dev -p 6006",
-    "sb:dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
+    "dev": "cross-env MODE=development storybook dev -p 6006",
+    "dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
     "build:lib": "pnpm clean && vite build",
     "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
     "preview": "serve ./storybook-static",
@@ -52,7 +52,6 @@
     "ali-oss": "^6.20.0",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "gulp": "^4.0.2",
@@ -72,6 +71,6 @@
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "@lx-frontend/wrap-element-ui": "1.0.15-beta.1"
+    "@lx-frontend/wrap-element-ui": "1.0.10"
   }
 }

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

@@ -16,12 +16,7 @@
         :title="item.text"
         class="editable-table-sort-filter__filter-checkbox"
       >
-        <slot
-          name="filter-item"
-          v-bind="item"
-        >
-          {{ item.text }}
-        </slot>
+        {{ item.text }}
       </el-checkbox>
     </el-checkbox-group>
   </div>

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

@@ -6,42 +6,86 @@
     </div>
     <div class="editable-table-sort-filter__date-picker-content">
       <el-date-picker
-        value-format="yyyy-MM-dd"
-        format="yyyy-MM-dd"
-        type="date"
-        size="small"
+        v-bind="datePickerCommonProps"
         placeholder="开始日期"
         :value="tempFilteredValue[config.prop[0]]"
-        :editable="false"
-        @input="val => emit('update:tempFilteredValue', config.prop[0], val || '')"
+        :picker-options="startDateDisabledOptions"
+        @input="handleStartDateChange"
       />
       <el-date-picker
-        value-format="yyyy-MM-dd"
-        format="yyyy-MM-dd"
-        size="small"
-        type="date"
+        v-bind="datePickerCommonProps"
         placeholder="结束日期"
         :value="tempFilteredValue[config.prop[1]]"
-        :editable="false"
-        @input="val => emit('update:tempFilteredValue', config.prop[1], val || '')"
+        :picker-options="endDateDisabledOptions"
+        @input="handleEndDateChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { IFilterDoubleDatePicker } from '../../types';
+import dayjs from 'dayjs';
+import type { DatePickerOptions } from 'element-ui/types/date-picker';
 
-defineProps<{
-  config: IFilterDoubleDatePicker
-  tempFilteredValue: Record<string, string>
-}>()
+interface IFilterDoubleDatePickerProps {
+  /** 日期选择器配置 */
+  config: IFilterDoubleDatePicker;
+  /** 临时筛选值 */
+  tempFilteredValue: Record<string, string>;
+}
+
+const props = defineProps<IFilterDoubleDatePickerProps>();
 
 const emit = defineEmits<{
-  (e: 'update:tempFilteredValue', key: string, value: string): void
-}>()
-</script>
+  (e: 'update:tempFilteredValue', key: string, value: string): void;
+}>();
+
+/** 日期选择器通用配置 */
+const datePickerCommonProps = {
+  valueFormat: 'yyyy-MM-dd',
+  format: 'yyyy-MM-dd',
+  type: 'date',
+  size: 'small',
+  editable: false,
+} as const;
+
+/** 开始日期禁用配置 */
+const startDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const endDate = props.tempFilteredValue[props.config.prop[1]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!endDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isAfter(dayjs(endDate), 'day');
+    }
+  };
+});
+
+/** 结束日期禁用配置 */
+const endDateDisabledOptions = computed<DatePickerOptions>(() => {
+  const startDate = props.tempFilteredValue[props.config.prop[0]];
+
+  return {
+    disabledDate: (time: Date) => {
+      if (!startDate) return false;
+      
+      const currentDate = dayjs(time);
+      return currentDate.isBefore(dayjs(startDate), 'day');
+    }
+  };
+});
 
-<style scoped lang="less">
+/** 处理开始日期变更 */
+const handleStartDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[0], val || '');
+};
 
-</style>
+/** 处理结束日期变更 */
+const handleEndDateChange = (val: string | null) => {
+  emit('update:tempFilteredValue', props.config.prop[1], val || '');
+};
+</script>

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

@@ -9,6 +9,7 @@
         clearable
         :value="startDate"
         separator=""
+        size="small"
         placeholder="开始日期"
         popper-class="month-day-picker"
         :options="startDateOptions"
@@ -18,6 +19,7 @@
         clearable
         :value="endDate"
         separator=""
+        size="small"
         placeholder="结束日期"
         popper-class="month-day-picker"
         :options="endDateOptions"

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

@@ -15,12 +15,7 @@
         :label="item.value"
         :title="item.text"
       >
-        <slot
-          name="filter-item"
-          v-bind="item"
-        >
-          {{ item.text }}
-        </slot>
+        {{ item.text }}
       </el-radio>
     </el-radio-group>
   </div>

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

@@ -9,18 +9,15 @@
     @show="() => emit('popover-show')"
   >
     <template slot="reference">
-      <slot
-        v-if="column.customColorLabel"
-        name="custom"
-      />
-      <!-- 筛选中，或排序中，高亮 -->
-      <span
-        v-else
-        :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
-      >
-        {{ column.label }}
-        <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
-      </span>
+      <slot name="custom">
+        <!-- 筛选中，或排序中，高亮 -->
+        <span
+          :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
+        >
+          {{ column.label }}
+          <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
+        </span>
+      </slot>
     </template>
     <div class="editable-table-sort-filter">
       <div class="editable-table-sort-filter__column-title">

package/src/components/EditableTable/index.vue

@@ -124,14 +124,6 @@
             <template #custom>
               <div class="editable-table__color-icon" />
             </template>
-            <template #filter-item="item">
-              <slot
-                :name="colorFilterConfig.prop + '-filter-item'"
-                v-bind="item"
-              >
-                {{ item.text }}
-              </slot>
-            </template>
           </biz-table-header-popover>
           <div
             v-else
@@ -174,14 +166,6 @@
             @reset="() => handleHeaderOperationReset(column)"
             @confirm="() => handleHeaderOperationConfirm(column)"
           >
-            <template #filter-item="item">
-              <slot
-                :name="column.prop + '-filter-item'"
-                v-bind="item"
-              >
-                {{ item.text }}
-              </slot>
-            </template>
             <template #summay-item>
               <slot
                 :name="column.prop + '-summay-item'"
@@ -333,6 +317,7 @@ import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
 
 import { computed, nextTick, ref, watch } from 'vue';
 import { Message } from 'element-ui';
+import omit from 'lodash/omit';
 
 import {
   usePagination,
@@ -590,9 +575,14 @@ const doTableLayout = async () => {
 
 // 过滤出自定义属性，将其它属性全部透传给 el-table-column
 const getColumnBindProps = (column: IColumnConfig) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { editType, slotName, inputType, options, filters, ...rest } = column;
-  return rest;
+  // 过滤掉自定义属性，只保留 el-table-column 支持的属性
+  return omit(column, [
+    'editType',
+    'slotName',
+    'inputType',
+    'options',
+    'filters'
+  ]);
 };
 
 const setRowClassName = (scope) => {

package/src/components/SearchForm/index.vue

@@ -8,7 +8,7 @@
       v-for="({
         isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
         clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
-        doubleIsInline = true,
+        doubleIsInline = true, maxlength = 255,
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -18,6 +18,7 @@
         v-if="type === 'input'"
         :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
         :value="formData[prop]"
+        :maxlength="maxlength"
         @input="val => handleInput(val, prop, inputLimitCallback)"
       />
       <div

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

@@ -16,6 +16,7 @@ type SlotOption = Omit<BaseOption, 'prop'> & {
 type InputOption = BaseOption & {
   type: 'input'
   inputLimitCallback?: (value: string) => boolean
+  maxlength?: number
 }
 
 type SelectOption = BaseOption & {