会议室项目-会议室管理模块

nest g resource meeting-room

import { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn } from "typeorm";

@Entity()
export class MeetingRoom {

    @PrimaryGeneratedColumn({
        comment: '会议室ID'
    })
    id: number;

    @Column({
        length: 50,
        comment: '会议室名字'
    })
    name: string;

    @Column({
        comment: '会议室容量'
    })
    capacity: number;

    @Column({
        length: 50,
        comment: '会议室位置'
    })
    location: string;

    @Column({
        length: 50,
        comment: '设备',
        default: ''
    })
    equipment: string;

    @Column({
        length: 100,
        comment: '描述',
        default: ''
    })
    description: string;

    @Column({
        comment: '是否被预订',
        default: false
    })
    isBooked: boolean;

    @CreateDateColumn({
        comment: '创建时间'
    })
    createTime: Date;

    @UpdateDateColumn({
        comment: '更新时间'
    })
    updateTime: Date;
}

npm run start:dev

@InjectRepository(MeetingRoom)
private repository: Repository<MeetingRoom>;

initData() {
}

initData() {
    const room1 = new MeetingRoom();
    room1.name = '木星';
    room1.capacity = 10;
    room1.equipment = '白板';
    room1.location = '一层西';

    const room2 = new MeetingRoom();
    room2.name = '金星';
    room2.capacity = 5;
    room2.equipment = '';
    room2.location = '二层东';

    const room3 = new MeetingRoom();
    room3.name = '天王星';
    room3.capacity = 30;
    room3.equipment = '白板，电视';
    room3.location = '三层东';

    this.repository.save([room1, room2, room3])
}

import { repl } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
    const replServer = await repl(AppModule);
    replServer.setupHistory(".nestjs_repl_history", (err) => {
        if (err) {
            console.error(err);
        }
    });
}
bootstrap();

"repl": "nest start --watch --entryFile repl",

npm run repl

methods(MeetingRoomService)

get(MeetingRoomService).initData()

get(MeetingRoomService).initData()

import { Controller, Get, Post, Body, Patch, Param, Delete, Query, DefaultValuePipe } from '@nestjs/common';
import { MeetingRoomService } from './meeting-room.service';
import { generateParseIntPipe } from 'src/utils';

@Controller('meeting-room')
export class MeetingRoomController {
  constructor(private readonly meetingRoomService: MeetingRoomService) {}

  @Get('list')
  async list(
    @Query('pageNo', new DefaultValuePipe(1), generateParseIntPipe('pageNo')) pageNo: number,
    @Query('pageSize', new DefaultValuePipe(2), generateParseIntPipe('pageSize')) pageSize: number,
  ) {
    return await this.meetingRoomService.find(pageNo, pageSize);
  }
}

async find(pageNo: number, pageSize: number) {
    if(pageNo < 1) {
      throw new BadRequestException('页码最小为 1');
    }
    const skipCount = (pageNo - 1) * pageSize;

    const [meetingRooms, totalCount] = await this.repository.findAndCount({
        skip: skipCount,
        take: pageSize
    });

    return {
        meetingRooms,
        totalCount
    }
}

npm run start:dev

@Post('create')
async create(@Body() meetingRoomDto: CreateMeetingRoomDto) {
    return await this.meetingRoomService.create(meetingRoomDto);
}

import { IsNotEmpty, MaxLength } from "class-validator";

export class CreateMeetingRoomDto {

    @IsNotEmpty({
        message: '会议室名称不能为空'
    })
    @MaxLength(10, {
        message: '会议室名称最长为 10 字符'
    })
    name: string;

    @IsNotEmpty({
        message: '容量不能为空'
    })
    capacity: number;

    @IsNotEmpty({
        message: '位置不能为空'
    })
    @MaxLength(50, {
        message: '位置最长为 50 字符'
    })
    location: string;

    @IsNotEmpty({
        message: '设备不能为空'
    })
    @MaxLength(50, {
        message: '设备最长为 50 字符'
    })
    equipment: string;

    @IsNotEmpty({
        message: '描述不能为空'
    })
    @MaxLength(100, {
        message: '描述最长为 100 字符'
    })
    description: string;

}

async create(meetingRoomDto: CreateMeetingRoomDto) {
    return await this.repository.insert(meetingRoomDto);
}

async create(meetingRoomDto: CreateMeetingRoomDto) {
    const room = await this.repository.findOneBy({
      name: meetingRoomDto.name
    });

    if(room) {
      throw new BadRequestException('会议室名字已存在');
    }

    return await this.repository.save(meetingRoomDto);
}

@Put('update')
async update(@Body() meetingRoomDto: UpdateMeetingRoomDto) {
    return await this.meetingRoomService.update(meetingRoomDto);
}

import { ApiProperty, PartialType } from '@nestjs/swagger';
import { CreateMeetingRoomDto } from './create-meeting-room.dto';
import { IsNotEmpty } from 'class-validator';

export class UpdateMeetingRoomDto extends PartialType(CreateMeetingRoomDto) {

    @ApiProperty()
    @IsNotEmpty({
        message: 'id 不能为空'
    })
    id: number;
}

async update(meetingRoomDto: UpdateMeetingRoomDto) {
    const meetingRoom = await this.repository.findOneBy({
      id: meetingRoomDto.id
    })

    if(!meetingRoom) {
      throw new BadRequestException('会议室不存在');
    }

    meetingRoom.capacity = meetingRoomDto.capacity;
    meetingRoom.location = meetingRoomDto.location;
    meetingRoom.name = meetingRoomDto.name;

    if(meetingRoomDto.description) {
      meetingRoom.description = meetingRoomDto.description;
    }
    if(meetingRoomDto.equipment) {
      meetingRoom.equipment = meetingRoomDto.equipment;
    }

    await this.repository.update({
      id: meetingRoom.id
    } , meetingRoom);
    return 'success';
}

@Get(':id')
async find(@Param('id') id: number) {
    return await this.meetingRoomService.findById(id);
}

async findById(id: number) {
    return this.repository.findOneBy({
      id
    });
}

@Delete(':id')
async delete(@Param('id') id: number) {
    return await this.meetingRoomService.delete(id);
}

@InjectEntityManager()
entityManager: EntityManager;

async delete(id: number) {
    const bookings = await this.entityManager.findBy(Booking, {
      room: {
        id: id
      }
    });

    for(let i = 0; i< bookings.length; i++) {
      this.entityManager.delete(Booking, bookings[i].id);
    }
    await this.repository.delete(id);
    return 'success';
}

@Get('list')
async list(
    @Query('pageNo', new DefaultValuePipe(1), generateParseIntPipe('pageNo')) pageNo: number,
    @Query('pageSize', new DefaultValuePipe(2), generateParseIntPipe('pageSize')) pageSize: number,
    @Query('name') name: string,
    @Query('capacity') capacity: number,
    @Query('equipment') equipment: string
) {
    return await this.meetingRoomService.find(pageNo, pageSize, name, capacity, equipment);
}

async find(pageNo: number, pageSize: number, name: string, capacity: number, equipment: string) {
    if(pageNo < 1) {
      throw new BadRequestException('页码最小为 1');
    }
    const skipCount = (pageNo - 1) * pageSize;

    const condition: Record<string, any> = {};

    if(name) {
        condition.name = Like(`%${name}%`);
    }
    if(equipment) {
        condition.equipment = Like(`%${equipment}%`);
    }
    if(capacity) {
        condition.capacity = capacity;
    }

    const [meetingRooms, totalCount] = await this.repository.findAndCount({
        skip: skipCount,
        take: pageSize,
        where: condition
    });

    return {
        meetingRooms,
        totalCount
    }
}

npm run dev

const handleMenuItemClick: MenuClickEventHandler = (info) => {
    let path = '';
    switch(info.key) {
        case '1':
            path = '/meeting_room_manage';
            break;
        case '2':
            path = '/booking_manage';
            break;
        case '3':
            path = '/user_manage';
            break;
        case '4':
            path = '/statistics';
            break;
    }
    router.navigate(path);
}

export function MeetingRoomManage() {
    return <div>MeetingRoomManage</div>
}

export function BookingManage() {
    return <div>BookingManage</div>
}

export function Statistics() {
    return <div>Statistics</div>
}

{
    path: '/',
    element: <MeetingRoomManage/>
},
{
    path: 'user_manage',
    element: <UserManage/>
},
{
    path: 'meeting_room_manage',
    element: <MeetingRoomManage/>
},
{
    path: 'booking_manage',
    element: <BookingManage/>
},
{
    path: 'statistics',
    element: <Statistics/>
}

const location = useLocation();

function getSelectedKeys() {
    if(location.pathname === '/user_manage') {
        return ['3']
    } else if(location.pathname === '/booking_manage') {
        return ['2']
    } else if(location.pathname === '/meeting_room_manage') {
        return ['1']
    } else if(location.pathname === '/statistics') {
        return ['4']
    } else {
        return ['1']
    }
}

import { Badge, Button, Form, Image, Input, Table, message } from "antd";
import { useCallback, useEffect, useMemo, useState } from "react";
import './meeting_room_manage.css';
import { ColumnsType } from "antd/es/table";
import { useForm } from "antd/es/form/Form";

interface SearchMeetingRoom {
    name: string;
    capacity: number;
    equipment: string;
}

interface MeetingRoomSearchResult {
    id: number,
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
    isBooked: boolean;
    createTime: Date;
    updateTime: Date;
}


export function MeetingRoomManage() {
    const [pageNo, setPageNo] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [meetingRoomResult, setMeetingRoomResult] = useState<Array<MeetingRoomSearchResult>>([]);

    const columns: ColumnsType<MeetingRoomSearchResult> = useMemo(() => [
        {
            title: '名称',
            dataIndex: 'name'
        },
        {
            title: '容纳人数',
            dataIndex: 'capacity',
        },
        {
            title: '位置',
            dataIndex: 'location'
        },
        {
            title: '设备',
            dataIndex: 'equipment'
        },
        {
            title: '描述',
            dataIndex: 'description'
        },
        {
            title: '添加时间',
            dataIndex: 'createTime'
        },
        {
            title: '上次更新时间',
            dataIndex: 'updateTime'
        },
        {
            title: '预订状态',
            dataIndex: 'isBooked',
            render: (_, record) => (
                record.isBooked ? <Badge status="error">已被预订</Badge> : <Badge status="success">可预订</Badge>
            )
        },
        {
            title: '操作',
            render: (_, record) => (
                <a href="#" onClick={() => {}}>删除</a>
            )
        }
    ], []);

    const searchMeetingRoom = useCallback(async (values: SearchMeetingRoom) => {

    }, []);

    const [form ]  = useForm();

    const changePage = useCallback(function(pageNo: number, pageSize: number) {
        setPageNo(pageNo);
        setPageSize(pageSize);
    }, []);


    return <div id="meetingRoomManage-container">
        <div className="meetingRoomManage-form">
            <Form
                form={form}
                onFinish={searchMeetingRoom}
                name="search"
                layout='inline'
                colon={false}
            >
                <Form.Item label="会议室名称" name="name">
                    <Input />
                </Form.Item>

                <Form.Item label="容纳人数" name="capacity">
                    <Input />
                </Form.Item>

                <Form.Item label="位置" name="location">
                    <Input/>
                </Form.Item>

                <Form.Item label=" ">
                    <Button type="primary" htmlType="submit">
                        搜索会议室
                    </Button>
                    <Button type="primary" style={{background: 'green'}}>
                        添加会议室
                    </Button>

                </Form.Item>
            </Form>
        </div>
        <div className="meetingRoomManage-table">
            <Table columns={columns} dataSource={meetingRoomResult} pagination={ {
                current: pageNo,
                pageSize: pageSize,
                onChange: changePage
            }}/>
        </div>
    </div>
}

#meetingRoomManage-container {
    padding: 20px;
}
#meetingRoomManage-container .meetingRoomManage-form {
    margin-bottom: 40px;
}

export async function meetingRoomList(name: string, capacity: number, equipment: string, pageNo: number, pageSize: number) {
    return await axiosInstance.get('/meeting-room/list', {
        params: {
            name,
            capacity,
            equipment,
            pageNo,
            pageSize
        }
    });
}

const searchMeetingRoom = useCallback(async (values: SearchMeetingRoom) => {
    const res = await meetingRoomList(values.name, values.capacity, values.equipment, pageNo, pageSize);

    const { data } = res.data;
    if(res.status === 201 || res.status === 200) {
        setMeetingRoomResult(data.meetingRooms.map((item: MeetingRoomSearchResult) => {
            return {
                key: item.id,
                ...item
            }
        }))
    } else {
        message.error(data || '系统繁忙，请稍后再试');
    }
}, []);

useEffect(() => {
    searchMeetingRoom({
        name: form.getFieldValue('name'),
        capacity: form.getFieldValue('capacity'),
        equipment: form.getFieldValue('equipment')
    });
}, [pageNo, pageSize]);

export async function deleteMeetingRoom(id: number) {
    return await axiosInstance.delete('/meeting-room/' + id);
}

<a href="#" onClick={() => handleDelete(record.id)}>删除</a>

const handleDelete = useCallback(async (id: number) => {
    try {
        await deleteMeetingRoom(id);
        message.success('删除成功');
    } catch(e) {
        console.log(e);
        message.error('删除失败');
    }
}, []);

const [num, setNum] = useState<number>();

setNum(Math.random());

{
    title: '操作',
    render: (_, record) => (
        <Popconfirm
            title="会议室删除"
            description="确认删除吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="Yes"
            cancelText="No"
        >
            <a href="#">删除</a>
        </Popconfirm>
    )
}

import { Modal } from "antd";
import { useCallback } from "react";

interface CreateMeetingRoomModalProps {
    isOpen: boolean;
    handleClose: Function
}

export function CreateMeetingRoomModal(props: CreateMeetingRoomModalProps) {

    const handleOk = useCallback(async function() {
        props.handleClose();
    }, []);

    return <Modal title="创建会议室" open={props.isOpen} onOk={handleOk} onCancel={() => props.handleClose()}>
        <p>xxxx</p>
    </Modal>
}

const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

<Button type="primary" style={{background: 'green'}} onClick={
    () => setIsCreateModalOpen(true)
}>
    添加会议室
</Button>

<CreateMeetingRoomModal isOpen={isCreateModalOpen} handleClose={() => {
    setIsCreateModalOpen(false);
}}></CreateMeetingRoomModal>

import { Button, Form, Input,InputNumber, Modal } from "antd";
import { useForm } from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";
import { useCallback } from "react";

interface CreateMeetingRoomModalProps {
    isOpen: boolean;
    handleClose: Function
}
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}
export interface CreateMeetingRoom {
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
}

export function CreateMeetingRoomModal(props: CreateMeetingRoomModalProps) {

    const [form] = useForm();

    const handleOk = useCallback(async function() {
        const values = form.getFieldsValue();
        console.log(values);

        props.handleClose();
    }, []);

    return <Modal title="创建会议室" open={props.isOpen} onOk={handleOk} onCancel={() => props.handleClose()} okText={'创建'}>
        <Form
            form={form}
            colon={false}
            {...layout}
        >
            <Form.Item
                label="会议室名称"
                name="name"
                rules={[
                    { required: true, message: '请输入会议室名称!' },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="位置"
                name="location"
                rules={[
                    { required: true, message: '请输入会议室位置!' },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="容纳人数"
                name="capacity"
                rules={[
                    { required: true, message: '请输入会议室容量!' },
                ]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="设备"
                name="equipment"
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="描述"
                name="description"
            >
                <TextArea />
            </Form.Item>
        </Form>
    </Modal>
}

export async function createMeetingRoom(meetingRoom: CreateMeetingRoom) {
    return await axiosInstance.post('/meeting-room/create', meetingRoom);
}

const [form] = useForm<CreateMeetingRoom>();

const handleOk = useCallback(async function() {
    const values = form.getFieldsValue();

    values.description = values.description || '';
    values.equipment = values.equipment || '';

    const res = await createMeetingRoom(values);

    if(res.status === 201 || res.status === 200) {
        message.success('创建成功');
        form.resetFields();
        props.handleClose();
    } else {
        message.error(res.data.data);
    }
}, []);

import { Button, Form, Input, InputNumber, Modal, message } from "antd";
import { useForm } from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";
import { useCallback } from "react";
import { updateMeetingRoom } from "../../interfaces/interfaces";

interface UpdateMeetingRoomModalProps {
    isOpen: boolean;
    handleClose: Function
}
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

export interface UpdateMeetingRoom {
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
}

export function UpdateMeetingRoomModal(props: UpdateMeetingRoomModalProps) {

    const [form] = useForm<UpdateMeetingRoom>();

    const handleOk = useCallback(async function() {
        props.handleClose();
    }, []);

    return <Modal title="更新会议室" open={props.isOpen} onOk={handleOk} onCancel={() => props.handleClose()} okText={'更新'}>
        <Form
            form={form}
            colon={false}
            {...layout}
        >
            <Form.Item
                label="会议室名称"
                name="name"
                rules={[
                    { required: true, message: '请输入会议室名称!' },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="位置"
                name="location"
                rules={[
                    { required: true, message: '请输入会议室位置!' },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="容纳人数"
                name="capacity"
                rules={[
                    { required: true, message: '请输入会议室容量!' },
                ]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="设备"
                name="equipment"
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="描述"
                name="description"
            >
                <TextArea/>
            </Form.Item>
        </Form>
    </Modal>
}

export async function updateMeetingRoom(meetingRoom: UpdateMeetingRoom) {
    return await axiosInstance.put('/meeting-room/update', meetingRoom);
}

export async function findMeetingRoom(id: number) {
    return await axiosInstance.get('/meeting-room/' + id);
}

const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
const [updateId, setUpdateId] = useState<number>();

{
    title: '操作',
    render: (_, record) => (
        <div>
            <Popconfirm
                title="会议室删除"
                description="确认删除吗？"
                onConfirm={() => handleDelete(record.id)}
                okText="Yes"
                cancelText="No"
            >
                <a href="#">删除</a>
            </Popconfirm>
            <br/>
            <a href="#" onClick={() => {
                setIsUpdateModalOpen(true);
                setUpdateId(record.id);
            }}>更新</a>
        </div>
    )
}

<UpdateMeetingRoomModal isOpen={isUpdateModalOpen} handleClose={() => {
    setIsUpdateModalOpen(false);
    setNum(Math.random());
}}></UpdateMeetingRoomModal>

useEffect(() => {
    async function query() {
        if(!props.id) {
            return;
        }
        const res = await findMeetingRoom(props.id);

        const { data } = res;
        if(res.status === 200 || res.status === 201) {
            form.setFieldValue('id', data.data.id);
            form.setFieldValue('name', data.data.name);
            form.setFieldValue('location', data.data.location);
            form.setFieldValue('capacity', data.data.capacity);
            form.setFieldValue('equipment', data.data.equipment);
            form.setFieldValue('description', data.data.description);
        } else {
            message.error(res.data.data);
        }
    }

    query();
}, [props.id]);

const handleOk = useCallback(async function() {
    const values = form.getFieldsValue();

    values.description = values.description || '';
    values.equipment = values.equipment || '';

    const res = await updateMeetingRoom({
        ...values,
        id: form.getFieldValue('id')
    });

    if(res.status === 201 || res.status === 200) {
        message.success('更新成功');
        props.handleClose();
    } else {
        message.error(res.data.data);
    }
}, []);

{
    path: '/',
    element: <Menu/>,
    children: [
      {
        path: '/',
        element: <MeetingRoomList/>
      },
      {
        path: 'meeting_room_list',
        element: <MeetingRoomList/>
      },
      {
        path: 'booking_history',
        element: <BookingHistory/>
      }
    ]
}

import { Outlet, useLocation } from "react-router-dom";
import { Menu as AntdMenu, MenuProps } from 'antd';
import './menu.css';
import { MenuClickEventHandler } from "rc-menu/lib/interface";
import { router } from "../..";

const items: MenuProps['items'] = [
    {
        key: '1',
        label: "会议室列表"
    },
    {
        key: '2',
        label: "预订历史"
    }
];

const handleMenuItemClick: MenuClickEventHandler = (info) => {
    let path = '';
    switch(info.key) {
        case '1':
            path = '/meeting_room_list';
            break;
        case '2':
            path = '/booking_history';
            break;
    }
    router.navigate(path);
}


export function Menu() {

    const location = useLocation();

    function getSelectedKeys() {
        if(location.pathname === '/meeting_room_list') {
            return ['1']
        } else if(location.pathname === '/booking_history') {
            return ['2']
        } else {
            return ['1']
        }
    }

    return <div id="menu-container">
        <div className="menu-area">
            <AntdMenu
                defaultSelectedKeys={getSelectedKeys()}
                items={items}
                onClick={handleMenuItemClick}
            />
        </div>
        <div className="content-area">
            <Outlet></Outlet>
        </div>
    </div>
}

#menu-container {
    display: flex;
    flex-direction: row;
}
#menu-container .menu-area {
    width: 200px;
}

export function MeetingRoomList() {
    return <div>MeetingRoomList</div>
}

export function BookingHistory() {
    return <div>BookingHistory</div>
}

npm run dev:dev

export async function searchMeetingRoomList(name: string, capacity: number, equipment: string, pageNo: number, pageSize: number) {
    return await axiosInstance.get('/meeting-room/list', {
        params: {
            name,
            capacity,
            equipment,
            pageNo,
            pageSize
        }
    });
}

import { Badge, Button, Form, Input, Popconfirm, Table, message } from "antd";
import { useCallback, useEffect, useMemo, useState } from "react";
import './meeting_room_list.css';
import { ColumnsType } from "antd/es/table";
import { useForm } from "antd/es/form/Form";
import { searchMeetingRoomList } from "../../interfaces/interfaces";

interface SearchMeetingRoom {
    name: string;
    capacity: number;
    equipment: string;
}

interface MeetingRoomSearchResult {
    id: number,
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
    isBooked: boolean;
    createTime: Date;
    updateTime: Date;
}

export function MeetingRoomList() {
    const [pageNo, setPageNo] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);

    const [meetingRoomResult, setMeetingRoomResult] = useState<Array<MeetingRoomSearchResult>>([]);

    const columns: ColumnsType<MeetingRoomSearchResult> = useMemo(() => [
        {
            title: '名称',
            dataIndex: 'name'
        },
        {
            title: '容纳人数',
            dataIndex: 'capacity',
        },
        {
            title: '位置',
            dataIndex: 'location'
        },
        {
            title: '设备',
            dataIndex: 'equipment'
        },
        {
            title: '描述',
            dataIndex: 'description'
        },
        {
            title: '添加时间',
            dataIndex: 'createTime'
        },
        {
            title: '上次更新时间',
            dataIndex: 'updateTime'
        },
        {
            title: '预订状态',
            dataIndex: 'isBooked',
            render: (_, record) => (
                record.isBooked ? <Badge status="error">已被预订</Badge> : <Badge status="success">可预订</Badge>
            )
        },
        {
            title: '操作',
            render: (_, record) => (
                <div>
                    <a href="#">预订</a>
                </div>
            )
        }
    ], []);

    const searchMeetingRoom = useCallback(async (values: SearchMeetingRoom) => {
        const res = await searchMeetingRoomList(values.name, values.capacity, values.equipment, pageNo, pageSize);

        const { data } = res.data;
        if(res.status === 201 || res.status === 200) {
            setMeetingRoomResult(data.meetingRooms.map((item: MeetingRoomSearchResult) => {
                return {
                    key: item.id,
                    ...item
                }
            }))
        } else {
            message.error(data || '系统繁忙，请稍后再试');
        }
    }, []);

    const [form ]  = useForm();

    useEffect(() => {
        searchMeetingRoom({
            name: form.getFieldValue('name'),
            capacity: form.getFieldValue('capacity'),
            equipment: form.getFieldValue('equipment')
        });
    }, [pageNo, pageSize]);

    const changePage = useCallback(function(pageNo: number, pageSize: number) {
        setPageNo(pageNo);
        setPageSize(pageSize);
    }, []);

    return <div id="meetingRoomList-container">
        <div className="meetingRoomList-form">
            <Form
                form={form}
                onFinish={searchMeetingRoom}
                name="search"
                layout='inline'
                colon={false}
            >
                <Form.Item label="会议室名称" name="name">
                    <Input />
                </Form.Item>

                <Form.Item label="容纳人数" name="capacity">
                    <Input />
                </Form.Item>

                <Form.Item label="设备" name="equipment">
                    <Input/>
                </Form.Item>

                <Form.Item label=" ">
                    <Button type="primary" htmlType="submit">
                        搜索会议室
                    </Button>
                </Form.Item>
            </Form>
        </div>
        <div className="meetingRoomList-table">
            <Table columns={columns} dataSource={meetingRoomResult} pagination={ {
                current: pageNo,
                pageSize: pageSize,
                onChange: changePage
            }}/>
        </div>
    </div>
}

#meetingRoomList-container {
    padding: 20px;
}
#meetingRoomList-container .meetingRoomList-form {
    margin-bottom: 40px;
}

@ApiParam({
    name: 'id',
    type: Number,
    description: 'id'
})
@ApiResponse({
    status: HttpStatus.OK,
    description: 'success'
})

import { ApiProperty } from "@nestjs/swagger";

export class MeetingRoomVo {

    @ApiProperty()
    id: number;

    @ApiProperty()
    name: string;

    @ApiProperty()
    capacity: number;

    @ApiProperty()
    location: string;

    @ApiProperty()
    equipment: string;

    @ApiProperty()
    description: string;

    @ApiProperty()
    isBooked: boolean;

    @ApiProperty()
    createTime: Date;

    @ApiProperty()
    updateTime: Date;
}

@ApiBearerAuth()
@ApiParam({
    name: 'id',
    type: Number,
})
@ApiResponse({
    status: HttpStatus.OK,
    description: 'success',
    type: MeetingRoomVo
})

@ApiBearerAuth()
@ApiBody({
    type: UpdateMeetingRoomDto,
})
@ApiResponse({
    status: HttpStatus.BAD_REQUEST,
    description: '会议室不存在'
})
@ApiResponse({
    status: HttpStatus.OK,
    description: 'success'
})

@ApiBearerAuth()
@ApiBody({
    type: CreateMeetingRoomDto,
})
@ApiResponse({
    status: HttpStatus.BAD_REQUEST,
    description: '会议室名字已存在'
})
@ApiResponse({
    status: HttpStatus.OK,
    type: MeetingRoomVo
})

import { ApiProperty } from "@nestjs/swagger";
import { MeetingRoomVo } from "./meeting-room.vo";

export class MeetingRoomListVo {

    @ApiProperty({
        type: [MeetingRoomVo]
    })
    meetingRooms: Array<MeetingRoomVo>;

    @ApiProperty()
    totalCount: number;
}

@ApiBearerAuth()
@ApiQuery({
    name: 'pageNo',
    type: Number,
    required: false
})
@ApiQuery({
    name: 'pageSize',
    type: Number,
    required: false
})
@ApiQuery({
    name: 'name',
    type: String,
    required: false
})
@ApiQuery({
    name: 'capacity',
    type: String,
    required: false
})
@ApiQuery({
    name: 'equipment',
    type: String,
    required: false
})
@ApiResponse({
    type: MeetingRoomListVo
})