1、会议室预约

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>请先填写以下信息，查询可用会议室</div>
+    <Alert message="请先填写以下信息，查询可用会议室" show-icon banner closable type="info"></Alert>
     <a-form
       :model="formState"
       layout="inline"
@@ -9,81 +9,103 @@
       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"
-        />
+        <DatePicker v-model:value="formState.appointmentTime" style="width: 200px;"/>
+      </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="参会人数" style="width: 400px;">
-        <a-input placeholder="请输入" v-model:value="formState.username"/>
+        <InputNumber style="width: 200px;" placeholder="请输入参会人数"
+                     v-model:value="formState.personNumber"/>
       </a-form-item>
       <a-form-item class="form-button">
         <a-button @click="handleClean">重置</a-button>
         <a-button type="primary" class="primary-button" @click="handleSearch">搜索</a-button>
       </a-form-item>
     </a-form>
-    <div class="card-box">
+    <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.one }}</span><a-button class="card-button" type="primary" @click="handleAdd(item.id)">去预约</a-button></div>
-        <div>容纳人数: {{ item.two }}人</div>
-        <div>基础费用: {{ item.three }}元</div>
-        <div>基础设备: {{ item.four }}</div>
-        <div>基础服务: {{ item.five }}</div>
+        <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 {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
+  TimeRangePicker,
+  InputNumber,
+  Empty,
+  Alert,
+  DatePicker
 } from 'ant-design-vue';
 import conferenceAddServicesModal from '../conferenceReservations/conferenceReservations-modal.vue';
-import {attachInfo} from "#/api/property/roomBooking/conferenceAddServices";
+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';
 
 interface FormState {
-  username: string;
-  password: string;
+  openHours?: any[];
+  personNumber?: number|undefined;
+  appointmentTime?:Dayjs|undefined
 }
+
 const formState = reactive<FormState>({
-  username: '',
-  password: '',
+  openHours: [],
+  personNumber: undefined,
+  appointmentTime:undefined
 });
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
 async function handleSearch() {
-  const obj = {
-    ...formState,
+  let hours = '';
+  if (formState.openHours && formState.openHours.length) {
+    hours = formState.openHours[0]?.format("HH:mm") + '-' + formState.openHours[1]?.format("HH:mm");
   }
-  const response = await attachInfo(obj);
-  meetingList.value = response.rows;
+  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.username = '';
-  formState.password = '';
+const handleClean = () => {
+  formState.openHours = [];
+  formState.personNumber = null;
+  formState.appointmentTime = undefined;
 }
 
 const [modal, modalApi] = useVbenModal({
   connectedComponent: conferenceAddServicesModal,
 });
 
-function handleAdd() {
-  modalApi.setData({id: row.id});
+function handleAdd(id:string) {
+  modalApi.setData({id});
   modalApi.open();
 }
+
 const onFinish = (values: any) => {
   console.log('Success:', values);
 };
@@ -91,54 +113,26 @@ 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: '开水、基础保洁'
-  },
-])
+const meetingList = ref<MeetVO[]>([])
 </script>
 
 <style lang="scss">
-.form-box{
+.form-box {
   width: 100%;
-  padding: 30px 30px 0 30px;
+  padding: 10px 30px 0 30px;
   position: relative;
 
-  .form-button{
+  .form-button {
     position: absolute;
     right: 30px;
 
-    .primary-button{
+    .primary-button {
       margin-left: 15px;
     }
   }
 }
-.card-box{
+
+.card-box {
   width: 100%;
   background-color: transparent;
   padding: 30px;
@@ -147,25 +141,26 @@ const meetingList = ref([
   gap: 30px;
   border: none;
 
-  .card-list{
+  .card-list {
     padding: 15px;
     background-color: white;
     border: 1px solid gray;
     border-radius: 10px;
     position: relative;
 
-    .card-title{
+    .card-title {
       font-size: 25px;
       font-weight: bold;
     }
-    div{
+
+    div {
       margin: 0.5vw 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 300px;
 
-      .card-button{
+      .card-button {
         right: 15px;
         position: absolute;
       }