ref: 重构日程

src/views/home/i18n/en.ts

@@ -0,0 +1,10 @@
+export default {
+	home: {
+		addFavoriteRoutesTip: 'no data , right click on the tab to favorite',
+		quickNavigationToolsTip: 'quick navigation bar',
+		systemLogsTip: 'system logs',
+		auditLogsTip: 'audit logs',
+		moreTip: 'more',
+		newsletterTip: 'news letter',
+	},
+};

src/views/home/i18n/zh-cn.ts

@@ -0,0 +1,10 @@
+export default {
+	home: {
+		addFavoriteRoutesTip: '暂无数据,标签页右键收藏',
+		quickNavigationToolsTip: '快捷导航栏',
+		systemLogsTip: '系统日志',
+		auditLogsTip: '审计日志',
+		moreTip: '更多',
+		newsletterTip: '站内信',
+	},
+};

src/views/home/index.vue

@@ -3,6 +3,7 @@
 		<el-row :gutter="10">
 			<el-col :span="16">
 				<el-row :gutter="10">
+					<!-- 基本信息 -->
 					<el-col :span="24">
 						<div class="home-card-item" v-loading="userLoading">
 							<el-row>
@@ -15,12 +16,12 @@
 								</el-col>
 								<el-col :span="4" :offset="14"> {{ formatDate(date, 'YYYY-mm-dd HH:MM:SS') }} </el-col>
 							</el-row>
-							<!--							{{ userData }}-->
 						</div>
 					</el-col>
+					<!-- 快捷导航栏 -->
 					<el-col :span="24">
 						<div class="home-card-item">
-							<div class="home-card-item-title">快捷导航工具</div>
+							<div class="home-card-item-title">{{ $t('home.quickNavigationToolsTip') }}</div>
 							<div class="home-monitor">
 								<div class="flex-warp" v-if="favoriteRoutes.length > 0">
 									<div class="flex-warp-item" v-for="(v, k) in favoriteRoutes" :key="k">
@@ -34,16 +35,17 @@
 										</div>
 									</div>
 								</div>
-								<el-empty v-else />
+								<el-empty :description="$t('home.addFavoriteRoutesTip')" v-else />
 							</div>
 						</div>
 					</el-col>
+					<!-- 系统日志 -->
 					<el-col :span="12">
 						<el-card class="box-card">
 							<template #header>
 								<div class="card-header">
-									<span>系统日志</span>
+									<span>{{ $t('home.systemLogsTip') }}</span>
-									<el-button link class="button" text @click="handleRoutr('log')">更多</el-button>
+									<el-button link class="button" text @click="handleRoutr('log')">{{ $t('home.moreTip') }}</el-button>
 								</div>
 							</template>
 							<el-timeline v-if="logState.dataList.length > 0">
@@ -53,12 +55,13 @@
 							</el-timeline>
 						</el-card>
 					</el-col>
+					<!-- 审计日志 -->
 					<el-col :span="12">
 						<el-card class="box-card">
 							<template #header>
 								<div class="card-header">
-									<span>审计日志</span>
+									<span>{{ $t('home.auditLogsTip') }}</span>
-									<el-button link class="button" text @click="handleRoutr('audit')">更多</el-button>
+									<el-button link class="button" text @click="handleRoutr('audit')">{{ $t('home.moreTip') }}</el-button>
 								</div>
 							</template>
 							<el-timeline v-if="auditState.dataList.length > 0">
@@ -73,38 +76,27 @@
 			</el-col>
 			<el-col :span="8">
 				<el-row>
+					<!-- 日程 -->
 					<el-col :span="24">
 						<el-card class="box-card">
 							<el-calendar v-model="calendar">
 								<template #date-cell="{ data }">
-									<div
+									<div style="width: 100%; height: 100%" @click="handleSchedule(data)">
-										:class="data.isSelected ? 'is-selected' : ''"
+										{{ data.day.split('-').slice(2).join('-') }}
-										style="width: 100%; height: 100%"
+										<span v-if="filterCellSelected(data)">
-										@click="scheduleFormRef.openDialog(null, { date: formatDate(data.date, 'YYYY-mm-dd') })"
+											<el-icon><BellFilled /></el-icon>
-									>
+										</span>
-										{{ data.day.split('-').slice(1).join('-') }}
-										<ul class="events">
-											<li v-for="item in getListData(data.date)" :key="item.content">
-												<el-badge :value="item.title" :is-dot="true" />
-												{{ item.title }}
-											</li>
-										</ul>
 									</div>
 								</template>
 							</el-calendar>
-							<el-timeline style="margin-top: 20px" v-if="scheduleDataList.length > 0">
-								<el-timeline-item v-for="(item, index) in scheduleDataList" :key="index" :timestamp="item.time">
-									{{ item.title }} - {{ item.createBy }}
-								</el-timeline-item>
-							</el-timeline>
-							<el-empty v-else />
 						</el-card>
 					</el-col>
+					<!--  -->
 					<el-col :span="24">
 						<el-card class="box-card">
 							<template #header>
 								<div class="card-header">
-									<span>站内信</span>
+									<span>{{ $t('home.newsletterTip') }}</span>
 								</div>
 							</template>
 							<el-timeline v-if="newsList.length > 0">
@@ -118,13 +110,16 @@
 				</el-row>
 			</el-col>
 		</el-row>
-		<schedule-form ref="scheduleFormRef" @refresh="() => {}"></schedule-form>
+
+		<!-- 新增日程的表单 -->
+		<schedule-form ref="scheduleFormRef" @refresh="initscheduleList(formatDate(calendar, 'YYYY-mm'))" />
+		<!-- 日程查询 -->
+		<schedule ref="scheduleRef" />
 	</div>
 </template>
 
 <script setup lang="ts" name="home">
 import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useRouter } from 'vue-router';
 import { useUserInfo } from '/@/stores/userInfo';
@@ -132,16 +127,26 @@ import { useMsg } from '/@/stores/msg';
 import { BasicTableProps, useTable } from '/@/hooks/table';
 import { pageList } from '/@/api/admin/log';
 import { fetchList } from '/@/api/admin/audit';
-import { formatDate } from '/@/utils/formatTime';
+import { formatDate, parseDate } from '/@/utils/formatTime';
 import { getObj } from '/@/api/admin/user';
 import { list } from '/@/api/admin/schedule';
+const ScheduleForm = defineAsyncComponent(() => import('/@/views/home/schedule/form.vue'));
+const Schedule = defineAsyncComponent(() => import('/@/views/home/schedule/index.vue'));
+
 const router = useRouter();
 const storesTagsViewRoutes = useTagsViewRoutes();
-const storesThemeConfig = useThemeConfig();
+const { favoriteRoutes } = storeToRefs(storesTagsViewRoutes);
-const { themeConfig } = storeToRefs(storesThemeConfig);
+const userLoading = ref(false);
-const { isTagsViewCurrenFull, favoriteRoutes } = storeToRefs(storesTagsViewRoutes);
+const date = ref(new Date());
+const scheduleFormRef = ref();
+const scheduleRef = ref();
+const calendar = ref(new Date());
+const userData = ref({} as any);
+const scheduleDataList = ref([] as any);
 
-const ScheduleForm = defineAsyncComponent(() => import('/@/views/admin/schedule/form.vue'));
+const newsList = computed(() => {
+	return useMsg().getAllMsg();
+});
 
 const HandleRoute = (item: any) => {
 	router.push(item.path);
@@ -151,11 +156,6 @@ const handleCloseFavorite = (item: any) => {
 	storesTagsViewRoutes.delFavoriteRoutes(item);
 };
 
-const userLoading = ref(false);
-const date = ref(new Date());
-
-const scheduleFormRef = ref();
-
 setInterval(() => {
 	date.value = new Date();
 }, 1000);
@@ -172,17 +172,15 @@ const logState: BasicTableProps = reactive<BasicTableProps>({
 	},
 });
 
-useTable(logState);
-
 const auditState: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
 	pageList: fetchList,
 	descs: ['create_time'],
 });
 
-useTable(auditState);
+useTable(logState);
 
-const calendar = ref(new Date());
+useTable(auditState);
 
 watch(calendar, (val, oldval) => {
 	const newVal = formatDate(val, 'YYYY-mm');
@@ -192,12 +190,6 @@ watch(calendar, (val, oldval) => {
 	}
 });
 
-// 定义变量内容
-const userData = ref({} as any);
-const newsList = computed(() => {
-	return useMsg().getAllMsg();
-});
-
 onMounted(() => {
 	const data = useUserInfo().userInfos;
 	initUserInfo(data.user.userId);
@@ -216,20 +208,11 @@ const handleRoutr = (type) => {
 	}
 };
 
-const getListData = (date: any) => {
-	console.log(date, 'dadadadad');
-	const dataTime = formatDate(date, 'YYYY-mm-dd');
-	return scheduleDataList.value.filter((item) => {
-		return item.date === dataTime;
-	});
-};
-
 const initUserInfo = (userId: any) => {
 	userLoading.value = true;
 	getObj(userId)
 		.then((res) => {
 			userData.value = res.data;
-			console.log(res.data, 'data');
 			userData.value.postName = res.data.postList
 				.map((item) => {
 					return item.postName;
@@ -241,8 +224,6 @@ const initUserInfo = (userId: any) => {
 		});
 };
 
-const scheduleDataList = ref([] as any);
-
 const initscheduleList = (date) => {
 	list({
 		month: `${date}-01`,
@@ -250,6 +231,23 @@ const initscheduleList = (date) => {
 		scheduleDataList.value = res.data;
 	});
 };
+
+const filterCellSelected = (data) => {
+	return (
+		scheduleDataList.value.filter((item) => {
+			return item.date.indexOf(data.day) >= 0;
+		}).length > 0
+	);
+};
+
+const handleSchedule = (data) => {
+	//如果当前日期下日程为空则打开form
+	if (filterCellSelected(data)) {
+		scheduleRef.value.open({ date: parseDate(data.date, null) });
+	} else {
+		scheduleFormRef.value.openDialog(null, { date: parseDate(data.date, null) });
+	}
+};
 </script>
 
 <style scoped lang="scss">

src/views/home/schedule/calendar.vue

@@ -0,0 +1,3 @@
+<template></template>
+
+<script setup lang="ts" name="SysScheduleCakebdar"></script>

src/views/home/schedule/form.vue

@@ -25,7 +25,7 @@
 				</el-col>
 				<el-col :span="12" class="mb20">
 					<el-form-item :label="t('schedule.date')" prop="date">
-						<el-date-picker type="datetime" :placeholder="t('schedule.inputDateTip')" v-model="form.date" :value-format="dateStr"></el-date-picker>
+						<el-date-picker type="date" :placeholder="t('schedule.inputDateTip')" v-model="form.date" :value-format="dateStr"></el-date-picker>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12" class="mb20">

src/views/home/schedule/i18n/zh-cn.ts

@@ -4,7 +4,7 @@ export default {
         importsysScheduleTip: '导入日程',
         id: 'id',
         title: '标题',
-        type: '日程类型',
+        type: '类型',
         state: '状态',
         content: '内容',
         time: '时间',

src/views/home/schedule/index.vue

@@ -1,17 +1,19 @@
 <template>
-	<div class="layout-padding">
+	<el-drawer v-model="visible" title="日程管理" size="80%">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch" class="mb8">
 				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item :label="t('schedule.date')" prop="date">
+						<el-date-picker
+							type="date"
+							:placeholder="t('schedule.inputDateTip')"
+							v-model="state.queryForm.date"
+							:value-format="dateStr"
+						></el-date-picker>
+					</el-form-item>
 					<el-form-item :label="$t('schedule.title')" prop="title">
 						<el-input :placeholder="t('schedule.inputTitleTip')" v-model="state.queryForm.title" style="max-width: 180px" />
 					</el-form-item>
-					<el-form-item :label="$t('schedule.type')" prop="type">
-						<el-input :placeholder="t('schedule.inputTypeTip')" v-model="state.queryForm.type" style="max-width: 180px" />
-					</el-form-item>
-					<el-form-item :label="$t('schedule.createBy')" prop="createBy">
-						<el-input :placeholder="t('schedule.inputCreateByTip')" v-model="state.queryForm.createBy" style="max-width: 180px" />
-					</el-form-item>
 					<el-form-item class="ml2">
 						<el-button formDialogRef icon="search" type="primary" @click="getDataList">
 							{{ $t('common.queryBtn') }}
@@ -22,7 +24,14 @@
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button formDialogRef icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'admin_schedule_add'">
+					<el-button
+						formDialogRef
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog(null, state.queryForm)"
+						v-auth="'admin_schedule_add'"
+					>
 						{{ $t('common.addBtn') }}
 					</el-button>
 					<el-button formDialogRef icon="Download" type="primary" class="ml10" @click="exportExcel" v-auth="'admin_schedule_export'">
@@ -85,7 +94,7 @@
 
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-	</div>
+	</el-drawer>
 </template>
 
 <script setup lang="ts" name="systemSysSchedule">
@@ -100,10 +109,10 @@ const { schedule_type, schedule_status } = useDict('schedule_type', 'schedule_st
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 const { t } = useI18n();
-// 定义查询字典
-
 // 定义变量内容
 const formDialogRef = ref();
+const visible = ref(false);
+
 // 搜索变量
 const queryRef = ref();
 const showSearch = ref(true);
@@ -113,6 +122,7 @@ const multiple = ref(true);
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
+	createdIsNeed: false,
 	pageList: fetchList,
 });
 
@@ -156,4 +166,15 @@ const handleDelete = (ids: string[]) => {
 				});
 		});
 };
+
+const open = (row: any) => {
+	state.queryForm.date = row.date;
+	getDataList();
+	visible.value = true;
+};
+
+// 暴露变量
+defineExpose({
+	open,
+});
 </script>