You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
11 KiB
389 lines
11 KiB
<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"
|
|
page-size="2"
|
|
@prev-click="prev"
|
|
@next-click="next"
|
|
@current-change="changEnum">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--弹出框--->
|
|
<el-dialog v-model="dialogFormVisible" :title="title" show-close=false 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>
|
|
<span class="dialog-footer">
|
|
<el-button type="primary" @click="submit" style="color:#FFFFFF;">保存</el-button>
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
import { 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:"",
|
|
current:1,
|
|
size:10,
|
|
form:{
|
|
userName:'',
|
|
userAccountNumber:'',
|
|
userPhone:'',
|
|
userEmail:'',
|
|
userPassword:''
|
|
},
|
|
tableData:[]
|
|
})
|
|
const findAllUser= ()=>{
|
|
return post("user/findAllUser",{
|
|
current:option.current,
|
|
size:option.size
|
|
}).then((res:any)=>{
|
|
option.tableData=res.data
|
|
})
|
|
}
|
|
|
|
post('user/findUserCount',{
|
|
}).then((res :any)=>{
|
|
option.total=res.data
|
|
findAllUser()
|
|
})
|
|
|
|
//添加用户
|
|
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 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 onSearch = ()=> {
|
|
post("user/findUserByUserAccountNumber",{
|
|
userName: option.state1
|
|
}).then((res:any)=>{
|
|
option.tableData=[]
|
|
option.tableData = option.tableData.concat(res.data)
|
|
console.log(res)
|
|
})
|
|
}
|
|
|
|
const prev = (e)=>{
|
|
option.current= e
|
|
findAllUser()
|
|
}
|
|
|
|
const next = (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 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'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
return {
|
|
...toRefs(option),
|
|
onAddClick,
|
|
onAmendClick,
|
|
onSearch,
|
|
submit,
|
|
findAllUser,
|
|
confirmEvent,
|
|
prev,
|
|
next,
|
|
changEnum
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.system-container {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tableMessage{
|
|
padding: 36px 20px 20px;
|
|
font-size: 18px;
|
|
|
|
.operation {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
span {
|
|
border-bottom: 1px solid #000000;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
}
|
|
|
|
}
|
|
: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>
|
|
|