|
|
@@ -24,21 +24,18 @@
|
|
|
</div>
|
|
|
<div class="schedule-list">
|
|
|
<div class="item" v-for="(item, index) in state.TodayScheduleData" :key="index">
|
|
|
- <el-icon v-if="item.status==1" class="icon" @click="changeStatus(item)"> <ele-CircleCheck /> </el-icon>
|
|
|
- <el-icon v-else class=" icon" @click="changeStatus(item)"> <ele-Edit /> </el-icon>
|
|
|
+ <el-icon v-if="item.status == 1" class="icon" @click="changeStatus(item)"> <ele-CircleCheck /> </el-icon>
|
|
|
+ <el-icon v-else class="icon" @click="changeStatus(item)"> <ele-Edit /> </el-icon>
|
|
|
|
|
|
<span class="content" style="padding-left: 10px" @click="openEditSchedule(item)">
|
|
|
- <span>
|
|
|
- {{ item.starTime }} - {{ item.endTime }}
|
|
|
- </span>
|
|
|
- <span :class="item.status==1?'finish':'no'" style="padding-left: 15px; font-weight: 600; color: var(--el-color-primary)">
|
|
|
+ <span> {{ item.startTime }} - {{ item.endTime }} </span>
|
|
|
+ <span :class="item.status == 1 ? 'finish' : 'no'" style="padding-left: 15px; font-weight: 600; color: var(--el-color-primary)">
|
|
|
{{ item.content }}
|
|
|
</span>
|
|
|
</span>
|
|
|
- <span style="float: right;">
|
|
|
+ <span style="float: right">
|
|
|
<el-icon class="icon" @click="delItem(item)"> <ele-CircleClose /> </el-icon>
|
|
|
</span>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -47,297 +44,303 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- export default {
|
|
|
- title: '日程',
|
|
|
- icon: 'ele-Odometer',
|
|
|
- description: '日程演示',
|
|
|
- };
|
|
|
+export default {
|
|
|
+ title: '日程',
|
|
|
+ icon: 'ele-Odometer',
|
|
|
+ description: '日程演示',
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { reactive, onMounted, ref } from 'vue';
|
|
|
- import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
|
|
|
- import calendar from '/@/utils/calendar.js';
|
|
|
-
|
|
|
- import EditSchedule from '/@/views/home/widgets/components/scheduleEdit.vue';
|
|
|
-
|
|
|
- import { getAPI } from '/@/utils/axios-utils';
|
|
|
- import { SysScheduleApi } from '/@/api-services/api';
|
|
|
- import { SysSchedule } from '/@/api-services/models';
|
|
|
- import { stringify } from 'querystring';
|
|
|
-
|
|
|
- const editScheduleRef = ref<InstanceType<typeof EditSchedule>>();
|
|
|
- const state = reactive({
|
|
|
- ScheduleData: [] as Array<SysSchedule>, // 日程列表数据
|
|
|
- TodayScheduleData: [] as Array<SysSchedule>, // 当天列表数据
|
|
|
- calendarValue: new Date(),
|
|
|
- queryParams: {
|
|
|
- startTime: new Date(),
|
|
|
- endTime: new Date(),
|
|
|
- },
|
|
|
- editTitle: '',
|
|
|
- });
|
|
|
-
|
|
|
- // 页面初始化
|
|
|
- onMounted(async () => {
|
|
|
- await handleQuery();
|
|
|
- });
|
|
|
-
|
|
|
- // 查询操作
|
|
|
- const handleQuery = async () => {
|
|
|
- // debugger;
|
|
|
- state.queryParams.startTime = GetMonthFirstDay(state.calendarValue);
|
|
|
- state.queryParams.endTime = GetMonthLastDay(state.calendarValue);
|
|
|
-
|
|
|
- let params = Object.assign(state.queryParams);
|
|
|
- var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
|
|
|
- state.ScheduleData = res.data.result ?? [];
|
|
|
- if (state.ScheduleData.length > 0) {
|
|
|
- state.TodayScheduleData = state.ScheduleData.filter((item) => {
|
|
|
- return FormatDate(item.scheduleTime) == FormatDate(state.calendarValue);
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- // 删除
|
|
|
- const delItem = (row: any) => {
|
|
|
- ElMessageBox.confirm(`确定删日程：【${row.startTime}-${row.endTime}(${row.content})})】?`, '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
+import { reactive, onMounted, ref } from 'vue';
|
|
|
+import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import calendar from '/@/utils/calendar.js';
|
|
|
+
|
|
|
+import EditSchedule from '/@/views/home/widgets/components/scheduleEdit.vue';
|
|
|
+
|
|
|
+import { getAPI } from '/@/utils/axios-utils';
|
|
|
+import { SysScheduleApi } from '/@/api-services/api';
|
|
|
+import { SysSchedule } from '/@/api-services/models';
|
|
|
+
|
|
|
+const editScheduleRef = ref<InstanceType<typeof EditSchedule>>();
|
|
|
+const state = reactive({
|
|
|
+ ScheduleData: [] as Array<SysSchedule>, // 日程列表数据
|
|
|
+ TodayScheduleData: [] as Array<SysSchedule>, // 当天列表数据
|
|
|
+ calendarValue: new Date(),
|
|
|
+ queryParams: {
|
|
|
+ startTime: new Date(),
|
|
|
+ endTime: new Date(),
|
|
|
+ },
|
|
|
+ editTitle: '',
|
|
|
+});
|
|
|
+
|
|
|
+// 页面初始化
|
|
|
+onMounted(async () => {
|
|
|
+ await handleQuery();
|
|
|
+});
|
|
|
+
|
|
|
+// 查询操作
|
|
|
+const handleQuery = async () => {
|
|
|
+ // debugger;
|
|
|
+ state.queryParams.startTime = GetMonthFirstDay(state.calendarValue);
|
|
|
+ state.queryParams.endTime = GetMonthLastDay(state.calendarValue);
|
|
|
+
|
|
|
+ let params = Object.assign(state.queryParams);
|
|
|
+ var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
|
|
|
+ state.ScheduleData = res.data.result ?? [];
|
|
|
+ if (state.ScheduleData.length > 0) {
|
|
|
+ state.TodayScheduleData = state.ScheduleData.filter((item) => {
|
|
|
+ return FormatDate(item.scheduleTime) == FormatDate(state.calendarValue);
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 删除
|
|
|
+const delItem = (row: any) => {
|
|
|
+ console.log(row);
|
|
|
+ ElMessageBox.confirm(`确定删日程：${row.startTime}-${row.endTime}【${row.content}】?`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ await getAPI(SysScheduleApi).apiSysScheduleDeletePost(row);
|
|
|
+ await handleQuery();
|
|
|
+ ElMessage.success('删除成功');
|
|
|
})
|
|
|
- .then(async () => {
|
|
|
- await getAPI(SysScheduleApi).apiSysScheduleDeletePost(row);
|
|
|
- await handleQuery();
|
|
|
- ElMessage.success('删除成功');
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- };
|
|
|
- // 修改状态
|
|
|
- const changeStatus = async (row: any) => {
|
|
|
- await getAPI(SysScheduleApi)
|
|
|
- .apiSysScheduleSetStatusPost({ id: row.id, status: row.status == 1 ? 0 : 1 })
|
|
|
- .then(() => {
|
|
|
- row.status = row.status == 1 ? 0 : 1;
|
|
|
- ElMessage.success('日程状态设置成功');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- ElMessage.success('日程状态设置异常');
|
|
|
- });
|
|
|
- };
|
|
|
- // 农历转换
|
|
|
- const solarDate2lunar = (solarDate: any) => {
|
|
|
- var solar = solarDate.split('-');
|
|
|
- var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
|
|
|
- // return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn;
|
|
|
- return lunar.IMonthCn + lunar.IDayCn;
|
|
|
- };
|
|
|
-
|
|
|
- // 按天查询
|
|
|
- const handleQueryByDate = async (date: any) => {
|
|
|
- state.queryParams.startTime = FormatDateDelHMS(date);
|
|
|
- state.queryParams.endTime = FormatDateEndHMS(date);
|
|
|
- let params = Object.assign(state.queryParams);
|
|
|
- var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
|
|
|
- state.TodayScheduleData = res.data.result ?? [];
|
|
|
- };
|
|
|
-
|
|
|
- // 打开新增页面
|
|
|
- const openAddSchedule = () => {
|
|
|
- var timerange = GetRecentTime();
|
|
|
-
|
|
|
- state.editTitle = '添加日程';
|
|
|
- editScheduleRef.value?.openDialog({ id: undefined, status: 0, orderNo: 100, starTime: timerange.starTime, endTime: timerange.endTime });
|
|
|
- };
|
|
|
-
|
|
|
- // 打开编辑页面
|
|
|
- const openEditSchedule = async (row: any) => {
|
|
|
- if (row.status == 1) return;
|
|
|
- state.editTitle = '编辑日程';
|
|
|
- editScheduleRef.value?.openDialog(row, true);
|
|
|
- };
|
|
|
-
|
|
|
- // 点击日历中的日期
|
|
|
- const handleClickDate = async (data: any) => {
|
|
|
- await handleQueryByDate(data.day);
|
|
|
- };
|
|
|
- // 获取当月第一天
|
|
|
- const GetMonthFirstDay = (date: any) => {
|
|
|
- var newDate = new Date(date);
|
|
|
- newDate.setDate(1);
|
|
|
- newDate.setHours(0);
|
|
|
- newDate.setMinutes(0);
|
|
|
- newDate.setSeconds(0);
|
|
|
- return newDate;
|
|
|
- };
|
|
|
- // 获取当月最后一天
|
|
|
- const GetMonthLastDay = (date: any) => {
|
|
|
- var newDate = new Date(date);
|
|
|
- newDate.setMonth(newDate.getMonth() + 1);
|
|
|
- newDate.setDate(0);
|
|
|
- newDate.setHours(0);
|
|
|
- newDate.setMinutes(0);
|
|
|
- newDate.setSeconds(0);
|
|
|
- return newDate;
|
|
|
- };
|
|
|
-
|
|
|
- // 去掉时分秒的日期
|
|
|
- const FormatDateDelHMS = (date: any) => {
|
|
|
- var newDate = new Date(date);
|
|
|
- newDate.setHours(0);
|
|
|
- newDate.setMinutes(0);
|
|
|
- newDate.setSeconds(0);
|
|
|
- return newDate;
|
|
|
- };
|
|
|
-
|
|
|
- const FormatDateEndHMS = (date: any) => {
|
|
|
- var newDate = new Date(date);
|
|
|
- newDate.setHours(23);
|
|
|
- newDate.setMinutes(59);
|
|
|
- newDate.setSeconds(59);
|
|
|
- return newDate;
|
|
|
- };
|
|
|
-
|
|
|
- // 格式化日期
|
|
|
- const FormatDate = (date: any) => {
|
|
|
- return dayjs(date).format('YYYY-MM-DD');
|
|
|
- };
|
|
|
- //获取最近的初始时间 EndTime默认为StarTime + 1(hour)
|
|
|
- const GetRecentTime = () => {
|
|
|
- var date = new Date();
|
|
|
- //计算最近的开始时间
|
|
|
- var currentHour = date.getHours();
|
|
|
- var currentMin = date.getMinutes();
|
|
|
-
|
|
|
- var starHour = dayjs(date).format('HH');
|
|
|
- var endHour = dayjs(date).format('HH');
|
|
|
- var starMin = '00';
|
|
|
- var endMin = '00';
|
|
|
- //如果当前时间已经23 那么starHour和endHour都是23
|
|
|
- if (currentHour == 23) {
|
|
|
- starHour = '23';
|
|
|
- endHour = '23';
|
|
|
- starMin = '00';
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+
|
|
|
+// 修改状态
|
|
|
+const changeStatus = async (row: any) => {
|
|
|
+ await getAPI(SysScheduleApi)
|
|
|
+ .apiSysScheduleSetStatusPost({ id: row.id, status: row.status == 1 ? 0 : 1 })
|
|
|
+ .then(() => {
|
|
|
+ row.status = row.status == 1 ? 0 : 1;
|
|
|
+ ElMessage.success('日程状态设置成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage.success('日程状态设置异常');
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 农历转换
|
|
|
+const solarDate2lunar = (solarDate: any) => {
|
|
|
+ var solar = solarDate.split('-');
|
|
|
+ var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
|
|
|
+ // return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn;
|
|
|
+ return lunar.IMonthCn + lunar.IDayCn;
|
|
|
+};
|
|
|
+
|
|
|
+// 按天查询
|
|
|
+const handleQueryByDate = async (date: any) => {
|
|
|
+ state.queryParams.startTime = FormatDateDelHMS(date);
|
|
|
+ state.queryParams.endTime = FormatDateEndHMS(date);
|
|
|
+ let params = Object.assign(state.queryParams);
|
|
|
+ var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
|
|
|
+ state.TodayScheduleData = res.data.result ?? [];
|
|
|
+};
|
|
|
+
|
|
|
+// 打开新增页面
|
|
|
+const openAddSchedule = () => {
|
|
|
+ var timerange = GetRecentTime();
|
|
|
+
|
|
|
+ state.editTitle = '添加日程';
|
|
|
+ editScheduleRef.value?.openDialog({ id: undefined, status: 0, orderNo: 100, startTime: timerange.startTime, endTime: timerange.endTime });
|
|
|
+};
|
|
|
+
|
|
|
+// 打开编辑页面
|
|
|
+const openEditSchedule = async (row: any) => {
|
|
|
+ if (row.status == 1) return;
|
|
|
+ state.editTitle = '编辑日程';
|
|
|
+ editScheduleRef.value?.openDialog(row, true);
|
|
|
+};
|
|
|
+
|
|
|
+// 点击日历中的日期
|
|
|
+const handleClickDate = async (data: any) => {
|
|
|
+ await handleQueryByDate(data.day);
|
|
|
+};
|
|
|
+
|
|
|
+// 获取当月第一天
|
|
|
+const GetMonthFirstDay = (date: any) => {
|
|
|
+ var newDate = new Date(date);
|
|
|
+ newDate.setDate(1);
|
|
|
+ newDate.setHours(0);
|
|
|
+ newDate.setMinutes(0);
|
|
|
+ newDate.setSeconds(0);
|
|
|
+ return newDate;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取当月最后一天
|
|
|
+const GetMonthLastDay = (date: any) => {
|
|
|
+ var newDate = new Date(date);
|
|
|
+ newDate.setMonth(newDate.getMonth() + 1);
|
|
|
+ newDate.setDate(0);
|
|
|
+ newDate.setHours(0);
|
|
|
+ newDate.setMinutes(0);
|
|
|
+ newDate.setSeconds(0);
|
|
|
+ return newDate;
|
|
|
+};
|
|
|
+
|
|
|
+// 去掉时分秒的日期
|
|
|
+const FormatDateDelHMS = (date: any) => {
|
|
|
+ var newDate = new Date(date);
|
|
|
+ newDate.setHours(0);
|
|
|
+ newDate.setMinutes(0);
|
|
|
+ newDate.setSeconds(0);
|
|
|
+ return newDate;
|
|
|
+};
|
|
|
+
|
|
|
+const FormatDateEndHMS = (date: any) => {
|
|
|
+ var newDate = new Date(date);
|
|
|
+ newDate.setHours(23);
|
|
|
+ newDate.setMinutes(59);
|
|
|
+ newDate.setSeconds(59);
|
|
|
+ return newDate;
|
|
|
+};
|
|
|
+
|
|
|
+// 格式化日期
|
|
|
+const FormatDate = (date: any) => {
|
|
|
+ return dayjs(date).format('YYYY-MM-DD');
|
|
|
+};
|
|
|
+
|
|
|
+// 获取最近的初始时间 EndTime默认为StartTime + 1(hour)
|
|
|
+const GetRecentTime = () => {
|
|
|
+ var date = new Date();
|
|
|
+ // 计算最近的开始时间
|
|
|
+ var currentHour = date.getHours();
|
|
|
+ var currentMin = date.getMinutes();
|
|
|
+
|
|
|
+ var starHour = dayjs(date).format('HH');
|
|
|
+ var endHour = dayjs(date).format('HH');
|
|
|
+ var starMin = '00';
|
|
|
+ var endMin = '00';
|
|
|
+ // 如果当前时间已经23 那么starHour和endHour都是23
|
|
|
+ if (currentHour == 23) {
|
|
|
+ starHour = '23';
|
|
|
+ endHour = '23';
|
|
|
+ starMin = '00';
|
|
|
+ endMin = '45';
|
|
|
+ } else {
|
|
|
+ // 判断分钟数属于那个层级
|
|
|
+ if (currentMin < 15) {
|
|
|
+ starMin = '15';
|
|
|
+ endMin = '15';
|
|
|
+ // 计算结束时间
|
|
|
+ date.setHours(date.getHours() + 1);
|
|
|
+ endHour = dayjs(date).format('HH');
|
|
|
+ } else if (currentMin >= 15 && currentMin < 30) {
|
|
|
+ starMin = '30';
|
|
|
+ endMin = '30';
|
|
|
+
|
|
|
+ // 计算结束时间
|
|
|
+ date.setHours(date.getHours() + 1);
|
|
|
+ endHour = dayjs(date).format('HH');
|
|
|
+ } else if (currentMin >= 30 && currentMin < 45) {
|
|
|
+ starMin = '45';
|
|
|
endMin = '45';
|
|
|
- } else {
|
|
|
- //判断分钟数属于那个层级
|
|
|
- if (currentMin < 15) {
|
|
|
- starMin = '15';
|
|
|
- endMin = '15';
|
|
|
- //计算结束时间
|
|
|
- date.setHours(date.getHours() + 1);
|
|
|
- endHour = dayjs(date).format('HH');
|
|
|
- } else if (currentMin >= 15 && currentMin < 30) {
|
|
|
- starMin = '30';
|
|
|
- endMin = '30';
|
|
|
-
|
|
|
- //计算结束时间
|
|
|
- date.setHours(date.getHours() + 1);
|
|
|
- endHour = dayjs(date).format('HH');
|
|
|
- } else if (currentMin >= 30 && currentMin < 45) {
|
|
|
- starMin = '45';
|
|
|
- endMin = '45';
|
|
|
- //计算结束时间
|
|
|
- date.setHours(date.getHours() + 1);
|
|
|
- endHour = dayjs(date).format('HH');
|
|
|
- } else if (currentMin >= 45) {
|
|
|
- //分钟 : 00
|
|
|
- starMin = '00';
|
|
|
- endMin = '00';
|
|
|
-
|
|
|
- //开始时间+1
|
|
|
- date.setHours(date.getHours() + 1);
|
|
|
- starHour = dayjs(date).format('HH');
|
|
|
- //计算结束时间
|
|
|
- date.setHours(date.getHours() + 1);
|
|
|
- endHour = dayjs(date).format('HH');
|
|
|
- }
|
|
|
+ // 计算结束时间
|
|
|
+ date.setHours(date.getHours() + 1);
|
|
|
+ endHour = dayjs(date).format('HH');
|
|
|
+ } else if (currentMin >= 45) {
|
|
|
+ // 分钟 : 00
|
|
|
+ starMin = '00';
|
|
|
+ endMin = '00';
|
|
|
+
|
|
|
+ // 开始时间+1
|
|
|
+ date.setHours(date.getHours() + 1);
|
|
|
+ starHour = dayjs(date).format('HH');
|
|
|
+ // 计算结束时间
|
|
|
+ date.setHours(date.getHours() + 1);
|
|
|
+ endHour = dayjs(date).format('HH');
|
|
|
}
|
|
|
- return { starTime: starHour + ':' + starMin, endTime: endHour + ':' + endMin };
|
|
|
- };
|
|
|
+ }
|
|
|
+ return { startTime: starHour + ':' + starMin, endTime: endHour + ':' + endMin };
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .custome-canlendar {
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- :deep(.el-calendar) {
|
|
|
- .el-calendar-table .el-calendar-day {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .el-calendar__body {
|
|
|
- padding: 5px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-calendar-table .el-calendar-day {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- td .spandate {
|
|
|
- margin: auto;
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- td.is-selected .spandate {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- border-radius: 50%;
|
|
|
- color: #fff;
|
|
|
- background-color: var(--el-color-primary);
|
|
|
- }
|
|
|
- /*小红点样式*/
|
|
|
- .el-badge {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: -8px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+.custome-canlendar {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ :deep(.el-calendar) {
|
|
|
+ .el-calendar-table .el-calendar-day {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // 日程列表
|
|
|
- .schedule-list {
|
|
|
- overflow-y: auto;
|
|
|
- height: 150px;
|
|
|
- .item {
|
|
|
+ .el-calendar__body {
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-calendar-table .el-calendar-day {
|
|
|
position: relative;
|
|
|
- margin-bottom: 5px;
|
|
|
- padding: 0 11px;
|
|
|
- line-height: 24px;
|
|
|
- background-color: #f1f1f1;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 100%;
|
|
|
- content: '';
|
|
|
- width: 3px;
|
|
|
- background: var(--el-color-primary);
|
|
|
- }
|
|
|
-
|
|
|
- .date {
|
|
|
- margin-right: 5px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- color: #666;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .icon {
|
|
|
- display: inline;
|
|
|
- vertical-align: middle;
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- .finish {
|
|
|
- text-decoration: 3px solid line-through gray !important;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ td .spandate {
|
|
|
+ margin: auto;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ td.is-selected .spandate {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ background-color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ /*小红点样式*/
|
|
|
+ .el-badge {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -8px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 日程列表
|
|
|
+.schedule-list {
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 150px;
|
|
|
+ .item {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 0 11px;
|
|
|
+ line-height: 24px;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ content: '';
|
|
|
+ width: 3px;
|
|
|
+ background: var(--el-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ display: inline;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .finish {
|
|
|
+ text-decoration: line-through 2px var(--el-color-danger) !important;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
zuohuaijun