spring
8 天以前 3f3d35d6d6445f9cc90a8cf7bb496bee7f465542
src/views/collaborativeApproval/notificationManagement/meetSetting/index.vue
@@ -1,33 +1,29 @@
<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>会议室设置</h2>
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        新增会议室
      </el-button>
    </div>
  <div>
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="100px" inline>
        <el-form-item label="会议室名称">
          <el-input v-model="searchForm.name" placeholder="请输入会议室名称" clearable />
        </el-form-item>
        <el-form-item label="位置">
          <el-input v-model="searchForm.location" placeholder="请输入位置" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-form :model="searchForm" label-width="100px" class="search-form">
      <el-form-item label="会议室名称">
        <el-input v-model="searchForm.name" placeholder="请输入会议室名称" clearable />
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="searchForm.location" placeholder="请输入位置" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
      <el-form-item class="search-actions">
        <el-button @click="handleExport">导出</el-button>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增会议室
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 会议室列表 -->
    <el-card>
      <el-table v-loading="loading" :data="meetingRoomList" border>
      <el-table v-loading="loading" :data="meetingRoomList" border :height="tableHeight">
        <el-table-column prop="name" label="会议室名称" align="center" />
        <el-table-column prop="location" label="位置" align="center" />
        <el-table-column prop="capacity" label="容纳人数" align="center" />
@@ -106,7 +102,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
@@ -117,6 +113,9 @@
// 总条数
const total = ref(0)
// 表格高度(根据窗口高度自适应)
const tableHeight = ref(window.innerHeight - 380)
// 会议室列表数据
const meetingRoomList = ref([])
@@ -271,6 +270,12 @@
  })
}
// 导出
const { proxy } = getCurrentInstance()
const handleExport = () => {
  proxy.download('/meeting/export', { ...searchForm }, '会议室设置.xlsx')
}
// 页面加载时获取数据
onMounted(() => {
  getList()
@@ -282,6 +287,15 @@
  padding: 20px;
}
.search-form {
  display: flex;
  /* align-items: center; */
}
.search-actions {
  margin-left: auto;
}
.page-header {
  display: flex;
  justify-content: space-between;