|
|
|
@ -5,15 +5,9 @@ |
|
|
|
<div class="container system-container panel"> |
|
|
|
<div class="box"> |
|
|
|
<div class="left"> |
|
|
|
<h1>用户名称：</h1> |
|
|
|
|
|
|
|
<el-autocomplete |
|
|
|
v-model="state1" |
|
|
|
:fetch-suggestions="querySearch" |
|
|
|
class="inline-input" |
|
|
|
@select="handleSelect"/> |
|
|
|
|
|
|
|
<img src="/images/search.png" @click="onSearch"> |
|
|
|
<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> |
|
|
|
@ -21,13 +15,13 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tableMessage"> |
|
|
|
<el-table :data="tableData" border style="width: 100%;color: black;height: 539px"> |
|
|
|
<el-table-column prop="date" label="序号" width="176px" align="center"/> |
|
|
|
<el-table-column prop="name" label="用户名称" width="201px" align="center"/> |
|
|
|
<el-table-column prop="accountNumber" label="用户账号" width="280px" align="center"/> |
|
|
|
<el-table-column prop="phone" label="电话" width="281px" align="center"/> |
|
|
|
<el-table-column prop="emil" label="邮箱" width="280px" align="center"/> |
|
|
|
<el-table-column prop="operation" label="操作" width="301px" align="center"> |
|
|
|
<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> |
|
|
|
@ -35,9 +29,10 @@ |
|
|
|
<el-popconfirm |
|
|
|
confirm-button-text="确认" |
|
|
|
cancel-button-text="取消" |
|
|
|
@confirm="confirmEvent(scope.$index, tableData)" |
|
|
|
title="确认删除?"> |
|
|
|
<template #reference> |
|
|
|
<span>删除用户</span> |
|
|
|
<span>删除用户</span> |
|
|
|
</template> |
|
|
|
</el-popconfirm> |
|
|
|
</div> |
|
|
|
@ -46,35 +41,39 @@ |
|
|
|
</el-table> |
|
|
|
<!---分页--> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination background layout="prev, pager, next" :total="total*10"> |
|
|
|
<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="961px" top="17%"> |
|
|
|
<el-form :model="form"> |
|
|
|
<el-form-item label="用户账号：" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="form.accountNumber" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
<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.name" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
<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.phone" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
<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.emil" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
<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="dialogFormVisible = false" style="color:#FFFFFF;">保存</el-button> |
|
|
|
<el-button type="primary" @click="submit" style="color:#FFFFFF;">保存</el-button> |
|
|
|
<el-button @click="dialogFormVisible = false">取消</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
@ -87,193 +86,192 @@ |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import {reactive, toRefs ,ref , onMounted} from 'vue'; |
|
|
|
import { deepClone } from "../uilts/deepclone"; |
|
|
|
|
|
|
|
import { post } from "../uilts/axios"; |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import { format } from '../hooks/String'; |
|
|
|
export default { |
|
|
|
name: 'SystemManagement', |
|
|
|
setup() { |
|
|
|
let option = reactive({ |
|
|
|
val:'', |
|
|
|
state1:'', |
|
|
|
dialogFormVisible:false, |
|
|
|
isDisabled:false, |
|
|
|
title:'', |
|
|
|
formLabelWidth:"100px", |
|
|
|
total:3, |
|
|
|
total:"", |
|
|
|
current:1, |
|
|
|
size:10, |
|
|
|
form:{ |
|
|
|
name:'', |
|
|
|
accountNumber:'', |
|
|
|
phone:'', |
|
|
|
emil:'' |
|
|
|
|
|
|
|
userName:'', |
|
|
|
userAccountNumber:'', |
|
|
|
userPhone:'', |
|
|
|
userEmail:'', |
|
|
|
userPassword:'' |
|
|
|
}, |
|
|
|
tableData:[ |
|
|
|
{ |
|
|
|
date: '1', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'11', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'22', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '3', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'33', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, { |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, { |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
accountNumber:'11', |
|
|
|
phone:'44', |
|
|
|
emil:'xxxx' |
|
|
|
}] |
|
|
|
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 = {} |
|
|
|
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 = ()=>{ |
|
|
|
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 restaurants = ref([]) |
|
|
|
const querySearch = (queryString: string, cb) => { |
|
|
|
const results = queryString |
|
|
|
? restaurants.value.filter(createFilter(queryString)) |
|
|
|
: restaurants.value |
|
|
|
cb(results) |
|
|
|
const next = (e)=>{ |
|
|
|
option.current= e |
|
|
|
findAllUser() |
|
|
|
} |
|
|
|
const createFilter = (queryString) => { |
|
|
|
return (restaurant) => { |
|
|
|
return ( |
|
|
|
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0 |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
const changEnum =(e)=>{ |
|
|
|
option.current= e |
|
|
|
findAllUser() |
|
|
|
} |
|
|
|
const loadAll = () => { |
|
|
|
return [ |
|
|
|
{ value: 'vue'}, |
|
|
|
{ value: 'element'}, |
|
|
|
{ value: 'cooking'}, |
|
|
|
{ value: 'mint-ui' }, |
|
|
|
{ value: 'vuex' }, |
|
|
|
{ value: 'vue-router' }, |
|
|
|
{ value: 'babel' }, |
|
|
|
] |
|
|
|
|
|
|
|
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 (option.form.userPhone == null || option.form.userPhone.trim() == ""){ |
|
|
|
// errors.push("手机号码"); |
|
|
|
// } |
|
|
|
if (errors.length > 0){ |
|
|
|
ElMessage.error({ |
|
|
|
message: format("{0}不能为空", errors.join(", ")), |
|
|
|
type: 'error' |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
return errors.length > 0; |
|
|
|
} |
|
|
|
const handleSelect = (item) => { |
|
|
|
console.log(item) |
|
|
|
|
|
|
|
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' |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
restaurants.value = loadAll() |
|
|
|
}) |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(option), |
|
|
|
onAddClick, |
|
|
|
onAmendClick, |
|
|
|
onSearch, |
|
|
|
restaurants, |
|
|
|
state1: ref(''), |
|
|
|
state2: ref(''), |
|
|
|
querySearch, |
|
|
|
createFilter, |
|
|
|
loadAll, |
|
|
|
handleSelect, |
|
|
|
submit, |
|
|
|
findAllUser, |
|
|
|
confirmEvent, |
|
|
|
prev, |
|
|
|
next, |
|
|
|
changEnum |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -299,20 +297,13 @@ export default { |
|
|
|
.left{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
right: 70px; |
|
|
|
transform: translateY(-50%); |
|
|
|
border-left: 0.08rem solid transparent; |
|
|
|
border-right: 0.08rem solid transparent; |
|
|
|
border-top: 0.08rem solid #222222; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.textInput{ |
|
|
|
width: 305px; |
|
|
|
height: 35px; |
|
|
|
line-height: 35px; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
h1{ |
|
|
|
@ -329,6 +320,7 @@ export default { |
|
|
|
width: 44px; |
|
|
|
height: 44px; |
|
|
|
margin-left: 10px; |
|
|
|
padding-top: 4px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -365,7 +357,6 @@ export default { |
|
|
|
opacity: 1; |
|
|
|
cursor: pointer; |
|
|
|
font-weight: 400; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
@ -383,7 +374,10 @@ export default { |
|
|
|
:deep(.el-form){ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-evenly; |
|
|
|
justify-content: space-between; |
|
|
|
margin: 0 auto; |
|
|
|
width: 90%; |
|
|
|
//align-content: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-button){ |
|
|
|
|
hehongxing
3 years ago