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>

element日历(Calendar)排班相关推荐

vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果文章目录前言一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
el-calendar 日历做排班、值班、打卡.......
效果图: 功能: 新增.修改直接上代码说明:el-calendar 修改源码: 渲染层代码(el-calendar) <div class="calendar">&l ...
vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
java 排班日历_快速简化排班（智能排班）-日历排班
在前面的文章中,我们详细探讨了传统模式下的排班问题,流程很简单,但有些企业班别较多(比如有20个班别),而且每个班别都需要设定一个周末和假日班(这就变成了60个甚至更多班别,比如有些班别周六和周日的判 ...
java如何实排班表时间算法_安卓自定义View-日历型排班表-CalendarScheduleView
[原创,转载请注明出处] [使用效果] 未点击.jpg 点击.jpg 注释很详细,因此直接上代码: CalendarScheduleView.java /** * 日历型排班表 * 注意:只能显示本月 ...
智能排班系统【管理系统功能、操作说明——下篇】
文章目录页面与功能展示排班日历月视图(按职位查询) 月视图(按员工查询) 周视图排班任务管理创建排班计算任务设置任务的排班规则设置工作日客流量导入任务计算查看任务结果发布任务任 ...
js 排班插件_js jquery 实现排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接一.下载及简单配置 1.这 ...

element日历(Calendar)排班

element日历(Calendar)排班相关推荐

最新文章

热门文章