Merge remote-tracking branch 'origin/master'

vue_project/src/api/index.js

@@ -20,11 +20,14 @@ export const registerVerify = (data) => {
   })
 };
 
-
-
 // 注册的接口
 export const registerApi = (userInfo) => {
   return request.post("/register", userInfo)
 }
 
+// // 获取用户信息
+export const getUserInfo = (token) => {
+  return request.post("/getUserInfo", token)
+}
+
 

vue_project/src/components/LoginForm.vue

@@ -60,6 +60,7 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { login } from "../api/index";
+import { setToken } from "../utils/token-utils";
 const router = useRouter();
 
 const loginForm = ref({
@@ -72,11 +73,11 @@ const onLogin = async () => {
   ElMessage.info("正在登录");
   await login(loginForm.value).then(
     (response) => {
-      console.log(response);
       if (response.data.data.code == 501) {
         ElMessage.error("账号或密码错误，请重试");
       } else {
         ElMessage.success("登录成功");
+        setToken(response.data.data.token);
         router.push({ path: "/index" });
       }
     },
@@ -88,7 +89,5 @@ const onLogin = async () => {
 </script>
 
 <style scoped>
-/* @import url("../assets/css/style.css"); */
-
 @import url("../assets/css/style.scss");
 </style>

vue_project/src/components/RegisterForm.vue

@@ -143,6 +143,5 @@ const onRegister = async () => {
 </script>
 
 <style scoped>
-@import url("../assets/css/style.css");
 @import url("../assets/css/style.scss");
 </style>

vue_project/src/components/indexBody.vue

@@ -1,15 +1,6 @@
 <template>
-  <div>
-
-  </div>
-
-
-  <FullCalendar class="calendar" ref="fullCalendar" :options="calendarOptions">
-  </FullCalendar>
-
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar" id="calendar" />
 </template>
-
-
 <script>
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -18,19 +9,12 @@ import interactionPlugin from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import multiMonthPlugin from "@fullcalendar/multimonth";
 import bootstrap5Plugin from '@fullcalendar/bootstrap5';
-import { onMounted } from "vue";
-
 
 
 
 export default {
-
   //import引入的组件需要注入到对象中才能使用
-  components: {
-    FullCalendar,
-
-  },
-
+  components: { FullCalendar },
   data() {
     return {
       calendarOptions: {
@@ -41,11 +25,10 @@ export default {
         unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
         selectable: true, //是否可以选中日历格
         editable: true,
-        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
-        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
+        
         buttonText: {
-          prev: "上一页",
-          next: "下一页",
+          prev:"上一页",
+          next:"下一页",
           today: "今天",
           month: "月",
           week: "周",
@@ -75,39 +58,8 @@ export default {
 
         height: 1150,
         validRange: this.validRange, //设置可显示的总日期范围
-        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
-        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
-        eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
-        dateClick: this.handleDateClick, //点击日期触发
-        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
-        eventResize: this.calendarEventDropOrResize, //缩放事件触发
-        displayEventTime: false, //不显示具体时间
-        themeSystem: 'bootstrap5',
-        aspectRatio: 1.2, //宽高比
-
-
-      },
-      validRange: {
-        start: "2022-08-26",
-        end: "2023-02-16",
-      },
-
-    };
-
-  },
-  onMounted() {
-    console.log(1);
-      setTimeout(() => { 
-        
-        console.log(this.calendarOptions); }, 2000)
+        events: [
 
-    },
-  methods: {
-    datesSet(info) {
-      //注意：该方法在页面初始化时就会触发一次
-      console.log(info);
-      // this.search()  //请求本页数据
-      this.calendarOptions.events = [
         {
           id: 111,
           title: "国庆节放假",
@@ -133,11 +85,43 @@ export default {
           color: "#ffcc99",
           editable: true,
         },
-      ];
-
-    },
+        ], //背景色 (添加相同时间的背景色时颜色会重叠)
+        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
+        eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
+        dateClick: this.handleDateClick, //点击日期触发
+        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
+        eventResize: this.calendarEventDropOrResize, //缩放事件触发
+        displayEventTime: false, //不显示具体时间
+        themeSystem: 'bootstrap5',
+        aspectRatio: 1.2, //宽高比
 
 
+      },
+      validRange: {
+        start: "2022-08-26",
+        end: "2023-02-16",
+      },
+    };
+  },
+  methods: {
+    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)
+      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);
+    },
   },
 };
 
@@ -151,4 +135,6 @@ export default {
   margin-top: 70px;
   margin-bottom: 70px;
 }
+
+
 </style>

vue_project/src/components/test.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <el-row>
-      <el-col :span="8">
-        <div class="formBox">
-          <el-date-picker
-            size="small"
-            v-model="yearMonth"
-            type="month"
-            placeholder="选择月"
-            value-format="yyyy-MM"
-            :clearable="false"
-          >
-          </el-date-picker>
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <div style="text-align: center">
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-caret-left"
-            circle
-          ></el-button>
-          <span class="dateText">{{ yearMonth }}</span>
-          <el-button
-            size="mini"
-            type="primary"
-            icon="el-icon-caret-right"
-            circle
-          ></el-button>
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <div></div>
-      </el-col>
-    </el-row>
-  </div>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
-</template>
-
-<script setup>
-import { reactive, ref } from "vue";
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";          //日历格子显示
-import interactionPlugin from "@fullcalendar/interaction";  //拖拽插件
-import timeGridPlugin from "@fullcalendar/timegrid";        //日历时间线视图
-const calendarOptions = reactive({
-  height: "100%",
-  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-  initialView: "timeGridWeek", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
-  weekends: true, // 显示周末
-  firstDay: 0, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推  new Date().getDay()当前天
-  locale: "zh-cn", // 切换语言，当前为中文
-  unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
-  selectable: true, //是否可以选中日历格
-});
-const calendarDate = ref("")
-const yearMonth = ref("")
-</script>
-
-
-<style>
-</style>

vue_project/src/router/router.js

@@ -22,16 +22,10 @@ export const staticRoutes = [
       name: "Register",
     },
     {
-      //注册
-      path: "/test",
-      component: () => import("../components/test.vue"),
-      name: "test",
-    },
-    {
-      //注册
-      path: "/demo",
-      component: () => import("../components/indexBody.vue"),
-      name: "demo",
+      //日历
+      path: "/index",
+      component: () => import("../components/index.vue"),
+      name: "index",
     }
     // {
     //   //商品