做了一个自己看着还舒服的vue 日历表
2024-06-27 16:06:07
直接上图
在这里我引入的是别的地方的插件
有拖动和点击事件的功能 方便存储
直接看代码吧就
<!--* @Descripttion: (工作日历管理/C_Calendar)* @version: (1.0)* @Author: (admin)* @Date: (2022-12-20)* @LastEditors: (admin)* @LastEditTime: (2022-12-20)
-->
<template><div class="app-container" style="padding: 0px"><el-form :model="form" @submit.native.prevent ref="form"><el-row :gutter="15"><el-col :lg="3"><el-form-item label="班次编号" prop="flightNo"><el-select placeholder="请选择安排的班次" multiple v-model="form.flightNo" style="width: 70%"><el-option v-for="item in glFlightList" :key="item.id" :value="item.flightCode"><span :style="{ color: item.flightColor }">{{ item.flightName }}</span></el-option></el-select></el-form-item></el-col><el-col :lg="3"><el-form-item label="线体编号" prop="lineCode"><el-select placeholder="请选择线体" multiple v-model="form.lineCode" style="width: 70%"><el-option v-for="item in LineList" :key="item.id" :value="item.lineCode"><span> {{ item.lineCode + ' / ' + item.lineName }}</span></el-option></el-select></el-form-item></el-col><el-col :lg="2"><el-button type="primary" @click="handleAdd">添加出勤</el-button></el-col><el-col :lg="1"> <el-button type="danger" @click="deletes">删除出勤</el-button></el-col><el-col :lg="13"><p> </p></el-col><!-- <el-col :lg="2"><el-button type="success" @click="seeFlight" >查看现有排班</el-button></el-col> --></el-row></el-form><div class="calendar"><div class="select"><el-form inline ><el-form-item><el-select v-model="curYear" placeholder="请选择"><el-option v-for="item in yearOptions" :key="item.key" :value="item.value" :label="item.label" /></el-select></el-form-item><el-form-item><el-select v-model="curMonth" placeholder="请选择"><el-option v-for="item in monthOptions" :key="item.key" :value="item.value" :label="item.label" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="handleQuickChange('prev')">上一月</el-button><el-button type="primary" @click="handleQuickChange('next')">下一月</el-button><el-button style="background-color: #dcdfe6" @click="TwoChange">滑动</el-button></el-form-item></el-form></div><table class="calendar-table" :style="{ width }"><thead><tr><th v-for="(item, i) in weeks" :key="i">{{ item }}</th></tr></thead><tbody><tr v-for="(dates, i) in res" :key="i" :style="{ height: tbodyHeight }" align="center" style="font-size: medium" border><tdv-for="(item, index) in dates":key="index":class="{notCurMonth: !item.isCurMonth,// currentDay: item.date === curDate,selectDay: item.isSelected,rangeSelectd: item.isRangeSelected,weekend: item.isWeekend,seeNow: item.isSele,}"@click="handleItemClick(item, i, index)"@mouseover="handleItemMove(item, i, index)"><!-- @click="handleItemClick(item, i, index)" --><!-- <span>{{ item.date.split('-').slice(1).join('-') }}</span> --><span>{{ item.date }}</span><slot :data="item" /></td></tr></tbody></table></div><!-- <el-form :model="queryParams" size="small" inline ref="queryForm" @submit.native.prevent><el-form-item label="班次名称" prop="flightNo"><el-select v-model="queryParams.flightNo" placeholder="请选择线体" ><el-option v-for="item in glFlightList" :key="item.id" :label="item.flightName" :value="item.flightCode"></el-option> </el-select> </el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form> --><div style="margin-top: -33px"><el-collapse v-model="subTableCollapse" @change="handleChange"> <el-collapse-item name="1"><template slot="title"><span class="subTableTitle"><strong>排班详情信息</strong></span></template><el-table :data="detailList" ref="table" border highlight-current-row title="已安排的班次" height="200px" :row-class-name="tableRowClassName"><el-table-column width="250%" prop="flightNo" label="班次编号" align="center" :show-overflow-tooltip="true"><!-- <template slot-scope="scope">{{ lineNameFormat(scope.row['flightNo'] )}}</template> --></el-table-column><el-table-column width="250%" prop="lineCode" label="线体编号" align="center" :show-overflow-tooltip="true" /><el-table-column width="500%" prop="attendanceDate" label="出勤日期" align="center" :show-overflow-tooltip="true"> </el-table-column><el-table-column width="250%" prop="createBy" label="创建人" align="center" :show-overflow-tooltip="true" /><el-table-column width="300%" prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" /><el-table-column label="操作" align="center" width="200"><template slot-scope="scope"><el-button size="mini" v-hasPermi="['schedule:ccalendar:delete']" type="danger" icon="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></el-button></template></el-table-column></el-table></el-collapse-item></el-collapse></div></div>
</template>
<script>
import { listBLineInfo } from '@/api/factorys/bLineInfo.js'import {getAttendanceData,addCCalendar,delCCalendar,getDaysInMonth,handleCrateDate,handleCreateDatePicker,parseTime,listCCalendar,DeleteFlightNo,getDetail,
} from '@/api/schedule/cCalendar.js'
import { GetBFlightAll } from '@/api/factorys/bFlightInfo.js'
export default {components: {},props: {selectMode: {type: String,default: 'click',},startOfWeek: {type: Number,default: 1,},canSelect: {type: Boolean,default: false,},width: {type: String,default: '90%',},tbodyHeight: {type: String,default: '60px',},},name: 'ccalendar',data() {return {change: undefined,//线体数据LineList: [],subTableCollapse : 1,// 表单参数form: {},//线体参数查询LineQueryParams: {pageNum: 1,pageSize: 1000,sort: undefined,sortType: undefined,},// 查询参数queryParams: {pageNum: 1,pageSize: 10000,sort: undefined,sortType: undefined,flightNo: undefined,lineCode: undefined,},flightList: [], //班次列表monthOptions: [],yearOptions: [],weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],curYear: new Date().getFullYear(), // 当前年curMonth: new Date().getMonth(), // 当前月days: 0, // 当前月总共天数curDate: parseTime(new Date().getTime()), // 当前日期 yyyy-MM-dd 格式，用来匹配是否是当前日期prevDays: [], // 非当前月的上一月展示的日期rearDays: [], // 非当前月的下一月展示的日期curDays: [], // 当前月的日期showDays: [], // 总共展示的42个日期res: [], // 二维数组arr: [],selectedDates: [], // 选中的日期selectedMode: false, // true表示点击， false表示滑动moveIndex: [], // 两个，第一个是起始，第二个是结束canMove: false, // 当moveIndex数组有一个值时，可以触发滑动a: '000003',downList: [],arrDown: [],detailList : [],glFlightList: [],arrFlightCode: [],}},computed: {},watch: {curMonth: {handler(val) {this.handleGetDays(this.curYear, val, this.startOfWeek)},},curYear: {handler(val) {this.handleGetDays(val, this.curMonth, this.startOfWeek)},},},created() {// 列表数据查询this.getDownList()this.getLineList()this.getFlightList()this.getFlightData()this.weeks.unshift(...this.weeks.splice(this.startOfWeek - 1))this.handleGetDays(this.curYear, this.curMonth, this.startOfWeek)this.selectedMode = this.selectMode === 'click'//this.selectedMode = this.selectMode === this.change},mounted() {this.monthOptions = handleCreateDatePicker().monthsthis.yearOptions = handleCreateDatePicker().yearsif (localStorage.selectedDates) this.selectedDates = JSON.parse(localStorage.selectedDates)},methods: {handleChange(value) {if (value.length > 0) {this.props.width = 300} else {this.props.width = 550}},/** 删除按钮操作 */handleDelete(row) {const Ids = row.id || this.ids;this.$confirm('是否确认删除选中的数据项？').then(function () {return delCCalendar(Ids);}).then(() => {this.getDownList() ;this.getDetailList() ;this.getFlightData() ;this.msgSuccess("删除成功");}).catch(() => {});},//得到线体列表getLineList() {listBLineInfo(this.LineQueryParams).then((res) => {if (res.code == 200) {this.LineList = res.data.result}})},// //查看现有班次seeFlight() {this.seeNow = true},//得到存进去的日历数据getDownList() {listCCalendar(this.queryParams).then((res) => {if (res.code == 200) {this.downList = res.data.result}})},
//根据日期查列表getDetailList() {var a = JSON.parse(JSON.stringify(this.selectedDates))let c = a.join(",")getDetail({AttendanceDate : c }).then((res) => {if (res.code == 200) {this.detailList = res.data}})},// 得到排班的日期getFlightData() {let b = '000004' ;let a = '000003' ;getAttendanceData({ flightNo: b }).then((res) => {if (res.code == 200) {this.FlightData = res.datafor (let i = 0; i < this.FlightData.length; i++) {this.arr.push(this.FlightData[i].attendanceDate)}for (let i = 0; i < this.res.length; i++) {for (let j = 0; j < this.res[i].length; j++) {if (this.arr.includes(this.res[i][j].date)) {this.res[i][j].isSele = true}}}}})getAttendanceData({ flightNo: a }).then((res) => {if (res.code == 200) {this.FlightData = res.datafor (let i = 0; i < this.FlightData.length; i++) {this.arr.push(this.FlightData[i].attendanceDate)}for (let i = 0; i < this.res.length; i++) {for (let j = 0; j < this.res[i].length; j++) {if (this.arr.includes(this.res[i][j].date)) {this.res[i][j].isSele = true}}}}})},//切换滑动和点击TwoChange() {if ((this.selectedMode = this.selectMode === 'click')) {this.selectedMode = this.selectMode === 'move'}if ((this.selectedMode = this.selectMode === 'move')) {this.selectMode = 'click'this.selectedMode = this.selectMode === 'click'}},/** 添加出勤 */handleAdd() {var a = JSON.parse(JSON.stringify(this.selectedDates))var b = JSON.parse(JSON.stringify(this.form.flightNo))var c = JSON.parse(JSON.stringify(this.form.lineCode))// var a = JSON.parse(JSON.stringify(this.form.flightNo)) // 选中的日期数据// //var b = JSON.parse(JSON.stringify(this.form.flightNo)) // 表单的编号const mainTable = Object.assign({flightNo: b, //['1','2']attendanceDate: a, //[{}]lineCode: c,createBy: null,createTime: null,updateBy: null,upadteTime: null,isAttendance: 1,})addCCalendar(mainTable).then((res) => {this.msgSuccess('添加成功')}).catch((err) => {//TODO 错误逻辑})},//班次列表查询getFlightList() {GetBFlightAll().then((res) => {if (res.code == 200) {this.flightList = res.datathis.glFlightList = this.flightList.filter((x) => x.status == 0)for (let i = 0; i < this.glFlightList.length; i++) {this.arrFlightCode.push(this.glFlightList[i].flightCode)}for (let i = 0; i < this.flightList.length; i++) {}}})},handleGetDays(year, month, startOfWeek) {this.showDays = []this.days = getDaysInMonth(year, month)let firstDayOfWeek = new Date(`${year}-${month + 1}-01`).getDay()// 处理周起始日const obj = {1: '周一',2: '周二',3: '周三',4: '周四',5: '周五',6: '周六',0: '周日',}const firstDayInCN = obj[firstDayOfWeek]const index = this.weeks.indexOf(firstDayInCN)if (firstDayOfWeek === 0) {// 星期天为0 星期一为1 ，以此类推firstDayOfWeek = 7}this.prevDays = handleCrateDate(year, month, 1, index + 1, 'prev')this.rearDays = handleCrateDate(year, month, 1, 42 - this.days - index, 'rear')this.curDays = handleCrateDate(year, month, 1, this.days)this.showDays.unshift(...this.prevDays)this.showDays.push(...this.curDays)this.showDays.push(...this.rearDays)this.res = this.handleFormatDates(this.showDays)},handleFormatDates(arr, size = 7) {// 传入长度42的原数组，最终转换成二维数组const arr2 = []for (let i = 0; i < size; i++) {const temp = arr.slice(i * size, i * size + size)arr2.push(temp)}return arr2},handleTableHead(start) {const sliceDates = this.weeks.splice(start - 1)this.weeks.unshift(...sliceDates)},handleItemClick(item, i, j) {// if (!this.canSelect )// {// return// }if (this.selectedMode) {this.$nextTick(() => {// this.$set(this.res[i][j], 'isSelected', )this.res[i][j].isSelected = !this.res[i][j].isSelectedif (this.res[i][j].isSelected) {this.selectedDates.push(this.res[i][j].date)this.selectedDates = Array.from(new Set(this.selectedDates))var a = JSON.parse(JSON.stringify(this.selectedDates))var b = JSON.parse(JSON.stringify(this.form.flightNo))var c = JSON.parse(JSON.stringify(this.form.lineCode))//item.isSee = trueconsole.log(a, '这个是日期数组', b, '这个是班次编号', c, '线体编号')this.getDetailList();} else {this.selectedDates.splice(this.selectedDates.indexOf(item.date), 1)}this.$emit('dateSelected', this.selectedDates)})} else {// 滑动模式下，第一次点击是起始，第二次点击是结束const index = i * 7 + jthis.canMove = trueif (this.moveIndex.length === 1) {this.canMove = false}if (this.moveIndex.length === 2) {this.showDays.forEach((item) => {item.isSelected = falseitem.isRangeSelected = false})this.canMove = truethis.moveIndex.length = 0}this.moveIndex.push(index)this.moveIndex.sort((a, b) => a - b)this.selectedDates = this.showDays.slice(this.moveIndex[0], this.moveIndex[1] + 1)this.selectedDates = Array.from(new Set(this.selectedDates))this.selectedDates.length !== 0 && this.$emit('dateSelected', this.selectedDates)}},handleItemMove(data, i, j) {if (this.canMove && !this.selectedMode) {const index = i * 7 + jthis.showDays.forEach((item) => {item.isSelected = falseitem.isRangeSelected = false})// 让第一个日期和最后一个日期显示蓝色高亮this.showDays[index].isSelected = truethis.showDays[this.moveIndex[0]].isSelected = true// 不同情况的判断，当用户的鼠标滑动进日期的索引小于起始日期的索引，要做if else处理if (this.moveIndex[0] < index) {for (let i = this.moveIndex[0] + 1; i < index; i++) {this.showDays[i].isRangeSelected = true}} else {for (let i = index + 1; i < this.moveIndex[0]; i++) {this.showDays[i].isRangeSelected = true}}}},handleQuickChange(type) {if (type === 'prev') {this.curMonth--console.log(this.curMonth)if (this.curMonth === -1) {this.curMonth = 11this.curYear -= 1}} else if (type === 'next') {this.curMonth++if (this.curMonth === 12) {this.curMonth = 0this.curYear += 1}}},// 颜色样式 // 遍历班次信息// tableRowClassName({ row, rowIndex }) {// for(let i = 0 ; i < this.glFlightList.length ; i++)// { // var matchColor = this.flightList[i].color // if (row.flightNo.indexOf(this.flightList[i].flightCode) != -1) {// return 'box'// }// debugger// var box=this.$el.getElementByClassName('box'); // box.style.backgroundColor= matchColor;// }// },/** 删除按钮操作 */deletes() {this.$confirm('是否确认删除选中的班次？').then(function () {return DeleteFlightNo( {flightNo : '000003'})}).then(() => {this.getDownList() ;this.msgSuccess("删除成功");}).catch(() => {});},},
}
</script><style scoped lang="scss">
.calendar {display: flex;align-items: center;justify-content: center;flex-direction: column;
}
.calendar-table {table-layout: fixed;border-collapse: collapse;transition: 0.3s;thead tr {height: 50px;}tbody tr {&:first-child td {border-top: 1px solid #82c0f3;}td {cursor: pointer;border-right: 1px solid #82c0f3;border-bottom: 1px solid #82c0f3;&:first-child {border-left: 1px solid #82c0f3;}}}
}.notCurMonth {color: #c0c4cc;
}
.currentDay {color: #fff;background-color: #82c0f3;
}
.selectDay {color: #fff;background-color: #409eff;
}
.rangeSelectd {color: #606266;background-color: #dee2e9;
}
.weekend {color: #f73131;
}
.seeNow {color: #fff;background-color: rgba(103, 194, 58, 1);
}
button.el-button.el-button--danger.el-button--default {margin-left: -44px;}.box{ background-color: red;}
</style>做了一个自己看着还舒服的vue 日历表相关推荐
- 自己用树莓派做了一个电视盒子，还可以看优酷和cctv
我刚接触树莓派时间不久,安装过raspberry(树莓派官方系统),ubuntu mate,openelec等系统,openelec是一个电视盒子系统,但是我的用的电视机是一个老式的,老是出现闪屏的问 ...
- 基于thinkphp5做的一个物流管理系统
开发环境用的是phpstudy,这个比较适合初学者,这个项目也是我自己自学php和数据库之后尝试做的,总体偏简单 前台主页(ui界面用的是bootstrap): 点击在线下单会先跳出登录界面 成功登录 ...
- Adam 那么棒，为什么还对 SGD 念念不忘？一个框架看懂深度学习优化算法
作者|Juliuszh 链接 | https://zhuanlan.zhihu.com/juliuszh 本文仅作学术分享,若侵权,请联系后台删文处理 机器学习界有一群炼丹师,他们每天的日常是: 拿来 ...
- 技术总监灵魂一问：你精通那么多技术，为何还做不好一个项目？
作者 | 李英权 来源 | 四猿外(ID:si-yuanwai) 编写高质量可维护的代码既是程序员的基本修养,也是能决定项目成败的关键因素,本文试图总结出问题项目普遍存在的共性问题并给出相应的解决方案 ...
- [转]网店博客营销之微博实战技巧：还没有做微博的掌柜看过来
网店博客营销之微博实战技巧:还没有做微博的掌柜看过来 提起微博,估计对于很多掌柜来说还是新鲜事.因为很多掌柜对于传统的博客都不太感冒,还未深究,现在又来了一个微博.其实,2009年中国的网络才正式步入 ...
- Adam那么棒，为什么还对SGD念念不忘？一个框架看懂深度学习优化算法
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 作者|Juliuszh,https://zhuanlan.zhih ...
- 发现一个非常好用的编程字体 看起来非常舒服 - Tahoma
发现一个非常好用的编程字体 看起来非常舒服 - Tahoma [img]http://dl.iteye.com/upload/attachment/546424/70c2060c-a162-33aa- ...
- 分分钟在自己电脑上建一个视频网站，收费电影随便看，还没广告！
声明 iker干货 本文仅作为技术文章,不鼓励不诱导用户观看盗版视频. 第一步 分分钟在自己电脑上建一个视频网站,收费电影随便看,还没广告! 第二步 安装好软件后先切换环境,推荐使用 PHP 7.0. ...
- 愿做一个淡看花落的闲人
愿做一个淡看花落的闲人,缘来相迎,缘去相送,去留随意,悲喜随心. 浅夏的午后,一帘绵绵的细雨,温柔的敲打着窗户,也叩响我的心门.泥土的清香,混合着花儿的的芬芳,扑鼻而来.一阵莫名的欢愉,流淌在心间,激 ...
最新文章
- 建信金融科技春季全国笔试卷B编程题
- MySQL 8.0版本安装后，安装目录下找不到my.ini文件
- 基于Spring Boot和Spring Cloud实现微服务架构学习
- Hbase读写数据的原理解析
- ArcGIS Desktop软件安装和试用说明
- 为什么我偏爱用 GitHub 来写书？
- TeaVM的samples/benchmark范例运行办法
- vue中ref在input中详解
- 推荐：class文件反编译工具Java Decomplier
- 多功能图片处理器微信小程序源码下载一键多种处理照片
- 计算机教学的弊端,信息技术在教学中的利弊及解决对策
- 微信小程序生成海报页面
- python 正则处理经纬度度分秒转换
- 高通 锁定DDR频率
- 伸缩式起重机的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
- Python-sklearn包中自动调参方法-网格搜索GridSearchCV
- MATLAB上的GPU加速计算
- 使用降噪自编码器【DAE】对车流量数据进行降维
- C# 之 结构体详解
- 数学分析教程史济怀练习16.3