提交客户管家日历相关代码

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/tasks/addEditor.vue

@@ -178,6 +178,11 @@
       <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom" :style="{ height: '50%' }">
         <van-date-picker v-model="showDatePickerVal" @confirm="showPickerConfirm" @cancel="showDatePicker = false" />
       </van-popup>
+
+      <!-- 选择时间 -->
+      <van-popup v-model:show="showDateTimePicker" destroy-on-close position="bottom" :style="{ height: '50%' }">
+        <van-time-picker v-model="showDatePickerTimeVal" @confirm="showPickerTimeConfirm" @cancel="showDateTimePicker = false" />
+      </van-popup>
     </div>
   </div>
 </template>
@@ -222,7 +227,9 @@ const showSelectionFlag = ref(false)
 const showSelectionFiled = ref([])
 const showSelectionArray = ref([])
 const showDatePicker = ref(false)
+const showDateTimePicker = ref(false)
 const showDatePickerVal = ref(dayjs().format("YYYY-MM-DD").split("-"))
+const showDatePickerTimeVal = ref(dayjs().format("HH:mm").split(":"))
 const showDatePickerFiled = ref('')
 const customeDate = ref([])
 const showSelectionToFlag = ref(false)
@@ -278,14 +285,26 @@ function onSubmit() {
 }
 
 function showPickerConfirm({ selectedValues }) {
-  vantFormVal.value[showDatePickerFiled.value] = selectedValues.join('-')
+
+  // vantFormVal.value[showDatePickerFiled.value] = selectedValues.join('-')
+  // showDatePicker.value = false
+
   showDatePicker.value = false
+  showDateTimePicker.value = true
+}
+
+function showPickerTimeConfirm({ selectedValues }) {
+  vantFormVal.value[showDatePickerFiled.value] = `${showDatePickerVal.value.join('-')} ${selectedValues.join(':')}`
+  showDateTimePicker.value = false
 }
 
 function showDatePickerBox(filed) {
-  const dateVal = vantFormVal.value[filed] ? vantFormVal.value[filed] : dayjs().format("YYYY-MM-DD")
+  console.log(vantFormVal.value[filed], '<==== 123321')
+  const dateVal = vantFormVal.value[filed] ? vantFormVal.value[filed].split(' ')[0] : dayjs().format("YYYY-MM-DD")
+  const timeVal = vantFormVal.value[filed] ? vantFormVal.value[filed].split(' ')[1] : dayjs().format("HH:mm")
   showDatePickerFiled.value = filed
   showDatePickerVal.value = dateVal.split("-")
+  showDatePickerTimeVal.value = timeVal.split(":")
   showDatePicker.value = true
 }
 

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/component/workbench.vue

@@ -9,7 +9,10 @@
         :formatter="formatter" @select="calendarSelect" @panel-change="calendarPanelChangeSet">
         <template #month-title></template>
         <template #bottom-info="day">
-          <div class="doT" v-if="day?.bottomInfo"></div>
+          <div class="flex justify-items-center">
+            <div class="doT" v-if="day?.bottomInfo"></div>
+            <div class="taskDot" v-if="day?.taskInfo"></div>
+          </div>
         </template>
       </van-calendar>
       <div class="flex justify-center" @click="expandAndCollapseClick">
@@ -25,32 +28,56 @@
         <div class="w-full overflow-y-auto max-h-72 px-5 mb-5">
           <template v-for="item in visitorProgramList">
             <van-swipe-cell>
-              <div class="bg-[#FFA35919] ra6 p-4 mb-4" @click="jumpToVisitorDetails(item)">
-                <div class="w-full flex items-center justify-between">
-                  <div class="text-size-in font-bold text-[#474A56]">{{ item.planName }}</div>
-                  <div :class="`labelTag ${item.finishState == 0 ? 'toBeCompleted' : 'completed'}`">{{ ['未完成',
-                    '已完成'][item.finishState] }}</div>
-                </div>
-                <div class="w-full flex items-center justify-between mt-4">
-                  <div class="text-[#505050]" style="width: 62%;">拜访目的: {{ item.visitGoalName }}</div>
-                  <div class="w-1/3 text-[#505050] flex items-center" style="width: 38%;">
-                    <van-icon name="user-circle-o" class="text-size-in mr-2" />
-                    {{ item.customName }}
+              <!-- 拜访计划 -->
+              <template v-if="item.calendarType == 1">
+                <div class="bg-[#075985] ra6 p-4 mb-4 text-[#fff]" @click="jumpToVisitorDetails(item)">
+                  <div class="w-full flex items-center justify-between">
+                    <div class="text-size-in font-bold text-[#fff]">{{ item.planName }}</div>
+                    <div :class="`labelTag ${item.finishState == 0 ? 'toBeCompleted' : 'completed'}`">{{ ['未完成',
+                      '已完成'][item.finishState] }}</div>
+                  </div>
+                  <div class="w-full flex items-center justify-between mt-4">
+                    <div class="text-[#fff]" style="width: 62%;">拜访目的: {{ item.visitGoalName }}</div>
+                    <div class="w-1/3 text-[#fff] flex items-center" style="width: 38%;">
+                      <van-icon name="user-circle-o" class="text-size-in mr-2" />
+                      {{ item.customName }}
+                    </div>
+                  </div>
+                  <div class="w-full flex items-center justify-between mt-4">
+                    <div class="w-2/3 text-[#fff]" style="width: 62%;">拜访时间: {{ item.visitTime }}</div>
+                    <div class="w-1/3 text-[#fff] flex items-center" style="width: 38%;">
+                      <van-icon name="phone-o" class="text-size-in mr-2" />
+                      {{ item?.companyPhone }}
+                    </div>
                   </div>
                 </div>
-                <div class="w-full flex items-center justify-between mt-4">
-                  <div class="w-2/3 text-[#505050]" style="width: 62%;">拜访时间: {{ item.visitTime }}</div>
-                  <div class="w-1/3 text-[#505050] flex items-center" style="width: 38%;">
-                    <van-icon name="phone-o" class="text-size-in mr-2" />
-                    <!-- {{ item.telPhone }} -->
-                    {{ item?.companyPhone }}
+              </template>
+
+              <!-- 任务 -->
+              <template v-if="item.calendarType == 2">
+                <div class="bg-[#FFA35919] ra6 p-4 mb-4" @click="toEditTask(item)">
+                  <div class="w-full flex items-center justify-between">
+                    <div class="text-size-in font-bold text-[#474A56]">{{ item.taskName }}</div>
+                    <div :class="`labelTag ${taskStatus[item.status]?.type}`">
+                      {{ taskStatus[item.status]?.label }}
+                    </div>
+                  </div>
+                  <div class="w-full flex items-center justify-between mt-4">
+                    <div class="text-[#505050]" style="width: 100%;">任务开始时间: {{ item.endDate }}</div>
+                  </div>
+                  <div class="w-full flex items-center justify-between mt-4">
+                    <div class="text-[#505050]" style="width: 100%;">任务截至时间: {{ item.startDate }}</div>
                   </div>
                 </div>
-              </div>
+              </template>
+              
 
               <template #right>
                 <div class="flex items-center flex-col justify-around h-full bg-[#F9F0E9] ra-l6 py-4">
-                  <div class="buttonCircle text-white" @click.stop="jumpToAddNewVisitors(item)">
+                  <div class="buttonCircle text-white" @click.stop="jumpToAddNewVisitors(item)" v-if="item.calendarType == 1">
+                    <img src="/src/assets/image/edit.png" class="w-full h-full">
+                  </div>
+                  <div class="buttonCircle text-white" @click.stop="toEditTask(item)" v-if="item.calendarType == 2">
                     <img src="/src/assets/image/edit.png" class="w-full h-full">
                   </div>
                   <div class="buttonCircle text-white" @click.stop="deleteVisitor(item)">
@@ -61,7 +88,7 @@
             </van-swipe-cell>
           </template>
         </div>
-        <van-button type="primary" icon="add-o" class="m-auto w-3/5" @click="jumpToAddNewVisitors()">新增计划</van-button>
+        <van-button type="primary" icon="add-o" class="m-auto w-3/5" @click="addTaskPlanPopup = true">新增</van-button>
       </div>
       <!-- 没有数据的情况下 -->
       <div class="w-full h-full flex flex-col items-center justify-center" v-if="!visitorProgramList.length">
@@ -69,10 +96,19 @@
           <img class="w-full h-full" src="/src/assets/image/schedule.png">
         </div>
         <div class="text-center text-[#C4C4C4] mb-5">您今天还没安排日程哦！</div>
-        <van-button type="primary" class="m-auto w-3/5" @click="jumpToAddNewVisitors()">马上安排</van-button>
+        <van-button type="primary" class="m-auto w-3/5" @click="addTaskPlanPopup = true">马上安排</van-button>
       </div>
     </div>
 
+    <!-- 拜访计划和任务的添加按钮 -->
+    <van-popup v-model:show="addTaskPlanPopup" closeable destroy-on-close position="bottom">
+      <div class="flex w-full flex-col p-12">
+        <van-button type="primary" class="m-auto" @click="addTaskClick()">新增任务</van-button>
+        <div class="h-6"></div>
+        <van-button type="primary" class="m-auto" @click="jumpToAddNewVisitors()">新增计划</van-button>
+      </div>
+    </van-popup>
+
     <!-- 常用表单 -->
     <div class="mt-5">
       <div class="text-size-large text-[#000] pl16">常用表单</div>
@@ -165,7 +201,7 @@
 import { ref, onActivated, nextTick } from 'vue';
 import { showConfirmDialog } from 'vant';
 import { useLifecycle } from '@hooks/useCommon.js';
-import { DELETE_VISITOR_PLAN, GET_VISITOR_PLAN, GET_FREQUENTLY_USED_CONTACTS, GET_COMMONLY_USED_MODULES, SAVE_COMMONLY_USED_FORMS, GET_PLAN_CALENDAR } from "@hooks/useApi";
+import { DELETE_VISITOR_PLAN, GET_VISITOR_PLAN, GET_FREQUENTLY_USED_CONTACTS, GET_COMMONLY_USED_MODULES, SAVE_COMMONLY_USED_FORMS, GET_PLAN_CALENDAR, DELETE_TASK } from "@hooks/useApi";
 import { routingInfos } from "@utility/generalVariables.js";
 import usePxToVwView from "@hooks/usePxTransform.js";
 import useToast from "@hooks/useToast"
@@ -174,6 +210,13 @@ import requests from "@common/requests";
 import useRouterStore from "@store/useRouterStore.js";
 import useInfoStore from "@store/useInfoStore.js";
 
+const taskStatus = [
+  { label: '未开始', type: 'infos' },
+  { label: '进行中', type: 'primarys' },
+  { label: '已完成', type: 'completed' },
+  { label: '已超时', type: 'dangers' },
+]
+
 const router = useRouterStore()
 const useInfo = useInfoStore()
 const { toastText, toastSuccess, toastFail, toastLoading } = useToast()
@@ -191,6 +234,33 @@ const commonExpressionsHaveBeenAdded = ref([])
 const commonExpressionsHaveBeenNodded = ref([])
 const areYouRequesting = ref(false)
 const displayFrequentlyUsedContacts = ref(false)
+const addTaskPlanPopup = ref(false)
+
+function addTaskClick() {
+  addTaskPlanPopup.value = false
+  const jumpTo = routingInfos['tasks']
+  router.navigateTo({
+    pathName: 'addEditor',
+    success: () => {
+      router.emit('addEditorParameter', {
+        routerInfo: JSON.stringify(jumpTo)
+      })
+    }
+  })
+}
+
+function toEditTask(row) {
+  const jumpTo = routingInfos['tasks']
+  router.navigateTo({
+    pathName: 'addEditor',
+    success: () => {
+      router.emit('addEditorParameter', {
+        routerInfo: JSON.stringify(jumpTo),
+        filedValue: JSON.stringify(row),
+      })
+    }
+  })
+}
 
 function calendarPanelChangeSet(data) {
   dateConditions.value = dayjs(data.date).format('YYYY-MM-DD')
@@ -254,12 +324,16 @@ function operationForm(type, row) {
 }
 
 function deleteVisitor(row) {
-  const { id, planName } = row
+  const { id, planName, calendarType, taskName } = row
+  const text = calendarType == 1 ? '访客' : '任务'
+  const textMessage = calendarType == 1 ? '访客计划' : '任务'
+  let formVal = {}
+  calendarType == 1 ? formVal.planId = id : formVal.taskIds = id
   showConfirmDialog({
-    title: `删除访客`,
-    message: `确定删除【${planName}】访客计划吗？`,
+    title: `删除${text}`,
+    message: `确定删除【${calendarType == 1 ? planName : taskName}】${textMessage}计划吗？`,
   }).then(() => {
-    requests.post(DELETE_VISITOR_PLAN, { planId: id }).then((res) => {
+    requests.post(calendarType == 1 ? DELETE_VISITOR_PLAN : DELETE_TASK, { ...formVal }).then((res) => {
       toastSuccess('删除成功')
       getVisitorPlan()
     }).catch((err) => {
@@ -272,7 +346,8 @@ function formatter(day) {
   const { date, bottomInfo } = day
   const currentDate = dayjs(date).format("YYYY-MM-DD");
   const rqiList = planCalendarList.value.filter(item => item.ymd === currentDate)
-  day.bottomInfo = rqiList.length > 0 ? true : false
+  day.bottomInfo = (rqiList.length > 0 ? true : false)
+  day.taskInfo = (planCalendarList.value.find(item => item.currentDate === currentDate)?.taskDtoList.length > 0 ? true : false)
   return day
 }
 
@@ -293,6 +368,7 @@ function jumpToVisitorDetails(row) {
 }
 
 function jumpToAddNewVisitors(row) {
+  addTaskPlanPopup.value = false
   router.navigateTo({
     pathName: 'addEditorVisitor',
     success: () => {
@@ -332,7 +408,21 @@ function getVisitorPlan() {
   requests.post(GET_VISITOR_PLAN, {
     calenderDate: dayjs(dateConditions.value).format('YYYY-MM-DD')
   }).then((res) => {
-    visitorProgramList.value = res.data || []
+    // visitorProgramList.value = res.data || []
+    visitorProgramList.value = [
+      ...(res.data.planList || []).map(item => {
+        return {
+          ...item,
+          calendarType: 1,
+        }
+      }),
+      ...(res.data.taskList || []).map(item => {
+        return {
+          ...item,
+          calendarType: 2,
+        }
+      }),
+    ]
   })
 }
 
@@ -352,7 +442,22 @@ function getCommonlyUsedModules() {
 function getPlanCalendarList() {
   const months = calendarRef.value.getSelectedDate()
   requests.post(GET_PLAN_CALENDAR, { ym: dayjs(months).format('YYYY-MM') }).then(({ data }) => {
-    planCalendarList.value = data || []
+    // planCalendarList.value = data.planList || []
+    const newData = [
+      ...(data.planList || []).map(item => {
+        return {
+          ...item,
+          calendarType: 1,
+        }
+      }),
+      ...(data.taskList || []).map(item => {
+        return {
+          ...item,
+          calendarType: 2,
+        }
+      }),
+    ]
+    planCalendarList.value = newData
   })
 }
 
@@ -420,6 +525,16 @@ onActivated(() => {
   top: 6px;
 }
 
+.taskDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #ff7300;
+  margin: auto;
+  position: relative;
+  top: 6px;
+}
+
 .toBeCompleted {
   background: rgba($color: #F38B3C, $alpha: .1);
   border-color: #F38B3C;
@@ -432,6 +547,24 @@ onActivated(() => {
   color: #07C160;
 }
 
+.infos {
+  background: rgba($color: #909399, $alpha: .1);
+  border-color: #909399;
+  color: #909399;
+}
+
+.primarys {
+  background: rgba($color: #075985, $alpha: .1);
+  border-color: #075985;
+  color: #075985;
+}
+
+.dangers {
+  background: rgba($color: #F56C6C, $alpha: .1);
+  border-color: #F56C6C;
+  color: #F56C6C;
+}
+
 .labelTag {
   font-size: 10px;
   padding: 3px 8px;

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/work/index.vue

@@ -28,7 +28,7 @@ import Footer from "@components/page/footer.vue";
 
 const userInfo = useInfoStore()
 const router = useRouterStore()
-const moduleList = ref(userInfo.modularList)
+const moduleList = ref((userInfo.modularList || []).filter((item) => item.path != '/biReport'))
 
 function toModuleList(item) {
   const jumpTo = routingInfos[item.path.replace('/', '')]
@@ -44,7 +44,7 @@ function toModuleList(item) {
 
 function returnImageAddress(rows) {
   const row = routingInfos[rows.path.replace('/', '')]
-  return row.moduleImage
+  return row?.moduleImage
 }
 
 useLifecycle({

fhKeeper/formulahousekeeper/customerBuler-crm-h5/vite.config.js

@@ -6,10 +6,9 @@ import { VantResolver } from "unplugin-vue-components/resolvers";
 import { postcssConfig } from "./postcss.config.js";
 
 // const target = 'http://192.168.2.40:10099';
-// const target = 'http://192.168.2.3:10010';
+const target = 'http://192.168.2.40:10010';
+// const target = 'http://1.94.62.58:10014';
 // const target = 'http://192.168.2.17:10010';
-const target = 'http://47.101.180.183:10014';
-// const target = 'http://47.100.37.243:10070';
 
 export default defineConfig({
   define: {

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/TaskModal/index.vue

@@ -104,13 +104,21 @@
             </el-form-item>
           </template>
         </template>
-        <el-form-item label="开始时间:" class="w50">
+        <!-- <el-form-item label="开始时间:" class="w50">
           <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
             :disabled="disabledList && disabledList.includes('startDate')" />
         </el-form-item>
         <el-form-item label="截止时间:" class="w50">
           <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
             :disabled="disabledList && disabledList.includes('endDate')" />
+        </el-form-item> -->
+        <el-form-item label="开始时间:" class="w50">
+          <el-date-picker v-model="form.startDate" type="datetime" placeholder="选择日期" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
+            :disabled="disabledList && disabledList.includes('startDate')"  />
+        </el-form-item>
+        <el-form-item label="截止时间:" class="w50">
+          <el-date-picker v-model="form.endDate" type="datetime" placeholder="选择日期" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
+            :disabled="disabledList && disabledList.includes('endDate')"  />
         </el-form-item>
       </el-form>
       <GenerateForm ref="generateFormRef" :data="generateFormData" :value="form" />
@@ -222,6 +230,20 @@ const form = ref<any>({});
 const formRef = ref<FormInstance>();
 const generateFormRef = ref<InstanceType<typeof GenerateForm>>();
 const generateFormData = ref<any>({ ...defaultGenerateFormData });
+
+function disableMinute() {
+  // 只允许选择 00 和 30 分钟
+  const allowed = [0, 30];
+  const disabled = [];
+  for (let i = 0; i < 60; i++) {
+    if (!allowed.includes(i)) {
+      disabled.push(i);
+    }
+  }
+  // return disabled;
+  return disabled;
+}
+
 function taskFormChange(e: any, field: 'customId' | 'businessOpportunityId' | 'orderId' | 'clueId') {
   const fieldMap = {
     'customId': 'customerId',

fhKeeper/formulahousekeeper/customerBuler-crm/src/components/TaskModal/taskFunction.ts

@@ -9,8 +9,8 @@ export async function createTask(submitData: any, isClose: boolean) : Promise<Ta
         const { executorId, startDate, endDate, repeatEndDate } = submitData;
         let params = {
             ...submitData,
-            startDate: startDate && dayjs(startDate).format('YYYY-MM-DD'),
-            endDate: endDate && dayjs(endDate).format('YYYY-MM-DD'),
+            startDate: startDate && dayjs(startDate).format('YYYY-MM-DD HH:mm'),
+            endDate: endDate && dayjs(endDate).format('YYYY-MM-DD HH:mm'),
             repeatEndDate: repeatEndDate && dayjs(repeatEndDate).format('YYYY-MM-DD')
         }
         if (executorId) {

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/api.ts

@@ -64,6 +64,8 @@ export const IMPORT_DATA = `${MOD}/importData`;//导入
 export const EXPORT_DATA = `${MOD}/exportData`;//按条件导出
 export const EXPORT_DATA_BY_TASK_ID = `${MOD}/exportDataByTaskIds`;//选中导出
 
+export const GET_TASK_LIST_BY_START_AND_END = `${MOD}/getTaskListByStartAndEnd` // 获取任务日历列表
+
 // 看板类型
 export const TABLE_VIEW = 'table'
 export const KANBAN_VIEW = 'view'

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/index.vue

@@ -240,7 +240,8 @@ const restartFrom = ref<any>({});
 const dateOfTheDay = ref<any>(dayjs().format('YYYY-MM-DD'))
 const isExistBusiness = sessionStorage.getItem("isExistBusiness");
 const businessLabel = isExistBusiness === "1" ? "商机" : "项目"; 
-const layoutSingleChoice = ref(TABLE_VIEW)
+const layoutSingleChoice = ref(TABLE_VIEW) // 表格视图
+// const layoutSingleChoice = ref(KANBAN_VIEW) // 日历视图
 
 function viewsSwitching() {
 
@@ -254,8 +255,8 @@ function submitForm(data: any, isClose: boolean) {
   const { executorId, startDate, endDate, repeatEndDate } = data;
   let params = {
     ...data,
-    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD'),
-    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD'),
+    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD HH:mm'),
+    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD HH:mm'),
     repeatEndDate: repeatEndDate && dayjs(repeatEndDate).format('YYYY-MM-DD')
   }
   if (executorId) {
@@ -307,8 +308,8 @@ function search() {
   const { startDate, endDate } = searchForm.value;
   let params = {
     ...searchForm.value,
-    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD 00:00:00'),
-    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD 23:59:59')
+    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD 00:00'),
+    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD 23:59')
   }
   post(PAGE_LIST, getFromValue(params)).then(({ data }) => {
     loading.value = false;

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/taskCalendar.vue

@@ -2,10 +2,10 @@
 
 <template>
   <div class="w-full h-full flex flex-col">
-    <div class="flex-1">
+    <div class="flex-1" v-loading="calendarLoading">
       <FullCalendar ref="calendarRef" :options="calendarOptions" class="h-full w-full">
         <template v-slot:eventContent='arg'>
-          <div>{{ arg.event.title }}123321</div>
+          <div>{{ arg.event.title }}</div>
         </template>
       </FullCalendar>
     </div>
@@ -13,19 +13,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import zhCnLocale from '@fullcalendar/core/locales/zh-cn' 
+import { post, uploadFile } from '@/utils/request';
+import { GET_TASK_LIST_BY_START_AND_END } from './api'
+import { formatDate, getFirstDayOfMonth, getLastDayOfMonth } from '@/utils/times';
+import { dayjs } from 'element-plus';
 
 // 当前选中的视图
 const currentView = ref('dayGridMonth')
-
 // 日历实例引用
 const calendarRef = ref()
 
+const dateForm = ref({
+  startDate: getFirstDayOfMonth(new Date()),
+  endDate: getLastDayOfMonth(new Date())
+})
+const calendarListData = ref([])
+const calendarLoading = ref(false)
+
 // FullCalendar 配置
 const calendarOptions = ref<any>({
   plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
@@ -34,16 +44,55 @@ const calendarOptions = ref<any>({
   slotMinTime: '06:00:00',  // 最早显示时间
   slotMaxTime: '22:00:00',  // 最晚显示时间
   slotDuration: '00:30:00', // 30分钟一格（timeGrid生效）
-  events: [
-    { title: '早会', start: '2025-03-16T09:00:00', end: '2025-03-20T10:00:00' },
-    { title: '午休', start: '2025-03-20T12:00:00', end: '2025-03-20T13:00:00' },
-    { title: 'AAA', start: '2025-03-17T12:00:00', end: '2025-03-19T13:00:00' },
-  ],
+  events: [],
   headerToolbar: {  // 自定义头部
     left: 'today,prev,next',  // 左侧按钮：上一页，下一页，今天
     center: 'title',
     right: 'dayGridMonth,timeGridWeek,timeGridDay'  // 右侧显示视图切换按钮
+  },
+  datesSet: (arg: any) => { // 📌 每次切换视图或日期都会触发
+    const { startStr = '', endStr = '' } = arg
+    if (startStr && endStr) {
+      dateForm.value = {
+        startDate: startStr,
+        endDate: endStr,
+      }
+      getTaskCalendar()
+    }
+  }
+})
+
+// 重新渲染表格数据
+function renderTableData() {
+  calendarOptions.value = {
+    ...calendarOptions.value,
+    events: (calendarListData.value || []).map((item: any) => {
+      return {
+        ...item,
+        start: item.startDate,
+        end: item.endDate,
+        title: item.taskName
+      }
+    })
   }
+}
+
+function getTaskCalendar() {
+  const { startDate, endDate } = dateForm.value
+  calendarLoading.value = true
+  post(GET_TASK_LIST_BY_START_AND_END, {
+    startDate: dayjs(startDate).format('YYYY-MM-DD'),
+    endDate: dayjs(endDate).format('YYYY-MM-DD')
+  }).then((res) => {
+    calendarListData.value = res.data || []
+    renderTableData()
+  }).finally(() => {
+    calendarLoading.value = false
+  })
+}
+
+onMounted(() => {
+  getTaskCalendar()
 })
 
 </script>