|
|
@ -4,11 +4,13 @@ |
|
|
<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"> |
|
|
<div class="left"> |
|
|
<h1>用户姓名：</h1> |
|
|
<h1>用户姓名：</h1> |
|
|
<input type="text" v-model="state1" class="textInput"/> |
|
|
<input type="text" v-model="state1" class="textInput"/> |
|
|
<div><img src="/images/search.png" @click="onSearch"></div> |
|
|
<div><img src="/images/search.png" @click="onSearch"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<span @click="onAddClick">添加新用户</span> |
|
|
<span @click="onAddClick">添加新用户</span> |
|
|
</div> |
|
|
</div> |
|
|
@ -44,6 +46,7 @@ |
|
|
<el-pagination background |
|
|
<el-pagination background |
|
|
layout="prev, pager, next" |
|
|
layout="prev, pager, next" |
|
|
:total="total" |
|
|
:total="total" |
|
|
|
|
|
hide-on-single-page="hide-on-single-page" |
|
|
@prev-click="prev" |
|
|
@prev-click="prev" |
|
|
@next-click="next" |
|
|
@next-click="next" |
|
|
@current-change="changEnum"> |
|
|
@current-change="changEnum"> |
|
|
@ -51,11 +54,13 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!--弹出框---> |
|
|
<!--弹出框---> |
|
|
<el-dialog v-model="dialogFormVisible" :title="title" center=true width="900px" top="17%"> |
|
|
<el-dialog v-model="dialogFormVisible" :title="title" center=center width="900px" top="17%"> |
|
|
<el-form :model="form"> |
|
|
<el-form :model="form"> |
|
|
<el-form-item label="用户账号：" :label-width="formLabelWidth" > |
|
|
<el-form-item label="用户账号：" :label-width="formLabelWidth"> |
|
|
<el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px" :disabled="isDisabled"></el-input> |
|
|
<el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px" |
|
|
|
|
|
:disabled="isDisabled"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="用户密码：" :label-width="formLabelWidth"> |
|
|
<el-form-item label="用户密码：" :label-width="formLabelWidth"> |
|
|
<el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input> |
|
|
<el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input> |
|
|
@ -81,66 +86,66 @@ |
|
|
</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 |
|
|
@ -148,18 +153,17 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//删除用户 |
|
|
//删除用户 |
|
|
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: "删除成功", |
|
|
@ -170,45 +174,44 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//图片搜索 |
|
|
//图片搜索 |
|
|
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 = () => { |
|
|
const verify = () => { |
|
|
let errors = []; |
|
|
let errors = []; |
|
|
if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == ""){ |
|
|
if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == "") { |
|
|
errors.push("用户账号"); |
|
|
errors.push("用户账号"); |
|
|
} |
|
|
} |
|
|
if (option.form.userPassword == null || option.form.userPassword.trim() == ""){ |
|
|
if (option.form.userPassword == null || option.form.userPassword.trim() == "") { |
|
|
errors.push("用户密码"); |
|
|
errors.push("用户密码"); |
|
|
} |
|
|
} |
|
|
if (option.form.userName == null || option.form.userName.trim() == ""){ |
|
|
if (option.form.userName == null || option.form.userName.trim() == "") { |
|
|
errors.push("用户姓名"); |
|
|
errors.push("用户姓名"); |
|
|
} |
|
|
} |
|
|
if (errors.length > 0){ |
|
|
if (errors.length > 0) { |
|
|
ElMessage.error({ |
|
|
ElMessage.error({ |
|
|
message: format("{0}不能为空", errors.join(", ")), |
|
|
message: format("{0}不能为空", errors.join(", ")), |
|
|
type: 'error' |
|
|
type: 'error' |
|
|
@ -217,18 +220,18 @@ export default { |
|
|
return errors.length > 0; |
|
|
return errors.length > 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const submit = ()=> { |
|
|
const submit = () => { |
|
|
if (verify()) return; |
|
|
if (verify()) return; |
|
|
if(option.title === '修改信息'){ |
|
|
if (option.title === '修改信息') { |
|
|
post("user/updateUser", 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: "修改成功", |
|
|
@ -238,17 +241,17 @@ export default { |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if(option.title === '添加用户'){ |
|
|
if (option.title === '添加用户') { |
|
|
if (verify()) return; |
|
|
if (verify()) return; |
|
|
post("user/insertUser",option.form,"application/json").then((res:any)=>{ |
|
|
post("user/insertUser", 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: "修改成功", |
|
|
@ -272,32 +275,32 @@ export default { |
|
|
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{ |
|
|
.left { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.textInput{ |
|
|
.textInput { |
|
|
width: 305px; |
|
|
width: 305px; |
|
|
height: 35px; |
|
|
height: 35px; |
|
|
line-height: 35px; |
|
|
line-height: 35px; |
|
|
@ -305,7 +308,7 @@ export default { |
|
|
text-indent: 10px; |
|
|
text-indent: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
h1{ |
|
|
h1 { |
|
|
width: 100px; |
|
|
width: 100px; |
|
|
height: 26px; |
|
|
height: 26px; |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
@ -315,7 +318,7 @@ export default { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
img{ |
|
|
img { |
|
|
width: 44px; |
|
|
width: 44px; |
|
|
height: 44px; |
|
|
height: 44px; |
|
|
margin-left: 10px; |
|
|
margin-left: 10px; |
|
|
@ -324,7 +327,7 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.right{ |
|
|
.right { |
|
|
width: 100px; |
|
|
width: 100px; |
|
|
height: 26px; |
|
|
height: 26px; |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
@ -333,7 +336,7 @@ export default { |
|
|
color: #498DF0; |
|
|
color: #498DF0; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
|
|
|
|
|
|
span{ |
|
|
span { |
|
|
width: 96px; |
|
|
width: 96px; |
|
|
height: 0px; |
|
|
height: 0px; |
|
|
border-bottom: 1px solid #498DF0; |
|
|
border-bottom: 1px solid #498DF0; |
|
|
@ -343,7 +346,7 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tableMessage{ |
|
|
.tableMessage { |
|
|
padding: 36px 20px 20px; |
|
|
padding: 36px 20px 20px; |
|
|
font-size: 18px; |
|
|
font-size: 18px; |
|
|
|
|
|
|
|
|
@ -359,27 +362,28 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
:deep(.el-table thead){ |
|
|
|
|
|
|
|
|
:deep(.el-table thead) { |
|
|
color: black; |
|
|
color: black; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.el-form-item__label){ |
|
|
:deep(.el-form-item__label) { |
|
|
text-align: left; |
|
|
text-align: left; |
|
|
color: #000000; |
|
|
color: #000000; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.el-form){ |
|
|
:deep(.el-form) { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
width: 90%; |
|
|
width: 90%; |
|
|
//align-content: flex-start; |
|
|
//align-content: flex-start; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.el-button){ |
|
|
:deep(.el-button) { |
|
|
width: 159px; |
|
|
width: 159px; |
|
|
height: 44px; |
|
|
height: 44px; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
@ -387,5 +391,5 @@ export default { |
|
|
border: 1px solid #498DF0; |
|
|
border: 1px solid #498DF0; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: #498DF0; |
|
|
color: #498DF0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
