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

<template>
  <div>
    <div>请先填写以下信息，查询可用会议室</div>
    <a-form
      :model="formState"
      layout="inline"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      class="form-box"
    >
      <a-form-item label="会议日期">
        <a-date-picker
          v-model:value="formState.username"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择"
          style="width: 330px; margin-right: 50px"
        />
      </a-form-item>
      <a-form-item label="参会人数" style="width: 400px;">
        <a-input placeholder="请输入" v-model:value="formState.username"/>
      </a-form-item>
      <a-form-item class="form-button">
        <a-button >重置</a-button>
        <a-button type="primary" class="primary-button">搜索</a-button>
      </a-form-item>
    </a-form>
    <div class="card-box">
      <div v-for="(item,index) in meetingList" :key="index" class="card-list">
        <div><span class="card-title">{{ item.one }}</span><a-button class="card-button" type="primary" @click="handleAdd">去预约</a-button></div>
        <div>容纳人数: {{ item.two }}人</div>
        <div>基础费用: {{ item.three }}元</div>
        <div>基础设备: {{ item.four }}</div>
        <div>基础服务: {{ item.five }}</div>
      </div>
    </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,
  Input as AInput,
  Button as AButton,
  DatePicker as ADatePicker,
  RangePicker as ARangePicker
} from 'ant-design-vue';
import conferenceAddServicesModal from '../conferenceReservations/conferenceReservations-modal.vue';
interface FormState {
  username: string;
  password: string;
}
const formState = reactive<FormState>({
  username: '',
  password: '',
});
const [modal, modalApi] = useVbenModal({
  connectedComponent: conferenceAddServicesModal,
});
function handleAdd() {
  modalApi.setData({});
  modalApi.open();
}
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
const meetingList = ref([
  {
    one: '10楼1002会议室',
    two: 50,
    three: 300,
    four: '话筒、音响、大屏',
    five: '开水、基础保洁'
  },
  {
    one: '10楼1002会议室',
    two: 50,
    three: 300,
    four: '话筒、音响、大屏',
    five: '开水、基础保洁'
  },
  {
    one: '10楼1002会议室',
    two: 50,
    three: 300,
    four: '话筒、音响、大屏',
    five: '开水、基础保洁'
  },
  {
    one: '10楼1002会议室',
    two: 50,
    three: 300,
    four: '话筒、音响、大屏',
    five: '开水、基础保洁'
  },
])
</script>

<style lang="scss">
.form-box{
  width: 100%;
  padding: 30px 30px 0 30px;
  position: relative;

  .form-button{
    position: absolute;
    right: 30px;

    .primary-button{
      margin-left: 15px;
    }
  }
}
.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>