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

<template>

  <a-card :bordered='false'>
    <a-card :bordered='false' v-if='showDepForm'>
      <a-form :form='form'>
        <a-row>
          <a-col :span='10'>
            <a-form-item label='单位帐号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input placeholder='请输入单位帐号'
                       v-decorator="['loginName',{rules: [{ required: true, message: '输入单位帐号' }]}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :span='10'>
            <a-form-item label='单位密码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input type='password' placeholder='请输入单位密码'
                       v-decorator="['password',{rules: [{ required: true, message: '输入单位密码' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='10'>
            <a-form-model-item :wrapper-col='{ span: 14, offset: 8 }'>
              <a-button type='primary' @click='getDepInfo'>
                认证
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div class='table-page-search-wrapper' v-if='!showDepForm'>
      <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' @click='goOrder(room.id, 1, room.am)'>上午</div>
              <div class='am disabled' v-if='room.am == 1' @click='goOrder(room.id, 1, room.am)'>上午</div>
              <div class='pm' v-if='room.pm == 0' @click='goOrder(room.id, 2, room.pm)'>下午</div>
              <div class='pm disabled' v-if='room.pm == 1' @click='goOrder(room.id, 2, room.pm)'>下午</div>
              <div class='night' v-if='room.night == 0' @click='goOrder(room.id, 3, room.night)'>晚上</div>
              <div class='night disabled' v-if='room.night == 1' @click='goOrder(room.id, 3, room.night)'>晚上</div>
              <div class='desc-item'>
                {{ room.capacityNum }}人&nbsp;{{ room.typeName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <RoomOrder-modal ref='modal' @ok='handleOk' />
  </a-card>
</template>

<script>
import { getAllRoom, depLogin, getOrderInfo } from '@/api/admin/meeting/meetingReservation'
import { getMeetingDict, saveRoomContent } from '@/api/admin/meeting/roomContent'

import moment from 'moment'
import RoomOrderModal from '@/views/admin/meeting/modules/RoomOrderModal.vue'

export default {
  name: 'MeetingMangerList',
  components: { RoomOrderModal },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 35 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      nowDate: moment().format('YYYY-MM-DD'), // 当前日期
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        meetingName: '',
        typeName: '',
        shape: '',
        capacityNum: ''
      },
      capacityList: [],
      shapeList: [],
      typeList: [],
      roomList: [],
      showDepForm: true,
      depId: '',
      dep: '',
      rId: '' // 预约id，不为空，则为编辑
    }
  },
  created() {

  },
  mounted() {
    let rId = this.$route.query.rId
    if (rId) {
      this.rId = rId
      // 获取信息
      getOrderInfo({ id: rId }).then(res => {
        if (res.code == 0) {
          this.depId = res.mr.userOrgId
          this.dep = res.mr.userOrg
          this.showDepForm = false
        } else {
          // 查询错误
          this.rId = ''
        }
      })
    } else {
      // 为新增
      if (this.depId != '') {
        this.showDepForm = false
      }
    }
    this.getDict()
    this.getAllRoomList()
  },
  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()
    },
    getAllRoomList() {
      let minPerNum = 0
      let maxPerNum = 1000
      let perNumValue = this.queryParam.capacityNum
      if (perNumValue == 1) {
        // 1-20
        maxPerNum = 20
        minPerNum = 1
      } else if (perNumValue == 2) {
        // 21-50
        minPerNum = 21
        maxPerNum = 50
      } else if (perNumValue == 3) {
        // 51-100
        minPerNum = 51
        maxPerNum = 100
      } else if (perNumValue == 4) {
        // 51-100
        minPerNum = 101
        maxPerNum = 1000
      } else {
        // 全部
        minPerNum = 1
        maxPerNum = 1000
      }

      let param = {
        floor: this.queryParam.typeName, // 楼层
        min: minPerNum, // 最小容纳人数
        max: maxPerNum, // 最大容纳人数
        // devices: devicesArr, // 设备
        typeName: this.queryParam.shape, // 形状
        timeFormat: 1, // 预约时间格式：0 任意时间（管理员），1上午，2下午，3晚上 4 全天。值为0时，读取startTime和endTime为预约会议时间范围；其他值读取mrdate，再拼接时间为预约会议时间范围。返回值为1时；读取 am，上午  0可预约 1不可预约  pm，下午 0可预约 1不可预约  night，晚上 0可预约 1不可预约，这里默认全部为1
        mrdate: this.nowDate
      }

      getAllRoom(param).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)
      })
    },
    getDepInfo(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('单位认证：', values)
          depLogin(values)
            .then((res) => {
              if (res.code === 0) {
                this.depId = res.data.orgId
                this.dep = res.data.orgName
                this.$message.success(this.dep + '，欢迎您！')
                this.showDepForm = false
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(() => {
              this.$message.error('系统错误，请稍后再试')
            })
            .finally(() => {
            })
        }
      })
    },
    goOrder(id, timeRange, status) {
      let data = {
        date: this.nowDate,
        timeRange: timeRange,
        status: status,
        id: id,
        dep: this.dep,
        depId: this.depId
      }
      if (this.rId != '') {
        data.rId = this.rId
        data.act = 1 // 重新选择时间、会议室
        this.handleEdit(data)
      } else {
        this.handleAdd(data)
      }
    },
    handleAdd(data) {
      this.$refs.modal.add(data)
    },
    handleEdit(data) {
      this.$refs.modal.edit(data)
    },
    handleOk() {
      // 跳转到预约列表
      this.$router.push({ name: 'reservation' })
      // this.getAllRoomList()
    }
  }
}
</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>