@lx-frontend/wrap-element-ui 1.0.21-beta.2 → 1.0.21-beta.4

package/package.json

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

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

@@ -9,14 +9,14 @@
         v-bind="datePickerCommonProps"
         placeholder="开始日期"
         :value="tempFilteredValue[config.prop[0]]"
-        :picker-options="genStartDateDisabledOptions(tempFilteredValue[config.prop[1]], config.limit)"
+        :picker-options="pickerStartOptions"
         @input="handleStartDateChange"
       />
       <el-date-picker
         v-bind="datePickerCommonProps"
         placeholder="结束日期"
         :value="tempFilteredValue[config.prop[1]]"
-        :picker-options="genEndDateDisabledOptions(tempFilteredValue[config.prop[0]], config.limit)"
+        :picker-options="pickerEndOptions"
         @input="handleEndDateChange"
       />
     </div>
@@ -24,17 +24,19 @@
 </template>
 
 <script setup lang="ts">
-import { IFilterDoubleDatePicker } from '../../types';
+import { IFilterDoubleDatePicker, IFilterDoubleDatePickerLimit } from '../../types';
 import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../../../helper';
+import { computed, toRefs } from 'vue';
 
 interface IFilterDoubleDatePickerProps {
   /** 日期选择器配置 */
-  config: IFilterDoubleDatePicker;
+  config: IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit;
   /** 临时筛选值 */
   tempFilteredValue: Record<string, string>;
 }
 
 const props = defineProps<IFilterDoubleDatePickerProps>();
+const { config, tempFilteredValue } = toRefs(props)
 
 const emit = defineEmits<{
   (e: 'update:tempFilteredValue', key: string, value: string): void;
@@ -49,13 +51,36 @@ const datePickerCommonProps = {
   editable: false,
 } as const;
 
+
+const pickerStartOptions = computed(() => {
+  if ('startOptions' in config.value && config.value.startOptions) {
+    return config.value.startOptions;
+  }
+  if ('limit' in config.value) {
+    return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]], config.value.limit);
+  }
+  // 默认，无限制
+  return genStartDateDisabledOptions(tempFilteredValue.value[config.value.prop[1]]);
+});
+
+const pickerEndOptions = computed(() => {
+  if ('endOptions' in config.value && config.value.endOptions) {
+    return config.value.endOptions;
+  }
+  if ('limit' in config.value) {
+    return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]], config.value.limit);
+  }
+  // 默认，无限制
+  return genEndDateDisabledOptions(tempFilteredValue.value[config.value.prop[0]]);
+})
+
 /** 处理开始日期变更 */
 const handleStartDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', props.config.prop[0], val || '');
+  emit('update:tempFilteredValue', config.value.prop[0], val || '');
 };
 
 /** 处理结束日期变更 */
 const handleEndDateChange = (val: string | null) => {
-  emit('update:tempFilteredValue', props.config.prop[1], val || '');
+  emit('update:tempFilteredValue', config.value.prop[1], val || '');
 };
 </script>

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

@@ -36,11 +36,18 @@ export interface IFilterSelect {
 }
 
 /** 筛选组件 - 日期范围（拆分两个日期选择器） */
-export interface IFilterDoubleDatePicker {
+export interface IFilterDoubleDatePickerBase {
   type: 'doubleDatePicker',
   prop: [string, string],
   label?: string,
-	pickerOptions?: DatePicker['pickerOptions'],
+}
+
+export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
+	startOptions?: DatePicker['pickerOptions'],
+  endOptions?: DatePicker['pickerOptions'],
+}
+
+export interface IFilterDoubleDatePickerLimit extends IFilterDoubleDatePickerBase {
   /** 限制天数范围 */
   limit?: number
 }
@@ -68,7 +75,7 @@ export interface IFilterSolt {
   active: () => boolean
 }
 
-export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
 
 /** 筛选组件类型 */
 export type FilterListType = Array<FilterItem>

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, maxlength = 255, doubleDatePickerLimit
+        doubleIsInline = true, maxlength = 255, datePickerOptions, doubleDatePickerStartOptions, doubleDatePickerEndOptions, doubleDatePickerLimit
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -72,6 +72,7 @@
         :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
+        :picker-options="datePickerOptions"
       />
       <div
         v-if="type === 'doubleDatePicker'"
@@ -86,7 +87,7 @@
           type="date"
           :editable="false"
           :placeholder="(placeholder || [])[0] || '开始日期'"
-          :picker-options="genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
+          :picker-options="doubleDatePickerStartOptions || genStartDateDisabledOptions(formData[prop[1]], doubleDatePickerLimit)"
         />
         <el-date-picker
           @input="val => handleInput(val, prop[1], '', key)"
@@ -97,7 +98,7 @@
           type="date"
           :editable="false"
           :placeholder="(placeholder || [])[1] || '结束日期'"
-          :picker-options="genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
+          :picker-options="doubleDatePickerEndOptions || genEndDateDisabledOptions(formData[prop[0]], doubleDatePickerLimit)"
         />
         <el-checkbox
           :value="checkedIds[key]"
@@ -241,7 +242,6 @@ export default {
 .form-double-inline {
   display: flex;
   & .el-input {
-    width: 100%;
     &:not(:first-child) {
       margin-left: 4px;
     }

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

@@ -1,3 +1,5 @@
+import { DatePicker } from "element-ui/types/element-ui"
+
 type BaseOption = {
   label: string
   prop: string
@@ -37,6 +39,7 @@ type SelectOption = BaseOption & {
 type DatePickerOption = BaseOption & {
   type: 'datePicker'
   dateType?: string
+  datePickerOptions?: DatePicker['pickerOptions']
 }
 
 type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
@@ -49,9 +52,19 @@ type DoubleInputOption = BaseDoubleOption & {
   inputLimitCallback?: (value: string) => boolean
 }
 
-type DoubleDatePickerOption = BaseDoubleOption & {
+type DoubleDatePickerOptionBase = BaseDoubleOption & {
   type: 'doubleDatePicker'
   isEmpty?: boolean
+  placeholder?: [string, string]
+}
+
+type DoubleDatePickerOption = DoubleDatePickerOptionBase & {
+  doubleDatePickerStartOptions?: DatePicker['pickerOptions']
+  doubleDatePickerEndOptions?: DatePicker['pickerOptions']
+}
+
+type DoubleDatePickerOptionLimit = DoubleDatePickerOptionBase & {
+  doubleDatePickerLimit?: number
 }
 
 export type SearchFormConfigOption =
@@ -60,4 +73,5 @@ export type SearchFormConfigOption =
   | DatePickerOption
   | DoubleInputOption
   | DoubleDatePickerOption
+  | DoubleDatePickerOptionLimit
   | SlotOption