|
@@ -1,17 +1,88 @@
|
|
|
<template>
|
|
|
- <FullCalendar
|
|
|
- ref="fullCalendar"
|
|
|
- :options="calendarOptions"
|
|
|
- class="calendar"
|
|
|
- id="calendar"
|
|
|
- />
|
|
|
+ <FullCalendar :options="calendarOptions" class="calendar" id="calendar" />
|
|
|
+
|
|
|
+ <!-- 备注修改框 -->
|
|
|
+ <el-dialog title="添加备注" center v-model="Visible">
|
|
|
+ <el-form :model="form" label-width="auto" style="max-width: 600px">
|
|
|
+ <el-form-item label="备注名称">
|
|
|
+ <el-input v-model="form.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <el-date-picker
|
|
|
+ :span="11"
|
|
|
+ v-model="form.date"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束"
|
|
|
+ style="width: 100%"
|
|
|
+ format="YYYY/MM/DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ <!--
|
|
|
+ <el-col>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date1"
|
|
|
+ type="date"
|
|
|
+ placeholder="日期"
|
|
|
+ style="width: 100%"
|
|
|
+ format="YYYY/MM/DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col>
|
|
|
+ <el-time-select
|
|
|
+ v-model="form.date2"
|
|
|
+ placeholder="详细时刻"
|
|
|
+ style="width: 100%"
|
|
|
+ start="00:00"
|
|
|
+ step="01:00"
|
|
|
+ end="24:00"
|
|
|
+ />
|
|
|
+ </el-col> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型">
|
|
|
+ <el-checkbox-group v-model="form.type">
|
|
|
+ <el-checkbox value="1" name="type"> 1 </el-checkbox>
|
|
|
+ <el-checkbox value="2" name="type"> 2 </el-checkbox>
|
|
|
+ <el-checkbox value="3" name="type"> 3 </el-checkbox>
|
|
|
+ <el-checkbox value="4" name="type"> 4 </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="具体时间">
|
|
|
+ <el-radio-group v-model="form.resource">
|
|
|
+ <el-radio value="yes">是</el-radio>
|
|
|
+ <el-radio value="no">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细信息">
|
|
|
+ <el-input v-model="form.desc" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="confirm">确定</el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 对备注进行操作 -->
|
|
|
+ <el-dialog title="备注信息修改" center v-model="changeInfo">
|
|
|
+ <el-form-item label="操作">
|
|
|
+ <el-radio-group v-model="operateSelect">
|
|
|
+ <el-radio value="delete">删除备注</el-radio>
|
|
|
+ <el-radio value="edit">修改备注</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="operate(this.operateSelect)"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="operateCancel">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import tippy from "tippy.js"; //引入 tippy.js
|
|
|
-import "tippy.js/dist/tippy.css"; //引入 tippy.js
|
|
|
-import "tippy.js/themes/light.css"; //引入主题
|
|
|
-import "tippy.js/animations/scale.css";
|
|
|
-
|
|
|
import FullCalendar from "@fullcalendar/vue3";
|
|
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
|
@@ -20,11 +91,30 @@ import listPlugin from "@fullcalendar/list";
|
|
|
import multiMonthPlugin from "@fullcalendar/multimonth";
|
|
|
import bootstrap5Plugin from "@fullcalendar/bootstrap5";
|
|
|
|
|
|
+import tippy from "tippy.js"; //引入 tippy.js
|
|
|
+import "tippy.js/dist/tippy.css"; //引入 tippy.js
|
|
|
+import "tippy.js/themes/light.css"; //引入主题
|
|
|
+import "tippy.js/animations/scale.css";
|
|
|
+
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: { FullCalendar },
|
|
|
data() {
|
|
|
return {
|
|
|
+ Visible: false, // 是否显示添加备注框
|
|
|
+ changeInfo: false, // 是否显示备注日程修改框
|
|
|
+ operateSelect: "",
|
|
|
+ GetInfo: "",
|
|
|
+ // 备注信息
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ date: "",
|
|
|
+ type: [],
|
|
|
+ resource: "",
|
|
|
+ desc: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ // 日历数据
|
|
|
calendarOptions: {
|
|
|
plugins: [
|
|
|
dayGridPlugin,
|
|
@@ -40,6 +130,7 @@ export default {
|
|
|
unselectAuto: true, //当点击页⾯⽇历以外的位置时,是否⾃动取消当前的选中状态。false是不取消
|
|
|
selectable: true, //是否可以选中日历格
|
|
|
editable: true,
|
|
|
+ dayMaxEventRows: 2, //允许事件堆叠,但不超过设定的行数
|
|
|
|
|
|
buttonText: {
|
|
|
prev: "上一页",
|
|
@@ -51,12 +142,18 @@ export default {
|
|
|
list: "周列表",
|
|
|
},
|
|
|
headerToolbar: {
|
|
|
- left: "prev,next today",
|
|
|
+ left: "prev,next today addEventButton",
|
|
|
center: "title",
|
|
|
right:
|
|
|
"dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
themeSystem: "bootstrap5",
|
|
|
},
|
|
|
+ customButtons: {
|
|
|
+ addEventButton: {
|
|
|
+ text: "添加备注",
|
|
|
+ click: this.addThings,
|
|
|
+ },
|
|
|
+ },
|
|
|
views: {
|
|
|
multiMonthYearGrid: {
|
|
|
type: "multiMonthYear",
|
|
@@ -87,9 +184,9 @@ export default {
|
|
|
{
|
|
|
id: 222,
|
|
|
title: "五一劳动节放假",
|
|
|
- start: "2024-05-18 00:00:00",
|
|
|
- end: "2024-05-18 00:00:00",
|
|
|
- color: "#ffcc99",
|
|
|
+ start: "2024-05-01",
|
|
|
+ end: "2024-05-06",
|
|
|
+ color: "green",
|
|
|
editable: true, //允许拖动缩放
|
|
|
},
|
|
|
{
|
|
@@ -100,23 +197,34 @@ export default {
|
|
|
color: "#ffcc99",
|
|
|
editable: true,
|
|
|
},
|
|
|
+
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "Meeting",
|
|
|
+ start: "2024-06-12T10:30:00",
|
|
|
+ end: "2024-06-12T12:30:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: "Lunch",
|
|
|
+ start: "2024-06-12T12:00:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: "Meeting",
|
|
|
+ start: "2024-06-12T14:30:00",
|
|
|
+ },
|
|
|
], //背景色 (添加相同时间的背景色时颜色会重叠)
|
|
|
- datesSet: this.datesSet, //日期渲染;修改日期范围后触发
|
|
|
- eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
|
|
|
- dateClick: this.handleDateClick, //点击日期触发
|
|
|
- eventDrop: this.calendarEventDropOrResize, //拖动事件触发
|
|
|
- eventResize: this.calendarEventDropOrResize, //缩放事件触发
|
|
|
- displayEventTime: false, //不显示具体时间
|
|
|
+ datesSet: this.datesSet, //日期渲染;修改日期范围后触发 ------显示时间事件
|
|
|
+ eventMouseEnter: this.handleEventMouseEnter, //悬浮至日程触发 ------hover下拉框事件
|
|
|
+ eventDrop: this.calendarEventDropOrResize, //拖动事件触发 ------备注修改事件
|
|
|
+ eventResize: this.calendarEventDropOrResize, //缩放事件触发 ------备注修改事件
|
|
|
+ eventClick: this.remarkControl, //点击日程触发 ------编辑事件
|
|
|
+ select: this.deleteInfo, //拖拽多个方格触发 ------编辑事件
|
|
|
+
|
|
|
+ displayEventTime: true, //不显示具体时间
|
|
|
themeSystem: "bootstrap5",
|
|
|
aspectRatio: 1.2, //宽高比
|
|
|
- eventDidMount: function (info) {
|
|
|
- console.log('111',info);
|
|
|
- var tooltip = new tippy(info.el, {
|
|
|
- content: info.event.start, //悬浮框展示的内容
|
|
|
- theme: "tomato", //自定义主题,//悬浮框主题,默认主题中的light主题(白底黑字)
|
|
|
- allowHTML: true, //为true的时候,可以识别content中的html
|
|
|
- });
|
|
|
- },
|
|
|
},
|
|
|
validRange: {
|
|
|
start: "2022-08-26",
|
|
@@ -128,21 +236,126 @@ export default {
|
|
|
datesSet(info) {
|
|
|
//注意:该方法在页面初始化时就会触发一次
|
|
|
console.log(info);
|
|
|
- // this.search() //请求本页数据
|
|
|
},
|
|
|
- handleEventClick(info) {},
|
|
|
- handleDateClick(info) {},
|
|
|
calendarEventDropOrResize(e) {
|
|
|
- console.log("@", e);
|
|
|
- console.log("@@", this.calendarOptions.events);
|
|
|
+ console.log(e);
|
|
|
const index = this.calendarOptions.events.findIndex(
|
|
|
(item) => item.id == e.event.id
|
|
|
);
|
|
|
- console.log("@@@", this.calendarOptions.events[index]);
|
|
|
+ console.log(this.calendarOptions.events[index]);
|
|
|
this.calendarOptions.events[index].start = e.event.startStr;
|
|
|
this.calendarOptions.events[index].end = e.event.endStr;
|
|
|
- console.log("@@@@", e.event.startStr);
|
|
|
- console.log("@@@@@", e.event.endStr);
|
|
|
+ },
|
|
|
+ // 鼠标悬浮至日历触发事件
|
|
|
+ handleEventMouseEnter(e) {
|
|
|
+ new tippy(e.el, {
|
|
|
+ content:
|
|
|
+ e.event.title +
|
|
|
+ "<br>From:" +
|
|
|
+ e.event.startStr +
|
|
|
+ "<br>" +
|
|
|
+ e.event.endStr,
|
|
|
+ theme: "tomato",
|
|
|
+ allowHTML: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 备注日程修改 -- 改 删
|
|
|
+ remarkControl(e) {
|
|
|
+ this.GetInfo = e;
|
|
|
+ console.log(this.GetInfo);
|
|
|
+ this.changeInfo = true;
|
|
|
+ },
|
|
|
+ // 备注日程修改取消
|
|
|
+ operateCancel() {
|
|
|
+ this.GetInfo = "";
|
|
|
+ this.changeInfo = false;
|
|
|
+ },
|
|
|
+ // 拖拽表格时获取点击的起止时间
|
|
|
+ deleteInfo(e) {
|
|
|
+ this.Visible = true;
|
|
|
+ this.form.date = [e.startStr, e.endStr];
|
|
|
+ },
|
|
|
+ // 添加备注
|
|
|
+ addThings() {
|
|
|
+ this.Visible = true;
|
|
|
+ },
|
|
|
+ // 确认添加备注事件
|
|
|
+ confirm() {
|
|
|
+ this.Visible = false;
|
|
|
+ // 将备注加入日历中
|
|
|
+ let data = this.GetInfo == null || this.GetInfo == "" ? this.form.date[0] : this.GetInfo.event.id
|
|
|
+ const idx = this.calendarOptions.events.findIndex(
|
|
|
+ (item) => item.id == data
|
|
|
+ );
|
|
|
+ if (idx>-1) {
|
|
|
+ this.calendarOptions.events.splice(idx, 1);
|
|
|
+ }
|
|
|
+ this.calendarOptions.events.push({
|
|
|
+ id:data,
|
|
|
+ title: this.form.name,
|
|
|
+ start: this.form.date[0],
|
|
|
+ end: this.form.date[1],
|
|
|
+ });
|
|
|
+ this.form = {
|
|
|
+ name: "",
|
|
|
+ date: "",
|
|
|
+ type: [],
|
|
|
+ resource: "",
|
|
|
+ desc: "",
|
|
|
+ };
|
|
|
+ this.GetInfo = "";
|
|
|
+ },
|
|
|
+ // 取消添加备注
|
|
|
+ cancel() {
|
|
|
+ this.form = {
|
|
|
+ name: "",
|
|
|
+ date: "",
|
|
|
+ type: [],
|
|
|
+ resource: "",
|
|
|
+ desc: "",
|
|
|
+ };
|
|
|
+ this.Visible = false;
|
|
|
+ },
|
|
|
+ // 进行操作选中
|
|
|
+ operate(value) {
|
|
|
+ console.log(this.GetInfo.event.id);
|
|
|
+ this.changeInfo = false;
|
|
|
+ if (value == "delete") {
|
|
|
+ this.$confirm("是否删除当前备注, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ console.log(this.GetInfo.event.id);
|
|
|
+ const idx = this.calendarOptions.events.findIndex(
|
|
|
+ (item) => item.id == this.GetInfo.event.id
|
|
|
+ );
|
|
|
+ this.GetInfo = "";
|
|
|
+ this.calendarOptions.events.splice(idx, 1);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "已删除",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.GetInfo = "";
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.Visible = true;
|
|
|
+ this.form = {
|
|
|
+ name: this.GetInfo.event.title,
|
|
|
+ date: [this.GetInfo.event.startStr, this.GetInfo.event.endStr],
|
|
|
+ type: [],
|
|
|
+ resource: "",
|
|
|
+ desc: "",
|
|
|
+ };
|
|
|
+ console.log(this.GetInfo.event.id);
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|