添加用户

src/views/login/index.vue

@@ -54,17 +54,13 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate';
 import identify from '@/components/Identify/index';
-import { login } from '@/api/login';
 export default {
     components: { identify },
     data() {
         const validateUsername = (rule, value, callback) => {
             if (value === '') {
                 callback(new Error('用户名不能为空！'));
-            } else if (!validUsername(value)) {
-                callback(new Error('请输入正确的用户名！'));
             } else {
                 callback();
             }
@@ -88,7 +84,7 @@ export default {
         return {
             title: '智慧运营管理中心',
             loginForm: {
-                username: 'admin',
+                username: 'user001',
                 password: '123456',
                 vertification: '',
             },
@@ -131,7 +127,7 @@ export default {
         //         this.$refs.loginForm.validate(valid => {
         //             if (valid) {
         //                 this.loading = true;
-        //                 this.$store.dispatch('user/login', this.loginForm).then((res) => {
+        //                 this.$store.dispatch('/user/login', this.loginForm).then((res) => {
         //                     if (res.data.code == 200) {
         //                         let Authorization = res.data.token;
         //                         localStorage.setItem('Authorization', Authorization);
@@ -155,7 +151,7 @@ export default {
                 this.$message.error('请输入正确的验证码!');
                 this.refreshCode();
             } else {
-                if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
+                if (this.loginForm.username === 'user001' && this.loginForm.password === '123456') {
                     this.$router.push('/home');
                 }
             }
@@ -173,7 +169,7 @@ export default {
             return Math.floor(Math.random() * (max - min) + min);
         },
         getVetifiedCode() {
-
+            //
         }
     },
     mounted() {

src/views/userManagement/personManagement/index.vue

@@ -8,7 +8,7 @@
                 <i class="el-icon-user"></i>停用账户
             </el-button>
                 <el-input class="searchBox" v-model="input" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
-            <el-button class="addUser">
+            <el-button class="addUser" @click="addUser()">
                 <i class="el-icon-user"></i>添加用户
             </el-button>
         </div>
@@ -16,6 +16,8 @@
             <activeuser v-show="show"></activeuser>
             <deactiveuser v-show="show1"></deactiveuser>
         </div>
+        <!--弹窗-->
+        <userinfo ref="addUser"></userinfo>
     </div>
 </template>
 
@@ -23,7 +25,7 @@
 import activeuser from './tables/activeUser'
 import deactiveuser from './tables/deactiveUser'
 import table3 from './tables/table3'
-import userinfo from './messageDialog/userInfo'
+import userinfo from './messageDialog/addUser'
 
 
 export default {
@@ -49,6 +51,9 @@ export default {
             this.show = false;
             this.show1 = true;
         },
+        addUser(){
+            this.$refs.addUser.dialogVisible = true;
+        }
     }
 };
 </script>

src/views/userManagement/personManagement/messageDialog/addUser.vue

@@ -0,0 +1,252 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="添加用户" :visible.sync="dialogVisible" width="30%" append-to-body
+            center>
+            <el-divider></el-divider>
+            <div style="height: 550px; padding: 20px">
+                <el-form ref="form" :model="form" label-position="right" label-width="75px">
+                    <el-form-item style="margin-bottom: 0;" label="用户名：" prop="username">
+                        <div>
+                            <el-input class="username" type="text" v-model="form.username" placeholder="用户名" @input="charStatic"></el-input>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度64个字符，允许英文字母、数字或特殊字符 {{
+                                charNum }}/64</p>
+                        </div>
+                    </el-form-item>
+                    <el-form-item style="margin-bottom: 0; width: 380px; " label-width="65px" label="密码:" prop="password">
+                        <div>
+                            <el-input class="password" v-model="form.password" placeholder="密码" show-password></el-input>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最小长度8个字符，需带有英文字母、数字与特殊字符</p>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="姓名：" prop="name">
+                        <el-input class="name" v-model="form.name" placeholder="姓名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="电话：" prop="phone">
+                        <div style="display: flex;">
+                            <el-select class="select" v-model="select">
+                                <el-option label="CN+86"></el-option>
+                            </el-select>
+                            <el-input class="phone" v-model="form.phone" placeholder="请输入手机号">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="邮箱：" prop="email">
+                        <el-input v-model="form.email" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item label="公司：" prop="copporation">
+                        <el-input v-model="form.corporation" placeholder="公司"></el-input>
+                    </el-form-item>
+                    <el-form-item label="部门：" prop="department">
+                        <el-input v-model="form.department" placeholder="部门"></el-input>
+                    </el-form-item>
+                    <div style="display: flex;">
+                        <el-form-item label="角色：" prop="role">
+                            <el-select v-model="form.role">
+                                <el-option value="用户组"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="权限：" prop="permission">
+                            <el-select v-model="form.permission">
+                                <el-option value="权限级别"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div style="display: flex;">
+                        <el-form-item label="在职状态：" prop="working_status">
+                            <el-select v-model="form.working_status">
+                                <el-option value="在职"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="职务：" prop="post">
+                            <el-select v-model="form.post">
+                                <el-option value="职务"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div style="display: flex;">
+                        <el-form-item label="账户状态：" prop="account_status">
+                            <el-select v-model="form.account_status">
+                                <el-option value="正常"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="国籍：" prop="nationality">
+                            <el-select v-model="form.nationality">
+                                <el-option value="中国"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div class="avatar">
+                        <el-avatar :size="110" :src="testUrl" @click=""></el-avatar>
+                        <span>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
+                        </span>
+                    </div>
+                </el-form>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button class="next">下一个</el-button>
+                <el-button class="reset" @click="resetForm('form')">重置</el-button>
+                <el-button class="update" @click="submitForm('form')">更新</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                username: '',
+                password: '',
+                name: '',
+                phone: '',
+                email: '',
+                corporation: '',
+                department: '',
+                role: '',
+                permission: '',
+                working_status: '',
+                post: '',
+                account_status: '',
+                nationality: ''
+            },
+            charNum:0,
+            testUrl: require('@/assets/images/头像上传@3x.png')
+        }
+    },
+    watch: {
+        charStatic(){
+            
+        }
+    },
+    methods: {
+        handleNodeClick() {
+
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //
+                }
+            })
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+    height: 750px !important;
+}
+.next{
+    background-color: #2EA8E6;
+    color: #FFFFFF;
+}
+.reset{
+    background-color: #B3B3B3;
+    color: #FFFFFF;
+}
+.update{
+    background-color: #2EA8E6;
+    color: #FFFFFF;
+}
+
+.avatar {
+    position: absolute;
+    right: 40px;
+    top: 100px;
+}
+
+.select {
+    /deep/.el-input__inner {
+        width: 100px;
+        border-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.phone {
+    /deep/.el-input__inner {
+        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.username {
+    /deep/.el-input__inner {
+        width: 300px !important;
+    }
+}
+
+.password {
+    margin-left: 10px;
+        /deep/.el-input__inner {
+        width: 300px !important;
+    }
+}
+
+.name {
+    /deep/.el-input__inner {
+        width: 300px !important;
+    }
+}
+
+.el-form {
+    .el-form-item {
+        margin-bottom: 15px;
+        /deep/.el-form-item__label {
+            padding: 0;
+            font-size: 15px;
+        }
+        /deep/.el-input__inner {
+            height: 30px;
+            background-color: #F7F9FA;
+        }
+    }
+}
+
+
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 450px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: 0px;
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/userManagement/personManagement/messageDialog/userInfo.vue

@@ -1,142 +0,0 @@
-<template>
-    <div class="form">
-        <div class="header">
-            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">用户详情</p><span><i
-                    class="el-icon-close"></i></span>
-        </div>
-        <el-form :model="form" label-position="left" label-width="80px">
-            <el-form-item style="width: 350px;" :model="form.username" label="用户名：">
-                <el-input placeholder="test" type="text"></el-input>
-            </el-form-item>
-            <el-form-item style="width: 350px;" :model="form.password" label="密码：">
-                <el-input placeholder="test" show-password></el-input>
-            </el-form-item>
-            <el-form-item style="width: 350px;" :model="form.name" label="姓名：">
-                <el-input placeholder="test"></el-input>
-            </el-form-item>
-            <el-form-item style="width: 500px;" :model="form.phone" label="电话：">
-                <el-select style="width: 100px;">
-                    <el-option label="CN +86"></el-option>
-                </el-select><span><el-input style="width: 280px;" placeholder="test"></el-input></span>
-            </el-form-item>
-            <el-form-item :model="form.email" label="邮箱：">
-                <el-input style="width: 380px;" placeholder="test"></el-input>
-            </el-form-item>
-            <el-form-item :model="form.corporation" label="公司：">
-                <el-input style="width: 380px;" placeholder="test"></el-input>
-            </el-form-item>
-            <el-form-item :model="form.department" label="部门：">
-                <el-input style="width: 380px;" placeholder="test"></el-input>
-            </el-form-item>
-            <div style="display: flex;">
-                <el-form-item :model="form.role" label="角色：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :model="form.permission" label="权限：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-            </div>
-            <div style="display: flex;">
-                <el-form-item :model="form.working_status" label="在职状态：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :model="form.post" label="职务：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-            </div>
-            <div style="display: flex;">
-                <el-form-item :model="form.account_status" label="账户状态：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :model="form.nationality" label="国籍：">
-                    <el-select style="width: 130px;">
-                        <el-option label="CN +86"></el-option>
-                    </el-select>
-                </el-form-item>
-            </div>
-            <div>
-                <el-button>下一个</el-button>
-                <el-button>重置</el-button>
-                <el-button>更新</el-button>
-            </div>
-            <el-avatar :size="122" :src="testUrl"></el-avatar>
-        </el-form>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            form: {
-
-            },
-            testUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
-        }
-    }
-
-}
-</script>
-<style lang="less" scoped>
-.form {
-    position: absolute;
-    left: 500px;
-    width: 586px;
-    height: 700px;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-}
-
-.el-form {
-    margin: 40px 0 0 0;
-
-    .el-form-item {
-        padding-top: 20px;
-        margin-inline: 20px;
-        margin-bottom: 0;
-    }
-    /deep/.el-form-item__label{
-        padding: 0;
-    }
-    /deep/.el-form-item__content{
-        display: flex;
-    }
-}
-
-.header {
-    position: absolute;
-    top: 0;
-    width: 586px;
-    height: 40px;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-
-    .el-icon-close {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-    }
-}
-
-
-.el-button {
-    width: 80px;
-    height: 30px;
-    text-align: center;
-    margin: 20px;
-    padding: 5px;
-}
-.el-avatar {
-    position: absolute;
-    right: 60px;
-    top: 80px;
-}
-</style>