From 7df4cc2e79afba94974ab720bcf97031fda23f86 Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Mon, 15 May 2023 17:24:55 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E3=80=81=E8=A7=92=E8=89=B2?= =?UTF-8?q?=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dialog.vue | 10 +- src/pages/modules/systemmanage/role.vue | 297 ++++++++++++++++++++++++ src/pages/modules/systemmanage/user.vue | 193 +++++++++------ src/style/common.styl | 91 +++++++- src/style/iconfont.styl | 1 + src/style/mixin.styl | 1 + src/style/reset.css | 6 +- 7 files changed, 520 insertions(+), 79 deletions(-) diff --git a/src/components/dialog.vue b/src/components/dialog.vue index 8c9b27d..f888df4 100644 --- a/src/components/dialog.vue +++ b/src/components/dialog.vue @@ -13,7 +13,7 @@
- +
@@ -25,7 +25,8 @@ export default { name: 'jxDialog', props: { - title: String + title: String, + type: String }, data () { return { @@ -35,6 +36,11 @@ export default { methods: { toCancle () { this.active = false + this.$emit('toCancle', this.type) + }, + toSure () { + this.active = false + this.$emit('toSure', this.type) } } } diff --git a/src/pages/modules/systemmanage/role.vue b/src/pages/modules/systemmanage/role.vue index e69de29..dc1728e 100644 --- a/src/pages/modules/systemmanage/role.vue +++ b/src/pages/modules/systemmanage/role.vue @@ -0,0 +1,297 @@ + + + + + diff --git a/src/pages/modules/systemmanage/user.vue b/src/pages/modules/systemmanage/user.vue index 5b57c1c..7c3a53d 100644 --- a/src/pages/modules/systemmanage/user.vue +++ b/src/pages/modules/systemmanage/user.vue @@ -2,7 +2,7 @@
- +
@@ -18,83 +18,87 @@ {{i+1}} - {{e.name}} - {{e.name}} - - - + admin + 管理员 + 18888888888 + 男 + 2023-05-05 08:50:08
- - - - + + +
-
-
-
*用户名
-
- -
-
-
-
电话
-
- -
-
-
-
-
-
姓名
-
- -
-
-
-
性别
-
-
-
-
男
+ ref="child" + :title="title" + :type="type" + @toSure="toSureDialog" + > +
+
+
+
*用户名
+
+
-
-
-
女
+
+
+
电话
+
+ +
+
+
+
+
+
姓名
+
+ +
+
+
+
性别
+
+
+
+ + +
+
{{ e.label }}
+
+
+
+
+
+
+
*密码
+
+ +
+
+
+
角色
+
+ + + +
-
-
-
*密码
-
- -
-
-
-
角色
-
- - - - -
-
-
+
确定重置密码吗？
+
确定删除该用户吗？
- 确定重置密码吗？
@@ -106,7 +110,16 @@ 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'}], + datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}], + active: false, + type: '', + title: '', + username: '', + phone: '', + name: '', + sexArr: [{label: '男', value: '1'}, {label: '女', value: '2'}], + sex: '1', + password: '', options: [{ value: '选项1', label: '超级管理员' @@ -120,16 +133,54 @@ export default { value: '选项4', label: '开发人员' }], - value: '', - active: false + value: '' + } + }, + watch: { + type (val) { + switch (val) { + case '1': + this.title = '添加用户' + break + case '2': + this.title = '修改用户' + break + case '3': + this.title = '' + break + case '4': + this.title = '' + break + default: + this.title = '' + } } }, methods: { - addData () { - this.$refs.child1.active = true + showDialog (type) { + this.type = type + this.$refs.child.active = true }, - setPass () { - this.$refs.child2.active = true + toSureDialog (type) { + switch (type) { + case '1': + console.log(type) + break + case '2': + console.log(type) + break + case '3': + console.log(type) + break + case '4': + console.log(type) + break + default: + console.log(type) + } + }, + toRadio (e) { + this.sex = e.value } } } diff --git a/src/style/common.styl b/src/style/common.styl index aabb11e..3cab003 100644 --- a/src/style/common.styl +++ b/src/style/common.styl @@ -191,6 +191,8 @@ color: #606266; font-size: 14px; word-break: break-all; +.form_wraper + width 100% .form width 100% _fj(flex-start) @@ -234,10 +236,13 @@ padding: 0 15px; transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; +.form_item__textarea + line-height 23px + height 69px .form_item__radio color: #606266; font-weight: 500; - line-height: 1; + line-height: 40px; position: relative; cursor: pointer; display: inline-block; @@ -256,14 +261,25 @@ padding: 2px position: relative; vertical-align: middle; - border 1px solid $gray1 + border 1px solid $green1 + background-color #fff border-radius 50% .radio__label display: inline-block; font-size: 14px; padding-left: 10px; .icon_radio_checked - color $red2 + background-color $green1 +.radio__original + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0; .el-select width 100% .el-select:hover .el-input__inner, .el-input__inner @@ -298,7 +314,6 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - white-space: nowrap; text-align: center; position: sticky; top: -1px; @@ -314,7 +329,6 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - white-space: nowrap; padding: 12px 10px; border-bottom: 1px dashed $gray1; border-right: 1px dashed $gray1; @@ -333,3 +347,70 @@ position: sticky; left: 0; z-index: 99; +.grid_button + padding 6px 12px + +// tree +.tree + position: relative; + cursor: default; + background: #fff; + color: #606266; +.tree-node + white-space: nowrap; + outline: none; +.tree-node__content + display: flex; + align-items: center; + height: 26px; + cursor: pointer; +.icon_tree-node__expand + cursor: pointer; + color: #c0c4cc; + font-size: 12px; + transform: rotate(0deg); + transition: transform .3s ease-in-out; + padding: 6px; + &::before + content: '\e65b' +.icon_caret_right + transform rotate(-90deg) +.checkbox__input + color: #606266; + font-weight: 500; + font-size: 12px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + user-select: none; + margin-right: 8px + cursor: pointer; +.icon_checkbox + white-space: nowrap; + cursor: pointer; + outline: none; + display: inline-block; + padding: 2px; + position: relative; + vertical-align: middle; + color #fff + border: 1px solid $green1 + background-color: #fff; + border-radius 3px + &::before + content: '\E608' +.icon_checkbox_checked + background-color $green1 +.checkbox__original + opacity: 0; + outline: none; + position: absolute; + margin: 0; + width: 0; + height: 0; + z-index: -1; +.tree-node__label + font-size: 14px +.tree-node__children + overflow hidden diff --git a/src/style/iconfont.styl b/src/style/iconfont.styl index 127e40e..5f068b2 100644 --- a/src/style/iconfont.styl +++ b/src/style/iconfont.styl @@ -15,6 +15,7 @@ &::before content '\e659' .icon_radio + position relative color #ffffff &::before content '\e608' \ No newline at end of file diff --git a/src/style/mixin.styl b/src/style/mixin.styl index 9208d9e..bbaeafa 100644 --- a/src/style/mixin.styl +++ b/src/style/mixin.styl @@ -2,6 +2,7 @@ $red = #FD6A35 $red1 = #E74F19 $red2 = #FA6400 $green = #6CBE8B +$green1 = #00d246 $yellow = #E9B451 $blue = #6798ef $gray = #989EBB diff --git a/src/style/reset.css b/src/style/reset.css index 879b5f8..537f692 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -103,7 +103,11 @@ input::-webkit-input-placeholder { overflow: hidden; text-overflow: ellipsis; } - + +.allwidth { + width: 100% !important; +} + .fl { float: left !important; }