Browse Source

日历表单功能更新

PrettyCat1 1 year ago
parent
commit
fc5d766b2d

+ 9 - 0
vue_project/package-lock.json

@@ -32,6 +32,7 @@
         "element-plus": "^2.7.4",
         "js-cookie": "^3.0.5",
         "pinia": "^2.1.7",
+        "tippy.js": "^6.3.7",
         "vue": "^3.2.13",
         "vue-router": "^4.3.2"
       },
@@ -11700,6 +11701,14 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmmirror.com/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

+ 1 - 0
vue_project/package.json

@@ -31,6 +31,7 @@
     "element-plus": "^2.7.4",
     "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
+    "tippy.js": "^6.3.7",
     "vue": "^3.2.13",
     "vue-router": "^4.3.2"
   },

+ 11 - 0
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;

+ 1 - 0
vue_project/src/components/LoginForm.vue

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

+ 1 - 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; //计数器

+ 2 - 0
vue_project/src/components/demo.vue

@@ -0,0 +1,2 @@
+<template>
+</template>

+ 166 - 64
vue_project/src/components/indexBody.vue

@@ -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>

+ 6 - 0
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",
     }
     // {
     //   //商品