5 changed files with 377 additions and 350 deletions
@ -1,391 +1,395 @@ |
|||
<template> |
|||
<div class="tabs"> |
|||
</div> |
|||
<div class="main"> |
|||
<div class="container system-container panel"> |
|||
<div class="box"> |
|||
<div class="left"> |
|||
<h1>用户姓名：</h1> |
|||
<input type="text" v-model="state1" class="textInput"/> |
|||
<div><img src="/images/search.png" @click="onSearch"></div> |
|||
</div> |
|||
<div class="right"> |
|||
<span @click="onAddClick">添加新用户</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tableMessage"> |
|||
<el-table :data="tableData" border style="color: black;"> |
|||
<el-table-column type="index" label="序号" align="center" width="100px"/> |
|||
<el-table-column prop="userName" label="用户姓名" align="center"/> |
|||
<el-table-column prop="userAccountNumber" label="用户账号" align="center"/> |
|||
<el-table-column prop="userPhone" label="电话" align="center"/> |
|||
<el-table-column prop="userEmail" label="邮箱" align="center"/> |
|||
<el-table-column prop="operation" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<span @click.prevent="onAmendClick(scope.$index, tableData)">修改信息</span> |
|||
<!--删除--> |
|||
<el-popconfirm |
|||
confirm-button-text="确认" |
|||
cancel-button-text="取消" |
|||
@confirm="confirmEvent(scope.$index, tableData)" |
|||
title="确认删除?"> |
|||
<template #reference> |
|||
<span>删除用户</span> |
|||
</template> |
|||
</el-popconfirm> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!---分页--> |
|||
<div class="pagination"> |
|||
<el-pagination background |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
@prev-click="prev" |
|||
@next-click="next" |
|||
@current-change="changEnum"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
<div class="tabs"> |
|||
</div> |
|||
<div class="main"> |
|||
<div class="container system-container panel"> |
|||
<div class="box"> |
|||
|
|||
<div class="left"> |
|||
<h1>用户姓名：</h1> |
|||
<input type="text" v-model="state1" class="textInput"/> |
|||
<div><img src="/images/search.png" @click="onSearch"></div> |
|||
</div> |
|||
|
|||
<div class="right"> |
|||
<span @click="onAddClick">添加新用户</span> |
|||
</div> |
|||
<!--弹出框---> |
|||
<el-dialog v-model="dialogFormVisible" :title="title" center=true width="900px" top="17%"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="用户账号：" :label-width="formLabelWidth" > |
|||
<el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px" :disabled="isDisabled"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户密码：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="电话：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userPhone" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userEmail" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户姓名：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userName" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
</div> |
|||
|
|||
<div class="tableMessage"> |
|||
<el-table :data="tableData" border style="color: black;"> |
|||
<el-table-column type="index" label="序号" align="center" width="100px"/> |
|||
<el-table-column prop="userName" label="用户姓名" align="center"/> |
|||
<el-table-column prop="userAccountNumber" label="用户账号" align="center"/> |
|||
<el-table-column prop="userPhone" label="电话" align="center"/> |
|||
<el-table-column prop="userEmail" label="邮箱" align="center"/> |
|||
<el-table-column prop="operation" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<span @click.prevent="onAmendClick(scope.$index, tableData)">修改信息</span> |
|||
<!--删除--> |
|||
<el-popconfirm |
|||
confirm-button-text="确认" |
|||
cancel-button-text="取消" |
|||
@confirm="confirmEvent(scope.$index, tableData)" |
|||
title="确认删除?"> |
|||
<template #reference> |
|||
<span>删除用户</span> |
|||
</template> |
|||
</el-popconfirm> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!---分页--> |
|||
<div class="pagination"> |
|||
<el-pagination background |
|||
layout="prev, pager, next" |
|||
:total="total" |
|||
hide-on-single-page="hide-on-single-page" |
|||
@prev-click="prev" |
|||
@next-click="next" |
|||
@current-change="changEnum"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--弹出框---> |
|||
<el-dialog v-model="dialogFormVisible" :title="title" center=center width="900px" top="17%"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="用户账号：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px" |
|||
:disabled="isDisabled"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户密码：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="电话：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userPhone" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userEmail" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户姓名：" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.userName" autocomplete="off" style="width: 260px"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button type="primary" @click="submit" style="color:#FFFFFF;">保存</el-button> |
|||
<el-button @click="dialogFormVisible = false">取消</el-button> |
|||
<el-button @click="dialogFormVisible = false">取消</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
|
|||
import {onMounted, reactive, toRefs} from 'vue'; |
|||
import {post} from "../uilts/axios"; |
|||
import {ElMessage} from 'element-plus' |
|||
import {format} from '../uilts/String'; |
|||
|
|||
<script lang="ts"> |
|||
import {onMounted, reactive, toRefs} from 'vue'; |
|||
import { post } from "../uilts/axios"; |
|||
import { ElMessage } from 'element-plus' |
|||
import { format } from '../uilts/String'; |
|||
export default { |
|||
name: 'SystemManagement', |
|||
setup() { |
|||
let option = reactive({ |
|||
state1:'', |
|||
dialogFormVisible:false, |
|||
isDisabled:false, |
|||
title:'', |
|||
formLabelWidth:"100px", |
|||
total:null, |
|||
current:1, |
|||
size:10, |
|||
form:{ |
|||
userName:'', |
|||
userAccountNumber:'', |
|||
userPhone:'', |
|||
userEmail:'', |
|||
userPassword:'' |
|||
}, |
|||
tableData:[] |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
findAllUser(); |
|||
}) |
|||
|
|||
const findAllUser = ()=>{ |
|||
return post("user/findUserByUserName",{ |
|||
userName: option.state1.trim(), |
|||
current:option.current, |
|||
size:option.size |
|||
}).then((res:any)=>{ |
|||
option.tableData= res.data.records; |
|||
option.total = res.data.total; |
|||
}) |
|||
} |
|||
name: 'SystemManagement', |
|||
setup() { |
|||
let option = reactive({ |
|||
state1: '', |
|||
dialogFormVisible: false, |
|||
isDisabled: false, |
|||
title: '', |
|||
formLabelWidth: "100px", |
|||
total: null, |
|||
current: 1, |
|||
size: 10, |
|||
form: { |
|||
userName: '', |
|||
userAccountNumber: '', |
|||
userPhone: '', |
|||
userEmail: '', |
|||
userPassword: '' |
|||
}, |
|||
tableData: [] |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
findAllUser(); |
|||
}) |
|||
|
|||
const findAllUser = () => { |
|||
return post("user/findUserByUserName", { |
|||
userName: option.state1.trim(), |
|||
current: option.current, |
|||
size: option.size |
|||
}).then((res: any) => { |
|||
option.tableData = res.data.records; |
|||
option.total = res.data.total; |
|||
}) |
|||
} |
|||
|
|||
//添加用户 |
|||
const onAddClick = ()=> { |
|||
option.isDisabled=false |
|||
option.title = '添加用户' |
|||
option.dialogFormVisible = true |
|||
option.form = { |
|||
userName:'', |
|||
userAccountNumber:'', |
|||
userPhone:'', |
|||
userEmail:'', |
|||
userPassword:'' |
|||
} |
|||
} |
|||
//添加用户 |
|||
const onAddClick = () => { |
|||
option.isDisabled = false |
|||
option.title = '添加用户' |
|||
option.dialogFormVisible = true |
|||
option.form = { |
|||
userName: '', |
|||
userAccountNumber: '', |
|||
userPhone: '', |
|||
userEmail: '', |
|||
userPassword: '' |
|||
} |
|||
} |
|||
|
|||
//修改用户 |
|||
const onAmendClick = (index, rows)=>{ |
|||
option.isDisabled = true |
|||
option.title = '修改信息' |
|||
option.dialogFormVisible = true |
|||
option.form = JSON.parse(JSON.stringify(rows[index])) |
|||
} |
|||
//修改用户 |
|||
const onAmendClick = (index, rows) => { |
|||
option.isDisabled = true |
|||
option.title = '修改信息' |
|||
option.dialogFormVisible = true |
|||
option.form = JSON.parse(JSON.stringify(rows[index])) |
|||
} |
|||
|
|||
//删除用户 |
|||
const confirmEvent = (index, rows)=>{ |
|||
console.log(rows[index].userAccountNumber) |
|||
post('user/delUser',{ |
|||
userAccountNumber:rows[index].userAccountNumber |
|||
}).then((res:any)=>{ |
|||
if (res.error != 0){ |
|||
ElMessage.error({ |
|||
message: "删除失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
}else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "删除成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
//删除用户 |
|||
const confirmEvent = (index, rows) => { |
|||
post('user/delUser', { |
|||
userAccountNumber: rows[index].userAccountNumber |
|||
}).then((res: any) => { |
|||
if (res.error != 0) { |
|||
ElMessage.error({ |
|||
message: "删除失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
} else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "删除成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
//图片搜索 |
|||
const onSearch = ()=> { |
|||
post("user/findUserByUserName",{ |
|||
current: option.current, |
|||
size: option.size, |
|||
userName: option.state1 |
|||
}).then((res:any) => { |
|||
option.tableData= res.data.records; |
|||
option.total = res.data.total; |
|||
console.log(res) |
|||
}) |
|||
} |
|||
//图片搜索 |
|||
const onSearch = () => { |
|||
post("user/findUserByUserName", { |
|||
current: option.current, |
|||
size: option.size, |
|||
userName: option.state1 |
|||
}).then((res: any) => { |
|||
option.tableData = res.data.records; |
|||
option.total = res.data.total; |
|||
}) |
|||
} |
|||
|
|||
const prev = (e)=>{ |
|||
option.current= e |
|||
findAllUser() |
|||
} |
|||
const prev = (e) => { |
|||
option.current = e |
|||
findAllUser() |
|||
} |
|||
|
|||
const next = (e)=>{ |
|||
option.current= e |
|||
findAllUser() |
|||
} |
|||
const next = (e) => { |
|||
option.current = e |
|||
findAllUser() |
|||
} |
|||
|
|||
const changEnum = (e)=> { |
|||
option.current = e; |
|||
findAllUser() |
|||
} |
|||
const changEnum = (e) => { |
|||
option.current = e; |
|||
findAllUser() |
|||
} |
|||
|
|||
const verify = () => { |
|||
let errors = []; |
|||
if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == "") { |
|||
errors.push("用户账号"); |
|||
} |
|||
if (option.form.userPassword == null || option.form.userPassword.trim() == "") { |
|||
errors.push("用户密码"); |
|||
} |
|||
if (option.form.userName == null || option.form.userName.trim() == "") { |
|||
errors.push("用户姓名"); |
|||
} |
|||
if (errors.length > 0) { |
|||
ElMessage.error({ |
|||
message: format("{0}不能为空", errors.join(", ")), |
|||
type: 'error' |
|||
}); |
|||
} |
|||
return errors.length > 0; |
|||
} |
|||
|
|||
const verify = () => { |
|||
let errors = []; |
|||
if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == ""){ |
|||
errors.push("用户账号"); |
|||
} |
|||
if (option.form.userPassword == null || option.form.userPassword.trim() == ""){ |
|||
errors.push("用户密码"); |
|||
} |
|||
if (option.form.userName == null || option.form.userName.trim() == ""){ |
|||
errors.push("用户姓名"); |
|||
} |
|||
if (errors.length > 0){ |
|||
ElMessage.error({ |
|||
message: format("{0}不能为空", errors.join(", ")), |
|||
type: 'error' |
|||
}); |
|||
} |
|||
return errors.length > 0; |
|||
const submit = () => { |
|||
if (verify()) return; |
|||
if (option.title === '修改信息') { |
|||
post("user/updateUser", option.form, "application/json").then((res: any) => { |
|||
option.dialogFormVisible = false |
|||
if (res.error != 0) { |
|||
ElMessage.error({ |
|||
message: "修改失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
} else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "修改成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const submit = ()=> { |
|||
if (verify()) return; |
|||
if(option.title === '修改信息'){ |
|||
post("user/updateUser", option.form, "application/json").then((res: any) => { |
|||
option.dialogFormVisible=false |
|||
if (res.error != 0){ |
|||
ElMessage.error({ |
|||
message: "修改失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
}else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "修改成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
|
|||
if(option.title === '添加用户'){ |
|||
if (verify()) return; |
|||
post("user/insertUser",option.form,"application/json").then((res:any)=>{ |
|||
option.dialogFormVisible = false |
|||
if (res.error != 0){ |
|||
ElMessage.error({ |
|||
message: "修改失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
}else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "修改成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
if (option.title === '添加用户') { |
|||
if (verify()) return; |
|||
post("user/insertUser", option.form, "application/json").then((res: any) => { |
|||
option.dialogFormVisible = false |
|||
if (res.error != 0) { |
|||
ElMessage.error({ |
|||
message: "修改失败", |
|||
type: 'error' |
|||
}); |
|||
return; |
|||
} else { |
|||
findAllUser() |
|||
ElMessage.success({ |
|||
message: "修改成功", |
|||
type: 'success' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
return { |
|||
...toRefs(option), |
|||
onAddClick, |
|||
onAmendClick, |
|||
onSearch, |
|||
submit, |
|||
findAllUser, |
|||
confirmEvent, |
|||
prev, |
|||
next, |
|||
changEnum |
|||
} |
|||
} |
|||
return { |
|||
...toRefs(option), |
|||
onAddClick, |
|||
onAmendClick, |
|||
onSearch, |
|||
submit, |
|||
findAllUser, |
|||
confirmEvent, |
|||
prev, |
|||
next, |
|||
changEnum |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="less" scoped> |
|||
|
|||
.system-container { |
|||
width: 100%; |
|||
margin-left: 0; |
|||
.system-container { |
|||
width: 100%; |
|||
margin-left: 0; |
|||
|
|||
.pagination{ |
|||
margin-top: 10px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.pagination { |
|||
margin-top: 10px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.box{ |
|||
padding: 28px 20px 0px ; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.left{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.textInput{ |
|||
width: 305px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
font-size: 20px; |
|||
text-indent: 10px; |
|||
} |
|||
|
|||
h1{ |
|||
width: 100px; |
|||
height: 26px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
color: #000000; |
|||
opacity: 1; |
|||
} |
|||
|
|||
img{ |
|||
width: 44px; |
|||
height: 44px; |
|||
margin-left: 10px; |
|||
padding-top: 4px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.box { |
|||
padding: 28px 20px 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.right{ |
|||
width: 100px; |
|||
height: 26px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
color: #498DF0; |
|||
opacity: 1; |
|||
|
|||
span{ |
|||
width: 96px; |
|||
height: 0px; |
|||
border-bottom: 1px solid #498DF0; |
|||
opacity: 1; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.left { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.textInput { |
|||
width: 305px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
font-size: 20px; |
|||
text-indent: 10px; |
|||
} |
|||
|
|||
.tableMessage{ |
|||
padding: 36px 20px 20px; |
|||
font-size: 18px; |
|||
h1 { |
|||
width: 100px; |
|||
height: 26px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
color: #000000; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.operation { |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
img { |
|||
width: 44px; |
|||
height: 44px; |
|||
margin-left: 10px; |
|||
padding-top: 4px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
span { |
|||
border-bottom: 1px solid #000000; |
|||
opacity: 1; |
|||
cursor: pointer; |
|||
font-weight: 400; |
|||
} |
|||
.right { |
|||
width: 100px; |
|||
height: 26px; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
color: #498DF0; |
|||
opacity: 1; |
|||
|
|||
} |
|||
:deep(.el-table thead){ |
|||
color: black; |
|||
span { |
|||
width: 96px; |
|||
height: 0px; |
|||
border-bottom: 1px solid #498DF0; |
|||
opacity: 1; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.el-form-item__label){ |
|||
text-align: left; |
|||
color: #000000; |
|||
} |
|||
.tableMessage { |
|||
padding: 36px 20px 20px; |
|||
font-size: 18px; |
|||
|
|||
:deep(.el-form){ |
|||
.operation { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
margin: 0 auto; |
|||
width: 90%; |
|||
//align-content: flex-start; |
|||
justify-content: space-evenly; |
|||
|
|||
span { |
|||
border-bottom: 1px solid #000000; |
|||
opacity: 1; |
|||
cursor: pointer; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
} |
|||
|
|||
:deep(.el-button){ |
|||
width: 159px; |
|||
height: 44px; |
|||
opacity: 1; |
|||
border-radius: 4px; |
|||
border: 1px solid #498DF0; |
|||
font-weight: 400; |
|||
color: #498DF0; |
|||
:deep(.el-table thead) { |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.el-form-item__label) { |
|||
text-align: left; |
|||
color: #000000; |
|||
} |
|||
|
|||
:deep(.el-form) { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
margin: 0 auto; |
|||
width: 90%; |
|||
//align-content: flex-start; |
|||
} |
|||
|
|||
:deep(.el-button) { |
|||
width: 159px; |
|||
height: 44px; |
|||
opacity: 1; |
|||
border-radius: 4px; |
|||
border: 1px solid #498DF0; |
|||
font-weight: 400; |
|||
color: #498DF0; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue