diff --git a/packages/ui-vue/components/condition/src/composition/condition-value/date-range-value.ts b/packages/ui-vue/components/condition/src/composition/condition-value/date-range-value.ts index 201c830031b1e57f7eec63b7bf1f79f771abae2f..2efbb082d89693a68d0f83975029144d52abf244 100644 --- a/packages/ui-vue/components/condition/src/composition/condition-value/date-range-value.ts +++ b/packages/ui-vue/components/condition/src/composition/condition-value/date-range-value.ts @@ -13,10 +13,10 @@ export class DateRangeValue implements ConditionValue { // 编辑器配置 editiorConfig; - constructor(initialData: { begin: string; end: string } = { begin: '', end: '' },editor={}) { + constructor(initialData: { begin: string; end: string } = { begin: '', end: '' }, editor = {}) { this.begin = initialData.begin; this.end = initialData.end; - this.editiorConfig=Object.assign({},editor,{delimiter:'~'}) + this.editiorConfig = Object.assign({}, editor, { delimiter: '~' }) } clear(): void { @@ -30,16 +30,15 @@ export class DateRangeValue implements ConditionValue { end: this.end }; } - getDisplayText() { return this.getValue(); } setValue(value): void { if (value) { - const valueList=value.split(this.editiorConfig.delimiter); - this.begin =valueList[0]; - this.end = valueList[1]; + const valueList = value.split(this.editiorConfig.delimiter); + this.begin = valueList[0] || ''; + this.end = valueList[1] || ''; } else { this.clear(); } diff --git a/packages/ui-vue/components/condition/src/composition/condition-value/datetime-range-value.ts b/packages/ui-vue/components/condition/src/composition/condition-value/datetime-range-value.ts new file mode 100644 index 0000000000000000000000000000000000000000..5f82434b8927dd78ca99f1fcf0c076b196ea6486 --- /dev/null +++ b/packages/ui-vue/components/condition/src/composition/condition-value/datetime-range-value.ts @@ -0,0 +1,13 @@ +import { EditorType } from '../../../../dynamic-form'; +import { DateRangeValue } from "./types"; + +export class DateTimeRangeValue extends DateRangeValue { + // 这个属性会在后面进行比对 + editorType: EditorType = 'datetime-range'; + + valueType = 'datetime'; + + constructor(initialData: { begin: string; end: string } = { begin: '', end: '' },editor={}) { + super(initialData,editor); + } +} diff --git a/packages/ui-vue/components/condition/src/composition/condition-value/number-range-value.ts b/packages/ui-vue/components/condition/src/composition/condition-value/number-range-value.ts index a418b4d7248ff78c33827a5335c5397909e4fcb9..13a33a9e58eb9353d6d32bef8327178eaf413c38 100644 --- a/packages/ui-vue/components/condition/src/composition/condition-value/number-range-value.ts +++ b/packages/ui-vue/components/condition/src/composition/condition-value/number-range-value.ts @@ -19,7 +19,7 @@ export class NumberRangeValue implements ConditionValue { this.begin = initialData.begin == null ? null : parseFloat(initialData.begin as string); this.end = initialData.end == null ? null : parseFloat(initialData.end as string); } - + clear(): void { this.begin = null; this.end = null; diff --git a/packages/ui-vue/components/condition/src/composition/use-condition-value.ts b/packages/ui-vue/components/condition/src/composition/use-condition-value.ts index def7e7e7841d09a0d80003187beb07e3185b1089..da9f79b536369223d0d804a47d8927c26ae1a4e1 100644 --- a/packages/ui-vue/components/condition/src/composition/use-condition-value.ts +++ b/packages/ui-vue/components/condition/src/composition/use-condition-value.ts @@ -16,6 +16,7 @@ import { YearPickerValue } from './condition-value/single-year-value'; import { TextValue } from "./condition-value/text-value"; import { ConditionValue } from "./condition-value/types"; import { UseConditionValue } from "./types"; +import { DateTimeRangeValue } from "./condition-value/datetime-range-value"; export function useConditionValue(): UseConditionValue { @@ -39,6 +40,7 @@ export function useConditionValue(): UseConditionValue { case 'date-picker': return new DatePickerValue(initialValue,editor); case 'datetime-range': + return new DateTimeRangeValue(initialValue,editor); case 'date-range': return new DateRangeValue(initialValue,editor); case 'datetime-picker': diff --git a/packages/ui-vue/components/condition/src/condition-fields.component.tsx b/packages/ui-vue/components/condition/src/condition-fields.component.tsx index c178bf275466e355d81b1f37bc1bc3168ab2ca92..ac361f94509cd3b57dcfe5541123af6f464d0cdc 100644 --- a/packages/ui-vue/components/condition/src/condition-fields.component.tsx +++ b/packages/ui-vue/components/condition/src/condition-fields.component.tsx @@ -110,7 +110,10 @@ export default defineComponent({ onChange(condition, value); }; needEmitChange = false; - }; + } else if (editor && ['year-range', 'month-range', 'date-range', 'datetime-range'].find(item => item === condition.value?.editorType)) { + editor.beginValue = condition.value.begin; + editor.endValue = condition.value.end; + } let customClass = editor?.appearance?.class || props.itemClass; editor?.multiLineLabel && (customClass = customClass + ' farris-group-multi-label'); diff --git a/packages/ui-vue/components/date-picker/src/components/date-range/date-range.component.tsx b/packages/ui-vue/components/date-picker/src/components/date-range/date-range.component.tsx index d57239ee6297c187198e9fbc55c5c298c6634222..2aa0dcb2619b9b8a4a1049afd6b43a7018929d7b 100644 --- a/packages/ui-vue/components/date-picker/src/components/date-range/date-range.component.tsx +++ b/packages/ui-vue/components/date-picker/src/components/date-range/date-range.component.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, onMounted, ref, Ref } from "vue"; +import { computed, defineComponent, onMounted, ref, Ref, watch } from "vue"; import { FInputGroup } from "@farris/ui-vue/components/input-group"; import FPopover from '@farris/ui-vue/components/popover'; import { useDateFormat } from "@farris/ui-vue/components/common"; @@ -49,9 +49,23 @@ export default defineComponent({ const { formatTo } = useDateFormat(); - const startDisplayDate = computed(() => formatTo(modelValue.value.split('~')?.[0], props.displayFormat)); - const endDisplayDate = computed(() => formatTo(modelValue.value.split('~')?.[1], props.displayFormat)); + const newBeginValue = ref(props.beginValue); + const newEndValue = ref(props.endValue); + const startDisplayDate = computed(() => formatTo(newBeginValue.value, props.displayFormat)); + const endDisplayDate = computed(() => formatTo(newEndValue.value, props.displayFormat)); + watch(()=>props.beginValue, (newValue) => { + newBeginValue.value = newValue; + } + ); + watch(()=>props.endValue, (newValue) => { + newEndValue.value = newValue; + }); + watch(()=>props.modelValue, (newVlaue) => { + const splitValue = newVlaue.split('~'); + newBeginValue.value = splitValue?.[0] || ''; + newEndValue.value = splitValue?.[1] || ''; + }); const buttonEditClass = computed(() => { const classObject = { 'f-button-edit': true, diff --git a/packages/ui-vue/components/date-picker/src/date-picker.props.ts b/packages/ui-vue/components/date-picker/src/date-picker.props.ts index c82db86d27e9436201af03dcc326b1ffb7509784..407282d7a843eb68eb0fd36d4a62e7bcdf81a7f7 100644 --- a/packages/ui-vue/components/date-picker/src/date-picker.props.ts +++ b/packages/ui-vue/components/date-picker/src/date-picker.props.ts @@ -76,8 +76,14 @@ export const datePickerProps = { * 背景文字 */ placeholder: { type: String, default: '请选择日期' }, + /** 区间——开始提示文字 */ beginPlaceholder:{ type: String, default: '请选择开始日期' }, + /** 区间——结束提示文字 */ endPlaceholder:{ type: String, default: '请选择结束日期' }, + /** 区间——开始值 */ + beginValue:{type: String, default: ''}, + /** 区间——结束值 */ + endValue:{type: String, default: ''}, /** * 作为内嵌编辑器被创建后默认选中文本 */ diff --git a/packages/ui-vue/components/date-picker/src/schema/date-picker.schema.json b/packages/ui-vue/components/date-picker/src/schema/date-picker.schema.json index df5b8d810dd91bf159fab79c29259c98cdc7c7cd..ac6bf21cac4b9b283668a137dcd98c41717c2cdc 100644 --- a/packages/ui-vue/components/date-picker/src/schema/date-picker.schema.json +++ b/packages/ui-vue/components/date-picker/src/schema/date-picker.schema.json @@ -118,7 +118,17 @@ "description": "", "type": "string", "default": "day" - } + }, + "beginValue":{ + "description": "", + "type": "string", + "default": "" + }, + "endValue":{ + "description": "", + "type": "string", + "default": "" + } }, "required": [ "type" diff --git a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx index 9706cef7005be94987048fe9791879edb5c87416..73c60181b9b1263129032a12df4d85e0c8b8f913 100644 --- a/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx +++ b/packages/ui-vue/components/events-editor/src/components/command-source/command-source.component.tsx @@ -90,7 +90,7 @@ export default defineComponent({ * @param selectedController 控制器元数据 */ async function onSubmitController(selectedController: any) { - formCommandService['getSupportedControllerMetadata']().then((result: any) => { + formCommandService['getSupportedControllerMetadata'](selectedController).then((result: any) => { if (result) { // 引入控制器 importNewController(result['controller'], result['code'], result['nameSpace']); diff --git a/packages/ui-vue/components/events-editor/src/events-editor.css b/packages/ui-vue/components/events-editor/src/events-editor.css index c4aa4f1cf82d0bc868a8654f90134530d3c18316..f226ac597f9271a395ec6e8b54f031794d004c2e 100644 --- a/packages/ui-vue/components/events-editor/src/events-editor.css +++ b/packages/ui-vue/components/events-editor/src/events-editor.css @@ -21,7 +21,7 @@ .f-page-events-editor-events { width: 98%; - max-height: 136px; + max-height: 260px; background: #ffffff; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15); border-color: #6ca0f5; diff --git a/packages/ui-vue/components/query-solution/src/composition/use-solution.ts b/packages/ui-vue/components/query-solution/src/composition/use-solution.ts index c1693af614dec8c4d3ae685a812118a7374d08c9..ed74dd064326185aff49185c86167cdd41d13fc4 100644 --- a/packages/ui-vue/components/query-solution/src/composition/use-solution.ts +++ b/packages/ui-vue/components/query-solution/src/composition/use-solution.ts @@ -110,7 +110,7 @@ export function useSolution( condition.value.displayFormat = field.editor.displayFormat || 'yyyy-MM'; condition.value.valueFormat = field.editor.valueFormat || 'yyyy-MM'; break; - case 'year-picker': + case 'year-picker': condition.value.displayFormat = field.editor.displayFormat || 'yyyy'; condition.value.valueFormat = field.editor.valueFormat || 'yyyy'; break; @@ -151,6 +151,17 @@ export function useSolution( queryData.value = querys; context.emit('conditionChange', querys); } + /** + * 从旧格式转换到新日期 + * @param oldValue + * @param oldValueFormat + * @param newValueFormat + * @returns + */ + function transferDateToNewValueFormat(oldValue,oldValueFormat,newValueFormat){ + const parsedDate = parse(oldValue, oldValueFormat, new Date()); + return format(parsedDate, newValueFormat); + } function judgeLoadNewValue(condition: Condition, field: FieldConfig) { // undo: 优化枚举格式 @@ -158,25 +169,57 @@ export function useSolution( // datetime-picker date-picker本质都为date-picker只是editior的showTime属性不一致 if (condition.value.editorType !== field.controlType) { loadNewValue = true; - } else if (field.controlType === 'lookup' && (condition.value.valueField !== field.editor.valueField || condition.value.helpId !== field.editor.helpId)) { - loadNewValue = true; - } else if (field.controlType === 'date-picker' || field.controlType === 'datetime-picker') { - // 针对文本类型的日期控件，可以修改日期格式需要兼容 - if (field.editor.valueFormat && condition.value.valueFormat && field.editor.valueFormat !== condition.value.valueFormat) { - if (condition.value.value) { - const parsedDate = parse(condition.value.value, condition.value.valueFormat, new Date()); - condition.value.value = format(parsedDate, field.editor.valueFormat); + return loadNewValue; + } + switch (field.controlType) { + case 'lookup': + if (condition.value.valueField !== field.editor.valueField || condition.value.helpId !== field.editor.helpId) { + loadNewValue = true; + } + break; + case 'year-picker': + case 'month-picker': + case 'date-picker': + case 'datetime-picker': { + // 针对文本类型的日期控件，可以修改日期格式需要兼容 + if (field.editor.valueFormat && condition.value.valueFormat && field.editor.valueFormat !== condition.value.valueFormat) { + if (condition.value.value) { + condition.value.value = transferDateToNewValueFormat(condition.value.value,condition.value.valueFormat,field.editor.valueFormat); + } + loadNewValue = condition.value.valueFormat === field.editor.valueFormat; + } - condition.value.valueFormat === field.editor.valueFormat; + break; } - } else if (field.controlType === 'combo-list') { - const valids = field.editor.data.map(enumValue => enumValue.value); - const existInvalid = condition.value.valueList?.find(value => valids.indexOf(value.value) === -1); - existInvalid && (loadNewValue = true); - } else if (field.controlType === 'number-spinner') { - loadNewValue = !judgePrecisionValid(condition.value.value, field.editor.precision); - } else if (field.controlType === 'number-range') { - loadNewValue = !judgePrecisionValid(condition.value.begin, field.editor.precision) || !judgePrecisionValid(condition.value.end, field.editor.precision); + case 'date-range': + case 'datetime-range': + case 'month-range': { + // 针对文本类型的日期控件，可以修改日期格式需要兼容 + if (field.editor.valueFormat && condition.value.valueFormat && field.editor.valueFormat !== condition.value.valueFormat) { + if (condition.value.begin) { + condition.value.begin = transferDateToNewValueFormat(condition.value.begin,condition.value.valueFormat,field.editor.valueFormat); + } + if (condition.value.end) { + condition.value.end = transferDateToNewValueFormat(condition.value.begin,condition.value.valueFormat,field.editor.valueFormat); + } + loadNewValue = condition.value.valueFormat === field.editor.valueFormat; + } + break; + } + case 'combo-list': { + const valids = field.editor.data.map(enumValue => enumValue.value); + if (condition.value.valueList?.find(value => valids.indexOf(value.value) === -1)) { + loadNewValue = true + } + break; + } + case 'number-spinner': + loadNewValue = !judgePrecisionValid(condition.value.value, field.editor.precision); + break; + case 'number-range': + loadNewValue = !judgePrecisionValid(condition.value.begin, field.editor.precision) || !judgePrecisionValid(condition.value.end, field.editor.precision); + break; + default: } return loadNewValue; } diff --git a/packages/ui-vue/components/time-picker/src/time-picker.component.tsx b/packages/ui-vue/components/time-picker/src/time-picker.component.tsx index 3f0e8b13d890ebbefb7ea6db90f26ac75f2e460c..b885212b39d7bb235943c8b0b8a3752e89925478 100644 --- a/packages/ui-vue/components/time-picker/src/time-picker.component.tsx +++ b/packages/ui-vue/components/time-picker/src/time-picker.component.tsx @@ -44,7 +44,6 @@ export default defineComponent({ }); watch(modelValue, (newValue) => { - console.log('time-picker.component--47 \n', 'modelValue:', newValue); context.emit("valueChange", newValue); context.emit("update:modelValue", newValue); }); diff --git a/packages/ui-vue/demos/date-picker/date-range.vue b/packages/ui-vue/demos/date-picker/date-range.vue index 7c42849e78f7a7138295e6ecb92265db4b7487f2..b4e0187f0656b896b3b8633704934f2e7882e1ab 100644 --- a/packages/ui-vue/demos/date-picker/date-range.vue +++ b/packages/ui-vue/demos/date-picker/date-range.vue @@ -8,12 +8,17 @@ const currentDate3 = ref('') const currentDate4 = ref('') const disableUntil = ref({ year: 2023, month: 4, day: 13 }) const currentDate5 = ref('2024-06-18~2024-09-09') - +const beginDate=ref('2024-06-18') +const endDate=ref('2024-09-09'); +function changeInitValue(event: any) { + beginDate.value='2025-01-01'; + endDate.value='2025-12-12' +}