会议管理

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

@@ -1,19 +1,79 @@
 <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">去预约</a-button></div>
+        <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.four }}</div>
         <div>基础服务: {{ item.five }}</div>
       </div>
     </div>
+    <modal/>
   </div>
 </template>
 
-<script setup>
+<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会议室',
@@ -47,6 +107,20 @@ const meetingList = ref([
 </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;
@@ -64,18 +138,15 @@ const meetingList = ref([
     position: relative;
 
     .card-title{
-      font-size: 1.2vw;
+      font-size: 25px;
       font-weight: bold;
     }
-    div:nth-child(1){
-      margin-bottom: 5px;
-    }
     div{
-      line-height: 1.5vw;
+      margin: 0.5vw 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 200px;
+      max-width: 300px;
 
       .card-button{
         right: 15px;