<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构建的，帮我完善剩下的功能，美化样式
扫一扫
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
