备注信息的增删查改 拖拽备注信息增删查改

vue_project/src/api/index.js

@@ -1,4 +1,5 @@
 import request from "@/utils/request"
+import {getToken} from "../utils/token-utils"
 
 //登录的接口
 export const login = (data) => {
@@ -26,8 +27,19 @@ export const registerApi = (userInfo) => {
 }
 
 // // 获取用户信息
-export const getUserInfo = (token) => {
-  return request.post("/getUserInfo", token)
-}
+// export const getUserInfo = (token) => {
+//   return request.post("/getUserInfo", token)
+// }
+
 
+// 注册获取验证码的接口 
+export const getUserInfo = () => {
+  return request({
+    method: "get",
+    url: "/user/getUserInfo",
+    headers: {
+      "Authorization": "Bearer "+getToken(),
+    }
+  })
+};
 

vue_project/src/components/LoginForm.vue

@@ -53,7 +53,6 @@
       </div>
     </div>
   </div>
-  
 </template>
 
 <script setup>

vue_project/src/components/demo.vue

@@ -1,2 +1,47 @@
 <template>
+  <div class="demo-date-picker">
+    <div class="block">
+      <el-date-picker
+        v-model="value1"
+        type="daterange"
+        range-separator="To"
+        start-placeholder="开始日期"
+        end-placeholder="结束"
+        size="large"
+      />
+    </div>
+  </div>
 </template>
+
+<script  setup>
+import { ref } from 'vue'
+
+const value1 = ref('')
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

vue_project/src/components/indexBody.vue

@@ -1,36 +1,46 @@
 <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-col :span="11">
+        <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 :span="2" class="text-center">
-          <span class="text-gray-500">-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-time-picker
+
+        <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-col> -->
       </el-form-item>
       <el-form-item label="类型">
         <el-checkbox-group v-model="form.type">
@@ -40,21 +50,37 @@
           <el-checkbox value="4" name="type"> 4 </el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-      <el-form-item label="测试">
+      <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 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="this.Visible = false">确定</el-button>
-        <el-button @click="this.Visible = false" style="">取消</el-button>
+        <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 FullCalendar from "@fullcalendar/vue3";
@@ -65,23 +91,24 @@ 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';
+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,
+      Visible: false, //  是否显示添加备注框
+      changeInfo: false, //  是否显示备注日程修改框
+      operateSelect: "",
+      GetInfo: "",
+      // 备注信息
       form: {
         name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
+        date: "",
         type: [],
         resource: "",
         desc: "",
@@ -103,6 +130,7 @@ export default {
         unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
         selectable: true, //是否可以选中日历格
         editable: true,
+        dayMaxEventRows: 2, //允许事件堆叠，但不超过设定的行数
 
         buttonText: {
           prev: "上一页",
@@ -114,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",
@@ -152,7 +186,7 @@ export default {
             title: "五一劳动节放假",
             start: "2024-05-01",
             end: "2024-05-06",
-            color: "#ffcc99",
+            color: "green",
             editable: true, //允许拖动缩放
           },
           {
@@ -163,15 +197,32 @@ 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, //悬浮至日程触发               ------hover下拉框事件
-        eventDrop: this.calendarEventDropOrResize, //拖动事件触发                 ------备注修改事件
-        eventResize: this.calendarEventDropOrResize, //缩放事件触发                 ------备注修改事件
-        eventClick: this.hoverE, //点击日程触发                 ------编辑事件
-        select: this.deleteInfo, //拖拽多个方格触发             ------编辑事件  会与dateClick同时触发 待考虑
+        datesSet: this.datesSet, //日期渲染；修改日期范围后触发        ------显示时间事件
+        eventMouseEnter: this.handleEventMouseEnter, //悬浮至日程触发 ------hover下拉框事件
+        eventDrop: this.calendarEventDropOrResize, //拖动事件触发     ------备注修改事件
+        eventResize: this.calendarEventDropOrResize, //缩放事件触发   ------备注修改事件
+        eventClick: this.remarkControl, //点击日程触发                       ------编辑事件
+        select: this.deleteInfo, //拖拽多个方格触发                   ------编辑事件
 
-        displayEventTime: false, //不显示具体时间
+        displayEventTime: true, //不显示具体时间
         themeSystem: "bootstrap5",
         aspectRatio: 1.2, //宽高比
       },
@@ -187,6 +238,7 @@ export default {
       console.log(info);
     },
     calendarEventDropOrResize(e) {
+      console.log(e);
       const index = this.calendarOptions.events.findIndex(
         (item) => item.id == e.event.id
       );
@@ -196,36 +248,105 @@ export default {
     },
     // 鼠标悬浮至日历触发事件
     handleEventMouseEnter(e) {
-      console.log(e);
-      new tippy(e.el,{
-        content:e.event.title,
-        theme: 'tomato',
+      new tippy(e.el, {
+        content:
+          e.event.title +
+          "<br>From:" +
+          e.event.startStr +
+          "<br>" +
+          e.event.endStr,
+        theme: "tomato",
         allowHTML: true,
-      })
-      console.log(1111);
+      });
+    },
+    // 备注日程修改
+    remarkControl(e) {
+      this.GetInfo = e;
+      this.changeInfo = true;
+    },
+    // 备注日程修改取消
+    operateCancel(){
+      this.GetInfo = "";
+      this.changeInfo = false
     },
-    // 点击到日期表格触发事件
-    handleDateClick() {
-      console.log(222);
+    // 拖拽表格时获取点击的起止时间
+    deleteInfo(e) {
+      this.Visible = true;
+      this.form.date = [e.startStr, e.endStr];
     },
-    hoverE() {
-      console.log("----------------------------");
+    // 添加备注
+    addThings() {
+      this.Visible = true;
     },
-    deleteInfo() {
-      this.$confirm("是否进行修改编辑, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.Visible = true;
+    // 确认添加备注事件
+    confirm() {
+      this.Visible = false;
+      // 将备注加入日历中
+      this.calendarOptions.events.push({
+        id: this.GetInfo == null || this.GetInfo =="" ? this.form.date[0] : this.GetInfo.event.id,
+        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) {
+      this.changeInfo = false;
+      if (value == "delete") {
+        this.$confirm("是否删除当前备注, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
         })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
+          .then(() => {
+            this.GetInfo=""
+            console.log(this.calendarOptions.events);
+            const idx = this.calendarOptions.events.findIndex(
+              (item) => item.id == this.GetInfo.event.id
+            );
+            this.calendarOptions.events.splice(idx, 1);
+            this.$message({
+              type: "error",
+              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: ""
+        };
+
+      }
     },
   },
 };

vue_project/src/components/indexNav.vue

@@ -99,4 +99,10 @@ const navigation = [
     { name: 'Projects', href: '#', current: false },
     { name: 'Calendar', href: '#', current: true },
 ]
-</script>
+</script>
+
+<style scoped>
+a{
+    text-decoration: none;
+}
+</style>

vue_project/src/utils/request.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 // 使用element-plus ElMessage做消息提醒
 import { ElMessage } from 'element-plus';
 import Cookies from 'js-cookie'
-
+// import {getToken} from "../utils/token-utils"
 
 //1. 创建新的axios实例，
 const service = axios.create({
@@ -18,6 +18,7 @@ service.interceptors.request.use(config => {
   const token = Cookies.get(TokenKey)
   if (token && typeof token !='undefined' && token != "") {
     (config.headers)['token'] = token
+    // (config.headers)['Authorization'] ="Bearer "+getToken()
   }
   return config
 }, error => {