root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用户页

Browse Source
This commit is contained in:
caill
2023-05-12 13:54:40 +08:00
parent 64de491f4d
commit fbba9c4f41
5 changed files with 384 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/modules/systemmanage/user.vue
View File

@@ -0,0 +1,144 @@
<template>
<div class="right_side">
<div class="buttons_wrapper">
<div class="row">
<button class="button button--primary" @click="addData">添加用户</button>
</div>
</div>
<div class="grid_wrapper">
<table>
<tr>
<th>序号</th>
<th>任务号</th>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
<th>创建日期</th>
<th>操作</th>
</tr>
<tr v-for="(e, i) in datalist" :key="i">
<td>{{i+1}}</td>
<td></td>
<td>{{e.name}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div v-if="active" class="dialog_wrapper">
<div class="dialog">
<div class="dialog_header">
<span class="dialog_title">添加用户</span>
<button class="dialog_headerbtn">
<i class="iconfont icon_close"></i>
</button>
</div>
<div class="dialog_body">
<div class="form">
<div class="form_item">
<div class="form_item__label"><i>*</i>用户名</div>
<div class="form_item__content">
<input type="text" class="form_item__input">
</div>
</div>
<div class="form_item">
<div class="form_item__label">电话</div>
<div class="form_item__content">
<input type="text" class="form_item__input">
</div>
</div>
</div>
<div class="form">
<div class="form_item">
<div class="form_item__label">姓名</div>
<div class="form_item__content">
<input type="text" class="form_item__input">
</div>
</div>
<div class="form_item">
<div class="form_item__label">性别</div>
<div class="form_item__content">
<div class="form_item__radio">
<div class="radio__input"><i class="iconfont icon_radio icon_radio_checked"></i></div>
<div class="radio__label">男</div>
</div>
<div class="form_item__radio">
<div class="radio__input"><i class="iconfont icon_radio"></i></div>
<div class="radio__label">女</div>
</div>
</div>
</div>
</div>
<div class="form">
<div class="form_item">
<div class="form_item__label"><i>*</i>密码</div>
<div class="form_item__content">
<input type="text" class="form_item__input">
</div>
</div>
<div class="form_item">
<div class="form_item__label">角色</div>
<div class="form_item__content">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
<div class="dialog_footer">
<button class="button button--primary" @click="toCancle">取消</button>
<button class="button button--primary">确定</button>
</div>
</div>
</div>
<div v-if="active" class="modal"></div>
</div>
</template>
<script>
export default {
data () {
return {
datalist: [{name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ac'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ad'}],
options: [{
value: '选项1',
label: '超级管理员'
}, {
value: '选项2',
label: '系统管理员'
}, {
value: '选项3',
label: '普通用户'
}, {
value: '选项4',
label: '开发人员'
}],
value: '',
active: false
}
},
methods: {
addData () {
this.active = true
},
toCancle () {
this.active = false
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@style/mixin'
.grid_wrapper
height calc(100% - 50px)
overflow-y auto
</style>