重写时间查询,年月日分离,已完成对接。
This commit is contained in:
@@ -34,6 +34,5 @@ export function deleteUser(ItemId) {
|
||||
return service({
|
||||
method: "delete",
|
||||
url: `/application/role/${ItemId}`,
|
||||
data: query,
|
||||
});
|
||||
}
|
||||
+153
-57
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user