|
|
|
@ -7,15 +7,11 @@ |
|
|
|
<div class="left"> |
|
|
|
<h1>用户名称：</h1> |
|
|
|
|
|
|
|
<el-select v-model="value" style="width: 305px"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<el-autocomplete |
|
|
|
v-model="state1" |
|
|
|
:fetch-suggestions="querySearch" |
|
|
|
class="inline-input" |
|
|
|
@select="handleSelect"/> |
|
|
|
|
|
|
|
<img src="/images/search.png" @click="onSearch"> |
|
|
|
</div> |
|
|
|
@ -25,18 +21,43 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tableMessage"> |
|
|
|
<el-table :data="tableData" border style="width: 100%;color: black"> |
|
|
|
<el-table-column prop="date" label="序号" width="216px" align="center"/> |
|
|
|
<el-table-column prop="name" label="用户账号" width="300px" align="center"/> |
|
|
|
<el-table-column prop="address" label="电话" width="301px" align="center"/> |
|
|
|
<el-table-column prop="name" label="邮箱" width="351px" align="center"/> |
|
|
|
<el-table-column prop="name" label="操作" width="351px" align="center"/> |
|
|
|
<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"> |
|
|
|
<template #default="scope"> |
|
|
|
<div class="operation"> |
|
|
|
<span @click.prevent="onAmendClick(scope.$index, tableData)">修改信息</span> |
|
|
|
<!--删除--> |
|
|
|
<el-popconfirm |
|
|
|
confirm-button-text="确认" |
|
|
|
cancel-button-text="取消" |
|
|
|
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*10"> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<!--弹出框---> |
|
|
|
<el-dialog v-model="dialogFormVisible" title="添加新用户" show-close=false center=true width="961px"> |
|
|
|
<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> |
|
|
|
@ -48,10 +69,8 @@ |
|
|
|
<el-input v-model="form.phone" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="邮箱：" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="form.mailbox" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
<el-input v-model="form.emil" autocomplete="off" style="width: 260px"></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
@ -61,83 +80,242 @@ |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import { reactive, toRefs,ref} from 'vue'; |
|
|
|
import {reactive, toRefs ,ref , onMounted} from 'vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'SystemManagement', |
|
|
|
setup() { |
|
|
|
let option = reactive({ |
|
|
|
options:[ { |
|
|
|
value: 'Option1', |
|
|
|
label: 'Option1', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'Option2', |
|
|
|
label: 'Option2', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'Option3', |
|
|
|
label: 'Option3', |
|
|
|
}], |
|
|
|
val:'', |
|
|
|
dialogFormVisible:false, |
|
|
|
title:'', |
|
|
|
formLabelWidth:"100px", |
|
|
|
total:3, |
|
|
|
form:{ |
|
|
|
name:'', |
|
|
|
accountNumber:'', |
|
|
|
phone:'', |
|
|
|
mailbox:'' |
|
|
|
emil:'' |
|
|
|
|
|
|
|
}, |
|
|
|
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' |
|
|
|
}, { |
|
|
|
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' |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
//添加用户 |
|
|
|
const onAddClick = ()=> { |
|
|
|
option.title = '添加用户' |
|
|
|
option.dialogFormVisible = true |
|
|
|
option.form = {} |
|
|
|
} |
|
|
|
|
|
|
|
//修改用户 |
|
|
|
const onAmendClick = (index, rows)=>{ |
|
|
|
option.title = '修改信息' |
|
|
|
option.dialogFormVisible = true |
|
|
|
option.form =rows[index] |
|
|
|
} |
|
|
|
|
|
|
|
//图片搜索 |
|
|
|
const onSearch = ()=>{ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const restaurants = ref([]) |
|
|
|
const querySearch = (queryString: string, cb) => { |
|
|
|
const results = queryString |
|
|
|
? restaurants.value.filter(createFilter(queryString)) |
|
|
|
: restaurants.value |
|
|
|
cb(results) |
|
|
|
} |
|
|
|
const createFilter = (queryString) => { |
|
|
|
return (restaurant) => { |
|
|
|
return ( |
|
|
|
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0 |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
const loadAll = () => { |
|
|
|
return [ |
|
|
|
{ value: 'vue'}, |
|
|
|
{ value: 'element'}, |
|
|
|
{ value: 'cooking'}, |
|
|
|
{ value: 'mint-ui' }, |
|
|
|
{ value: 'vuex' }, |
|
|
|
{ value: 'vue-router' }, |
|
|
|
{ value: 'babel' }, |
|
|
|
] |
|
|
|
} |
|
|
|
const handleSelect = (item) => { |
|
|
|
console.log(item) |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
restaurants.value = loadAll() |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(option), |
|
|
|
value: ref(''), |
|
|
|
onAddClick |
|
|
|
onAddClick, |
|
|
|
onAmendClick, |
|
|
|
onSearch, |
|
|
|
restaurants, |
|
|
|
state1: ref(''), |
|
|
|
state2: ref(''), |
|
|
|
querySearch, |
|
|
|
createFilter, |
|
|
|
loadAll, |
|
|
|
handleSelect, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
.system-container { |
|
|
|
width: calc(~"100% - 40px"); |
|
|
|
margin: 0 20px; |
|
|
|
|
|
|
|
.pagination{ |
|
|
|
margin-top: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.box{ |
|
|
|
padding: 28px 20px 0px ; |
|
|
|
display: flex; |
|
|
|
@ -146,12 +324,26 @@ |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
h1{ |
|
|
|
width: 100px; |
|
|
|
height: 26px; |
|
|
|
font-size: 20px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 26px; |
|
|
|
color: #000000; |
|
|
|
@ -170,7 +362,6 @@ |
|
|
|
width: 100px; |
|
|
|
height: 26px; |
|
|
|
font-size: 20px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 26px; |
|
|
|
color: #498DF0; |
|
|
|
@ -183,13 +374,26 @@ |
|
|
|
opacity: 1; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tableMessage{ |
|
|
|
padding: 56px 20px 20px; |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -213,9 +417,7 @@ |
|
|
|
opacity: 1; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #498DF0; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #498DF0; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
