admin-vben5/apps/web-antd/src/views/property/roomBooking/conferenceReservations/index.vue

<template>
  <div>
    <Alert message="请先填写以下信息，查询可用会议室" show-icon banner closable type="info"></Alert>
    <a-form
      :model="formState"
      layout="inline"
      class="form-box"
    >
      <a-form-item label="会议室类型">
        <Select
          v-model:value="formState.meetingRoomType"
          class="room-select"
          placeholder="请选择会议室类型"
          style="width: 180px;"
        >
          <SelectOption
            v-for="item in getDictOptions('meeting_room_type')"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </SelectOption>
        </Select>
      </a-form-item>
      <a-form-item label="会议日期">
        <DatePicker v-model:value="formState.appointmentTime" style="width: 180px;"/>
      </a-form-item>
      <a-form-item label="会议时段">
        <TimeRangePicker style="width: 200px;" format="HH:mm"
                         v-model:value="formState.openHours"></TimeRangePicker>
      </a-form-item>
      <a-form-item label="参会人数">
        <InputNumber style="width: 150px;" placeholder="请输入参会人数"
                     v-model:value="formState.personNumber"/>
      </a-form-item>
      <a-form-item >
        <a-button @click="handleClean">重置</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" class="primary-button"
                  :disabled="!formState.meetingRoomType||!formState.appointmentTime
                  ||!(formState.openHours&&formState.openHours.length)||!formState.personNumber"
                  @click="handleSearch">搜索</a-button>
      </a-form-item>
    </a-form>
    <div v-if="meetingList?.length" class="card-box">
      <div v-for="(item,index) in meetingList" :key="index" class="card-list">
        <div><span class="card-title">{{ item.name }}</span>
          <a-button class="card-button" type="primary" @click="handleAdd(item.id)">去预约</a-button>
        </div>
        <div>容纳人数: {{ item.personNumber }}人</div>
        <div>基础费用: {{
            item.expenseType == '2' ? (item.basePrice+"元") : renderDictValue(item.expenseType, 'wy_fyms')
          }}
        </div>
        <div>开放时段: {{ item.openHours }}</div>
        <div>配套设备: {{ item.baseService }}</div>
      </div>
    </div>
    <div v-else style="text-align: center;margin-top: 20%">
      <Empty :image="simpleImage"/>
    </div>
    <modal/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {reactive} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {
  Form as AForm,
  FormItem as AFormItem,
  Button as AButton,
  TimeRangePicker,
  InputNumber,
  Empty,
  Alert,
  DatePicker, Select,SelectOption
} from 'ant-design-vue';
import conferenceAddServicesModal from '../conferenceReservations/conferenceReservations-modal.vue';
import {notlist} from "#/api/property/roomBooking/conferenceSettings";
import type {MeetVO} from "#/api/property/roomBooking/conferenceSettings/model";
import {renderDictValue} from "#/utils/render";
import type { Dayjs } from 'dayjs';
import {getDictOptions} from "#/utils/dict";

interface FormState {
  openHours?: any[];
  personNumber?: number|undefined;
  appointmentTime?:Dayjs|undefined;
  meetingRoomType:string|undefined;
}

const formState = reactive<FormState>({
  openHours: [],
  personNumber: undefined,
  appointmentTime:undefined,
  meetingRoomType:undefined,
});
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const meetingList = ref<MeetVO[]>([])
async function handleSearch() {
  let hours = '';
  if (formState.openHours && formState.openHours.length) {
    hours = formState.openHours[0]?.format("HH:mm") + '-' + formState.openHours[1]?.format("HH:mm");
  }
  const obj = {
    openHours: hours??undefined,
    personNumber: formState.personNumber,
    appointmentTime:formState.appointmentTime?formState.appointmentTime.format('YYYY-MM-DD'):undefined
  }
  meetingList.value =await notlist(obj);
}

const handleClean = () => {
  formState.openHours = [];
  formState.personNumber = undefined;
  formState.appointmentTime = undefined;
  formState.meetingRoomType = undefined;
}

const [modal, modalApi] = useVbenModal({
  connectedComponent: conferenceAddServicesModal,
});

function handleAdd(id:string|number) {
  modalApi.setData({id});
  modalApi.open();
}
</script>

<style lang="scss">
.form-box {
margin: 10px 0 0 5px;
}

.card-box {
  width: 100%;
  background-color: transparent;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  border: none;

  .card-list {
    padding: 15px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 10px;
    position: relative;

    .card-title {
      font-size: 25px;
      font-weight: bold;
    }

    div {
      margin: 0.5vw 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 300px;

      .card-button {
        right: 15px;
        position: absolute;
      }
    }
  }
}
</style>