1.添加用户；2角色预览调整

src/api/user/user.js

@@ -17,8 +17,21 @@ const getUserList = (
     );
 }
 //添加用户
-const addUser = () => {
+const addUser = (options) => {
     let params = new FormData();
+    options.username !== '' && params.append('username', options.username);
+    options.password !== '' && params.append('password', options.password);
+    params.append('photograph', options.photograph);
+    params.append('name', options.name);
+    params.append('phone', options.phone);
+    params.append('email', options.email);
+    params.append('role', options.role);
+    params.append('permission', options.permission);
+    params.append('company', options.corporation);
+    params.append('department', options.department);
+    params.append('on_job_status', options.working_status);
+    params.append('duty', options.post);
+    params.append('nationality', options.nationality);
     return post(`/users/user`, params);
 }
 //获取用户详情
@@ -32,8 +45,11 @@ const exportUserData = () => {
     return get(`/users/export_data`);
 }
 //删除用户
-const deleteUser = () => {
+const deleteSingleUser = (options) => {
     let params = new FormData();
+    params.append('id', options.id);
+    params.append('username', options.username);
+    params.append('password', options.password);
     return del(`/users/user`, params);
 }
 //批量删除用户
@@ -41,24 +57,37 @@ const delUserByBatched = () => {
     return del(`/users/batch_delete_user`);
 }
 //更新用户详情
-const updateUserDetail = () =>{
+const updateUserDetail = (options) => {
     let params = new FormData();
-    return put(`/users/user`,params);
+    options.username !== '' && params.append('username', options.username);
+    options.password !== '' && params.append('password', options.password);
+    params.append('photograph', options.photograph);
+    params.append('name', options.name);
+    params.append('phone', options.phone);
+    params.append('email', options.email);
+    params.append('role', options.role);
+    params.append('permission', options.permission);
+    params.append('company', options.corporation);
+    params.append('department', options.department);
+    params.append('on_job_status', options.working_status);
+    params.append('duty', options.psot);
+    params.append('nationality', options.nationality);
+    return put(`/users/user`, params);
 }
 //修改用户状态等
 const alterUserStatus = () => {
     return put(`/users/user_status`);
 }
 //批量修改用户状态等
-const alterUserStatusByBatched = () =>{
+const alterUserStatusByBatched = () => {
     return put(`/users/batch_modify_user_status`);
 }
 export {
-    getUserList, 
-    addUser, 
-    getUserDetail, 
-    exportUserData ,
-    deleteUser, 
+    getUserList,
+    addUser,
+    getUserDetail,
+    exportUserData,
+    deleteSingleUser,
     delUserByBatched,
     updateUserDetail,
     alterUserStatus,

src/views/dataManagement/reportConfig.vue

@@ -281,6 +281,8 @@ export default {
       this.$refs.popupRef.formData.name = data.templateName;
       this.$refs.popupRef.formData.format = data.templateFormat;
       this.$refs.popupRef.formData.introduction = data.introduction;
+      console.log(111);
+      console.log(this.$refs.popupRef.formData);
     },
     deleteTemplate(data) {
       deleteSingleTemplate(data.id).then((res) => {

src/views/userManagement/groupManagement/index.vue

@@ -8,14 +8,14 @@
             <el-button><i class="el-icon-s-order"></i>添加公司</el-button>
         </div>
         <div class="right-pane">
-            <DepartmentdetailEdit></DepartmentdetailEdit>
+            <overView></overView>
         </div>
     </div>
 </template>
 <script>
-import DepartmentdetailEdit from './forms/departmentdetailEdit';
+import overView from './tables/corporationOverview';
 export default {
-    components: { DepartmentdetailEdit, },
+    components: { overView },
     data() {
         return {
             filterText: '',
@@ -92,6 +92,7 @@ export default {
         position: absolute;
         margin-left: 330px;
         top: 0;
+        height: -webkit-fill-available;
         margin-right: 20px;
     }
 }

src/views/userManagement/groupManagement/tables/corporationOverview.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <p class="info">公司总览</p>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+        <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>
@@ -23,14 +23,10 @@
             </el-table-column>
         </el-table>
         <div class="bottom">
-            <div>
-                <checkbox class="checkbox"></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>
             </div>
-            <page class="page"></page>
+            <page class="page" :paginationData="paginationData"></page>
         </div>
     </div>
 </template>
@@ -62,14 +58,29 @@ export default {
                 contact_phone: '12345678901',
             }],
             multipleSelection: [],
-            show: true
+            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);
+                },
+            },
         }
     },
     methods: {
-        cancleChecked() {
+        handleClick() {
             //
         },
-        handleClick() {
+        handleSelectionChange(){
             //
         }
     }
@@ -78,70 +89,99 @@ export default {
 <style lang="less" scoped>
 .info {
     text-align: left;
-    padding: 0px;
+    padding: 25px;
     font-size: 25px;
 }
 
+.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: relative;
-    left: 20px;
-    top: 420px;
+    position: absolute;
+    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;
-        top: 7px;
+        left: 20px;
+        margin-top: 15px;
 
         .delete {
-            width: 95px;
-            height: 30px;
             font-size: 14px;
             text-align: center;
             padding: 1px;
         }
 
         .disabled {
-            width: 95px;
-            height: 30px;
             font-size: 14px;
             text-align: center;
             padding: 1px;
         }
 
-        .el-dropdown {
-            margin-left: 15px;
-
-            /deep/.el-button--primary {
-                height: 30px;
-                //background-color: rgba(255, 255, 255, 1);
-            }
+        .export {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
         }
     }
-
-    .page {
-        position: absolute;
-        top: -10px;
-        right: 30px;
-    }
 }
 </style>

src/views/userManagement/personManagement/index.vue

@@ -7,17 +7,17 @@
             <el-button class="disableUser" @click="deactiveShow">
                 <i class="el-icon-user"></i>停用账户
             </el-button>
-                <el-input class="searchBox" v-model="query" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
+            <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>
         <div class="showTable">
-            <activeuser v-show="show"></activeuser>
-            <deactiveuser v-show="show1"></deactiveuser>
+            <activeuser ref="activeuser" v-show="show"></activeuser>
+            <deactiveuser ref="deactiveuser" v-show="show1"></deactiveuser>
         </div>
         <!--弹窗-->
-        <userinfo ref="addUser"></userinfo>
+        <userinfo ref="addUser" @confirmEvent="confirmEvent"></userinfo>
     </div>
 </template>
 
@@ -25,7 +25,7 @@
 import activeuser from './tables/activeUser'
 import deactiveuser from './tables/deactiveUser'
 import userinfo from './messageDialog/addUser'
-
+import { addUser } from '@/api/user/user';
 
 export default {
     name: "personManagement",
@@ -35,7 +35,7 @@ export default {
             input: '',
             show: true,
             show1: false,
-            query:''
+            query: ''
         };
     },
     methods: {
@@ -48,8 +48,43 @@ export default {
             this.show = false;
             this.show1 = true;
         },
-        addUser(){
+        addUser() {
+            this.$refs.addUser.popTitle = '用户详情';
             this.$refs.addUser.dialogVisible = true;
+            //重置form
+            setTimeout(() => {
+                this.$refs.addUser.resetForm();
+            }, 100)
+        },
+        confirmEvent(data) {
+            if (this.$refs.addUser.popTitle ==='用户详情') {
+                let options = {
+                    username: data.username,
+                    password: data.password,
+                    photograph: data.photograph,
+                    name: data.name,
+                    phone: data.phone,
+                    email: data.email,
+                    company: data.corporation,
+                    department: data.department,
+                    role: data.role,
+                    permission: data.permission,
+                    on_job_status: data.working_status,
+                    duty: data.post,
+                    nationality: data.nationality,
+                };
+                addUser(options).then((res) => {
+                    console.log(res);
+                    if (res.data.code === -1) {
+                        this.$message.info('用户已存在，请修改重新添加！');
+                    }
+                    if (res.data.code === 0) {
+                        this.$message.success('用户添加成功');
+                        this.$refs.addUser.dialogVisible = false;
+                        this.$refs.activeuser.getTableData(1);
+                    }
+                })
+            }
         }
     }
 };
@@ -58,7 +93,7 @@ export default {
 <style lang="less" scoped>
 .container {
     position: relative;
-    height:100%;
+    height: 100%;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
@@ -87,9 +122,10 @@ export default {
             text-align: center;
             padding: 5px;
         }
-        .onlineUser:focus{
+
+        .onlineUser:focus {
             background-color: #2EA8E6;
-            color:#FFFFFF;
+            color: #FFFFFF;
         }
 
         .disableUser {
@@ -107,9 +143,10 @@ export default {
             text-align: center;
             padding: 5px;
         }
-        .disableUser:focus{
+
+        .disableUser:focus {
             background-color: #2EA8E6;
-            color:#FFFFFF;
+            color: #FFFFFF;
         }
 
         .searchBox {
@@ -125,10 +162,10 @@ export default {
             color: #D7D8D8;
             font-size: 14px;
             text-align: center;
-            
-            /deep/.el-input__inner{
+
+            /deep/.el-input__inner {
                 height: 35px;
-            } 
+            }
         }
 
         .addUser {

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

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <el-dialog v-dialog-drag class="dialog" title="添加用户" :visible.sync="dialogVisible" width="32%" append-to-body
-            center>
+        <el-dialog v-dialog-drag class="dialog" :title="popTitle" :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 ref="form" :model="form" :rules="rules" 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>
@@ -32,7 +32,7 @@
                     <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-form-item label="公司：" prop="corporation">
                         <el-input v-model="form.corporation" placeholder="公司"></el-input>
                     </el-form-item>
                     <el-form-item label="部门：" prop="department">
@@ -75,7 +75,7 @@
                         </el-form-item>
                     </div>
                     <div class="avatar">
-                        <el-avatar :size="110" :src="testUrl" @click=""></el-avatar>
+                        <el-avatar :size="110" :src="form.photograph" @click=""></el-avatar>
                         <span>
                             <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
                         </span>
@@ -83,17 +83,19 @@
                 </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>
+                <el-button class="update" @click="submitForm('form')">确认</el-button>
             </div>
         </el-dialog>
     </div>
 </template>
 
 <script>
-import { addUser } from '@/api/user/user';
 export default {
+    props:{
+        popTitle:String,
+        default:''
+    },
     data() {
         return {
             dialogVisible: false,
@@ -111,10 +113,13 @@ export default {
                 working_status: '',
                 post: '',
                 account_status: '',
-                nationality: ''
+                nationality: '',
+                photograph: require('@/assets/images/头像上传@3x.png')
             },
-            charNum: 0,
-            testUrl: require('@/assets/images/头像上传@3x.png')
+            rules: {
+                username: [{ required: true, trigger: 'blur' }],
+                password: [{ required: true, trigger: 'blur' }]
+            }
         }
     },
     watch: {
@@ -129,13 +134,14 @@ export default {
         submitForm() {
             this.$refs.form.validate((valid) => {
                 if (valid) {
-                    // addUser(
-                    
-                    // ).then((res) =>{
-
-                    // })
+                    this.$emit('confirmEvent', this.form);
+                } else {
+                    return false;
                 }
             })
+        },
+        currentTime() {
+
         }
     }
 
@@ -261,4 +267,5 @@ export default {
     text-align: center;
     margin: 30px;
     padding: 5px;
-}</style>
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog v-dialog-drag class="dialog" title="用户信息编辑" :visible.sync="dialogVisible" width="32%" 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">
@@ -84,7 +84,7 @@
             </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>
+                <el-button class="update" @click="editForm('form')">确认</el-button>
             </div>
         </el-dialog>
     </div>

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

@@ -24,9 +24,12 @@
                 </template>
             </el-table-column>
             <el-table-column prop="operation" label="操作">
-                <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>
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" style="color: #2ea8e6" @click="userDetail(scope.row)">查看</el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                        @click="userInfoEdit(scope.row)">编辑</el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6" @click="deleteUser(scope.row)">删除</el-button>
+                </template>
             </el-table-column>
         </el-table>
         <div class="bottom">
@@ -47,11 +50,11 @@
 
 <script>
 import page from '@/components/pagination/index';
-import { getUserList } from '@/api/user/user';
+import { getUserList, deleteSingleUser, updateUserDetail } from '@/api/user/user';
 import UserDetail from '../messageDialog/userInfoDetail';
 import userInfoEdit from '../messageDialog/userInfoEdit';
 export default {
-    components: { page,UserDetail,userInfoEdit },
+    components: { page, UserDetail, userInfoEdit },
     data() {
         return {
             tableData: [],
@@ -113,12 +116,37 @@ export default {
             this.currentPageSize = val;
             this.getTableData(this.currentPage);
         },
-        userDetail(){
+        userDetail() {
             this.$refs.userDetail.dialogVisible = true;
         },
-        userInfoEdit(){
+        userInfoEdit() {
             this.$refs.userInfoEdit.dialogVisible = true;
         },
+        deleteUser(data) {
+            let options = {
+                id: data.id,
+                username: data.username,
+                password: data.password
+            };
+            deleteSingleUser(options).then((res) => {
+                if (res.data.code === 0) {
+                    this.$message.success('删除成功');
+                    this.getTableData(1);
+                }
+            })
+        },
+        userDetail(data) {
+
+        },
+        userInfoEdit(data) {
+            let options = {
+                id:data.id,
+                
+            };
+            updateUserDetail(options).then((res) => {
+
+            })
+        }
     }
 }
 </script>