学生端-首页-日历-完善显示与点击功能:只显示本月课程,点击某一课程时跟下方的进入课程是同一个功能
This commit is contained in:
parent
3e3f55612c
commit
91aa3ac614
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<a-alert :message="`当前时间: ${tday}`" />
|
||||
<a-calendar v-model:value="value" @panelChange="onPanelChange">
|
||||
<template #dateCellRender="{ current }" >
|
||||
<a-calendar v-model:value="value" @panelChange="onPanelChange">
|
||||
<template #dateCellRender="{ current }">
|
||||
<ul class="events">
|
||||
<li v-for="item in getListData(current)" :key="item.content" @click="handleKecheng(item)">
|
||||
<a-badge :status="item.type" :text="item.content" />
|
||||
<a-badge status="success" :text="item.kcmc" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 去掉头部年月切换 -->
|
||||
<template #headerRender="{current}">
|
||||
<template #headerRender="{ current }">
|
||||
</template>
|
||||
</a-calendar>
|
||||
</template>
|
||||
|
@ -24,41 +24,36 @@ const value = ref<Dayjs>();
|
|||
const tday = ref<string>('');
|
||||
const studentKclist = ref<any>([]);
|
||||
const getListData = (value: Dayjs) => {
|
||||
let listData;
|
||||
var vdays = value.date()
|
||||
for(var i=0;i<studentKclist.value.length;i++){
|
||||
var item = studentKclist.value[i]
|
||||
if(item.days == vdays){
|
||||
listData = item.list;
|
||||
}
|
||||
}
|
||||
return listData || [];
|
||||
};
|
||||
//将当前日历循环到的日子格式化为yyyy-MM-dd
|
||||
const formattedDate = value.format('YYYY-MM-DD');
|
||||
if (formattedDate.substring(0, 7) == tday.value) {
|
||||
return studentKclist.value.filter(item => item.skrq === formattedDate);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const onPanelChange = (value: Dayjs) => {
|
||||
tday.value = dateFormat(value,"yyyy-MM");
|
||||
};
|
||||
//点击课程信息
|
||||
function handleKecheng(record){
|
||||
console.log("🚀 ~ handleKecheng ~ record:", record)
|
||||
|
||||
}
|
||||
const onPanelChange = (value: Dayjs) => {
|
||||
tday.value = dateFormat(value, "yyyy-MM");
|
||||
};
|
||||
//点击课程信息
|
||||
function handleKecheng(record) {
|
||||
console.log(`🚀 ~ openKecheng ~ record:`, record);
|
||||
var jgh = record.jgh.split(",")[0];
|
||||
// defHttp.post({ url: '/zyDbtx/zyDbtx/deleteByRwbhCreate', params: { rwbh: record.rwbh, fbr: jgh } }).then((res) => {
|
||||
// loaddata();
|
||||
// });
|
||||
var url = '/stuzy/StudentGonggaoList?rwbh=' + record.rwbh + '&xqxn=' + record.xnxq + "&teano=" + record.jgh;
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
//进入就加载
|
||||
onMounted(() => {
|
||||
tday.value = dateFormat(new Date(),"yyyy-MM");
|
||||
studentKclist.value = [{'days':'3','list':[
|
||||
{ type: 'warning', content: '课程名称1' },
|
||||
{ type: 'success', content: '课程名称2' },
|
||||
]}]
|
||||
|
||||
tday.value = dateFormat(new Date(), "yyyy-MM");
|
||||
defHttp.get({ url: '/ktgl/kcKetangbiao/getStudentRiliKclist' }).then((res) => {
|
||||
// dataSource.value = res.records;
|
||||
console.log("🚀 ~ defHttp.get ~ res.records:", res)
|
||||
studentKclist.value = [{'days':'3','list':[
|
||||
{ type: 'warning', content: '课程名称1' },
|
||||
{ type: 'success', content: '课程名称2' },
|
||||
]}]
|
||||
res.forEach(element => {
|
||||
studentKclist.value.push(element)
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -69,6 +64,22 @@ onMounted(() => {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.events li {
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
/* 鼠标指针变为小手 */
|
||||
transition: background-color 0.3s;
|
||||
/* 平滑的背景颜色变化 */
|
||||
}
|
||||
|
||||
.events li:hover {
|
||||
background-color: #a3a3a3;
|
||||
/* 深灰色背景 */
|
||||
color: white;
|
||||
/* 如果需要的话,可以改变文字颜色以保证可读性 */
|
||||
}
|
||||
|
||||
.events .ant-badge-status {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
@ -76,13 +87,13 @@ onMounted(() => {
|
|||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notes-month {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.notes-month section {
|
||||
font-size: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
<div style="margin-top: 20px">
|
||||
<span style="margin-left: 30px; font-size: 24px; font-weight: 600">我的课程</span>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div>
|
||||
<studentRili></studentRili>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div style="text-align: right; width: 100%; padding-right:20px">
|
||||
<div style="text-align: right; width: 100%; padding-right:20px;margin-top:30px">
|
||||
<a-switch style="margin-top:-60px" v-model:checked="checked1" checkedChildren="卡片" unCheckedChildren="列表" />
|
||||
</div>
|
||||
<div v-if="checked1">
|
||||
|
|
Loading…
Reference in New Issue