|
|
@@ -1,5 +1,60 @@
|
|
|
<template>
|
|
|
- <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar" id="calendar" />
|
|
|
+ <FullCalendar
|
|
|
+ ref="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-col :span="11">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date1"
|
|
|
+ type="date"
|
|
|
+ placeholder="日期"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" class="text-center">
|
|
|
+ <span class="text-gray-500">-</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="form.date2"
|
|
|
+ placeholder="详细时刻"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </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="Sponsor">test1</el-radio>
|
|
|
+ <el-radio value="Venue">test2</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="this.Visible = false">确定</el-button>
|
|
|
+ <el-button @click="this.Visible = false" style="">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import FullCalendar from "@fullcalendar/vue3";
|
|
|
@@ -8,27 +63,50 @@ import timeGridPlugin from "@fullcalendar/timegrid";
|
|
|
import interactionPlugin from "@fullcalendar/interaction";
|
|
|
import listPlugin from "@fullcalendar/list";
|
|
|
import multiMonthPlugin from "@fullcalendar/multimonth";
|
|
|
-import bootstrap5Plugin from '@fullcalendar/bootstrap5';
|
|
|
-
|
|
|
+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,
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ region: "",
|
|
|
+ date1: "",
|
|
|
+ date2: "",
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ resource: "",
|
|
|
+ desc: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ // 日历数据
|
|
|
calendarOptions: {
|
|
|
- plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, multiMonthPlugin, bootstrap5Plugin],
|
|
|
+ plugins: [
|
|
|
+ dayGridPlugin,
|
|
|
+ timeGridPlugin,
|
|
|
+ interactionPlugin,
|
|
|
+ listPlugin,
|
|
|
+ multiMonthPlugin,
|
|
|
+ bootstrap5Plugin,
|
|
|
+ ],
|
|
|
initialView: "dayGridYear",
|
|
|
locale: "zh",
|
|
|
firstDay: 1,
|
|
|
unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
|
|
|
selectable: true, //是否可以选中日历格
|
|
|
editable: true,
|
|
|
-
|
|
|
+
|
|
|
buttonText: {
|
|
|
- prev:"上一页",
|
|
|
- next:"下一页",
|
|
|
+ prev: "上一页",
|
|
|
+ next: "下一页",
|
|
|
today: "今天",
|
|
|
month: "月",
|
|
|
week: "周",
|
|
|
@@ -38,64 +116,64 @@ export default {
|
|
|
headerToolbar: {
|
|
|
left: "prev,next today",
|
|
|
center: "title",
|
|
|
- right: "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
+ right:
|
|
|
+ "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
|
|
|
themeSystem: "bootstrap5",
|
|
|
},
|
|
|
views: {
|
|
|
multiMonthYearGrid: {
|
|
|
- type: 'multiMonthYear',
|
|
|
- buttonText: '年(网格)'
|
|
|
+ type: "multiMonthYear",
|
|
|
+ buttonText: "年(网格)",
|
|
|
},
|
|
|
multiMonthYearStack: {
|
|
|
- type: 'multiMonthYear',
|
|
|
- buttonText: '年(叠)',
|
|
|
- multiMonthMaxColumns: 1
|
|
|
+ type: "multiMonthYear",
|
|
|
+ buttonText: "年(叠)",
|
|
|
+ multiMonthMaxColumns: 1,
|
|
|
},
|
|
|
dayGridYear: {
|
|
|
- buttonText: '年(连续的)'
|
|
|
- }
|
|
|
+ buttonText: "年(连续的)",
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
height: 1150,
|
|
|
validRange: this.validRange, //设置可显示的总日期范围
|
|
|
events: [
|
|
|
-
|
|
|
- {
|
|
|
- id: 111,
|
|
|
- title: "国庆节放假",
|
|
|
- start: "2024-10-01",
|
|
|
- end: "2024-10-08",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true, //允许拖动缩放，不写默认就是false
|
|
|
- overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 222,
|
|
|
- title: "五一劳动节放假",
|
|
|
- start: "2024-05-01",
|
|
|
- end: "2024-05-06",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true, //允许拖动缩放
|
|
|
- },
|
|
|
- {
|
|
|
- id: 333,
|
|
|
- title: "端午节放假",
|
|
|
- start: "2024-06-08",
|
|
|
- end: "2024-06-11",
|
|
|
- color: "#ffcc99",
|
|
|
- editable: true,
|
|
|
- },
|
|
|
+ {
|
|
|
+ id: 111,
|
|
|
+ title: "国庆节放假",
|
|
|
+ start: "2024-10-01",
|
|
|
+ end: "2024-10-08",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true, //允许拖动缩放，不写默认就是false
|
|
|
+ overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 222,
|
|
|
+ title: "五一劳动节放假",
|
|
|
+ start: "2024-05-01",
|
|
|
+ end: "2024-05-06",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true, //允许拖动缩放
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 333,
|
|
|
+ title: "端午节放假",
|
|
|
+ start: "2024-06-08",
|
|
|
+ end: "2024-06-11",
|
|
|
+ color: "#ffcc99",
|
|
|
+ editable: true,
|
|
|
+ },
|
|
|
], //背景色 (添加相同时间的背景色时颜色会重叠)
|
|
|
- datesSet: this.datesSet, //日期渲染；修改日期范围后触发
|
|
|
- eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
|
|
|
- dateClick: this.handleDateClick, //点击日期触发
|
|
|
- eventDrop: this.calendarEventDropOrResize, //拖动事件触发
|
|
|
- eventResize: this.calendarEventDropOrResize, //缩放事件触发
|
|
|
+ datesSet: this.datesSet, //日期渲染；修改日期范围后触发 ------显示时间事件
|
|
|
+ eventMouseEnter: this.handleEventMouseEnter, //悬浮至日程触发 ------hover下拉框事件
|
|
|
+ eventDrop: this.calendarEventDropOrResize, //拖动事件触发 ------备注修改事件
|
|
|
+ eventResize: this.calendarEventDropOrResize, //缩放事件触发 ------备注修改事件
|
|
|
+ eventClick: this.hoverE, //点击日程触发 ------编辑事件
|
|
|
+ select: this.deleteInfo, //拖拽多个方格触发 ------编辑事件 会与dateClick同时触发 待考虑
|
|
|
+
|
|
|
displayEventTime: false, //不显示具体时间
|
|
|
- themeSystem: 'bootstrap5',
|
|
|
+ themeSystem: "bootstrap5",
|
|
|
aspectRatio: 1.2, //宽高比
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
validRange: {
|
|
|
start: "2022-08-26",
|
|
|
@@ -107,24 +185,50 @@ export default {
|
|
|
datesSet(info) {
|
|
|
//注意：该方法在页面初始化时就会触发一次
|
|
|
console.log(info);
|
|
|
- // this.search() //请求本页数据
|
|
|
-
|
|
|
},
|
|
|
- handleEventClick(info) { },
|
|
|
- handleDateClick(info) { },
|
|
|
- calendarEventDropOrResize(e) {
|
|
|
- console.log(e);
|
|
|
- console.log(this.calendarOptions.events);
|
|
|
- const index =this.calendarOptions.events.findIndex((item) => item.id == e.event.id)
|
|
|
+ calendarEventDropOrResize(e) {
|
|
|
+ const index = this.calendarOptions.events.findIndex(
|
|
|
+ (item) => item.id == e.event.id
|
|
|
+ );
|
|
|
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);
|
|
|
+ this.calendarOptions.events[index].start = e.event.startStr;
|
|
|
+ this.calendarOptions.events[index].end = e.event.endStr;
|
|
|
+ },
|
|
|
+ // 鼠标悬浮至日历触发事件
|
|
|
+ handleEventMouseEnter(e) {
|
|
|
+ console.log(e);
|
|
|
+ new tippy(e.el,{
|
|
|
+ content:e.event.title,
|
|
|
+ theme: 'tomato',
|
|
|
+ allowHTML: true,
|
|
|
+ })
|
|
|
+ console.log(1111);
|
|
|
+ },
|
|
|
+ // 点击到日期表格触发事件
|
|
|
+ handleDateClick() {
|
|
|
+ console.log(222);
|
|
|
+ },
|
|
|
+ hoverE() {
|
|
|
+ console.log("----------------------------");
|
|
|
+ },
|
|
|
+ deleteInfo() {
|
|
|
+ this.$confirm("是否进行修改编辑, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.Visible = true;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -135,6 +239,4 @@ export default {
|
|
|
margin-top: 70px;
|
|
|
margin-bottom: 70px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</style>
|
PrettyCat1