|
|
|
@ -5,13 +5,9 @@ |
|
|
|
<div class="container system-container panel"> |
|
|
|
<div class="box"> |
|
|
|
<div class="left"> |
|
|
|
<h1>用户名称：</h1> |
|
|
|
<h1>用户姓名：</h1> |
|
|
|
|
|
|
|
<el-autocomplete |
|
|
|
v-model="state1" |
|
|
|
:fetch-suggestions="querySearch" |
|
|
|
class="inline-input" |
|
|
|
@select="handleSelect"/> |
|
|
|
<input type="text" v-model="state1" class="textInput"/> |
|
|
|
|
|
|
|
<img src="/images/search.png" @click="onSearch"> |
|
|
|
</div> |
|
|
|
@ -21,12 +17,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 :data="tableData" border style="width: 100%;color: black;"> |
|
|
|
|
|
|
|
<el-table-column type="index" label="序号" width="176px" align="center"/> |
|
|
|
<el-table-column prop="userName" label="用户姓名" width="201px" align="center"/> |
|
|
|
<el-table-column prop="userAccountNumber" label="用户账号" width="280px" align="center"/> |
|
|
|
<el-table-column prop="userPhone" label="电话" width="278px" align="center"/> |
|
|
|
<el-table-column prop="userEmail" label="邮箱" width="250px" align="center"/> |
|
|
|
<el-table-column prop="operation" label="操作" width="301px" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<div class="operation"> |
|
|
|
@ -35,9 +32,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 +44,36 @@ |
|
|
|
</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-input v-model="form.userName" autocomplete="off" style="width: 260px"></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> |
|
|
|
<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,168 @@ |
|
|
|
|
|
|
|
<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' |
|
|
|
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:'' |
|
|
|
}, |
|
|
|
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:'' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//修改用户 |
|
|
|
const onAmendClick = (index, rows)=>{ |
|
|
|
option.isdisabled = true |
|
|
|
option.title = '修改信息' |
|
|
|
option.dialogFormVisible = true |
|
|
|
option.form = JSON.parse(JSON.stringify(rows[index])) |
|
|
|
} |
|
|
|
|
|
|
|
//图片搜索 |
|
|
|
const onSearch = ()=>{ |
|
|
|
//删除用户 |
|
|
|
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 restaurants = ref([]) |
|
|
|
const querySearch = (queryString: string, cb) => { |
|
|
|
const results = queryString |
|
|
|
? restaurants.value.filter(createFilter(queryString)) |
|
|
|
: restaurants.value |
|
|
|
cb(results) |
|
|
|
const prev = (e)=>{ |
|
|
|
option.current= e |
|
|
|
findAllUser() |
|
|
|
} |
|
|
|
const createFilter = (queryString) => { |
|
|
|
return (restaurant) => { |
|
|
|
return ( |
|
|
|
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0 |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
const next = (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 changenum =(e)=>{ |
|
|
|
option.current= e |
|
|
|
findAllUser() |
|
|
|
} |
|
|
|
const handleSelect = (item) => { |
|
|
|
console.log(item) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const submit = ()=> { |
|
|
|
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 === '添加用户'){ |
|
|
|
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 |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -301,6 +275,9 @@ export default { |
|
|
|
justify-content: space-between; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.textInput{ |
|
|
|
width: 305px; |
|
|
|
} |
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
width: 0; |
|
|
|
|
