增加日历弹出框

src/views/mes/holidayCalendar/index.vue

@@ -5,7 +5,8 @@
         <div
           style="height: 100"
           :class="data.isSelected ? 'is-selected' : ''"
-          @click="handleClick(data.day)">
+          @click="handleClick(data.day)"
+        >
           <div>{{ data.day.split('-').slice(1).join('-') }}</div>
           <div v-if="arr.find((v) => v.date === data.day)">{{ arr.find((v) => v.date === data.day).content }}
           </div>
@@ -13,10 +14,36 @@
         </div>
       </template>
     </el-calendar>
+    <!-- 自定义弹出框 -->
+    <el-dialog v-model="dialogFormVisible" title="日程安排" width="600" draggable="true">
+      <el-form :model="calendar" :label-width="100">
+        <el-form-item label="日程内容">
+          <el-input v-model="calendar.content" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-input v-model="calendar.content" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="save"> 确定 </el-button>
+          <el-button @click="dialogFormVisible = false"> 取消 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { reactive, ref } from 'vue'
+import { HolidayCalendar, HolidayCalendarRules } from './holidayCalendar.data'
+import * as HolidayCalendarApi from '@/api/mes/holidayCalendar'
+
+const dialogTableVisible = ref(false)
+const dialogFormVisible = ref(false)
+const formLabelWidth = '160px'
+
+
 export default {
   name: 'Calendar',
   data() {
@@ -27,17 +54,22 @@ export default {
         { date: '2024-04-02', content: '打台球' },
         { date: '2024-04-03', content: '打篮球' },
         { date: '2024-04-04', content: '踢足球' }
-      ]
+      ],
+      dialogFormVisible:false,
+      calendar: {}
     }
   },
   methods: {
     handleClick(date) {
-      alert(date)
+      this.dialogFormVisible = true
+      this.calendar.date=date
+    },
+    save(){
+
     }
   }
 }
 </script>
 
 <style scoped>
-
 </style>