1.列表
在src/views/employees/index.vue
中
<template>
<div>
<!-- 员工列表 -->
<el-table border :data="list">
<el-table-column prop="username" label="姓名"/>
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="editEmployee(row.id)"
>编辑</el-button>
<el-button type="text" size="small" @click="deleteEmployee(row.id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-row>
<el-pagination
:page-sizes="[2, 5, 10, 20]"
:page-size="page.size"
:total="page.total"
layout="total, sizes, prev, pager, next, jumper" @current-page="page.page" @current-change="changePage"
@size-change="changeSize" />
</el-row>
</div>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
data () {
return {
list: [], // 员工列表
page: { // 分页信息
page: 1, // 当前页码
size: 10, // 一页的条数
total: 0// 总数
}
}
},
created () {
// 获取员工列表
this.getEmpolyeeList()
},
methods: {
// 获取员工数据
async getEmpolyeeList () {
const { rows, total } = await getEmpolyeeList(this.page)
this.page.total = total
this.list = rows
},
// 点击分页功能
changePage (newPage) {
this.page.page = newPage
this.getEmpolyeeList()
},
// 切换每页多少条数据
changeSize (newSize) {
this.page.size = newSize
this.getEmpolyeeList()
}
}
}
</script>
2.删除
在src/views/employees/index.vue
中
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
methods: {
// 删除员工
async deleteEmployee (id) {
try {
// 提示是否删除
await this.$confirm('确定删除吗')
// 删除员工
await deleteEmployee(id)
// 刷新列表
this.getEmpolyeeList()
this.$message.success('删除成功')
} catch (error) {
console.log(error)
}
}
}
}
</script>
3.新增&编辑
方式1.不封装组件
在src/views/employees/index.vue
中
<template>
<div>
<!-- 新增员工 -->
<el-row>
<el-button size="small" type="primary" @click="showDialog = true"
>新增员工</el-button
>
</el-row>
<el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
<!-- 表单 -->
<el-form
ref="addEmployee"
:model="formData"
:rules="rules"
label-width="120px"
>
<el-form-item prop="username" label="姓名">
<el-input
v-model="formData.username"
style="width: 80%"
placeholder="请输入姓名"
/>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-col :span="8">
<el-button size="small" @click="btnCancel">取消</el-button>
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
data () {
return {
// 弹出层显示隐藏
showDialog: false,
// 添加和编辑表单对象
formData: {
username: ''
},
// 表单验证规则
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
}
}
},
methods: {
// 点击编辑
async editRole (id) {
// 先获取点击数据
this.formData = await getEmployeeDetail(id)
// 在打开显示层
this.showDialog = true
},
// 对话框点击确定
async btnOK () {
try {
// 点击确定验证表单
await this.$refs.addEmployee.validate()
if (this.formData.id) {
// 编辑
await updateEmployee(this.formData)
} else {
// 新增
await addEmployee(this.formData)
}
this.$message.success('操作成功')
// 刷新列表
this.getEmpolyeeList()
// 关闭弹层
this.showDialog = false
} catch (error) {
console.log(error)
}
},
// 对话框点击取消
btnCancel () {
// 重置原来的数据-标准写法
/*
this.formData = {
username: ''
}
*/
// 重置原来的数据-简化写法写法
this.formData = this.$options.data().formData
// 重置校验结果
this.$refs.addEmployee.resetFields()
// 关闭弹层
this.showDialog = false
}
}
}
</script>
方式2.封装组件,通过props,$emit,watch消息通信
在src/views/employees/index.vue
中
a.父组件
<template>
<div>
<!-- 新增员工 -->
<el-row>
<el-button size="small" type="primary" @click="addEmployee()"
>新增员工</el-button
>
</el-row>
<!-- 员工列表 -->
<el-table border :data="list">
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="editEmployee(row.id)"
>编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- 新增/编辑员工对话框 -->
<add-employees :showDialog.sync="showDialog" :user-id="userId" @success="addEmployeesSuccess"></add-employees>
</div>
</template>
<script>
export default {
data(){
return {
//控制新增编辑对话框的显示或隐藏
showDialog: false,
//当前编辑用户的id
userId: undefined
}
},
methods: {
//打开对话框,新增用户
addEmployee(){
this.userId = undefined
this.showDialog = true
},
//打开对话框,编辑用户
editEmployee(id){
//保存当前用户的id
this.userId = id
this.showDialog = true
},
//添加/编辑成功
addEmployeesSuccess(){
// 获取员工列表
this.showDialog = false
this.getEmpolyeeList()
}
}
}
</script>
在src/views/employees/components/addEmployee.vue
中
b.子组件
<template>
<el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
<!-- 表单 -->
<el-form ref="addEmployee"
:model="formData"
:rules="rules"
label-width="120px">
<el-form-item prop="username" label="姓名">
<el-input v-model="formData.username"
style="width: 80%"
placeholder="请输入姓名"/>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-col :span="8">
<el-button size="small" @click="btnCancel">取消</el-button>
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
props: {
//当前编辑的用户id
userId: {
type: Number,
required: true
},
//控制对话框显示的变量
showDialog: {
type: Booloean,
required: true
}
},
watch: {
userId(id){
if(id != undefined){
//获取编辑的详情
this.formData = await getEmployeeDetail(id)
}
}
},
data () {
return {
// 弹出层显示隐藏
showDialog: false,
// 添加和编辑表单对象
formData: {
username: ''
},
// 表单验证规则
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
}
}
},
methods: {
// 对话框点击确定
async btnOK () {
try {
// 点击确定验证表单
await this.$refs.addEmployee.validate()
if (this.formData.id) {
// 编辑
await updateEmployee(this.formData)
} else {
// 新增
await addEmployee(this.formData)
}
this.$message.success('操作成功')
// 刷新列表
this.$emit('success')
// 关闭弹层
this.$emit('update:showDialog', false)
} catch (error) {
console.log(error)
}
},
// 对话框点击取消
btnCancel () {
// 重置原来的数据-标准写法
/*
this.formData = {
username: ''
}
*/
// 重置原来的数据-简化写法写法
this.formData = this.$options.data().formData
// 重置校验结果
this.$refs.addEmployee.resetFields()
// 关闭弹层
this.$emit('update:showDialog', false)
}
}
}
</script>
方式3.1 封装组件,通过ref,$parent直接通信(推荐)
在src/views/employees/index.vue
中
a.父组件
<template>
<div>
<!-- 新增员工 -->
<el-row>
<el-button size="small" type="primary" @click="addEmployee()"
>新增员工</el-button
>
</el-row>
<!-- 员工列表 -->
<el-table border :data="list">
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="editEmployee(row.id)"
>编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- 新增/编辑员工对话框 -->
<add-employees ref="addEmployeeRef" :showDialog.sync="showDialog"></add-employees>
</div>
</template>
<script>
export default {
data(){
return {
//控制新增编辑对话框的显示或隐藏
showDialog: false
}
},
methods: {
//打开对话框,新增用户
addEmployee(){
this.showDialog = true
},
//打开对话框,编辑用户
async editEmployee(id){
//id-当前编辑用户的
await this.$ref.addEmployeeRef.getEmployeeDetail(id)
this.showDialog = true
}
}
}
</script>
在src/views/employees/components/addEmployee.vue
中
b.子组件
<template>
<el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
<!-- 表单 -->
<el-form ref="addEmployee"
:model="formData"
:rules="rules"
label-width="120px">
<el-form-item prop="username" label="姓名">
<el-input v-model="formData.username"
style="width: 80%"
placeholder="请输入姓名"/>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-col :span="8">
<el-button size="small" @click="btnCancel">取消</el-button>
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
props: {
//控制对话框显示的变量
showDialog: {
type: Booloean,
required: true
}
},
data () {
return {
// 弹出层显示隐藏
showDialog: false,
// 添加和编辑表单对象
formData: {
username: ''
},
// 表单验证规则
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
}
}
},
methods: {
//获取编辑的详情
async getEmployeeDetail(id){
if(id != undefined){
this.formData = await getEmployeeDetail(id)
}
},
// 对话框点击确定
async btnOK () {
try {
// 点击确定验证表单
await this.$refs.addEmployee.validate()
if (this.formData.id) {
// 编辑
await updateEmployee(this.formData)
} else {
// 新增
await addEmployee(this.formData)
}
this.$message.success('操作成功')
// 刷新列表
this.$parent.getEmpolyeeList()
// 关闭弹层
this.$emit('update:showDialog', false)
} catch (error) {
console.log(error)
}
},
// 对话框点击取消
btnCancel () {
// 重置原来的数据-标准写法
/*
this.formData = {
username: ''
}
*/
// 重置原来的数据-简化写法写法
this.formData = this.$options.data().formData
// 重置校验结果
this.$refs.addEmployee.resetFields()
// 关闭弹层
this.$emit('update:showDialog', false)
}
}
}
</script>
方式3.2 封装组件,通过ref,$parent直接通信+通过v-if清空表单(推荐)
在src/views/employees/index.vue
中
a.父组件
<template>
<div>
<!-- 新增员工 -->
<el-row>
<el-button size="small" type="primary" @click="addEmployee()"
>新增员工</el-button
>
</el-row>
<!-- 员工列表 -->
<el-table border :data="list">
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="editEmployee(row.id)"
>编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- 新增/编辑员工对话框 -->
<add-employees ref="addEmployeeRef" :showDialog.sync="showDialog" v-if="showDialog"></add-employees>
</div>
</template>
<script>
export default {
data(){
return {
//控制新增编辑对话框的显示或隐藏
showDialog: false
}
},
methods: {
//打开对话框,新增用户
addEmployee(){
this.showDialog = true
},
//打开对话框,编辑用户
async editEmployee(id){
//id-当前编辑用户的
this.showDialog = true
//在对话框显示完成后让组件获取数据
this.$nextTick(()=>{
await this.$ref.addEmployeeRef.getEmployeeDetail(id)
})
}
}
}
</script>
在src/views/employees/components/addEmployee.vue
中
b.子组件
<template>
<el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
<!-- 表单 -->
<el-form ref="addEmployee"
:model="formData"
:rules="rules"
label-width="120px">
<el-form-item prop="username" label="姓名">
<el-input v-model="formData.username"
style="width: 80%"
placeholder="请输入姓名"/>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-col :span="8">
<el-button size="small" @click="btnCancel">取消</el-button>
<el-button size="small" type="primary" @click="btnOK">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
props: {
//控制对话框显示的变量
showDialog: {
type: Booloean,
required: true
}
},
data () {
return {
// 弹出层显示隐藏
showDialog: false,
// 添加和编辑表单对象
formData: {
username: ''
},
// 表单验证规则
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
}
}
},
methods: {
//获取编辑的详情
async getEmployeeDetail(id){
if(id != undefined){
this.formData = await getEmployeeDetail(id)
}
},
// 对话框点击确定
async btnOK () {
try {
// 点击确定验证表单
await this.$refs.addEmployee.validate()
if (this.formData.id) {
// 编辑
await updateEmployee(this.formData)
} else {
// 新增
await addEmployee(this.formData)
}
this.$message.success('操作成功')
// 刷新列表
this.$parent.getEmpolyeeList()
// 关闭弹层
this.$emit('update:showDialog', false)
} catch (error) {
console.log(error)
}
},
// 对话框点击取消
btnCancel () {
//不需要手动重置表单应该v-if会自动消耗组件
// 关闭弹层
this.$emit('update:showDialog', false)
}
}
}
</script>