yudao-team/oa-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

日历-左上角年份,弹窗右上角x,优化打开多个弹窗可分别关闭对应.

Browse Source
This commit is contained in:
XaoLi717 2024-12-10 10:39:36 +08:00
parent f3bf65cbaf
commit 05a497c40a
1 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/system/calendar/index.vue
View File

@ -1,13 +1,21 @@
<template> <template>
<ContentWrap> <ContentWrap>
<el-row>
<el-button-group style="display: flex; justify-content: space-between;"> <el-col :span="4">
<el-button size="large" @click="selectDate(-1)">上年</el-button> <span style="font-size: 24px">
<el-button size="large" @click="toYear()">今年</el-button> {{currentYear}}&nbsp;年
<el-button size="large" @click="selectDate(1)">下年</el-button> </span>
<el-button size="large" @click="getListDate()">刷新</el-button> </el-col>
<!-- <el-button size="small" @click="createDate()">创建</el-button>--> <el-col :span="20">
</el-button-group> <el-button-group style="display: flex; justify-content: space-between;">
<el-button size="large" @click="selectDate(-1)">上年</el-button>
<el-button size="large" @click="toYear()">今年</el-button>
<el-button size="large" @click="selectDate(1)">下年</el-button>
<el-button size="large" @click="getListDate()">刷新</el-button>
<!-- <el-button size="small" @click="createDate()">创建</el-button>-->
</el-button-group>
</el-col>
</el-row>
<el-row v-if="loading" :gutter="10"> <el-row v-if="loading" :gutter="10">
<el-col v-for="(month, index) in months" :key="index" :span="6" > <el-col v-for="(month, index) in months" :key="index" :span="6" >
@ -40,9 +48,18 @@
</span> </span>
</div> </div>
</template> </template>
<!-- 右上角关闭按钮 -->
<el-button
type="text"
style="position: absolute; top: 2px; right: 10px; padding: 0;"
@click="closePopover(data)"
>
<el-icon class="el-icon--right"><Close /></el-icon>
</el-button>
<el-form <el-form
ref="formRef" ref="formRef"
:model="formDataCaln" :model="formDataCaln"
style="margin-top: 20px"
label-width="70px" label-width="70px"
> >
<el-form-item label="状态" > <el-form-item label="状态" >
@ -67,7 +84,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button size="small" @click="submitForm();" type="primary">确定</el-button> <el-button size="small" @click="submitForm(data);" type="primary">确定</el-button>
</el-popover> </el-popover>
</template> </template>
@ -83,6 +100,7 @@
import {CalendarInstance} from "element-plus"; import {CalendarInstance} from "element-plus";
import {CalendarApi, CalendarVO} from "@/api/home/calendar"; import {CalendarApi, CalendarVO} from "@/api/home/calendar";
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import {Close} from "@element-plus/icons-vue";
defineOptions({ name: 'CalendarAgendaIndex' }) defineOptions({ name: 'CalendarAgendaIndex' })
@ -201,7 +219,9 @@ const handleSelect = async (date:any) => {
}; };
//提交更改 //提交更改
const submitForm = async ()=> { const submitForm = async (date:any)=> {
// 判断更改是否符合
await getDate(date);
const dataClan = formDataCaln.value as unknown as CalendarVO const dataClan = formDataCaln.value as unknown as CalendarVO
// 更新后台数据 // 更新后台数据
try { try {
@ -219,7 +239,14 @@ const submitForm = async ()=> {
// 关闭弹窗 // 关闭弹窗
updatedHoliday.visible = false; updatedHoliday.visible = false;
} }
const closePopover = async (date:any)=> {
// 判断更改是否符合
await getDate(date);
//获取选择日期
const updatedHoliday = holidayDate.value[sDate.value];
// 关闭弹窗
updatedHoliday.visible = false;
}
// 获取日期时间 年月日 // 获取日期时间 年月日
function formatDate2(dat: number|Date) { function formatDate2(dat: number|Date) {
const date = new Date(dat) const date = new Date(dat)