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-select v-model="queryParam.status">
                <a-select-option value="1">
                  取消
                </a-select-option>
                <a-select-option value="3">
                  驳回
                </a-select-option>
                <a-select-option value="4">
                  占用
                </a-select-option>
                <a-select-option value="5">
                  待审核
                </a-select-option>
                <a-select-option value="7">
                  审核通过
                </a-select-option>
                <a-select-option value="9">
                  进行中
                </a-select-option>
                <a-select-option value="11">
                  已结束
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="会议室名称">
              <a-input placeholder="会议室名称" v-model="queryParam.roomName" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="设备">
              <a-input placeholder="设备" v-model="queryParam.deviceId" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="人数">
              <a-input placeholder="请输人数" v-model="queryParam.num" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="15">
            <a-form-item label="形式">
              <a-input placeholder="请输入形式" v-model="queryParam.parkId" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a-button type="primary" style="margin-left: 450px">会议预约</a-button>
              <a-button type="success" style="margin-left: 8px">占用</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="desc disabled"  >-->
<!--                {{ room.name }}-->
<!--              </div>-->
              <div class="desc-item">
                <div class="num">
                  {{ room.capacityNum }}人
                </div>
                <div class="shape">
                  {{room.typeName}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getAllRoom } from '@/api/admin/meeting/meetingReservation'

export default {
  name: 'MeetingMangerList',
  data () {
    return {

      form: this.$form.createForm(this),
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      roomList: []
      // 表头

    }
  },
  created () {
    this.getAllRoomList()
  },
  methods: {
    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%);
}

.roomItem {
  margin-top: 20px;
}

.roomItem .desc {
  width: 150px;
  height: 50px;
  background-color: #A3CDFF;
  border-radius: 10px 10px 0 0px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
}


.roomItem .desc-item {
  width: 150px;
  height: 30px;
  background-color: #D8E9FC;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0px 10px 10px;
}

.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>