会议管理

apps/web-antd/src/views/property/roomBooking/conferenceSettings/conferenceSettings-detail.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type {conferenceSettingsDetail} from '#/api/property/roomBooking/conferenceSettings/model';
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {meetInfo} from '#/api/property/roomBooking/conferenceSettings';
+import {renderDict} from "#/utils/render";
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    conferenceSettingsDetail.value = null;
+  },
+});
+
+const conferenceSettingsDetail = shallowRef<null | conferenceSettingsDetail>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  const response = await meetInfo(id);
+  conferenceSettingsDetail.value = response;
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="访客管理信息" class="w-[70%]">
+    <Descriptions v-if="conferenceSettingsDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="产品名称">
+        {{ conferenceSettingsDetail.projectName}}
+      </DescriptionsItem>
+      <DescriptionsItem label="单价（元）">
+        {{ conferenceSettingsDetail.price }}
+      </DescriptionsItem>
+      <DescriptionsItem label="单位">
+        {{ conferenceSettingsDetail.unit }}
+      </DescriptionsItem>
+      <DescriptionsItem label="类型" v-if="conferenceSettingsDetail.type!=null">
+        <component
+          :is="renderDict(conferenceSettingsDetail.type,'wy_parking_spot')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="状态" v-if="conferenceSettingsDetail.state!=null">
+        <component
+          :is="renderDict(conferenceSettingsDetail.state,'wy_appointment_tatus')"
+        />
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>

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

@@ -13,7 +13,8 @@ import {
   meetRemove,
 } from '#/api/property/roomBooking/conferenceSettings';
 import type { MeetForm } from '#/api/property/roomBooking/conferenceSettings/model';
-import meetModal from './meet-modal.vue';
+import ConferenceSettingsModal from './conferenceSettings-modal.vue';
+import ConferenceSettingsDetail from './conferenceSettings-detail.vue';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
@@ -61,10 +62,19 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-const [MeetModal, modalApi] = useVbenModal({
-  connectedComponent: meetModal,
+const [conferenceSettingsModal, modalApi] = useVbenModal({
+  connectedComponent: ConferenceSettingsModal,
 });
 
+const [ConferenceSettingsDetailModal, ConferenceSettingsDetailApi] = useVbenModal({
+  connectedComponent: ConferenceSettingsDetail,
+});
+
+async function handleInfo(row: Required<MeetForm>) {
+  ConferenceSettingsDetailApi.setData({ id: row.id });
+  ConferenceSettingsDetailApi.open();
+}
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -119,6 +129,11 @@ function handleMultiDelete() {
       </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['system:meet:edit']"
             @click.stop="handleEdit(row)"
@@ -142,6 +157,7 @@ function handleMultiDelete() {
         </Space>
       </template>
     </BasicTable>
-    <MeetModal @reload="tableApi.query()" />
+    <conferenceSettingsModal @reload="tableApi.query()" />
+    <ConferenceSettingsDetailModal/>
   </Page>
 </template>