<script setup lang="ts"> import { ref, onMounted } from 'vue' /* 导入部门类型 */ /* 导入部门类型 */ import type { DeptModelArray } from '@/api/model/model' import { addApi, queryAllApi } from '@/api/api' import { ElMessage } from 'element-plus' /* 表格数据 ref<指定的类型> 指定的类型:可以通过interface定义出来 */ const tableData = ref<DeptModelArray>([]) /* mock云端假数据:前端测试的时候，后端还没写好，就可以先用mock造一些假数据 */ /* 在页面启动时候通过钩子函数获取数据，渲染到前端页面 */ const deptSearch = async () => { const result = await queryAllApi() tableData.value = result.data } onMounted(() => { deptSearch() }) const dialogFormVisible = ref(false) const addDept = () => { dialogFormVisible.value = true //当添加部门数据时候，就清除上一次的记录 form.value = { name: '' } } const form = ref({ name: '', }) const submitDept = async () => { const result = await addApi(form.value) dialogFormVisible.value = false if (result.code == 1) { ElMessage.success('部门添加成功') deptSearch() } else { ElMessage.error(result.msg) } } </script> <template> <h1>部门管理</h1> <el-button type="primary"> <el-icon><Search /></el-icon> 搜索 </el-button> <el-button type="success" @click="addDept"> <el-icon><plus /></el-icon>新增 </el-button> <el-button type="danger"> <el-icon><delete /></el-icon>批量删除 </el-button> <br /><br /> <el-table :data="tableData" border stripe> <el-table-column type="selection" width="45" align="center" /> <el-table-column type="index" label="序号" width="70" align="center" /> <el-table-column prop="name" label="部门名称" min-width="100" /> <el-table-column prop="createTime" label="创建时间" min-width="160" align="center" /> <el-table-column prop="updateTime" label="最后修改" min-width="160" align="center" /> <el-table-column label="操作" align="center" fixed="right"> <template #default=""> <div class="action-buttons"> <el-button size="small" type="primary"> <el-icon><edit /></el-icon>编辑 </el-button> <el-button size="small" type="danger"> <el-icon><delete /></el-icon>删除 </el-button> </div> </template> </el-table-column> </el-table> <!-- 内嵌在对话框中的表单提交数据 --> <el-dialog v-model="dialogFormVisible" title="添加部门" width="500"> <el-form :model="form"> <el-form-item label="部门名称"> <el-input v-model="form.name" autocomplete="off" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="dialogFormVisible = false">取消</el-button> <el-button type="primary" @click="submitDept"> 添加 </el-button> </div> </template> </el-dialog> </template> <style scoped></style> 我的项目是vue3+element-plus构建的，帮我完善剩下的功能，美化样式

<think>我们有一个部门管理的Vue3组件，目前已经实现了部门列表的展示和添加部门的功能。 接下来需要完善的功能包括： 1. 搜索功能：根据部门名称搜索部门。 2. 编辑功能：点击编辑按钮，弹出编辑对话框，修改部门名称并提交。 3. 删除功能：单个删除和批量删除。 4. 批量删除：需要在前端表格中多选，然后批量删除选中的部门。 5. 样式美化：调整布局和样式，使其更美观。 我们将逐步实现这些功能。 首先，我们需要在数据模型中增加一个用于搜索的关键字字段，并实现搜索功能。 其次，编辑功能需要打开一个对话框，其中表单的初始值为当前行的部门信息，然后提交修改。 删除功能包括单个删除和批量删除。单个删除时，需要传递当前行的id；批量删除需要传递选中的多个id。 另外，我们还需要在表格中添加多选支持，并获取选中的行。 考虑到代码的清晰性，我们将使用Vue3的Composition API。 以下是完善后的代码：</think>我将帮你完善部门管理功能，包括搜索、编辑、删除等操作，并美化界面样式。以下是完整的解决方案： ```vue <script setup lang="ts"> import { ref, reactive, onMounted, computed } from 'vue' import type { DeptModel, DeptModelArray } from '@/api/model/model' import { addApi, editApi, deleteApi, batchDeleteApi, queryAllApi } from '@/api/api' import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus' // 表格数据 const tableData = ref<DeptModelArray>([]) const loading = ref(false) // 搜索表单 const searchForm = reactive({ name: '', dateRange: [] as string[] }) // 分页配置 const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 }) // 编辑表单 const formRef = ref<FormInstance>() const form = reactive({ id: '', name: '' }) const dialogTitle = ref('添加部门') const dialogVisible = ref(false) // 多选处理 const multipleSelection = ref<DeptModel[]>([]) // 获取部门数据 const fetchDepts = async () => { try { loading.value = true const params = { name: searchForm.name, startTime: searchForm.dateRange[0], endTime: searchForm.dateRange[1], page: pagination.currentPage, pageSize: pagination.pageSize } const result = await queryAllApi(params) tableData.value = result.data.list pagination.total = result.data.total } catch (error) { ElMessage.error('获取部门数据失败') } finally { loading.value = false } } // 处理分页变化 const handleCurrentChange = (val: number) => { pagination.currentPage = val fetchDepts() } // 处理多选 const handleSelectionChange = (val: DeptModel[]) => { multipleSelection.value = val } // 打开添加对话框 const openAddDialog = () => { dialogTitle.value = '添加部门' resetForm() dialogVisible.value = true } // 打开编辑对话框 const openEditDialog = (row: DeptModel) => { dialogTitle.value = '编辑部门' form.id = row.id form.name = row.name dialogVisible.value = true } // 重置表单 const resetForm = () => { form.id = '' form.name = '' } // 提交表单 const submitForm = async () => { try { if (!form.name.trim()) { ElMessage.warning('部门名称不能为空') return } if (form.id) { await editApi(form) ElMessage.success('部门更新成功') } else { await addApi({ name: form.name }) ElMessage.success('部门添加成功') } dialogVisible.value = false fetchDepts() } catch (error) { ElMessage.error('操作失败') } } // 删除部门 const handleDelete = (id: string) => { ElMessageBox.confirm('确定要删除该部门吗？', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { await deleteApi(id) ElMessage.success('删除成功') fetchDepts() }).catch(() => {}) } // 批量删除 const handleBatchDelete = () => { if (multipleSelection.value.length === 0) { ElMessage.warning('请选择要删除的部门') return } ElMessageBox.confirm(`确定要删除选中的 ${multipleSelection.value.length} 个部门吗？`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { const ids = multipleSelection.value.map(item => item.id) await batchDeleteApi(ids) ElMessage.success('批量删除成功') fetchDepts() }).catch(() => {}) } // 搜索部门 const searchDept = () => { pagination.currentPage = 1 fetchDepts() } // 重置搜索 const resetSearch = () => { searchForm.name = '' searchForm.dateRange = [] pagination.currentPage = 1 fetchDepts() } onMounted(() => { fetchDepts() }) </script> <template> <div class="dept-container"> <div class="header"> <h1>部门管理</h1> <el-card class="search-card"> <el-form :inline="true" :model="searchForm"> <el-form-item label="部门名称"> <el-input v-model="searchForm.name" placeholder="请输入部门名称" clearable /> </el-form-item> <el-form-item label="创建时间"> <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item> <el-button type="primary" @click="searchDept"> <el-icon><Search /></el-icon> 搜索 </el-button> <el-button @click="resetSearch"> <el-icon><Refresh /></el-icon> 重置 </el-button> </el-form-item> </el-form> </el-card> </div> <div class="operation-buttons"> <el-button type="success" @click="openAddDialog"> <el-icon><Plus /></el-icon> 新增部门 </el-button> <el-button type="danger" :disabled="multipleSelection.length === 0" @click="handleBatchDelete"> <el-icon><Delete /></el-icon> 批量删除 </el-button> </div> <el-table v-loading="loading" :data="tableData" border stripe highlight-current-row @selection-change="handleSelectionChange" > <el-table-column type="selection" width="45" align="center" /> <el-table-column type="index" label="序号" width="70" align="center" /> <el-table-column prop="name" label="部门名称" min-width="150" /> <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" /> <el-table-column prop="updateTime" label="最后修改" min-width="180" align="center" /> <el-table-column label="操作" align="center" width="200" fixed="right"> <template #default="{ row }"> <div class="action-buttons"> <el-button size="small" type="primary" @click="openEditDialog(row)" > <el-icon><Edit /></el-icon>编辑 </el-button> <el-button size="small" type="danger" @click="handleDelete(row.id)" > <el-icon><Delete /></el-icon>删除 </el-button> </div> </template> </el-table-column> </el-table> <div class="pagination-container"> <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="fetchDepts" @current-change="handleCurrentChange" /> </div> <!-- 添加/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" :close-on-click-modal="false" > <el-form ref="formRef" :model="form" label-width="80px" label-position="left" > <el-form-item label="部门名称" prop="name" :rules="[ { required: true, message: '部门名称不能为空', trigger: 'blur' }, { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' } ]" > <el-input v-model="form.name" placeholder="请输入部门名称" clearable /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确定</el-button> </div> </template> </el-dialog> </div> </template> <style scoped> .dept-container { padding: 20px; background-color: #f5f7fa; min-height: calc(100vh - 60px); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .search-card { width: 100%; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .operation-buttons { margin-bottom: 20px; } .action-buttons { display: flex; justify-content: center; gap: 8px; } .pagination-container { display: flex; justify-content: flex-end; margin-top: 20px; } :deep(.el-table) { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } :deep(.el-table__header) th { background-color: #f0f2f5; color: #333; font-weight: bold; } :deep(.el-table .el-button) { padding: 5px 10px; } </style> ``` ### 代码功能说明： 1. **搜索功能**： - 添加了部门名称搜索和时间范围筛选 - 支持重置搜索条件 - 使用卡片式布局美化搜索区域 2. **分页功能**： - 实现完整的分页逻辑 - 可调整每页显示数量 - 分页组件位于表格底部 3. **编辑功能**： - 点击编辑按钮弹出对话框 - 表单预填充当前部门信息 - 添加表单验证规则 4. **删除功能**： - 单个删除：点击删除按钮弹出确认框 - 批量删除：支持多选后批量删除 - 删除前进行二次确认 5. **样式优化**： - 使用卡片布局美化搜索区域 - 添加阴影和圆角提升视觉效果 - 优化按钮间距和图标位置 - 添加加载状态指示器 - 响应式布局适应不同屏幕 6. **用户体验优化**： - 添加操作成功/失败提示 - 表单验证（部门名称必填） - 批量删除按钮禁用状态 - 操作按钮添加图标提升可识别性 7. **代码结构优化**： - 使用Composition API组织逻辑 - 模块化功能方法 - 添加类型定义增强可维护性 ### 使用说明： 1. 搜索区域：可按部门名称和时间范围筛选 2. 操作按钮： - 新增部门：打开添加对话框 - 批量删除：需先选择表格中的部门 3. 表格操作列： - 编辑：修改部门信息 - 删除：删除单个部门 4. 分页控件：底部可切换页码和调整每页显示数量 此实现提供了完整的CRUD功能，界面美观且用户友好，符合现代Web应用的设计标准。