完成用户管理的修改添加功能框架
This commit is contained in:
bicey
parent
26789a7fa4
commit
491a667d03
@ -95,10 +95,15 @@
|
||||
前端提供的数据，用户名
|
||||
```json
|
||||
{
|
||||
"username": "user1"
|
||||
"user":{
|
||||
"username": "user2",
|
||||
"password": "123456",
|
||||
"auth": "1",
|
||||
"other": "更多需要提供的数据请写在接口文档里"
|
||||
}
|
||||
}
|
||||
```
|
||||
后端返回对应的一个用户全部信息
|
||||
后端修改对应的用户返回结果
|
||||
|
||||
|
||||
|
||||
|
||||
55
src/components/ZooUserFormDialog.vue
Normal file
55
src/components/ZooUserFormDialog.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "ZooUserFormDialog",
|
||||
data() {
|
||||
return {
|
||||
userForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
auth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
user:{
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.user) {
|
||||
this.userForm = this.user
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="userForm.username" autocomplete="off" placeholder="请设置用户名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input
|
||||
v-model="userForm.password"
|
||||
type="password"
|
||||
placeholder="请设置登录密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份">
|
||||
<el-select v-model="userForm.auth" placeholder="选择身份">
|
||||
<el-option label="管理员" :value="0"/>
|
||||
<el-option label="饲养员" :value="1"/>
|
||||
<el-option label="兽医" :value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="right">
|
||||
<slot :form="userForm"></slot>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -24,6 +24,14 @@ export default {
|
||||
})
|
||||
} else {
|
||||
//此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
|
||||
//密码错误
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '用户名不存在或密码错误',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
//登录成功
|
||||
sessionStorage.setItem('isLogin', 'isLogin');//登录状态
|
||||
localStorage.setItem('userName', this.user.username);//本地存储登录用户名
|
||||
this.updateUserName(this.user.username);//存储登录用户名
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
<script>
|
||||
import {Delete, Edit, User} from "@element-plus/icons-vue";
|
||||
import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
|
||||
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ZooUser",
|
||||
components: {ZooUserFormDialog},
|
||||
computed: {
|
||||
//返回图标
|
||||
// region
|
||||
Search() {
|
||||
return Search
|
||||
},
|
||||
User() {
|
||||
return User
|
||||
},
|
||||
@ -14,38 +21,122 @@ export default {
|
||||
Edit() {
|
||||
return Edit
|
||||
},
|
||||
usersFilter() {
|
||||
let newusers = JSON.stringify(this.users)
|
||||
newusers = JSON.parse(newusers)//深拷贝数组
|
||||
|
||||
// endregion
|
||||
|
||||
dataFilters() {
|
||||
// 计算格式化后的数组
|
||||
newusers.forEach(e => {
|
||||
let data = this.copy(this.tableData)
|
||||
data.forEach(e => {
|
||||
if (e.auth === 0) {
|
||||
e.auth = '管理员'
|
||||
}
|
||||
else if (e.auth === 1) {
|
||||
} else if (e.auth === 1) {
|
||||
e.auth = '饲养员'
|
||||
}
|
||||
else if (e.auth === 2) {
|
||||
} else if (e.auth === 2) {
|
||||
e.auth = '兽医'
|
||||
}
|
||||
})
|
||||
return newusers
|
||||
return data
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchUser();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: []
|
||||
users: [],//原始用户数据
|
||||
tableData: [],//用来显示在界面的数据
|
||||
searchInput: {
|
||||
auth: '',
|
||||
keyWord: ''
|
||||
},
|
||||
dialog: {
|
||||
addDialogVisible: false,//添加用户对话框
|
||||
editDialogVisible: false,//编辑用户对话框
|
||||
editUser:{}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showEditDialog(user) {
|
||||
console.log('点击了编辑',user)
|
||||
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
|
||||
this.dialog.editUser = this.users.find(e => e.username === user.username)
|
||||
console.log('点击了编辑',this.dialog.editUser)
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
editUser(user) {
|
||||
console.log('编辑用户', user)
|
||||
console.log('确认编辑用户', user)
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '编辑失败',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '编辑成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
deleteUser(user) {
|
||||
console.log('删除用户', user)
|
||||
console.log('确认删除用户', user)
|
||||
},
|
||||
addUser() {
|
||||
console.log('添加用户')
|
||||
addUser(user) {
|
||||
console.log('添加用户',user)
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '该用户已存在',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
//添加成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
},
|
||||
searchUser() {
|
||||
console.log('搜索用户', this.searchInput)
|
||||
let searchResult = []
|
||||
this.users.forEach(e => {
|
||||
if (e.username.includes(this.searchInput.keyWord)) {
|
||||
searchResult.push(this.copy(e))
|
||||
}
|
||||
})
|
||||
let searchResult2 = []
|
||||
console.log('this.searchInput.auth', this.searchInput.auth, typeof this.searchInput.auth == 'number')
|
||||
if (typeof this.searchInput.auth === 'number') {
|
||||
searchResult.forEach(e => {
|
||||
if (e.auth === this.searchInput.auth) {
|
||||
searchResult2.push(this.copy(e))
|
||||
}
|
||||
})
|
||||
searchResult = searchResult2
|
||||
}
|
||||
|
||||
this.tableData = searchResult;
|
||||
},
|
||||
//深拷贝任何值
|
||||
copy(value) {
|
||||
let result = JSON.stringify(value)
|
||||
return JSON.parse(result)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -59,6 +150,7 @@ export default {
|
||||
}
|
||||
this.users.push(user)
|
||||
}
|
||||
this.tableData = this.copy(this.users);//复制一份给表格展示
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -66,18 +158,36 @@ export default {
|
||||
<template>
|
||||
<div id="root">
|
||||
<div class="select">
|
||||
<el-button type="primary" :icon="User" @click="addUser()">添加用户</el-button>
|
||||
<el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">添加用户</el-button>
|
||||
<el-input
|
||||
v-model="searchInput.keyWord"
|
||||
style="max-width: 300px"
|
||||
placeholder="搜索用户"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="管理员" :value="0"/>
|
||||
<el-option label="饲养员" :value="1"/>
|
||||
<el-option label="兽医" :value="2"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchUser()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<div class="table">
|
||||
<el-table :data="usersFilter" style="width: 100%;height: 90%">
|
||||
<el-table :data="dataFilters" style="width: 100%;height: 90%" empty-text="暂无数据">
|
||||
<el-table-column fixed prop="username" label="用户名" width="150"/>
|
||||
<el-table-column prop="password" label="密码" width="120"/>
|
||||
<el-table-column prop="auth" label="身份" width="120"/>
|
||||
<el-table-column prop="" label="占位置" width="700"/>
|
||||
<el-table-column fixed="right" label="Operations" width="130">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="editUser(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
|
||||
@ -88,6 +198,30 @@ export default {
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加用户对话框-->
|
||||
<el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>
|
||||
<ZooUserFormDialog class="dialog-form">
|
||||
<template #default="form">
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消</el-button>
|
||||
<el-button type="primary" @click="addUser(form)">
|
||||
添加</el-button>
|
||||
</template>
|
||||
</ZooUserFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑用户对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow>
|
||||
<ZooUserFormDialog :user="dialog.editUser">
|
||||
<template #default="form">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消</el-button>
|
||||
<el-button type="primary" @click="editUser(form)">
|
||||
修改</el-button>
|
||||
</template>
|
||||
</ZooUserFormDialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -100,20 +234,4 @@ export default {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.el-table .warning-row {
|
||||
--el-table-tr-bg-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
.el-table .info-row {
|
||||
--el-table-tr-bg-color: var(--el-color-info-light-9);
|
||||
}
|
||||
|
||||
.el-table .danger-row {
|
||||
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user