element日历(Calendar)排班

修改展示
在这里插入图片描述

父组件内容

<template><!--排班管理--><div class="dutySchedule"><div class="dutySchedule-calendar"><el-calendar v-model="priceTime"><template slot="dateCell" slot-scope="{date, data}"><!--自定义内容--><div class="calendar-day" @click="btn.add&&calendarClick(data,'新增')"><div style="text-align: center" @click="btn.add&&calendarClick(data,'新增')">{{ data.day.split('-').slice(2).join('-') }}</div><div v-for="(item, index) in textContent(data.day)" :key="index"><div class="dutySchedule-content" @click.stop="btn.update&&calendarClick(data,'编辑',item)">{{item.classTitle}}<i class="icon el-tag__close el-icon-close" @click.stop="deleteDar(item)" v-show="btn.delete"></i></div></div></div></template></el-calendar></div><el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" v-if="dialogVisible":close-on-click-modal="false" @close="propClose('取消')"><add-duty-schedule @propClose="propClose" :single-data='singleData' :date-show='dateShow' /></el-dialog></div>
</template>
<script>import AddDutySchedule from './add.vue'export default {data() {return {// 按钮权限btn: {add: true,update: true,delete: true},// 指定显示日期priceTime: '2022-03',// 弹框TitledialogTitle: "",// 弹框显示隐藏dialogVisible: false,// 传递子组件的点击日历时间dateShow: "",// 编辑显示内容singleData: "",// 显示页面数据---模拟后端数据calendarData: [{dutyDate: '2022-04-02',classTitle: '组一',},{dutyDate: '2022-04-03',classTitle: '组二'},{dutyDate: '2022-04-04',classTitle: '组三'}],}},methods: {//  删除按钮deleteDar(content) {this.$confirm('此操将删除排班, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.calendarData.some((item, index) => {if (item.dutyDate == content.dutyDate) {this.calendarData.splice(index, 1)return true} else {return false}})//  this.calendarData.splice(1)}).catch(() => {});},// 弹框关闭propClose(content) {this.dialogVisible = false;this.examineShow = falseif (content != "取消") {this.calendarData.push(content)}},// 点击日历内容calendarClick(content, text, data) {if (text == '新增') {this.dialogTitle = '添加'this.singleData = nullthis.dateShow = content.day} else {this.dialogTitle = '编辑'this.singleData = datathis.dateShow = content.day}this.dialogVisible = true},// 文字显示textContent(date) {return this.calendarData.filter(item => {return date === item.dutyDate})},},components: {AddDutySchedule},}
</script><style lang="scss" scoped>.dutySchedule-content {color: #fff;background-color: #3a87ad;border-radius: 3px;}.dutySchedule-content:hover {background-color: #08a4f0}.calendar-day {height: 100%}.dutySchedule::v-deep {.el-calendar-table .el-calendar-day {height: 75px;}.el-calendar__body {padding-bottom: 20px;}.el-calendar-day {padding: 8px 0;}// 控制点击上个月或者下个月日期时间.el-calendar-table:not(.is-range) td.next,.el-calendar-table:not(.is-range) td.prev {pointer-events: none;}.icon {float: right;margin: 1px 7px 0 0;}.icon:hover {background-color: red;border-radius: 50%;}}
</style>

弹框内容

<template><div class="addPrestudyRecord"><el-form :model="form" label-width="98px" ref="form" :rules="rules" :hide-required-asterisk="true"label-position="left"><el-row :gutter="30"><el-col :span="24"><el-form-item label="名称" prop="classTitle"><el-input v-model.trim="form.classTitle" placeholder="请输名称" clearable maxlength="15" /></el-form-item></el-col><el-col align="right"><el-button @click="cancel">取消</el-button><el-button type="primary" class="btnbgc" @click="save('form')" :loading="loading">提交</el-button></el-col></el-row></el-form></div>
</template>
<script>export default {name: "addPrestudyRecord",data() {return {loading: false,form: {},rules: {classTitle: [{required: true,message: "请输名称",trigger: "blur"}],},};},methods: {save(formName) {this.loading = true;this.$refs[formName].validate((valid) => {if (valid) {if (this.singleData) {this.form.dutyDate = this.dateShowthis.$emit("propClose", '取消');} else {this.form.dutyDate = this.dateShowthis.$emit("propClose", this.form);}} else {//console.log("error submit!!");this.loading = false;return false;}});},cancel() {this.$emit("propClose", '取消');},singleShow() {if (this.singleData) {this.form = this.singleData;}},},props: {singleData: {type: [Object || null]},dateShow: {type: String}},created() {this.singleShow();},};
</script>
<style lang="scss" scoped>.addPrestudyRecord::v-deep {.el-form-item {>label::after {content: "*";color: #f56c6c;margin-left: 4px;}}.addPrestudyRecord-nmust {.el-form-item {>label::after {content: "";}}}.el-form-item__label {color: #5a6066;font-size: 14px;font-weight: normal;}}.addPrestudyRecord {&-input {width: 100%;}}
</style>