个人博客

import dayjs from 'dayjs';
import { nextTick } from 'vue';
import { useDictStore } from '/@/store/modules/dict';
import { useI18n } from '/@/hooks/web/useI18n';

const dictStore = useDictStore();
const { t } = useI18n();

export type Dimension = 'year' | 'month' | 'date' | 'time';

export const defaultValueMap = {
year: dayjs(),
month: dayjs(),
date: dayjs(),
time: dayjs(),
};

export const defaultFormatMap = {
year: 'YYYY',
month: 'YYYY-MM',
date: 'YYYY-MM-DD',
time: 'YYYY-MM-DD HH',
};

/**
* @description: 维度操作方法
* @param {Dimension} defaultVal 默认维度
* @param {string} field rangePicker 字段ID
* @param {any} formActionType 表单操作
* @return {*}
*/
export const dimensionAction = (defaultVal: Dimension, field: string, formActionType: any) => {
const { updateSchema, setFieldsValue } = formActionType;

let hackValue: any = undefined;

let dateTemp: any = defaultValueMap[defaultVal];
let format: any = defaultFormatMap[defaultVal];

//日期选择修改后
const calendarChange = (date) => {
dateTemp = date;
};

const openChange = (open: boolean) => {
if (open) {
hackValue = '';
dateTemp = '';
} else {
hackValue = undefined;
}

setFieldsValue({
[field]: hackValue || dateTemp,
});
};

nextTick(() => {
setFieldsValue({
[field]: hackValue || dateTemp,
});
});

return {
options: dictStore.getTimeRange.map((item) => ({
label: t(`common.${item}`),
value: item,
})),
placeholder: `${t('common.chooseText')}${t('energy-balance.queryTime')}`,
useSearch: true,
onChange: (queryType) => {
dateTemp = defaultValueMap[queryType];
format = defaultFormatMap[queryType];

setFieldsValue({
timeRange: hackValue || dateTemp,
});

updateSchema({
field,
componentProps: {
format: format,
showTime: queryType === 'time',
picker: queryType === 'time' ? 'date' : queryType,
onCalendarChange: calendarChange, //待选日期发生变化的回调
onOpenChange: openChange, //弹出日历和关闭日历的回调
},
});
},
};
};

/**
* @description: 重置维度和时间范围
* @return {*}
*/
export const resetPicker = (
defaultVal: Dimension,
dimensionField: string,
timeRangeField: string,
formActionType: any,
) => {
const { updateSchema, setFieldsValue } = formActionType;

updateSchema({
field: timeRangeField,
componentProps: {
format: defaultFormatMap[defaultVal],
showTime: defaultVal === 'time', //当为time时,日期可以选择时间(时分秒)
picker: defaultVal === 'time' ? 'date' : defaultVal,
},
});

setFieldsValue({
[dimensionField]: defaultVal,
[timeRangeField]: defaultValueMap[defaultVal],
});
};

posted on 2023-08-20 22:59  雪妮123  阅读(33)  评论(0编辑  收藏  举报