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

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.16-beta.1",
+  "version": "1.0.16-beta.3",
   "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",
@@ -70,8 +70,5 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-tsconfig-paths": "^4.3.2",
     "vue-template-compiler": "^2.6.10"
-  },
-  "dependencies": {
-    "@lx-frontend/wrap-element-ui": "1.0.15-beta.1"
   }
 }

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"