用户列表导入

src/api/user/user.js

@@ -0,0 +1,21 @@
+import { get } from "@/utils/requestMethod";
+
+/**
+ * 获取用户列表
+ * @param {*} status
+ * @param {*} page
+ * @param {*} page_size
+ * @returns
+ */
+const getUserList = (
+    status,
+    page,
+    page_size = 20,
+) => {
+    return get(
+        `/users/user_list?status=${status}&page=${page}&page_size=${page_size}`
+    )
+}
+export{
+    getUserList
+}

src/views/login/index.vue

@@ -18,7 +18,7 @@
                         </el-form-item>
                         <el-form-item class="vertification">
                             <el-input style="width: 140px;display: flex;" placeholder="请输入验证码"
-                                v-model="loginForm.vertification"></el-input>
+                                v-model="vertification"></el-input>
                             <identify :identifyCode="identifyCode" style="width: 90px; height: 40px;"></identify>
                             <el-button style="margin-left: 20px; width:50px;font-size: 14px;" type="text"
                                 @click="refreshCode">看不清？</el-button>
@@ -27,7 +27,7 @@
                             <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登 录</el-button>
                         </el-form-item>
                         <el-form-item>
-                            <el-checkbox style="display: block; float: left;" v-model="remeber">记住密码</el-checkbox>
+                            <el-checkbox style="display: block; float: left;" v-model="loginForm.remeber">记住密码</el-checkbox>
                             <a style="margin-left: 150px;" href="">忘记密码？</a>
                         </el-form-item>
                     </el-form>
@@ -86,8 +86,9 @@ export default {
             loginForm: {
                 username: 'user001',
                 password: '123456',
-                vertification: '',
+                remeber:''
             },
+            vertification: '',
             loginForm2: {
                 phone: '',
                 vertification: ''
@@ -100,7 +101,6 @@ export default {
                 phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
 
             },
-            remeber: true,
             loading: false,
             identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
             identifyCode: '',
@@ -121,7 +121,7 @@ export default {
     methods: {
         //登录验证
         handleLogin() {
-            if (this.loginForm.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
+            if (this.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
                 this.$message.error('请输入正确的验证码!');
                 this.refreshCode();
             } else {
@@ -129,7 +129,7 @@ export default {
                     if (valid) {
                         this.loading = true;
                         this.$store.dispatch('user/login', this.loginForm).then((res) => {
-                            if (res.code == 0) {
+                            if (res.code === 0) {
                                 this.$message.success(res.message);
                                 this.$router.push({ path: '/home' });
                                 this.loading = false;

src/views/securityManagement/logMonitor.vue

@@ -111,11 +111,10 @@
 </template>
 
 <script>
-import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
 import { getLogList } from "@/api/security/logMonitor";
 export default {
-  components: { checkbox, page },
+  components: { page },
   data() {
     return {
       show: true,
@@ -127,41 +126,6 @@ export default {
         timeVal: "",
       },
       tableData: [],
-      // tableData: [
-      //   {
-      //     logID: "176",
-      //     systemTemplate: "用户登录",
-      //     operationType: "新增",
-      //     requestType: "post",
-      //     operationPerson: "管理员",
-      //     operationAddress: "11.11.11.11",
-      //     operationAddress_desc: "内网IP",
-      //     operationStatus: "true",
-      //     operationTime: "2023-01-01 00:00",
-      //   },
-      //   {
-      //     logID: "176",
-      //     systemTemplate: "用户登录",
-      //     operationType: "新增",
-      //     requestType: "post",
-      //     operationPerson: "管理员",
-      //     operationAddress: "11.11.11.11",
-      //     operationAddress_desc: "内网IP",
-      //     operationStatus: "true",
-      //     operationTime: "2023-01-01 00:00",
-      //   },
-      //   {
-      //     logID: "176",
-      //     systemTemplate: "用户登录",
-      //     operationType: "新增",
-      //     requestType: "post",
-      //     operationPerson: "管理员",
-      //     operationAddress: "11.11.11.11",
-      //     operationAddress_desc: "内网IP",
-      //     operationStatus: "false",
-      //     operationTime: "2023-01-01 00:00",
-      //   },
-      // ],
       operationTypeOptions: [
         {
           value: "",
@@ -489,33 +453,6 @@ export default {
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     text-align: center;
-
-    .bottom_button {
-      position: absolute;
-      left: 200px;
-      margin-top: 15px;
-
-      .delete {
-        font-size: 14px;
-        text-align: center;
-        padding: 1px;
-        color: #2ea8e6;
-      }
-
-      .disabled {
-        font-size: 14px;
-        text-align: center;
-        padding: 1px;
-        color: #2ea8e6;
-      }
-
-      .export {
-        font-size: 14px;
-        text-align: center;
-        padding: 1px;
-        color: #2ea8e6;
-      }
-    }
   }
 }
 </style>

src/views/userManagement/personManagement/index.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-button ref="buttonFocus" class="onlineUser" @click="activeShow()">
+            <el-button ref="buttonFocus" class="onlineUser" @click="activeShow">
                 <i class="el-icon-user-solid"></i>在用账户
             </el-button>
-            <el-button class="disableUser" @click="deactiveShow()">
+            <el-button class="disableUser" @click="deactiveShow">
                 <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" @click="addUser()">
+                <el-input class="searchBox" v-model="query" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
+            <el-button class="addUser" @click="addUser">
                 <i class="el-icon-user"></i>添加用户
             </el-button>
         </div>
@@ -24,21 +24,18 @@
 <script>
 import activeuser from './tables/activeUser'
 import deactiveuser from './tables/deactiveUser'
-import table3 from './tables/table3'
 import userinfo from './messageDialog/addUser'
 
 
 export default {
     name: "personManagement",
-    components: { activeuser, deactiveuser, table3, userinfo, },
+    components: { activeuser, deactiveuser, userinfo, },
     data() {
         return {
             input: '',
-            tabledata: [],
             show: true,
             show1: false,
-            total: 0,
-            currentPage: 1
+            query:''
         };
     },
     methods: {

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

@@ -1,15 +1,14 @@
 <template>
     <div>
-        <el-dialog v-dialog-drag class="dialog" title="添加用户" :visible.sync="dialogVisible" width="30%" append-to-body
+        <el-dialog v-dialog-drag class="dialog" title="添加用户" :visible.sync="dialogVisible" width="32%" 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>
+                            <el-input class="username" type="text" v-model="form.username" placeholder="用户名"></el-input>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度64个字符，允许英文字母、数字或特殊字符</p>
                         </div>
                     </el-form-item>
                     <el-form-item style="margin-bottom: 0; width: 380px; " label-width="65px" label="密码:" prop="password">
@@ -24,7 +23,7 @@
                     <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-option value="CN+86"></el-option>
                             </el-select>
                             <el-input class="phone" v-model="form.phone" placeholder="请输入手机号">
                             </el-input>
@@ -97,6 +96,7 @@ export default {
     data() {
         return {
             dialogVisible: false,
+            select:'',
             form: {
                 username: '',
                 password: '',
@@ -116,10 +116,7 @@ export default {
             testUrl: require('@/assets/images/头像上传@3x.png')
         }
     },
-    watch: {
-        charStatic(){
-            
-        }
+    watch: { 
     },
     methods: {
         handleNodeClick() {
@@ -190,6 +187,10 @@ export default {
         /deep/.el-input__inner {
         width: 300px !important;
     }
+    /deep/.el-input__suffix-inner {
+        position: absolute;
+        right: 15px !important;
+    }
 }
 
 .name {

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

@@ -0,0 +1,252 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="用户详情" :visible.sync="dialogVisible" width="32%" 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="用户名"></el-input>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度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 value="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>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            select: '',
+            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: {
+    },
+    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;
+    }
+    /deep/.el-input__suffix-inner {
+        position: absolute;
+        right: 15px !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/userInfoEdit.vue

@@ -0,0 +1,252 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="用户信息编辑" :visible.sync="dialogVisible" width="32%" 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="用户名"></el-input>
+                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度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 value="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="reset" @click="resetForm('form')">重置</el-button>
+                <el-button class="update" @click="editForm('form')">编辑</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            select:'',
+            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: { 
+    },
+    methods: {
+        handleNodeClick() {
+
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        editForm(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;
+    }
+    /deep/.el-input__suffix-inner {
+        position: absolute;
+        right: 15px !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/tables/activeUser.vue

@@ -1,15 +1,14 @@
 <template>
     <div>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-            @selection-change="handleSelectionChange">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
+            :cell-style="{ textAlign: 'center' }" style="width: 98%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
             <el-table-column prop="username" label="用户名">
             </el-table-column>
             <el-table-column prop="phone_num" label="手机号">
             </el-table-column>
-            <el-table-column prop="e_mail" label="邮箱">
+            <el-table-column prop="email" label="邮箱">
             </el-table-column>
             <el-table-column prop="role" label="角色">
             </el-table-column>
@@ -17,7 +16,7 @@
             </el-table-column>
             <el-table-column prop="working_address" label="单位">
             </el-table-column>
-            <el-table-column prop="registed_time" label="注册时间">
+            <el-table-column prop="register_time" label="注册时间">
             </el-table-column>
             <el-table-column prop="status" label="状态">
                 <template slot-scope="scope">
@@ -25,86 +24,100 @@
                 </template>
             </el-table-column>
             <el-table-column prop="operation" label="操作">
-                <el-button size="mini" type="text">查看</el-button>
-                <el-button size="mini" type="text">编辑</el-button>
+                <el-button size="mini" type="text" @click="userDetail">查看</el-button>
+                <el-button size="mini" type="text" @click="userInfoEdit">编辑</el-button>
                 <el-button size="mini" type="text">删除</el-button>
             </el-table-column>
         </el-table>
         <div class="bottom">
-            <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
+            <div class="bottom_button">
                 <el-button class="delete" type="text">批量删除</el-button>
                 <el-divider direction="vertical"></el-divider>
                 <el-button class="disabled" type="text">批量激活</el-button>
                 <el-divider direction="vertical"></el-divider>
                 <el-button class="export" type="text">导出数据</el-button>
             </div>
-            <page></page>
+            <page class="page" :paginationData="paginationData"></page>
         </div>
+        <!--弹窗-->
+        <user-detail ref="userDetail"></user-detail>
+        <userInfoEdit ref="userInfoEdit"></userInfoEdit>
     </div>
 </template>
 
 <script>
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+import page from '@/components/pagination/index';
+import { getUserList } from '@/api/user/user';
+import UserDetail from '../messageDialog/userInfoDetail';
+import userInfoEdit from '../messageDialog/userInfoEdit';
 export default {
-    components: { checkbox, page },
+    components: { page,UserDetail,userInfoEdit },
     data() {
         return {
-            tableData: [{
-                username: 'admin',
-                phone_num: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: true
-            }, {
-                username: 'admin',
-                phone_num: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: false
-            }, {
-                username: 'admin',
-                phone_num: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: true
-            }, {
-                username: 'admin',
-                phone_num: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: false
-            },],
+            tableData: [],
             multipleSelection: [],
-            show: true,
-            total:0
+            currentPageSize: 10,
+            currentPage: 1,
+            paginationData: {
+                pageSize: 10,
+                pagerCount: 5,
+                currentPage: 1,
+                pageSizes: [5, 10, 20, 30],
+                total: 30,
+                currentChange: (val) => {
+                    this.getTableData(val);
+                },
+                handleSizeChange: (val) => {
+                    this.handleSizeChange(val);
+                },
+            },
         }
     },
+    mounted() {
+        this.initData();
+    },
     methods: {
-        cancleChecked() {
-            //
+        initData() {
+            this.getTableData(1);
         },
-        handleSelectionChange(){
-
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
         },
         handleClick() {
             //
+        },
+        getTableData(page) {
+            this.tableData = [];
+            getUserList(
+                0,
+                page
+            ).then((res) => {
+                if (res.data.code === 0 && res.data.data.length > 0) {
+                    this.tableData = res.data.data.map((e) => {
+                        return {
+                            username: e.name,
+                            phone: e.phone,
+                            email: e.email,
+                            role: e.role,
+                            permission: e.permission,
+                            working_address: e.company,
+                            register_time: e.register_time,
+                            status: e.on_job_status
+                        }
+                    })
+                }
+            })
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.currentPageSize = val;
+            this.getTableData(this.currentPage);
+        },
+        userDetail(){
+            this.$refs.userDetail.dialogVisible = true;
+        },
+        userInfoEdit(){
+            this.$refs.userInfoEdit.dialogVisible = true;
         }
     }
 }
@@ -117,35 +130,77 @@ export default {
     padding: 0;
 }
 
+.el-table {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    margin-left: 1%;
+    height: 400px;
+    border: 1px solid #f0f2f2;
+    margin-top: 10px;
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
+
+    /deep/th {
+        background: #f7fbff;
+    }
+
+    /deep/.el-checkbox {
+        color: #b2b2b2;
+
+        .el-checkbox__input.is-checked+.el-checkbox__label {
+            color: #2ea8e6;
+        }
+
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+            width: 70%;
+            height: 70%;
+            background: #2ea8e6;
+            border-radius: 0;
+            transform: rotate(0deg) scaleY(1);
+            position: static;
+            // border: 1px solid #8DD9FF;
+        }
+
+        .el-checkbox__inner {
+            border: 1px solid #8dd9ff;
+            background: rgba(0, 170, 255, 0);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: static;
+
+            &::after {
+                transition: 0ms;
+            }
+        }
+
+        .el-checkbox__label {
+            padding-left: 0;
+            font-size: 15px;
+            position: absolute;
+            top: 1px;
+            left: 25px;
+        }
+    }
+}
+
 .bottom {
     position: absolute;
-    left: 20px;
-    right: 16px;
-    bottom: 20px;
+    bottom: 10px;
+    left: 50px;
     height: 50px;
+    width: 95%;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     text-align: center;
 
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
-    }
-
-    .check-cancel {
-        position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
-    }
-
     .bottom_button {
         position: absolute;
-        left: 200px;
+        left: 20px;
         margin-top: 15px;
 
         .delete {

src/views/userManagement/personManagement/tables/deactiveUser.vue

@@ -1,14 +1,15 @@
 <template>
     <div>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
-            :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
+            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 98%"
+            @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
             <el-table-column prop="username" label="用户名">
             </el-table-column>
             <el-table-column prop="phone" label="手机号">
             </el-table-column>
-            <el-table-column prop="e_mail" label="邮箱">
+            <el-table-column prop="email" label="邮箱">
             </el-table-column>
             <el-table-column prop="role" label="角色">
             </el-table-column>
@@ -16,7 +17,7 @@
             </el-table-column>
             <el-table-column prop="working_address" label="单位">
             </el-table-column>
-            <el-table-column prop="registed_time" label="注册时间">
+            <el-table-column prop="register_time" label="注册时间">
             </el-table-column>
             <el-table-column prop="status" label="状态">
                 <template slot-scope="scope">
@@ -30,76 +31,84 @@
             </el-table-column>
         </el-table>
         <div class="bottom">
-            <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
+            <div class="bottom_button">
                 <el-button class="delete" type="text">批量删除</el-button>
+                <el-divider direction="vertical"></el-divider>
                 <el-button class="disabled" type="text">批量激活</el-button>
+                <el-divider direction="vertical"></el-divider>
                 <el-button class="export" type="text">导出数据</el-button>
             </div>
-            <page></page>
+            <page class="page" :paginationData="paginationData"></page>
         </div>
     </div>
 </template>
 
 <script >
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+import page from '@/components/pagination/index';
+import { getUserList } from '@/api/user/user';
 export default {
-    components: { checkbox, page },
+    components: { page },
     data() {
         return {
-            total:0,
-            tableData: [{
-                username: 'admin',
-                phone: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: true
-            }, {
-                username: 'admin',
-                phone: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: false
-            }, {
-                username: 'admin',
-                phone: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: true
-            }, {
-                username: 'admin',
-                phone: '12345678901',
-                e_mail: 'admin@xxxx.com',
-                role: '管理员',
-                permission: '1级',
-                working_address: '北京电信规划设计院',
-                registed_time: '2022-08-09  19:00',
-                status: false
-            },],
+            tableData:[],
             multipleSelection: [],
-            show:true
+            currentPageSize: 10,
+            currentPage: 1,
+            paginationData: {
+                pageSize: 10,
+                pagerCount: 5,
+                currentPage: 1,
+                pageSizes: [5, 10, 20, 30],
+                total: 30,
+                currentChange: (val) => {
+                    this.getTableData(val);
+                },
+                handleSizeChange: (val) => {
+                    this.handleSizeChange(val);
+                },
+            },
         }
     },
+    mounted() {
+        this.initData();
+    },
     methods: {
-        cancleChecked(){
-
+        initData() {
+            this.getTableData(1);
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        handleClick() {
+            //
+        },
+        getTableData(page) {
+            this.tableData = [];
+            getUserList(
+                0,
+                page
+            ).then((res) => {
+                if (res.data.code === 0 && res.data.data.length > 0) {
+                    this.tableData = res.data.data.map((e) => {
+                        return {
+                            username: e.name,
+                            phone:e.phone,
+                            email:e.email,
+                            role:e.role,
+                            permission:e.permission,
+                            working_address:e.company,
+                            register_time:e.register_time,
+                            status:e.on_job_status
+                        }
+                    })
+                }
+            })
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+            this.currentPageSize = val;
+            this.getTableData(this.currentPage);
         },
-        handleSelectionChange(){
-            
-        }
     }
 }
 </script>
@@ -111,54 +120,96 @@ export default {
     padding: 0;
 }
 
+.el-table {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    margin-left: 1%;
+    height: 400px;
+    border: 1px solid #f0f2f2;
+    margin-top: 10px;
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
+
+    /deep/th {
+        background: #f7fbff;
+    }
+
+    /deep/.el-checkbox {
+        color: #b2b2b2;
+
+        .el-checkbox__input.is-checked+.el-checkbox__label {
+            color: #2ea8e6;
+        }
+
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+            width: 70%;
+            height: 70%;
+            background: #2ea8e6;
+            border-radius: 0;
+            transform: rotate(0deg) scaleY(1);
+            position: static;
+            // border: 1px solid #8DD9FF;
+        }
+
+        .el-checkbox__inner {
+            border: 1px solid #8dd9ff;
+            background: rgba(0, 170, 255, 0);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: static;
+
+            &::after {
+                transition: 0ms;
+            }
+        }
+
+        .el-checkbox__label {
+            padding-left: 0;
+            font-size: 15px;
+            position: absolute;
+            top: 1px;
+            left: 25px;
+        }
+    }
+}
+
 .bottom {
     position: absolute;
-    left: 20px;
-    right: 16px;
-    bottom: 20px;
+    bottom: 10px;
+    left: 50px;
     height: 50px;
+    width: 95%;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     text-align: center;
 
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
-    }
-
-    .check-cancel {
-        position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
-    }
-
     .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
+        position: absolute;
+        left: 20px;
+        margin-top: 15px;
 
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .delete {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
 
-            .disabled {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .disabled {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
 
-            .export {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .export {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
         }
+    }
 }
 </style>