dbd-meeting-html/src/views/admin/meeting/MeetingMangerList.vue

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md='5' :sm='15'>
            <a-form-item label='预约时间'>
              <a-date-picker :default-value='nowDate' @change="chooseDate" :disabled-date="disabledDate" />
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='15'>
            <a-form-item label='所在楼层'>
              <a-select v-model='queryParam.typeName'>
                <a-select-option v-for='item in typeList' :value='item.value'>
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='15'>
            <a-form-item label='排列形状'>
              <a-select v-model='queryParam.shape' placeholder='请选择排列形状'>
                <a-select-option v-for='item in shapeList' :value='item.value'>
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='15'>
            <a-form-item label='容纳人数'>
              <a-select v-model='queryParam.capacityNum' placeholder='请选择范围'>
                <a-select-option value=''>
                  全部
                </a-select-option>
                <a-select-option value='1'>
                  0-20
                </a-select-option>
                <a-select-option value='2'>
                  21-50
                </a-select-option>
                <a-select-option value='3'>
                  51-100
                </a-select-option>
                <a-select-option value='4'>
                  100以上
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="getAllRoomList">查询会议室</a-button>
<!--              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
      <div class="room">
        <div class="roomItem" v-for="item in roomList">
          <div class="title">
            {{ item.name }}
          </div>
          <div class="nav">
            <div class="nav-item" v-for="room in item.list" :key="room.id">
              <div class="desc">
                {{ room.name }}
              </div>
              <div class="am" v-if='room.am == 0'>上午</div>
              <div class="am disabled" v-if='room.am == 1'>上午</div>
              <div class="am disabled">上午</div>
              <div class="pm">下午</div>
              <div class="night">晚上</div>
              <div class="desc-item">
                {{ room.capacityNum }}人&nbsp;{{ room.typeName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getAllRoom } from '@/api/admin/meeting/meetingReservation'
import {
  getRoomContentList, delRoomContent, selectSearchInfoByType,
  selectSearchInfoByShape, selectSearchInfoByCapacity, addRoomServe,
  selectRoomServeByRoom, selectRoomItemByRoom, getMeetingDict
} from '@/api/admin/meeting/roomContent'

import moment from 'moment'

export default {
  name: 'MeetingMangerList',
  data () {
    return {
      nowDate: moment().format('YYYY-MM-DD'), // 当前日期
      form: this.$form.createForm(this),
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        meetingName: '',
        typeName: '',
        shape: '',
        capacityNum: ''
      },
      capacityList: [],
      shapeList: [],
      typeList: [],
      roomList: []
      // 表头
    }
  },
  created () {
    this.getAllRoomList()
  },
  mounted() {
    this.getDict()
  },
  methods: {
    chooseDate(date, dateString) {
      this.nowDate = dateString
    },
    disabledDate(current) {
      return current < moment().startOf('day') || current > moment().add(14, 'days')
    },
    // 获取查询参数
    getDict() {
      getMeetingDict().then((res) => {
        // 楼层
        let _typeList = []
        let dataObj = res.data
        for (let key in dataObj.floors) {
          let eachObj = dataObj.floors[key]
          const keys = Object.keys(eachObj)
          _typeList.push({
            text: keys[0],
            value: keys[0]
          })
        }
        _typeList = [{
          text: '全部',
          value: ''
        }, ..._typeList]
        this.typeList = _typeList

        // 形状
        let _shapeList = []
        for (let key in dataObj.types) {
          let eachObj = dataObj.types[key]
          const keys = Object.keys(eachObj)
          _shapeList.push({
            text: keys[0],
            value: keys[0]
          })
        }
        _shapeList = [{
          text: '全部',
          value: ''
        }, ..._shapeList]
        this.shapeList = _shapeList
      })
    },
    reset() {
      this.queryParam = {
        meetingName: '',
        typeName: '',
        shape: '',
        capacityNum: ''
      }
      this.getAllRoomList()
    },
    toMeetingList (item) {
      this.$router.push({ name: 'reservation', params: { roomId: item.name } })
    },
    getAllRoomList () {
      getAllRoom({ timeFormat: 0, min: 1, max: 1000 }).then(res => {
        const roomArr = {}
        const valueObj = res.data
        // eslint-disable-next-line no-unused-vars
        for (const key in valueObj) {
          const eachObj = valueObj[key]
          if (eachObj['floorId'] in roomArr) {
          } else {
            roomArr[eachObj['floorId']] = {
              name: eachObj['floor'],
              list: []
            }
          }
          roomArr[eachObj['floorId']]['list'].push(eachObj)
        }
        this.roomList = roomArr
        console.log(this.roomList)
      })
    }
  }
}
</script>

<style scoped>
.room {
  border-top: 1px solid rgb(221 215 215 / 65%);
}
.room .title {
  font-size: 32px;
  font-weight: 700;
}
.roomItem {
  margin-top: 20px;
}

.roomItem .desc {
  width: 150px;
  height: 30px;
  //background-color: #A3CDFF;
  //border-radius: 10px 10px 0 0px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
  font-weight: 700;
}
.roomItem .am, .roomItem .pm, .roomItem .night{
  width: 150px;
  height: 30px;
  background-color: #A3CDFF;
  //border-radius: 10px 10px 0 0px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  margin-top: 2px;
  cursor: pointer;
}
.roomItem .disabled {
  background-color: #F2F2F2 !important;
}
.roomItem .desc-item {
  width: 150px;
  height: 30px;
  background-color: #D8E9FC;
  line-height: 30px;
  text-align: center;
}

.desc-item .num {
  padding-left: 10px;
}

.desc-item .shape {
  padding-right: 10px;
}

.disabled {
  background-color: #F2F2F2 !important;
}

.nav {
  display: flex;
}

.nav-item {
  margin-left: 20px;
}

</style>