|
@@ -0,0 +1,659 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <a-card :bordered="false">
|
|
|
|
|
+ <div class="course-week">
|
|
|
|
|
+ <div class="week-top">
|
|
|
|
|
+ <div class="week-btn-wrap">
|
|
|
|
|
+ <span @click="getLastWeek">上周</span>
|
|
|
|
|
+ <span @click="getCurWeek">本周</span>
|
|
|
|
|
+ <span @click="getNextWeek">下周</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span class="w-today-date"> {{ todayDate }}</span>
|
|
|
|
|
+ <div class="w-choose-status">
|
|
|
|
|
+ <div v-for="sta in cardStatus">
|
|
|
|
|
+ <span class="square" :style="{ background: sta.color }"></span>
|
|
|
|
|
+ <span class="title">{{ sta.title }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="week-table">
|
|
|
|
|
+ <div class="table-header">
|
|
|
|
|
+ <div class="table-week">
|
|
|
|
|
+ <template v-for="(item, index) of weeks">
|
|
|
|
|
+ <span class="w-first" v-if="index === 0" :key="index">{{
|
|
|
|
|
+ item
|
|
|
|
|
+ }}</span>
|
|
|
|
|
+ <span v-else :key="index">{{ item }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="w-table-date">
|
|
|
|
|
+ <template v-for="(item, index) of months">
|
|
|
|
|
+ <span class="w-first" v-if="index === 0" :key="index"> </span>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <span
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ class="w-day-item"
|
|
|
|
|
+ :class="{ 'w-isCurDate': item && item.isCurDate }"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{
|
|
|
|
|
+ `${
|
|
|
|
|
+ item && item.isCurDate
|
|
|
|
|
+ ? (item && item.showDate + "(今天)") || ""
|
|
|
|
|
+ : (item && item.showDate) || ""
|
|
|
|
|
+ }`
|
|
|
|
|
+ }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="w-time-period-list">
|
|
|
|
|
+ <ul
|
|
|
|
|
+ class="w-time-period-row"
|
|
|
|
|
+ v-for="(i, i_index) in planList2"
|
|
|
|
|
+ :key="i_index"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!--循环时段,看时段有多少个-->
|
|
|
|
|
+ <template v-if="i.child && i.child.length > 0">
|
|
|
|
|
+ <li
|
|
|
|
|
+ class="w-time-period-col"
|
|
|
|
|
+ v-for="(period, p_index) in i.child"
|
|
|
|
|
+ :key="`period${p_index}`"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!--第一列显示时段-->
|
|
|
|
|
+ <div class="w-time-period">
|
|
|
|
|
+ <span v-if="p_index == 1" class="meeting-room-center">{{
|
|
|
|
|
+ i.meetingRoomName
|
|
|
|
|
+ }}</span
|
|
|
|
|
+ >{{ period.timePeriod }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 后面显示周一到周日的计划-->
|
|
|
|
|
+ <div class="w-row-day">
|
|
|
|
|
+ <!-- 循环显示每周的日期-->
|
|
|
|
|
+ <template v-for="(month, m_index) of months">
|
|
|
|
|
+ <!-- v-if="month" 去除数据处理的时候移除数组第一个为empty的问题-->
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="month"
|
|
|
|
|
+ :key="`month${m_index}`"
|
|
|
|
|
+ class="w-things"
|
|
|
|
|
+ @click="handleCardDetail(month, period)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- 循环每个时间段的计划-->
|
|
|
|
|
+ <template v-for="(card, t_index) of period.schedule">
|
|
|
|
|
+ <template
|
|
|
|
|
+ v-if="card.key == month.date"
|
|
|
|
|
+ v-for="(single, sIndex) in card.value"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div style="width: 80%">
|
|
|
|
|
+ <a-popover placement="rightTop">
|
|
|
|
|
+ <template slot="content">
|
|
|
|
|
+ <p>会议室:{{ i.meetingRoomName }}</p>
|
|
|
|
|
+ <p>会议主题:{{ single.roomSchedule.theme }}</p>
|
|
|
|
|
+ <p>公司名称:{{ single.roomSchedule.name }}</p>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 预定人:{{ single.roomSchedule.destinedName }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p>
|
|
|
|
|
+ 联系电话:{{ single.roomSchedule.mobile }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p>是否结账:未结账</p>
|
|
|
|
|
+ <p>备注:{{ single.roomSchedule.remark }}</p>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template slot="title">
|
|
|
|
|
+ <span>详情</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <div
|
|
|
|
|
+ :key="`thing${sIndex}`"
|
|
|
|
|
+ class="w-thing-item"
|
|
|
|
|
+ @click.stop="handleDetail(single)"
|
|
|
|
|
+ :style="{
|
|
|
|
|
+ background:
|
|
|
|
|
+ cardStatus[single.detail.status].color,
|
|
|
|
|
+ }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span>{{ single.theme }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </a-popover>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- <div class="w-noMore" v-else><span>暂无数据</span></div> -->
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <bus-meeting-room-schedule-modal
|
|
|
|
|
+ ref="modalForm"
|
|
|
|
|
+ @ok="modalFormOk"
|
|
|
|
|
+ ></bus-meeting-room-schedule-modal>
|
|
|
|
|
+ <bus-meeting-room-schedule-confirm-modal
|
|
|
|
|
+ ref="modalBusMeetingRoomScheduleConfirm"
|
|
|
|
|
+ @ok="modalFormOk"
|
|
|
|
|
+ ></bus-meeting-room-schedule-confirm-modal>
|
|
|
|
|
+ </a-card>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import "@/assets/less/TableExpand.less";
|
|
|
|
|
+// import { mixinDevice } from "@/utils/mixin";
|
|
|
|
|
+// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
|
|
|
|
|
+import { httpAction, getAction } from "@/api/manage";
|
|
|
|
|
+import BusMeetingRoomScheduleModal from "./modules/meetingRoomSchedule/BusMeetingRoomScheduleModal.vue";
|
|
|
|
|
+import BusMeetingRoomScheduleConfirmModal from "./modules/meetingRoomSchedule/BusMeetingRoomScheduleConfirmModal.vue";
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: "BusMeetingRoomList",
|
|
|
|
|
+ // mixins: [JeecgListMixin, mixinDevice],
|
|
|
|
|
+ components: {
|
|
|
|
|
+ BusMeetingRoomScheduleModal,
|
|
|
|
|
+ BusMeetingRoomScheduleConfirmModal,
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ const planList = [
|
|
|
|
|
+ {
|
|
|
|
|
+ timePeriod: "上午",
|
|
|
|
|
+ schedule: [
|
|
|
|
|
+ {
|
|
|
|
|
+ key: "2023-03-15",
|
|
|
|
|
+ value: [
|
|
|
|
|
+ {
|
|
|
|
|
+ theme: "大会议室",
|
|
|
|
|
+ status: 1,
|
|
|
|
|
+ meeting_room_schedule: {}, //预定信息实体
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ key: "2023-03-14",
|
|
|
|
|
+ value: [
|
|
|
|
|
+ {
|
|
|
|
|
+ theme: "大会议室",
|
|
|
|
|
+ status: 0,
|
|
|
|
|
+ meeting_room_schedule: {}, //预定信息实体
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ timePeriod: "下午",
|
|
|
|
|
+ schedule: [
|
|
|
|
|
+ {
|
|
|
|
|
+ key: "2023-03-15",
|
|
|
|
|
+ value: [
|
|
|
|
|
+ {
|
|
|
|
|
+ theme: "大会议室1111111111111111111111111",
|
|
|
|
|
+ status: 0,
|
|
|
|
|
+ meeting_room_schedule: {}, //预定信息实体
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ key: "2023-03-14",
|
|
|
|
|
+ value: [
|
|
|
|
|
+ {
|
|
|
|
|
+ theme: "大会议室",
|
|
|
|
|
+ status: 0,
|
|
|
|
|
+ meeting_room_schedule: {}, //预定信息实体
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ timePeriod: "晚上",
|
|
|
|
|
+ schedule: [],
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+ return {
|
|
|
|
|
+ isFirstDayOfMondayOrSunday: 1,
|
|
|
|
|
+ cardStatus: {
|
|
|
|
|
+ 0: {
|
|
|
|
|
+ title: "预定未确认",
|
|
|
|
|
+ color: "#3291F8",
|
|
|
|
|
+ },
|
|
|
|
|
+ 1: {
|
|
|
|
|
+ title: "预定已确认",
|
|
|
|
|
+ color: "#FF6200",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ weeks: ["时段", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
|
|
|
+ todayDate: "",
|
|
|
|
|
+ months: [],
|
|
|
|
|
+ curDate: "",
|
|
|
|
|
+ nowDate: new Date(),
|
|
|
|
|
+ planList2: [
|
|
|
|
|
+ // { meetingRoomName: "大会议", child: planList },
|
|
|
|
|
+ // { meetingRoomName: "大会议2", child: planList },
|
|
|
|
|
+ ],
|
|
|
|
|
+ startDate: "",
|
|
|
|
|
+ endDate: "",
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ isFirstDayOfMondayOrSunday: {
|
|
|
|
|
+ handler(val) {
|
|
|
|
|
+ if (val > 1) {
|
|
|
|
|
+ let arr = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
|
|
|
|
|
+ const arr1 = arr.slice(val - 1);
|
|
|
|
|
+ const arr2 = arr.slice(0, val - 1);
|
|
|
|
|
+ this.weeks = ["时段", ...arr1, ...arr2];
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ immediate: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.getCurWeek();
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {},
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ modalFormOk() {
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+ loadData() {
|
|
|
|
|
+ var _info = JSON.parse(localStorage.getItem("storeInfo"));
|
|
|
|
|
+ getAction("/business/busMeetingRoomSchedule/fetch", {
|
|
|
|
|
+ startDate: this.startDate,
|
|
|
|
|
+ endDate: this.endDate,
|
|
|
|
|
+ hotelId: _info.id,
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.planList2 = res.result;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 获取 时间
|
|
|
|
|
+ * @param time
|
|
|
|
|
+ */
|
|
|
|
|
+ getWeek(time) {
|
|
|
|
|
+ this.curDate = new Date(time);
|
|
|
|
|
+ //当前是周几
|
|
|
|
|
+ const whichDay = time.getDay();
|
|
|
|
|
+ let num = 0;
|
|
|
|
|
+ if (this.isFirstDayOfMondayOrSunday <= whichDay) {
|
|
|
|
|
+ num = this.isFirstDayOfMondayOrSunday;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ num = this.isFirstDayOfMondayOrSunday - 7;
|
|
|
|
|
+ }
|
|
|
|
|
+ const weekDay = time.getDay() - num;
|
|
|
|
|
+ time = this.addDate(time, weekDay * -1);
|
|
|
|
|
+ for (let i = 0; i < 7; i++) {
|
|
|
|
|
+ const { year, month, day } = this.formatDate(
|
|
|
|
|
+ i === 0 ? time : this.addDate(time, 1)
|
|
|
|
|
+ );
|
|
|
|
|
+ this.months.push({
|
|
|
|
|
+ date: `${year}-${month}-${day}`,
|
|
|
|
|
+ showDate: `${month}-${day}`,
|
|
|
|
|
+ timestamp: new Date(`${year}-${month}-${day}`).getTime(),
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.months.sort((a, b) => a.timestamp - b.timestamp);
|
|
|
|
|
+ delete this.months[0];
|
|
|
|
|
+ this.todayDate = `${this.months[1].date} ~ ${
|
|
|
|
|
+ this.months[this.months.length - 1].date
|
|
|
|
|
+ }`;
|
|
|
|
|
+
|
|
|
|
|
+ this.startDate = this.months[1].date + " 00:00:00";
|
|
|
|
|
+ this.endDate = this.months[this.months.length - 1].date + " 00:00:00";
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 处理日期
|
|
|
|
|
+ * @param date
|
|
|
|
|
+ * @param n
|
|
|
|
|
+ * @returns {*}
|
|
|
|
|
+ */
|
|
|
|
|
+ addDate(date, n) {
|
|
|
|
|
+ date.setDate(date.getDate() + n);
|
|
|
|
|
+ return date;
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 上周
|
|
|
|
|
+ */
|
|
|
|
|
+ getLastWeek() {
|
|
|
|
|
+ const date = this.addDate(this.curDate, -7),
|
|
|
|
|
+ { year, month, day } = this.formatDate(date),
|
|
|
|
|
+ dateObj = {
|
|
|
|
|
+ date: `${year}-${month}-${day}`,
|
|
|
|
|
+ timestamp: new Date(`${year}-${month}-${day}`).getTime(),
|
|
|
|
|
+ };
|
|
|
|
|
+ this.dealDate(date);
|
|
|
|
|
+ this.$emit("changeWeek", dateObj);
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 本周
|
|
|
|
|
+ */
|
|
|
|
|
+ getCurWeek() {
|
|
|
|
|
+ const { year, month, day } = this.formatDate(new Date()),
|
|
|
|
|
+ dateObj = {
|
|
|
|
|
+ date: `${year}-${month}-${day}`,
|
|
|
|
|
+ timestamp: new Date(`${year}-${month}-${day}`).getTime(),
|
|
|
|
|
+ };
|
|
|
|
|
+ this.dealDate(new Date());
|
|
|
|
|
+ this.$emit("changeWeek", dateObj);
|
|
|
|
|
+ },
|
|
|
|
|
+ //日期格式处理
|
|
|
|
|
+ formatDate(date) {
|
|
|
|
|
+ var year = date.getFullYear();
|
|
|
|
|
+ var months = date.getMonth() + 1;
|
|
|
|
|
+ var month = (months < 10 ? "0" + months : months).toString();
|
|
|
|
|
+ var day = (
|
|
|
|
|
+ date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
|
|
|
|
|
+ ).toString();
|
|
|
|
|
+ return {
|
|
|
|
|
+ year: year.toString(),
|
|
|
|
|
+ month,
|
|
|
|
|
+ day,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 获取当天时间
|
|
|
|
|
+ * @returns {string}
|
|
|
|
|
+ */
|
|
|
|
|
+ getCurDay(num = 0) {
|
|
|
|
|
+ var datetime = new Date();
|
|
|
|
|
+ var year = datetime.getFullYear();
|
|
|
|
|
+ var month =
|
|
|
|
|
+ datetime.getMonth() + 1 < 10
|
|
|
|
|
+ ? "0" + (datetime.getMonth() + 1)
|
|
|
|
|
+ : datetime.getMonth() + 1;
|
|
|
|
|
+ let day = datetime.getDate();
|
|
|
|
|
+ if (day + num > 0) {
|
|
|
|
|
+ day =
|
|
|
|
|
+ day + num < 10
|
|
|
|
|
+ ? "0" + (datetime.getDate() + num)
|
|
|
|
|
+ : datetime.getDate() + num;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ day =
|
|
|
|
|
+ day - num < 10
|
|
|
|
|
+ ? "0" + (datetime.getDate() - num)
|
|
|
|
|
+ : datetime.getDate() - num;
|
|
|
|
|
+ }
|
|
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 下周
|
|
|
|
|
+ */
|
|
|
|
|
+ getNextWeek() {
|
|
|
|
|
+ const date = this.addDate(this.curDate, 7),
|
|
|
|
|
+ { year, month, day } = this.formatDate(date),
|
|
|
|
|
+ dateObj = {
|
|
|
|
|
+ date: `${year}-${month}-${day}`,
|
|
|
|
|
+ timestamp: new Date(`${year}-${month}-${day}`).getTime(),
|
|
|
|
|
+ };
|
|
|
|
|
+ this.dealDate(date);
|
|
|
|
|
+ this.$emit("changeWeek", dateObj);
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 显示当天日期状态
|
|
|
|
|
+ * @param date
|
|
|
|
|
+ */
|
|
|
|
|
+ dealDate(date) {
|
|
|
|
|
+ this.months = [""];
|
|
|
|
|
+ this.getWeek(date);
|
|
|
|
|
+ const curDate = this.getCurDay();
|
|
|
|
|
+ this.months.forEach((item) => {
|
|
|
|
|
+ item.isCurDate = item.date === curDate;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 预定确认
|
|
|
|
|
+ * @param row
|
|
|
|
|
+ */
|
|
|
|
|
+ handleDetail(row) {
|
|
|
|
|
+ console.log("row", row);
|
|
|
|
|
+ this.$refs.modalBusMeetingRoomScheduleConfirm.edit(row);
|
|
|
|
|
+ this.$refs.modalBusMeetingRoomScheduleConfirm.title = "预定确认";
|
|
|
|
|
+ this.$refs.modalBusMeetingRoomScheduleConfirm.disableSubmit = false;
|
|
|
|
|
+ this.$refs.modalBusMeetingRoomScheduleConfirm.disableSubmit = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 预定登记
|
|
|
|
|
+ * @param month
|
|
|
|
|
+ * @param period
|
|
|
|
|
+ */
|
|
|
|
|
+ handleCardDetail(month, period) {
|
|
|
|
|
+ this.$refs.modalForm.add();
|
|
|
|
|
+ this.$refs.modalForm.title = "预定登记";
|
|
|
|
|
+ this.$refs.modalForm.disableSubmit = false;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+@import "~@assets/less/common.less";
|
|
|
|
|
+</style>
|
|
|
|
|
+<style>
|
|
|
|
|
+ul {
|
|
|
|
|
+ list-style: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ul,
|
|
|
|
|
+li {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.course-week {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ padding: 1%;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-top {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ padding: 0 1%;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-top .week-btn-wrap {
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-top .week-btn-wrap span {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-today-date {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-choose-status {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-choose-status > div {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ padding: 0 2%;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-choose-status > div .square {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 16px;
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-choose-status > div .title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ line-height: 16px;
|
|
|
|
|
+ padding-left: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-table {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-table .table-header {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ background: #eaedf2;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-bottom: 1px solid #eaedf2;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-header .w-table-date,
|
|
|
|
|
+.table-week {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.table-header .w-table-date > span,
|
|
|
|
|
+.table-week > span {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-table-date .w-day-item,
|
|
|
|
|
+.table-week .w-day-item {
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.week-table .w-time-period-list {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-time-period-list .w-time-period-row {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 60px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-time-period-col {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 60px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-time-period-col .w-time-period {
|
|
|
|
|
+ width: 12.5%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-left: 1px solid #eaedf2;
|
|
|
|
|
+ /* border-bottom: 1px solid #eaedf2; */
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+.w-time-period-col:last-child {
|
|
|
|
|
+ border-bottom: 1px solid #eaedf2;
|
|
|
|
|
+}
|
|
|
|
|
+.meeting-room-center {
|
|
|
|
|
+ transform: translate(-200%, 0%);
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ word-wrap: break-word;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-time-period-col .w-row-day {
|
|
|
|
|
+ width: 87.5%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-row-day .w-things {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-left: 1px solid #eaedf2;
|
|
|
|
|
+ border-bottom: 1px solid #eaedf2;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-row-day .w-things:last-child {
|
|
|
|
|
+ border-right: 1px solid #eaedf2;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-things .w-thing-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 80%;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ min-height: 50px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ margin: 2% 1%;
|
|
|
|
|
+ padding: 1% 2%;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background: #ff6200;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ transition: all 1s linear 0.5s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-isCurDate {
|
|
|
|
|
+ color: #ff2525 !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w-noMore {
|
|
|
|
|
+ min-height: 200px;
|
|
|
|
|
+ padding: 2%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border: 1px solid rgba(156, 173, 173, 0.3);
|
|
|
|
|
+ color: #9cadadb7;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.w_expand,
|
|
|
|
|
+.w_shrink {
|
|
|
|
|
+ color: #0a98d5;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 2% 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|