|
|
@@ -0,0 +1,993 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <a-tabs type="card" @change="tabsClick">
|
|
|
+ <a-tab-pane key="1" tab="全部房型"> </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="大床房"> </a-tab-pane>
|
|
|
+ <a-tab-pane key="3" tab="麻将房"> </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <div style="display: flex">
|
|
|
+ <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 class="w-choose-status">
|
|
|
+ <a-input-search
|
|
|
+ style="width: 300px; margin-left: 8px"
|
|
|
+ placeholder="房间号/姓名/手机号/身份证号"
|
|
|
+ enter-button="搜索"
|
|
|
+ v-model="keyWord"
|
|
|
+ type="danger"
|
|
|
+ @search="handleAdd"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="week-table">
|
|
|
+ <div id="components-grid-demo-playground" class="w-time-period-list">
|
|
|
+ <template v-for="(i, iIndex) in planList2">
|
|
|
+ <!--循环时段，看时段有多少个-->
|
|
|
+ <div
|
|
|
+ v-for="(period, cIndex) in i.child"
|
|
|
+ :key="`i${iIndex}-period${cIndex}`"
|
|
|
+ style="padding: 5px"
|
|
|
+ >
|
|
|
+ <p>
|
|
|
+ <span style="color: rgba(0, 186, 173, 1); font-weight: 600">
|
|
|
+ {{ i.meetingRoomName }}{{ period.timePeriod }}
|
|
|
+ </span>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <span style="padding-right: 5px"
|
|
|
+ >{{ period.count }}间：在住{{
|
|
|
+ period.checkInCount
|
|
|
+ }}间/空置{{ period.vacantCount }}间</span
|
|
|
+ >
|
|
|
+ <a-icon
|
|
|
+ type="right"
|
|
|
+ v-if="period.collapse == 0"
|
|
|
+ @click="collapseClick(period, 1)"
|
|
|
+ />
|
|
|
+ <a-icon
|
|
|
+ type="down"
|
|
|
+ v-else
|
|
|
+ @click="collapseClick(period, 0)"
|
|
|
+ />
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <a-row :gutter="[5, 5]" v-show="period.collapse == 1">
|
|
|
+ <a-col
|
|
|
+ v-for="(roomLive, roomLiveIndex) in period.schedule"
|
|
|
+ :key="`i${iIndex}-period${cIndex}roomLive${roomLiveIndex}`"
|
|
|
+ :span="3"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ background: cardStatus[roomLive.detail.status].color,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-popover placement="rightTop">
|
|
|
+ <template
|
|
|
+ slot="content"
|
|
|
+ v-if="roomLive.detail.status == 1"
|
|
|
+ >
|
|
|
+ <p>入住:{{ roomLive.detail.startDate }}</p>
|
|
|
+ <p>预离:{{ roomLive.detail.endDate }}</p>
|
|
|
+ <p>已住:{{ roomLive.detail.day }}晚 已付：600元</p>
|
|
|
+ <p>来源:{{ roomLive.detail.mobile }} 消费：300元</p>
|
|
|
+ <p>
|
|
|
+ 房价:{{ roomLive.detail.amout }}/晚 余额：{{
|
|
|
+ roomLive.detail.balance
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ <p>注:{{ roomLive.detail.remark }}</p>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ slot="title"
|
|
|
+ v-if="roomLive.detail.status == 1"
|
|
|
+ >
|
|
|
+ <p>
|
|
|
+ 客人姓名:{{ roomLive.detail.occupant }} 性别：男
|
|
|
+ </p>
|
|
|
+ <p>手机号:{{ roomLive.detail.mobile }}</p>
|
|
|
+ <p>同住人:{{ roomLive.detail.mobile }} 性别：女</p>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ slot="content"
|
|
|
+ v-if="roomLive.detail.status == 0"
|
|
|
+ >
|
|
|
+ <p>房态：{{ roomLive.detail.roomStatusName }}</p>
|
|
|
+ <p>备注：{{ roomLive.detail.remark }}</p>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ slot="title"
|
|
|
+ v-if="roomLive.detail.status == 0"
|
|
|
+ >
|
|
|
+ <span>{{ roomLive.detail.roomType }}</span
|
|
|
+ ><span>￥{{ roomLive.detail.amout }}/晚</span>
|
|
|
+ </template>
|
|
|
+ <a-dropdown :trigger="['contextmenu']">
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 2px;
|
|
|
+ "
|
|
|
+ >{{ roomLive.roomNo }}</span
|
|
|
+ >
|
|
|
+ {{ roomLive.detail.roomType }}
|
|
|
+ </div>
|
|
|
+ <template v-if="roomLive.detail.status == 1">
|
|
|
+ <div>
|
|
|
+ <span style="margin-right: 5px">{{
|
|
|
+ roomLive.detail.occupant
|
|
|
+ }}</span
|
|
|
+ ><a-tag
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ sourceType[roomLive.detail.source || 1]
|
|
|
+ .color,
|
|
|
+ }"
|
|
|
+ >携</a-tag
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ >{{ roomLive.detail.day }}天/{{
|
|
|
+ roomLive.detail.date
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ >￥{{ roomLive.detail.amout }}/付{{
|
|
|
+ roomLive.detail.payAmount
|
|
|
+ }}/余{{ roomLive.detail.balance }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <a-tag>订</a-tag
|
|
|
+ ><a-tag v-if="roomLive.detail.isGroup">团</a-tag>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div>
|
|
|
+ <span>￥{{ roomLive.detail.amout }}/晚</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ margin-top: 22px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>注:{{ roomLive.detail.remark }}</span>
|
|
|
+ </div>
|
|
|
+ <a-tag>订</a-tag>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <a-menu slot="overlay" @click="onMenuClick">
|
|
|
+ <a-menu-item key="1"> 入住 </a-menu-item>
|
|
|
+ <a-menu-item key="2"> 预定</a-menu-item>
|
|
|
+ <a-menu-item key="3"> 置脏 </a-menu-item>
|
|
|
+ <a-menu-item key="4"> 置维修 </a-menu-item>
|
|
|
+ <a-menu-item key="5"> 锁房 </a-menu-item>
|
|
|
+ <!-- <a-menu-item key="3"> 日志 </a-menu-item> -->
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ </a-popover>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 1%"></div>
|
|
|
+ <div style="width: 19%">
|
|
|
+ <a-button style="margin-bottom: 10px" @click="handleAdd" type="danger"
|
|
|
+ >批量制卡</a-button
|
|
|
+ >
|
|
|
+ <p style="font-size: 16px; font-weight: 600; color: rgb(0, 186, 173)">
|
|
|
+ 按楼层
|
|
|
+ </p>
|
|
|
+ <a-tree-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 100%"
|
|
|
+ :tree-data="treeData"
|
|
|
+ tree-checkable
|
|
|
+ :show-checked-strategy="SHOW_PARENT"
|
|
|
+ search-placeholder="Please select"
|
|
|
+ />
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgb(0, 186, 173);
|
|
|
+ margin-top: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 按房态
|
|
|
+ </p>
|
|
|
+ <a-checkbox-group @change="onChange">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="A"> 空净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="B"> 空脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="C"> 住净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="D"> 住脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="E"> 维修 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-checkbox-group>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgb(0, 186, 173);
|
|
|
+ margin-top: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 按来源
|
|
|
+ </p>
|
|
|
+ <a-checkbox-group @change="onChange">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="A"> 空净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="B"> 空脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="C"> 住净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="D"> 住脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="E"> 维修 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-checkbox-group>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgb(0, 186, 173);
|
|
|
+ margin-top: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 按房型
|
|
|
+ </p>
|
|
|
+ <a-checkbox-group @change="onChange">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="A"> 空净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="B"> 空脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="C"> 住净 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="D"> 住脏 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="E"> 维修 </a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <upkeep-room-modal ref="modalForm" @ok="modalFormOk"></upkeep-room-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 UpkeepRoomModal from "./modules/upkeep/UpkeepRoomModal.vue";
|
|
|
+import { TreeSelect } from "ant-design-vue";
|
|
|
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
+const treeData = [
|
|
|
+ {
|
|
|
+ title: "1栋",
|
|
|
+ value: "0-0",
|
|
|
+ key: "0-0",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "1层",
|
|
|
+ value: "0-0-0",
|
|
|
+ key: "0-0-0",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "2栋",
|
|
|
+ value: "0-1",
|
|
|
+ key: "0-1",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "1层",
|
|
|
+ value: "0-1-0",
|
|
|
+ key: "0-1-0",
|
|
|
+ // disabled: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "1层",
|
|
|
+ value: "0-1-1",
|
|
|
+ key: "0-1-1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "1层",
|
|
|
+ value: "0-1-2",
|
|
|
+ key: "0-1-2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+export default {
|
|
|
+ name: "BusMeetingRoomList",
|
|
|
+ // mixins: [JeecgListMixin, mixinDevice],
|
|
|
+ components: {
|
|
|
+ UpkeepRoomModal,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const planList = [
|
|
|
+ {
|
|
|
+ timePeriod: "1层",
|
|
|
+ count: 12,
|
|
|
+ checkInCount: 5,
|
|
|
+ vacantCount: 7,
|
|
|
+ collapse: 1,
|
|
|
+ schedule: [
|
|
|
+ {
|
|
|
+ roomNo: "1001",
|
|
|
+ detail: {
|
|
|
+ status: 0,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1002",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1003",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1004",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1005",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1006",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1007",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1008",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1009",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1010",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "1011",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ remark: "靠马路，噪音大",
|
|
|
+ roomStatusName: "空净",
|
|
|
+ startDate: "2023-03-20 18:00",
|
|
|
+ endDate: "2023-03-21 18:00",
|
|
|
+ source: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ timePeriod: "2层",
|
|
|
+ count: 12,
|
|
|
+ checkInCount: 5,
|
|
|
+ vacantCount: 7,
|
|
|
+ collapse: 1,
|
|
|
+ schedule: [
|
|
|
+ {
|
|
|
+ roomNo: "2001",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ roomNo: "2002",
|
|
|
+ detail: {
|
|
|
+ status: 1,
|
|
|
+ roomType: "高级商务大床房",
|
|
|
+ occupant: "张三",
|
|
|
+ day: 1,
|
|
|
+ date: "03-20",
|
|
|
+ amout: 300,
|
|
|
+ payAmount: 500,
|
|
|
+ balance: 200,
|
|
|
+ isGroup: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ timePeriod: "3层",
|
|
|
+ count: 0,
|
|
|
+ checkInCount: 0,
|
|
|
+ vacantCount: 0,
|
|
|
+ collapse: 1,
|
|
|
+ schedule: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ return {
|
|
|
+ keyWord:'',
|
|
|
+ value: ["0-0-0"],
|
|
|
+ treeData,
|
|
|
+ SHOW_PARENT,
|
|
|
+ cardStatus: {
|
|
|
+ 0: {
|
|
|
+ title: "空净",
|
|
|
+ color: "rgba(67, 207, 124, 1)",
|
|
|
+ },
|
|
|
+ 1: {
|
|
|
+ title: "在住",
|
|
|
+ color: "#00a0e9",
|
|
|
+ },
|
|
|
+ 2: {
|
|
|
+ title: "今日预离",
|
|
|
+ color: "rgba(10, 122, 114, 1)",
|
|
|
+ },
|
|
|
+ 3: {
|
|
|
+ title: "欠费",
|
|
|
+ color: "rgba(172, 51, 193, 1)",
|
|
|
+ },
|
|
|
+ 4: {
|
|
|
+ title: "锁房/脏房",
|
|
|
+ color: "rgba(128, 128, 128, 1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ sourceType: {
|
|
|
+ 0: {
|
|
|
+ title: "美团",
|
|
|
+ color: "rgba(67, 207, 124, 1)",
|
|
|
+ },
|
|
|
+ 1: {
|
|
|
+ title: "携程",
|
|
|
+ color: "#00a0e9",
|
|
|
+ },
|
|
|
+ 2: {
|
|
|
+ title: "飞猪",
|
|
|
+ color: "rgba(10, 122, 114, 1)",
|
|
|
+ },
|
|
|
+ 3: {
|
|
|
+ title: "去哪儿",
|
|
|
+ color: "rgba(172, 51, 193, 1)",
|
|
|
+ },
|
|
|
+ 4: {
|
|
|
+ title: "同程艺龙",
|
|
|
+ color: "rgba(128, 128, 128, 1)",
|
|
|
+ },
|
|
|
+ 5: {
|
|
|
+ title: "微信订房",
|
|
|
+ color: "rgba(128, 128, 128, 1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ planList2: [
|
|
|
+ {
|
|
|
+ meetingRoomName: "A栋",
|
|
|
+ child: planList,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ activeKey(key) {
|
|
|
+ console.log("activeKey", key);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 禁用右键
|
|
|
+ // document.oncontextmenu = new Function("event.returnValue=false");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange() {},
|
|
|
+ tabsClick() {},
|
|
|
+ collapseClick(row, value) {
|
|
|
+ this.$set(row, "collapse", value);
|
|
|
+ },
|
|
|
+ handleAdd(e) {
|
|
|
+ this.$refs.modalForm.add();
|
|
|
+ this.$refs.modalForm.title = "维修";
|
|
|
+ this.$refs.modalForm.disableSubmit = false;
|
|
|
+ },
|
|
|
+ onMenuClick(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.$refs.modalForm.add();
|
|
|
+ this.$refs.modalForm.title = "维修";
|
|
|
+ this.$refs.modalForm.disableSubmit = false;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+@import "~@assets/less/common.less";
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ul {
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+ul,
|
|
|
+li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.course-week {
|
|
|
+ width: 80%;
|
|
|
+ /* 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: 100%;
|
|
|
+ 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%; */
|
|
|
+ height: 135px;
|
|
|
+ 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>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+#components-grid-demo-playground [class~="ant-col"] {
|
|
|
+ background: transparent;
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+#components-grid-demo-playground [class~="ant-col"] > div {
|
|
|
+ background: rgba(67, 207, 124, 1);
|
|
|
+ height: 125px;
|
|
|
+ /* line-height: 200px; */
|
|
|
+ font-size: 13px;
|
|
|
+ color: #f9f9f9;
|
|
|
+ padding: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+#components-grid-demo-playground pre {
|
|
|
+ background: #f9f9f9;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 8px 16px;
|
|
|
+}
|
|
|
+</style>
|
gqx