日常计划模块

src/api/daily-plan.ts

@@ -1,8 +1,12 @@
 import request from "@/utils/request";
 
-const addDailyPlanUrl = "/admin/dailyPlan/addDailyPlan";
+const addDailyPlanUrl = "/admin/dailyPlan/saveOrUpdate";
+const getDailyPlanListUrl = "/admin/dailyPlan/getListByDate";
+const deleteByIdUrl = "/admin/dailyPlan/deleteById";
+const getPlanDateListUrl = "/admin/dailyPlan/getPlanDateList";
+const getTodoCountByDateUrl = "/admin/dailyPlan/getTodoCountByDate";
 
-export function addDailyPlan(param: any) {
+export function saveOrUpdate(param: any) {
 	return new Promise((resolve, reject) => {
 		request.postForm(addDailyPlanUrl, param).then((res: any) => {
 			resolve(res.data);
@@ -10,4 +14,44 @@ export function addDailyPlan(param: any) {
 			reject(err);
 		})
 	})
+}
+
+export function getDailyPlanList(date: string) {
+	return new Promise((resolve, reject) => {
+		request.postForm(getDailyPlanListUrl, {date}).then((res: any) => {
+			resolve(res.data);
+		}).catch(err => {
+			reject(err);
+		})
+	})
+}
+
+export function deleteById(id: string) {
+	return new Promise((resolve, reject) => {
+		request.postForm(deleteByIdUrl, {id}).then((res: any) => {
+			resolve(res.data);
+		}).catch(err => {
+			reject(err);
+		})
+	})
+}
+
+export function getPlanDateList(startDate: string, endDate: string) {
+	return new Promise((resolve, reject) => {
+		request.postForm(getPlanDateListUrl, {startDate, endDate}).then((res: any) => {
+			resolve(res.data);
+		}).catch(err => {
+			reject(err);
+		})
+	})
+}
+
+export function getTodoCountByDate(date: string) {
+	return new Promise((resolve, reject) => {
+		request.postForm(getTodoCountByDateUrl, {date}).then((res: any) => {
+			resolve(res.data);
+		}).catch(err => {
+			reject(err);
+		})
+	});
 }

src/views/home/index.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang='ts' setup>
-import {onMounted, reactive, ref, toRefs, watch} from 'vue'
+import {onMounted, ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useLoginStore} from '@/stores/user-info-store'
 import NumberChart from "./number-chart.vue";
@@ -68,6 +68,8 @@ import TimeChart from "./time-chart.vue";
 import TimeBarChart from "./time-bar-chart.vue";
 import WeekCalendar from "./week-calendar.vue";
 import SystemLogs from "@/components/system-logs.vue";
+import * as dailyPlanApi from "@/api/daily-plan";
+import {dateFormater} from "@/utils/date-util";
 
 
 const router = useRouter()
@@ -85,6 +87,19 @@ messages.value.push({
 	type: '公告',
 	content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'
 })
+
+onMounted(() => {
+	getTodoCount();
+})
+
+function getTodoCount() {
+	dailyPlanApi.getTodoCountByDate(dateFormater("yyyy-MM-dd", new Date())).then((res: any) => {
+		if (res.code == 0) {
+			total.value = res.data;
+		}
+	});
+}
+
 </script>
 
 <style lang='scss' scoped>

src/views/home/record-form.vue

@@ -39,8 +39,12 @@
 import {onMounted, reactive, ref} from 'vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {dateFormater} from "@/utils/date-util";
+import * as dailyPlanApi from "@/api/daily-plan";
 
-const emit = defineEmits(['close', 'saveData'])
+const emit = defineEmits(['close', 'saveData', "removeEvent"])
+defineExpose({
+	resetData
+})
 const typeOption = [
 	{label: '手术', value: '手术'},
 	{label: '会议', value: '会议'},
@@ -81,9 +85,6 @@ const formData = ref({
 })
 const isSaveBtn = ref(true);
 const isRemoveBtn = ref(true);
-defineExpose({
-	resetData
-})
 
 onMounted(() => {
 	formData.value = {
@@ -101,28 +102,45 @@ function close() {
 	emit('close')
 }
 
-function resetData(hasRmBtn: boolean, date?: string) {
+function resetData(hasRmBtn: boolean, date?: string, form?: any) {
 	formRef.value.resetFields()
-	Object.assign(formData.value, {
-		id: '',
-		title: '',
-		type: '',
-		status: '',
-		date: date ? date : '',
-		time: '',
-		content: ''
-	})
+	if (form) {
+		const tempForm = Object.assign({}, form);
+		const planDate = new Date(tempForm.date + " " + tempForm.time);
+		tempForm.date = planDate;
+		tempForm.time = planDate;
+		formData.value = tempForm;
+	} else {
+		Object.assign(formData.value, {
+			id: '',
+			title: '',
+			type: '',
+			status: '',
+			date: date ? date : '',
+			time: '',
+			content: ''
+		})
+	}
 	isRemoveBtn.value = hasRmBtn;
 }
 
 const saveData = () => {
 	formRef.value.validate((valid: any, fields: any) => {
 		if (valid) {
-			ElMessage.success('保存成功！');
 			const form = JSON.parse(JSON.stringify(formData.value));
 			form.time = dateFormater("HH:mm:ss", new Date(form.time));
-			emit('saveData', form);
-			close();
+			form.date = dateFormater("yyyy-MM-dd", new Date(form.date));
+			dailyPlanApi.saveOrUpdate(form).then((res: any) => {
+				if (res.code == 0) {
+					ElMessage.success('保存成功！');
+					emit('saveData', form);
+					close();
+				} else {
+					ElMessage.error(res.msg);
+				}
+			}).catch(error => {
+				ElMessage.error("服务端异常");
+			})
 		} else {
 			// console.log('error submit!', fields)
 		}
@@ -138,9 +156,17 @@ const removeData = () => {
 			draggable: true
 		}
 	).then(() => {
-		ElMessage.success('删除成功！')
-		close()
+		dailyPlanApi.deleteById(formData.value.id).then((res: any) => {
+			if (res.code == 0) {
+				ElMessage.success('删除成功！');
+				close();
+				emit("removeEvent");
+			} else {
+				ElMessage.error(res.msg);
+			}
+		});
 	}).catch(() => {
+		ElMessage.error("服务器异常");
 	})
 }
 </script>

src/views/home/week-calendar.vue

@@ -23,10 +23,11 @@
 					<th v-for="item in weekCn" :key="item">{{ item }}</th>
 				</tr>
 				<tr v-if="week.length > 0" class="">
-					<td v-for="item in week" :key="item" :class="{
-                        'record-mark': recordWeek.some((r: any) => dateFormater('yyyy-MM-dd', r.date) === dateFormater('yyyy-MM-dd', item)),
-                        'active': dateFormater('yyyy-MM-dd', item) === dateFormater('yyyy-MM-dd', currentDate)
-                    }">
+					<td v-for="item in week" :key="item"
+							:class="{
+								'record-mark': recordWeek.some((r: any) => r == dateFormater('yyyy-MM-dd', item)),
+								'active':
+								dateFormater('yyyy-MM-dd', item) == dateFormater('yyyy-MM-dd', currentDate)}">
                         <span :class="{
                             'text2-color': item.getDate() > week[6].getDate()
                         }" @click="setDate(item)">{{ dateFormater('dd', item) }}</span>
@@ -46,7 +47,7 @@
 					<p class="main-color" style="font-weight: 600;cursor: pointer;">{{
 							item.title
 						}}</p>
-					<p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
+					<p p class=" text2-color font14">{{ item.date + " " + item.time }}</p>
 				</div>
 				<el-icon class="remove-icon" @click.stop="remoteRecord(item, index)">
 					<Close/>
@@ -55,7 +56,8 @@
 		</div>
 
 		<el-dialog v-model="isRecordDialog" title="详情">
-			<RecordForm ref="recordFormRef" @close="isRecordDialog = false" @saveData="saveData"/>
+			<RecordForm ref="recordFormRef" @remove-event="planRemoveEvent" @close="isRecordDialog = false"
+									@saveData="saveData"/>
 		</el-dialog>
 	</div>
 </template>
@@ -65,6 +67,7 @@ import {onMounted, ref} from 'vue'
 import RecordForm from './record-form.vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {dateFormater, getDays, getFirstDayOfWeek} from '@/utils/date-util'
+import * as dailyPlanApi from "@/api/daily-plan";
 
 const monthCn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
 const weekCn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
@@ -110,38 +113,23 @@ function setMonthWeek() {
  * 获取一周的数据，然后给每天打 record-mark 标记
  */
 function setWeek(date: any) {
-	getWeekPlanList();
-
 	week.value = [];
 	setTimeout(() => {
 		for (let i = 0; i < 7; i++) {
 			week.value.push(getFirstDayOfWeek(date, i + 1));
 		}
+		getWeekPlanList(week.value[0], week.value[6]);
 	}, 0)
 }
 
-function getWeekPlanList() {
-	recordWeek.value = []
-	/*recordWeek.value = [
-		{
-			id: '1',
-			title: '月度会议',
-			type: '',
-			state: '',
-			date: getFirstDayOfWeek(e, 1),
-			time: getFirstDayOfWeek(e, 1),
-			content: '测试测试'
-		},
-		{
-			id: '2',
-			title: '手术提醒',
-			type: '',
-			state: '',
-			date: getFirstDayOfWeek(e, 4),
-			time: getFirstDayOfWeek(e, 4),
-			content: '测试测试'
+function getWeekPlanList(startDate: any, endDate: any) {
+	recordWeek.value = [];
+	dailyPlanApi.getPlanDateList(dateFormater("yyyy-MM-dd", startDate),
+		dateFormater("yyyy-MM-dd", endDate)).then((res: any) => {
+		if (res.code == 0) {
+			recordWeek.value = res.data;
 		}
-	]*/
+	});
 }
 
 const handleDatePickerOpen = () => {
@@ -150,10 +138,17 @@ const handleDatePickerOpen = () => {
 
 function setDate(e: Date) {
 	currentDate.value = e
+	getWeekPlanList(week.value[0], week.value[6]);
 	getDatePlanList();
 }
 
-function getDatePlanList() {}
+function getDatePlanList() {
+	dailyPlanApi.getDailyPlanList(dateFormater("yyyy-MM-dd", currentDate.value)).then((res: any) => {
+		if (res.code == 0) {
+			record.value = res.data;
+		}
+	});
+}
 
 const addRecord = () => {
 	const e = currentDate.value || new Date()
@@ -165,9 +160,7 @@ const addRecord = () => {
 const viewRecord = (e: any) => {
 	isRecordDialog.value = true
 	setTimeout(() => {
-		recordFormRef.value.resetData(true)
-		recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
-		// console.log(recordFormRef.value.formData)
+		recordFormRef.value.resetData(true, null, e);
 	}, 0)
 }
 const remoteRecord = (item: any, index: number) => {
@@ -180,16 +173,25 @@ const remoteRecord = (item: any, index: number) => {
 			draggable: true
 		}
 	).then(() => {
-		ElMessage.success('删除成功！')
-		recordWeek.value = recordWeek.value.filter((r: any) => r.id !== item.id)
-		setDate(item.date)
-	}).catch(() => {
+		dailyPlanApi.deleteById(item.id).then((res: any) => {
+			if (res.code == 0) {
+				ElMessage.success('删除成功！');
+				setDate(item.date);
+			} else {
+				ElMessage.error(res.msg);
+			}
+		}).catch(err => {
+			ElMessage.error("服务器异常");
+		})
 	})
 }
 const saveData = (e: any) => {
-	recordWeek.value.push(e);
 	setDate(new Date(e.date));
 }
+
+const planRemoveEvent = () => {
+	setDate(currentDate.value)
+}
 </script>
 
 <style lang='scss' scoped>