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 17:59:29 +08:00
parent fbba9c4f41
commit 15b6cfbd84
3 changed files with 127 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/dialog.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div>
<div v-if="active" class="dialog_wrapper">
<div class="dialog">
<div class="dialog_header">
<span class="dialog_title">{{title}}</span>
<button class="dialog_headerbtn" @click="toCancle">
<i class="iconfont icon_close"></i>
</button>
</div>
<div class="dialog_body">
<slot></slot>
</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 {
name: 'jxDialog',
props: {
title: String
},
data () {
return {
active: false
}
},
methods: {
toCancle () {
this.active = false
}
}
}
</script>

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

@@ -18,96 +18,95 @@
</tr> </tr>
<tr v-for="(e, i) in datalist" :key="i"> <tr v-for="(e, i) in datalist" :key="i">
<td>{{i+1}}</td> <td>{{i+1}}</td>
<td></td> <td>{{e.name}}</td>
<td>{{e.name}}</td> <td>{{e.name}}</td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td>
<div class="row">
<button class="button button--primary">修改</button>
<button class="button button--primary">分配角色</button>
<button class="button button--primary" @click="setPass">重置密码</button>
<button class="button button--primary">删除</button>
</div>
</td>
</tr> </tr>
</table> </table>
</div> </div>
<div v-if="active" class="dialog_wrapper"> <jxDialog
<div class="dialog"> ref="child1"
<div class="dialog_header"> title="添加用户">
<span class="dialog_title">添加用户</span> <div class="form">
<button class="dialog_headerbtn"> <div class="form_item">
<i class="iconfont icon_close"></i> <div class="form_item__label"><i>*</i>用户名</div>
</button> <div class="form_item__content">
<input type="text" class="form_item__input">
</div> </div>
<div class="dialog_body"> </div>
<div class="form"> <div class="form_item">
<div class="form_item"> <div class="form_item__label">电话</div>
<div class="form_item__label"><i>*</i>用户名</div> <div class="form_item__content">
<div class="form_item__content"> <input type="text" class="form_item__input">
<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>
</div> </div>
<div v-if="active" class="modal"></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>
</jxDialog>
<jxDialog ref="child2">确定重置密码吗？</jxDialog>
</div> </div>
</template> </template>
<script> <script>
import jxDialog from '@components/dialog.vue'
export default { export default {
components: {
jxDialog
},
data () { data () {
return { 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'}], 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: [{ options: [{
value: '选项1', value: '选项1',
label: '超级管理员' label: '超级管理员'
@@ -127,10 +126,10 @@ export default {
}, },
methods: { methods: {
addData () { addData () {
this.active = true this.$refs.child1.active = true
}, },
toCancle () { setPass () {
this.active = false this.$refs.child2.active = true
} }
} }
} }

17
src/style/common.styl
View File

@@ -284,13 +284,12 @@
_wh(100%, 100%) _wh(100%, 100%)
padding 20px 20px 30px 20px padding 20px 20px 30px 20px
.buttons_wrapper .buttons_wrapper
.row margin-bottom 10px
margin-bottom 10px
.grid_wrapper .grid_wrapper
width 100% width 100%
table table
table-layout: fixed; table-layout: fixed;
width: 100%; min-width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border: 0 border: 0
@@ -302,13 +301,13 @@
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
position: sticky; position: sticky;
top: 0; top: -1px;
background: #d7d7d7; background: #d7d7d7;
font-size: 14px; font-size: 14px;
line-height: 23px; line-height: 23px;
color: #323232; color: #323232;
font-weight: bold; font-weight: bold;
z-index: 100; z-index: 99;
padding 12px 10px; padding 12px 10px;
td td
box-sizing: border-box; box-sizing: border-box;
@@ -326,3 +325,11 @@
background: #fff; background: #fff;
&:last-child &:last-child
border-right: none; border-right: none;
.grid_wrapper table th:first-child
position: sticky;
left: 0;
z-index: 100;
.grid_wrapper table td:first-child
position: sticky;
left: 0;
z-index: 99;