用elementUI写一个员工信息列表姓名手机号用户名密码性别身份证号员工类型具有搜索新增查看编辑删除批量删除功能
<!-- 员工信息列表 -->
<template>
<div>
<!-- 搜索框 -->
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
</el-form-item>
</el-form>
<pre><code><!-- 操作按钮 -->
<el-row class="toolbar">
<el-col span="6">
<el-button type="primary" @click="add">新增</el-button>
<el-button type="danger" @click="batchDelete">批量删除</el-button>
</el-col>
</el-row>
<!-- 员工信息表格 -->
<el-table :data="employeeList" style="width: 100%" v-loading="loading">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="phone" label="手机号"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="password" label="密码"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="idCard" label="身份证号"></el-table-column>
<el-table-column prop="type" label="员工类型"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="view(scope.row)">查看</el-button>
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
<el-button type="text" @click="remove(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
background
:total="total"
:page-size="pageSize"
layout="total,prev,pager,next"
@current-change="handleCurrentChange"
></el-pagination>
<!-- 新增/编辑员工信息弹窗 -->
<el-dialog :visible.sync="dialogVisible" title="员工信息" :close-on-click-modal="false">
<el-form ref="form" :model="employee" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="employee.name"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="employee.phone"></el-input>
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="employee.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="employee.password"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="employee.gender">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="employee.idCard"></el-input>
</el-form-item>
<el-form-item label="员工类型" prop="type">
<el-select v-model="employee.type" placeholder="请选择">
<el-option label="普通员工" value="普通员工"></el-option>
<el-option label="管理员" value="管理员"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</code></pre>
</div>
</template>
<script>
import { getEmployeeList, deleteEmployee, batchDeleteEmployee, addEmployee, updateEmployee } from '@/api/employee'
export default {
data() {
return {
searchForm: {
name: '',
phone: ''
},
employeeList: [],
total: 0,
pageSize: 10,
currentPage: 1,
loading: false,
dialogVisible: false,
employee: {
name: '',
phone: '',
username: '',
password: '',
gender: '男',
idCard: '',
type: '普通员工'
},
rules: {
name: [
{ required: true, message: '姓名不能为空', trigger: 'blur' }
],
phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' }
],
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
idCard: [
{ required: true, message: '身份证号不能为空', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择员工类型', trigger: 'blur' }
]
}
}
},
methods: {
// 搜索
search() {
this.currentPage = 1
this.getEmployeeList()
},
// 新增员工信息
add() {
this.dialogVisible = true
this.employee = {
name: '',
phone: '',
username: '',
password: '',
gender: '男',
idCard: '',
type: '普通员工'
}
},
// 查看员工信息
view(row) {
this.dialogVisible = true
this.employee = Object.assign({}, row)
},
// 编辑员工信息
edit(row) {
this.dialogVisible = true
this.employee = Object.assign({}, row)
},
// 提交表单
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.employee.id) {
// 编辑员工信息
updateEmployee(this.employee).then(() => {
this.$message.success('编辑成功')
this.getEmployeeList()
this.dialogVisible = false
})
} else {
// 新增员工信息
addEmployee(this.employee).then(() => {
this.$message.success('新增成功')
this.getEmployeeList()
this.dialogVisible = false
})
}
}
})
},
// 删除员工信息
remove(row) {
this.$confirm('确定删除该员工信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteEmployee(row.id).then(() => {
this.$message.success('删除成功')
this.getEmployeeList()
})
})
},
// 批量删除员工信息
batchDelete() {
const ids = this.employeeList.filter(item => item.checked).map(item => item.id)
if (ids.length === 0) {
this.$message.warning('请先选择要删除的员工信息')
return
}
this.$confirm('确定删除选中的员工信息吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
batchDeleteEmployee(ids).then(() => {
this.$message.success('删除成功')
this.getEmployeeList()
})
})
},
// 分页器页码改变时触发
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.getEmployeeList()
},
// 获取员工信息列表
getEmployeeList() {
this.loading = true
getEmployeeList({
name: this.searchForm.name,
phone: this.searchForm.phone,
currentPage: this.currentPage,
pageSize: this.pageSize
}).then(res => {
this.employeeList = res.list
this.total = res.total
this.loading = false
})
}
},
mounted() {
this.getEmployeeList()
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/b5XL 著作权归作者所有。请勿转载和采集!