|
|
@ -7,7 +7,7 @@ |
|
|
|
<div class="left"> |
|
|
|
<h1>用户名称:</h1> |
|
|
|
|
|
|
|
<el-select v-model="value"> |
|
|
|
<el-select v-model="value" style="width: 305px"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.value" |
|
|
@ -20,21 +20,46 @@ |
|
|
|
<img src="/images/search.png"> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<span>添加新用户</span> |
|
|
|
<span @click="onAddClick">添加新用户</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tableMessage"> |
|
|
|
<el-table :data="tableData" border style="width: 100%"> |
|
|
|
<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="name" label="电话" width="301px" 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> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!--弹出框---> |
|
|
|
<el-dialog v-model="dialogFormVisible" title="添加新用户" show-close=false center=true width="961px"> |
|
|
|
<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> |
|
|
|
<el-form-item label="用户姓名:" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="form.name" 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-form-item> |
|
|
|
<el-form-item label="邮箱:" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="form.mailbox" 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 @click="dialogFormVisible = false">取消</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
@ -60,12 +85,46 @@ |
|
|
|
{ |
|
|
|
value: 'Option3', |
|
|
|
label: 'Option3', |
|
|
|
},] |
|
|
|
}) |
|
|
|
}], |
|
|
|
dialogFormVisible:false, |
|
|
|
formLabelWidth:"100px", |
|
|
|
form:{ |
|
|
|
name:'', |
|
|
|
accountNumber:'', |
|
|
|
phone:'', |
|
|
|
mailbox:'' |
|
|
|
}, |
|
|
|
tableData:[ |
|
|
|
{ |
|
|
|
date: '1', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '3', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '4', |
|
|
|
name: 'Tom', |
|
|
|
address: 'No. 189, Grove St, Los Angeles', |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
}) |
|
|
|
const onAddClick = ()=>{ |
|
|
|
option.dialogFormVisible=true |
|
|
|
} |
|
|
|
return { |
|
|
|
...toRefs(option), |
|
|
|
value: ref(''), |
|
|
|
onAddClick |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -79,10 +138,12 @@ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.left{ |
|
|
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
:deep(.el-input__icon::after){ |
|
|
|
|
|
|
|
} |
|
|
|
h1{ |
|
|
|
width: 100px; |
|
|
|
height: 26px; |
|
|
@ -121,9 +182,32 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.tableMessage{ |
|
|
|
|
|
|
|
padding: 56px 20px 20px; |
|
|
|
: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-evenly; |
|
|
|
} |
|
|
|
:deep(.el-button){ |
|
|
|
width: 159px; |
|
|
|
height: 44px; |
|
|
|
opacity: 1; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #498DF0; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #498DF0; |
|
|
|
} |
|
|
|
</style> |
|
|
|