hehongxing 3 years ago
parent
commit
7453abdd12
  1. 1
      04.系统编码/Frontend/.idea/workspace.xml
  2. 102
      04.系统编码/Frontend/src/components/SystemManagement.vue

1
04.系统编码/Frontend/.idea/workspace.xml

@ -47,6 +47,7 @@
<workItem from="1638235051409" duration="129000" />
<workItem from="1638235200843" duration="11502000" />
<workItem from="1638248948876" duration="8558000" />
<workItem from="1638257712429" duration="4830000" />
</task>
<servers />
</component>

102
04.系统编码/Frontend/src/components/SystemManagement.vue

@ -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>

Loading…
Cancel
Save