Browse Source

commit

master
徐辉辉 3 years ago
parent
commit
2ec80f33ef
  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="1638235051409" duration="129000" />
<workItem from="1638235200843" duration="11502000" /> <workItem from="1638235200843" duration="11502000" />
<workItem from="1638248948876" duration="8558000" /> <workItem from="1638248948876" duration="8558000" />
<workItem from="1638257712429" duration="4830000" />
</task> </task>
<servers /> <servers />
</component> </component>

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

@ -7,7 +7,7 @@
<div class="left"> <div class="left">
<h1>用户名称</h1> <h1>用户名称</h1>
<el-select v-model="value"> <el-select v-model="value" style="width: 305px">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -20,21 +20,46 @@
<img src="/images/search.png"> <img src="/images/search.png">
</div> </div>
<div class="right"> <div class="right">
<span>添加新用户</span> <span @click="onAddClick">添加新用户</span>
</div> </div>
</div> </div>
<div class="tableMessage"> <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="date" label="序号" width="216px" align="center"/>
<el-table-column prop="name" label="用户账号" width="300px" 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-column prop="name" label="操作" width="351px" align="center"/> <el-table-column prop="name" label="操作" width="351px" align="center"/>
</el-table> </el-table>
</div> </div>
</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> </div>
@ -60,12 +85,46 @@
{ {
value: 'Option3', value: 'Option3',
label: '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 { return {
...toRefs(option), ...toRefs(option),
value: ref(''), value: ref(''),
onAddClick
} }
} }
} }
@ -79,10 +138,12 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left{ .left{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
:deep(.el-input__icon::after){
}
h1{ h1{
width: 100px; width: 100px;
height: 26px; height: 26px;
@ -121,9 +182,32 @@
} }
} }
.tableMessage{ .tableMessage{
padding: 56px 20px 20px; 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> </style>

Loading…
Cancel
Save