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