diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue index 23464b4bc2..3fe40162de 100644 --- a/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue +++ b/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue @@ -51,7 +51,9 @@ const birthdayFilter = ref({ component: DatePicker, format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd', + // 最大允许选择的时间 max: new Date('2000-11-19'), + // 最小允许选择的时间 min: new Date('1989-11-19') }, isDatetime: true @@ -64,7 +66,9 @@ const hireDateFilter = ref({ component: DatePicker, format: 'yyyy/MM/dd', valueFormat: 'yyyy/MM/dd', + // 最大允许选择的时间 max: new Date('2020-11-19'), + // 最小允许选择的时间 min: new Date('2018-11-19') }, isDatetime: true @@ -77,7 +81,11 @@ const startFilter = ref({ component: DatePicker, format: 'yyyy-MM-dd hh:mm:ss', valueFormat: 'yyyy-MM-dd hh:mm:ss', - type: 'datetime' + type: 'datetime', + // 开始日期默认值 + startDate: '2023-11-19 18:00:00', + // 结束日期默认值 + endDate: '2023-11-19 18:00:00' }, isDatetime: true } @@ -89,7 +97,9 @@ const expiredFilter = ref({ component: DatePicker, format: 'yyyy-MM-dd hh:mm:ss', valueFormat: 'yyyy-MM-dd hh:mm:ss', + // 最大允许选择的时间 max: new Date('2020-11-19'), + // 最小允许选择的时间 min: new Date('2010-11-19') }, isDatetime: true diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue index bc3d3c6e05..7017aa001d 100644 --- a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue +++ b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue @@ -57,7 +57,9 @@ export default { component: DatePicker, format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd', + // 最大允许选择的时间 max: new Date('2000-11-19'), + // 最小允许选择的时间 min: new Date('1989-11-19') }, isDatetime: true @@ -70,7 +72,9 @@ export default { component: DatePicker, format: 'yyyy/MM/dd', valueFormat: 'yyyy/MM/dd', + // 最大允许选择的时间 max: new Date('2020-11-19'), + // 最小允许选择的时间 min: new Date('2018-11-19') }, isDatetime: true @@ -83,7 +87,11 @@ export default { component: DatePicker, format: 'yyyy-MM-dd hh:mm:ss', valueFormat: 'yyyy-MM-dd hh:mm:ss', - type: 'datetime' + type: 'datetime', + // 开始日期默认值 + startDate: '2023-11-19 18:00:00', + // 结束日期默认值 + endDate: '2023-11-19 18:00:00' }, isDatetime: true } @@ -95,7 +103,9 @@ export default { component: DatePicker, format: 'yyyy-MM-dd hh:mm:ss', valueFormat: 'yyyy-MM-dd hh:mm:ss', + // 最大允许选择的时间 max: new Date('2020-11-19'), + // 最小允许选择的时间 min: new Date('2010-11-19') }, isDatetime: true diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue index 1fbb6a0ae9..a4fca0bc37 100644 --- a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue +++ b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue @@ -127,7 +127,9 @@ const nameFilter = ref({ multi: true, simpleFilter: { searchConfig: { - component: Input + component: Input, + // 搜索框默认值 + serachValue: 'WWW' } } }) diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue index 0052951f3f..2cd9f70c73 100644 --- a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue +++ b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue @@ -133,7 +133,9 @@ export default { multi: true, simpleFilter: { searchConfig: { - component: Input + component: Input, + // 搜索框默认值 + serachValue: 'WWW' } } } diff --git a/packages/vue/src/grid/src/filter/src/methods.ts b/packages/vue/src/grid/src/filter/src/methods.ts index 431f214e41..d15cb1a6f9 100644 --- a/packages/vue/src/grid/src/filter/src/methods.ts +++ b/packages/vue/src/grid/src/filter/src/methods.ts @@ -198,7 +198,12 @@ export default { visible: true, targetElem: hooks.markRaw(targetElem), targetElemParentTr: hooks.markRaw(targetElemParentTr), - id: column.id + id: column.id, + searchConfig: filter.simpleFilter?.searchConfig, + datetimeConfig: filter.simpleFilter?.datetimeConfig, + searchValue: filter.simpleFilter?.searchConfig?.searchValue || '', + startDate: filter.simpleFilter?.datetimeConfig?.startDate || '', + endDate: filter.simpleFilter?.datetimeConfig?.endDate || '' }) }) } diff --git a/packages/vue/src/grid/src/filter/src/panel.tsx b/packages/vue/src/grid/src/filter/src/panel.tsx index cb07e44646..ac44608a06 100644 --- a/packages/vue/src/grid/src/filter/src/panel.tsx +++ b/packages/vue/src/grid/src/filter/src/panel.tsx @@ -33,7 +33,7 @@ import { hooks, h, $prefix } from '@opentiny/vue-common' import { iconCheck, iconCheckedSur, iconHalfselect, iconSearch } from '@opentiny/vue-icon' import debounce from '@opentiny/vue-renderless/common/deps/debounce' -function renderInputArgs({ _vm, inputFilter }) { +const renderInputArgs = ({ _vm, inputFilter }) => { let isAddbyProgram = false if (typeof inputFilter.relations_addby !== 'undefined') { @@ -59,7 +59,7 @@ function renderInputArgs({ _vm, inputFilter }) { return { isAddbyProgram, inputRelations } } -function renderInputProps({ InputComponent, condition, event, inputFilter, isNativeInput, prop }) { +const renderInputProps = ({ InputComponent, condition, event, inputFilter, isNativeInput, prop }) => { let inputProps = { style: 'width:100%', on: { @@ -115,8 +115,8 @@ const iconRender = function (checked, index, halfChecked) { } } -function renderEnumableOptions({ iconRender, _vm, filterStore, selectAll, searchable }) { - const resultList = filterStore.options.filter((value) => value.label?.toString().includes(_vm.searchValue)) +const renderEnumableOptions = ({ iconRender, _vm, filterStore, selectAll, searchable }) => { + const resultList = filterStore.options.filter((value) => value.label?.toString().includes(filterStore.searchValue)) if (resultList.length) { const filterList = resultList.map((item, index) => ( @@ -133,8 +133,7 @@ function renderEnumableOptions({ iconRender, _vm, filterStore, selectAll, search // 多选 item.checked = !item.checked } - }} - > + }}> {filterStore.multi ? iconRender(item.checked, index + 1) : null} {item.label} @@ -155,8 +154,7 @@ function renderEnumableOptions({ iconRender, _vm, filterStore, selectAll, search if (!filterStore.multi) { _vm.filterEnum() } - }} - > + }}> {filterStore.multi ? iconRender( filterStore.options.every((item) => item.checked), @@ -199,10 +197,7 @@ export default { popperJS: null, showAdvance: false, showAdvItems: false, - listPopper: null, - searchValue: '', - startDate: '', - endDate: '' + listPopper: null } }, render() { @@ -218,7 +213,6 @@ export default { renderSimple } = this as any const { args, column, options, layout = 'input,enum,default,extends,base' } = filterStore - const layoutMap = { input: renderInput, enum: renderEnumable, @@ -247,8 +241,7 @@ export default { 'tiny-grid__filter-simple': layout.includes('simple') } ]} - style={filterStore.style} - > + style={filterStore.style}> {filterStore.visible ? (
{column.slots && column.slots.filter @@ -334,16 +327,14 @@ export default { class={['tiny-grid__filter-option', { active: condition.empty === true }]} onClick={() => { this.filterNull(true) - }} - > + }}> {this.i18n('ui.grid.filter.empty')}
  • { this.filterNull(false) - }} - > + }}> {this.i18n('ui.grid.filter.unempty')}
    • @@ -364,8 +355,7 @@ export default { class="tiny-grid__filter-option" onClick={() => { this.filterExtends(item) - }} - > + }}> {item.label} ))} @@ -405,8 +395,7 @@ export default { function () { return true } - }} - > + }}> {label} ))} @@ -440,8 +429,7 @@ export default {
    @@ -487,8 +475,12 @@ export default { value-format={valueFormat} picker-options={pickerOptions} class="tiny-grid__filter-date-pick" - v-model={this.startDate} - > + onChange={(value) => { + if (filterStore.datetimeConfig) { + filterStore.datetimeConfig.startDate = value + } + }} + v-model={filterStore.startDate}>
  • {this.i18n('ui.grid.filter.endDate')} @@ -498,8 +490,12 @@ export default { value-format={valueFormat} picker-options={pickerOptions} class="tiny-grid__filter-date-pick" - v-model={this.endDate} - > + v-model={filterStore.endDate} + onChange={(value) => { + if (filterStore.datetimeConfig) { + filterStore.datetimeConfig.endDate = value + } + }}>
    • @@ -510,8 +506,7 @@ export default { size="mini" onClick={() => { filterStore.visible = false - }} - > + }}> {this.i18n('ui.base.cancel')}
    @@ -528,7 +523,12 @@ export default {
    {InputComponents ? ( { + if (filterStore.searchConfig) { + filterStore.searchConfig.searchValue = value + } + }} class="tiny-grid__filter-search" clearable v-slots={{ @@ -556,8 +556,7 @@ export default { size="mini" onClick={() => { filterStore.visible = false - }} - > + }}> {this.i18n('ui.base.cancel')}
    @@ -676,11 +675,11 @@ export default { this.confirmFilter('input') }, filterDate() { - const { startDate, endDate } = this + const { startDate, endDate } = this.filterStore this.condition.input = '' this.condition.value = [] this.condition.empty = null - this.condition.dateList = [this.startDate, this.endDate] + this.condition.dateList = [startDate, endDate] if (startDate && !endDate) { this.condition.relation = 'greaterThan' diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts index acbfa355e2..af473c7c58 100644 --- a/packages/vue/src/grid/src/table/src/table.ts +++ b/packages/vue/src/grid/src/table/src/table.ts @@ -191,9 +191,13 @@ const renderPluginWrapperFn = (opt) => { const { editRules, validOpts, height, tableData, vaildTipOpts, id, _vm } = opt return () => { + // 筛选面板 let filterVnode = [null] + // 右键快捷面板 let ctxMenuVnode = [null] + // tips提示 let tooltipVnode = [null] + // 校验错误提示 let errorTooltipVnode = [null] if (hasFilter) {