You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.3 KiB
102 lines
2.3 KiB
<template>
|
|
<Dialog v-model="visibleModel" title="上传日历" top="70px" width="700px">
|
|
<el-calendar v-model="mon" class="cal">
|
|
<template
|
|
slot="dateCell"
|
|
slot-scope="{date, data}">
|
|
<p>
|
|
{{ data.day.split('-').slice(1).join('-') }}<br /><div style="font-size:25px;margin-top:10px;margin-left:20px;">{{ selDays.indexOf(data.day)!==-1 ? '✅' : ''}}</div>
|
|
</p>
|
|
</template>
|
|
</el-calendar>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import Dialog from "@screen/components/Dialog/index.vue";
|
|
import request from "@/utils/request";
|
|
export default {
|
|
name: "DialogCamera",
|
|
components: {
|
|
Dialog,
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
emit: ["close"],
|
|
data() {
|
|
return {
|
|
mon: new Date(),
|
|
selDays:[]
|
|
};
|
|
},
|
|
watch: {
|
|
mon: {
|
|
handler (val, oldVal) {
|
|
if (
|
|
val &&
|
|
moment(val).toDate() < moment(oldVal).startOf("month").toDate()
|
|
) {
|
|
this.getData();
|
|
} else if (
|
|
val &&
|
|
moment(val).toDate() > moment(oldVal).endOf("month").toDate()
|
|
) {
|
|
this.getData();
|
|
}
|
|
},
|
|
deep: true,
|
|
}
|
|
},
|
|
computed: {
|
|
visibleModel: {
|
|
get() {
|
|
if (this.visible) this.getData();
|
|
return this.visible;
|
|
},
|
|
set(bool) {
|
|
this.$emit("close", bool);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
getData() {
|
|
const month = moment(this.mon).format('YYYY-MM')
|
|
request({
|
|
url: `/business/sdhsEvent/getDataCalendar/${month}`,
|
|
method: "get",
|
|
}).then((result) => {
|
|
if (result.code != 200) return Message.error(result?.msg);
|
|
this.selDays = result.data;
|
|
}).catch((err) => {
|
|
Message.error("查询失败", err);
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cal {
|
|
background: #00000000;
|
|
}
|
|
::v-deep {
|
|
.el-calendar__title,.el-calendar-day,.el-calendar-table thead th{
|
|
color: white !important;
|
|
}
|
|
.el-calendar__button-group > .el-button-group > .el-button{
|
|
background: #00000000 !important;
|
|
color: white !important;
|
|
}
|
|
.is-selected,.el-calendar-table .el-calendar-day:hover {
|
|
background: #00000000 !important;
|
|
}}
|
|
|
|
.is-today > .el-calendar-day{
|
|
border:3px solid #7BE188;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
|