重写时间查询,年月日分离,已完成对接。

This commit is contained in:
monanxiao
2024-10-24 11:52:39 +08:00
parent e8f5f0b85a
commit 6a624d9a3a
2 changed files with 153 additions and 58 deletions
-1
View File
@@ -34,6 +34,5 @@ export function deleteUser(ItemId) {
return service({
method: "delete",
url: `/application/role/${ItemId}`,
data: query,
});
}
+153 -57
View File
@@ -39,12 +39,44 @@
/>
</el-form-item>
<el-form-item label="时间">
<br>
<el-form-item label="按年">
<el-date-picker
v-model="formSearch.date"
v-model="formSearch.year"
type="year"
placeholder="请选择年份"
:disabled-date="disablePastAndSpecificYear"
style="margin-right: 20px"
@clear="clearYearDate"
@change="isYearClick"
/>
</el-form-item>
<el-form-item label="按月">
<el-date-picker
v-model="formSearch.month"
type="month"
placeholder="请选择月份"
:disabled="!formSearch.year"
:disabled-date="disablePastAndSpecificMonth"
@clear="clearMonthDate"
@change="isMonthClick"
:default-value="new Date(formatDate(formSearch.year).year, 1, 1)"
:arrow-control="true"
/>
</el-form-item>
<el-form-item label="按天">
<el-date-picker
v-model="formSearch.day"
:disabled="!formSearch.month"
:disabled-date="disablePastAndSpecificDay"
type="date"
placeholder="请选择时间"
placeholder="请选择日期"
@clear="clearDate"
@change="isDayClick"
:default-value="new Date(formatDate(formSearch.year).year, formatDate(formSearch.month).month-1, 1)"
:arrow-control="true"
/>
</el-form-item>
@@ -378,6 +410,7 @@
import {nextTick, onMounted, reactive, ref} from 'vue'
import {exportOrder, getOrderList} from "../../api/modules/order";
import {ElMessage} from "element-plus";
const tableData = ref([])
const table = ref()
@@ -441,11 +474,98 @@ const handleCurrentChange = (val) => {
initData(formSearch.value)
}
// 清空年份
const clearYearDate = () => {
formSearch.value.year = ''
}
// 清空月份
const clearMonthDate = () => {
formSearch.value.month = ''
}
// 清空日期
const clearDate = () => {
formSearch.value.date = ''
}
// 禁止选择之后的年份
const disablePastAndSpecificYear = (date) => {
// 获取当前日期
const currentDate = new Date();
currentDate.setDate(currentDate.getDate() - 1);
// 禁止选择今天的前一天及之前的日期(不包含今天)
if (date > currentDate) {
return true;
}
// 禁止选择特定的未来日期,例如节假日
const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
return disabledDates.some((disabledDate) => {
return (
date.getFullYear() === disabledDate.getFullYear() &&
date.getMonth() === disabledDate.getMonth() &&
date.getDate() === disabledDate.getDate()
);
});
};
// 选中年份
const isYearClick = () => {
formSearch.value.month = '';
formSearch.value.day = '';
}
// 选中月份
const isMonthClick = () => {
formSearch.value.day = '';
}
// 选中天
const isDayClick = () => {
}
// 选中月份禁止调整年份
const disablePastAndSpecificMonth = (date) => {
if (!formSearch.value.year) {
return true; // 未选择年份时,禁用所有月份
}
const selectedYear = formatDate(formSearch.value.year).year;
const year = date.getFullYear();
// 只允许选择选中年份的月份
if (year !== selectedYear) {
return true;
}
return false;
};
// 选中年月禁止调整天
const disablePastAndSpecificDay = (date) => {
if (!formSearch.value.month) {
return true; // 未选择月份时,禁用所有日期
}
const selectedYear = formatDate(formSearch.value.year).year;
const selectedMonth = formatDate(formSearch.value.month).month;
const year = date.getFullYear();
const month = date.getMonth()+1;
if (year !== selectedYear || month != selectedMonth) {
return true;
}
return false;
}
const excelDown = async () => {
const url = downloadFile();
@@ -512,13 +632,31 @@ const onSearchSubmit = ()=> {
params.status = parseInt(params.status, 10);
}
if(params.date !== '')
if(params.year !== '')
{
let {
year
} = {...formatDate(params.year)};
params.year = year;
}
if(params.month !== '')
{
let {
month
} = {...formatDate(params.month)};
params.month = month;
}
if(params.day !== '')
{
let {
year,
month,
day
} = {...formatDate(params.date)};
} = {...formatDate(params.day)};
params.year = year;
params.month = month;
@@ -535,6 +673,15 @@ const onSearchSubmit = ()=> {
// 日期格式
const formatDate = (date) => {
if(date === '')
{
return {
year: 1999,
month: 1,
day: 1,
};
}
if (typeof date === 'string') {
// 检查是否已经是格式化的字符串
const regex = /^\d{4}-\d{2}-\d{2}$/;
@@ -547,13 +694,11 @@ const formatDate = (date) => {
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
let data = {
return {
year: year,
month: month,
day: day,
};
return data;
};
onMounted(() => {
initData()
@@ -561,54 +706,5 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.mt-4 {
float: right;
text-align: right;
margin-bottom: 20px;
}
.demo-form-inline {
}
.dragClass {
background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// 停靠
.ghostClass {
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 选择
.chosenClass:hover > td {
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
.icon-view {
font-size: 20px;
color: #673ab7;
margin: 0 10px;
}
.icon-edit {
font-size: 20px;
color: #2f60c2;
margin: 0 10px;
}
.icon-dele {
font-size: 20px;
color: #ff5722;
}
.btn-color {
background: #fff;
color: #4c60cc;
}
.expand-title {
padding: 10px;
color: #919399;
font-weight: 600;
}
</style>