Merge remote-tracking branch 'origin/master'

# Conflicts:
#	vue_project/src/components/indexBody.vue

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/assets/css/style.scss

@@ -129,6 +129,17 @@
                             background-image: url(../images/password.png);
                         }
                     }
+                    .phone {
+                        input {
+                            letter-spacing: 2px;
+                        }
+                        &::before {
+                            content: "Phone";
+                        }
+                        &::after {
+                            background-image: url(../images/password.png);
+                        }
+                    }
                     .veri-code {
                         opacity: 0;
                         z-index: -1;

vue_project/src/components/RegisterForm.vue

@@ -57,7 +57,7 @@
 
 <script setup>
 import { ref } from "vue";
-import { registerVerify } from "../api/index";
+import { registerVerify ,registerApi} from "../api/index";
 import { ElMessage } from "element-plus";
 
 let reckonTime; //计数器

vue_project/src/components/demo.vue

@@ -0,0 +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,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);
+      }
     },
   },
 };

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/router/router.js

@@ -26,6 +26,12 @@ export const staticRoutes = [
       path: "/index",
       component: () => import("../components/index.vue"),
       name: "index",
+    },
+    {
+      //demo
+      path: "/demo",
+      component: () => import("../components/demo.vue"),
+      name: "demo",
     }
     // {
     //   //商品

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 => {