侧边栏及人员管理

package-lock.json

@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@iconify-json/ant-design": "^1.1.5",
+        "@iconify-json/pajamas": "^1.1.21",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-plugin-vuex": "~5.0.0",
@@ -1925,6 +1926,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/pajamas": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/pajamas/-/pajamas-1.1.21.tgz",
+      "integrity": "sha512-SV+cxkfZDAheIbhSoKtTBOtKz2HD68hVU97f+WO/P6N6nipLXxvLcgHrfc0a1I4vRZ1YZZPRh98j8eme9dB0AA==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
@@ -13701,6 +13711,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/pajamas": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/pajamas/-/pajamas-1.1.21.tgz",
+      "integrity": "sha512-SV+cxkfZDAheIbhSoKtTBOtKz2HD68hVU97f+WO/P6N6nipLXxvLcgHrfc0a1I4vRZ1YZZPRh98j8eme9dB0AA==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@iconify-json/ant-design": "^1.1.5",
+    "@iconify-json/pajamas": "^1.1.21",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",

src/api/user/user.js

@@ -1,4 +1,4 @@
-import { get, post, put, del } from "@/utils/requestMethod";
+import {get, post, put, del, getFile, postFile} from "@/utils/requestMethod";
 
 /**
  * 获取用户列表
@@ -11,11 +11,11 @@ import { get, post, put, del } from "@/utils/requestMethod";
 const getUserList = (
     status,
     page,
-    page_size = 20,
-    name=""
+    page_size,
+    name
 ) => {
     return get(
-        `/users/user_list?status=${status}&page=${page}&page_size=${page_size}&name=${name}`
+        `/users/user_list?status=${status}&page=${page}&page_size=${page_size}&filter=${name}`
     );
 }
 //添加用户
@@ -34,7 +34,7 @@ const addUser = (options) => {
     params.append('on_job_status', options.working_status);
     params.append('duty', options.post);
     params.append('nationality', options.nationality);
-    return post(`/users/user`, params);
+    return postFile(`/users/user`, params);
 }
 //获取用户详情
 const getUserInfo = (
@@ -44,7 +44,7 @@ const getUserInfo = (
 }
 //导出用户数据
 const exportUserData = () => {
-    return get(`/users/export_data`);
+    return getFile(`/users/export_data`);
 }
 //删除用户
 const deleteSingleUser = (options) => {
@@ -55,14 +55,15 @@ const deleteSingleUser = (options) => {
     return del(`/users/user`, params);
 }
 //批量删除用户
-const delUserByBatched = () => {
-    return del(`/users/batch_delete_user`);
+const delUserByBatched = (params) => {
+    return del(`/users/batch_delete_user`, params);
 }
 //更新用户详情
 const updateUserInfo = (options) => {
     let params = new FormData();
     options.username !== '' && params.append('username', options.username);
     options.password !== '' && params.append('password', options.password);
+    params.append('id', options.id);
     params.append('photograph', options.photograph);
     params.append('name', options.name);
     params.append('phone', options.phone);
@@ -81,8 +82,8 @@ const alterUserStatus = () => {
     return put(`/users/user_status`);
 }
 //批量修改用户状态等
-const alterUserStatusByBatched = () => {
-    return put(`/users/batch_modify_user_status`);
+const alterUserStatusByBatched = (params) => {
+    return put(`/users/batch_modify_user_status`, params);
 }
 export {
     getUserList,

src/components/Dialogs/IocDialog.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="ioc-dialog">
+        <el-dialog
+            v-if="show"
+                :visible.sync="show"
+                width="400px"
+                :before-close="handleClose">
+            <div class="ioc-dialog-icon">
+                <i-pajamas-warning-solid v-if="type=='warn'" />
+                <i-pajamas-clear v-if="type=='error'" />
+            </div>
+            <div class="ioc-dialog-icon" style="color: #40E693">
+                <i-pajamas-check-circle-filled v-if="type=='success'" />
+            </div>
+            <div class="ioc-dialog-tips">
+                {{ msg }}
+            </div>
+
+            <template #footer>
+                <el-button class="ioc-dialog-btn" type="info">取 消</el-button>
+                <el-button class="ioc-dialog-btn" type="primary">确 定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        show: Boolean,
+        type: String,
+        msg: String,
+    },
+    data() {
+        return {
+
+        }
+    },
+    emits: ["update:show"],
+    setup(props, context) {
+        const methods = {
+            updateShow(val) {
+                context.emit("update:show", val);
+            }
+        };
+        return methods;
+    },
+    mounted() {
+    },
+    methods: {
+        handleClose() {
+            this.updateShow(false)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.ioc-dialog {
+  text-align: center;
+
+  .ioc-dialog-icon {
+    font-size: 36px;
+    color: #E64046;
+  }
+
+  .ioc-dialog-tips {
+    font-size: 16px;
+    color: #333333;
+    font-weight: 600;
+    line-height: 45px;
+    letter-spacing: 1px;
+  }
+
+  .ioc-dialog-btn {
+    height: 24px;
+    font-size: 12px;
+    padding: 0 30px;
+    margin: 15px;
+  }
+
+  .el-dialog__body {
+    padding: 30px 20px 5px !important;
+  }
+
+  .el-dialog__footer {
+    text-align: center;
+  }
+}
+
+
+</style>

src/layout/Sidebar.vue

@@ -6,7 +6,8 @@
       text-color="rgba(255, 255, 255, 1)"
       active-text-color="white"
       :collapse="isCollapse"
-      :collapse-transition="false"
+      :default-active="activeIndex"
+      :collapse-transition="true"
       router
       mode="vertical"
       :unique-opened="true"
@@ -199,15 +200,26 @@ export default {
 /deep/ .el-submenu .el-menu-item {
   padding: 0 0 0 25px !important;
   text-align: left;
+  line-height: 40px;
+  height: 40px;
 }
 
 .el-menu-item {
   font-size: 16px;
   padding: 0 40px;
   cursor: pointer;
+  line-height: 40px;
+  height: 40px;
+  margin: 12px 0 0;
+}
+/deep/.el-submenu .el-menu-item {
+  margin: 8px 0 0 !important;
 }
 
 /deep/.el-submenu__title {
   font-size: 16px;
+  line-height: 40px;
+  height: 40px;
+  margin: 12px 0 0;
 }
 </style>

src/style/element-variables.scss

@@ -4,4 +4,6 @@ $--border-color-base: #ebebeb;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
+$--color-info: #b3b3b3;
+
 @import "~element-ui/packages/theme-chalk/src/index";

src/views/userManagement/personManagement/index.vue

@@ -6,30 +6,45 @@
         <el-divider style="background-color: #f4f4f4"/>
         <div class="showTable">
             <div class="opr-btn">
-                <el-button type="primary" @click="exportData">导出数据</el-button>
-                <el-button type="primary" @click="batchActivate">批量{{ active=='0'?'禁用':'激活' }}</el-button>
-                <el-button type="primary" @click="batchDelete">批量删除</el-button>
+                <el-button type="primary" @click="batchUpdStatus">批量{{ active=='0'?'禁用':'激活' }}</el-button>
+                <el-button type="info" @click="batchDelete">批量删除</el-button>
+                <el-popconfirm
+                    title="是否导出用户信息？"
+                    style="margin-left: 12px"
+                    @confirm="exportData"
+                >
+                    <el-button slot="reference" type="default" >导出数据</el-button>
+                </el-popconfirm>
+
+
+                <div style="float: right">
+                    <el-input class="opr-search" v-model="searchVal" style="width: 300px;" placeholder="用户名、手机号、单位名称" >
+                        <el-button @click="searchEvent" slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                    <el-button style="margin-left: 30px" type="primary" @click="addUser">添加人员</el-button>
+                </div>
             </div>
             <div class="table-data">
-                <userTableData :active="active" ref="userTableData" ></userTableData>
+                <userTableData :searchVal="searchVal" :active="active" ref="userTableData" @view="viewUser" @edit="editUser" @del="delUser" ></userTableData>
             </div>
         </div>
         <!--弹窗-->
-        <userinfo ref="addUser" @confirmEvent="confirmEvent"></userinfo>
+        <userinfo :title="userDetail_title" ref="addUser" @confirmEvent="confirmEvent"></userinfo>
     </div>
 </template>
 
 <script>
 import userTableData from './tables/userTableData.vue'
-import userinfo from './messageDialog/addUser'
+import userinfo from './messageDialog/userInfo.vue'
 import Tags from "@/components/tags/index.vue";
-import {addUser} from '@/api/user/user';
+import {addUser, alterUserStatusByBatched, deleteSingleUser, delUserByBatched, exportUserData, updateUserInfo} from '@/api/user/user';
 
 export default {
     name: "personManagement",
     components: {userTableData, userinfo, Tags,},
     data() {
         return {
+            userDetail_title: '添加用户',
             tags: [
                 {
                     label: '在用账户',
@@ -42,7 +57,8 @@ export default {
                     show: false,
                 }
             ],
-            active: '0'
+            active: '0',
+            searchVal: '',
         };
     },
     mounted() {
@@ -56,30 +72,43 @@ export default {
             })
         },
         addUser() {
-            this.$refs.addUser.popTitle = '用户详情';
+            this.userDetail_title = '添加用户'
+            this.$refs.addUser.isView = false;
+            this.$refs.addUser.form = {
+                username: '',
+                password: '',
+                name: '',
+                phone: '',
+                email: '',
+                corporation: '',
+                department: '',
+                role: '',
+                permission: '',
+                working_status: '',
+                post: '',
+                account_status: '',
+                nationality: '中国',
+                photograph: '',
+            };
             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,
-                };
+        confirmEvent(data, isEdit) {
+            let options = JSON.parse(JSON.stringify(data));
+            options.photograph = data.photograph
+            if (isEdit) {
+                updateUserInfo(options).then((res) => {
+                    if (res.data.code === 0) {
+                        this.$message.success('用户修改成功');
+                        this.$refs.addUser.dialogVisible = false;
+                        this.$refs.addUser.isView = false;
+                        this.$refs.userTableData.getTableData(1);
+                    }
+                })
+            } else {
                 addUser(options).then((res) => {
                     if (res.data.code === -1) {
                         this.$message.info('用户已存在，请修改重新添加！');
@@ -87,6 +116,7 @@ export default {
                     if (res.data.code === 0) {
                         this.$message.success('用户添加成功');
                         this.$refs.addUser.dialogVisible = false;
+                        this.$refs.addUser.isView = false;
                         this.$refs.userTableData.getTableData(1);
                     }
                 })
@@ -94,6 +124,118 @@ export default {
         },
         searchEvent() {
             this.$refs.userTableData.getTableData(this.$refs.userTableData.currentPage);
+        },
+        viewUser(data) {
+            this.userDetail_title = '用户详情'
+            this.$refs.addUser.form = JSON.parse(JSON.stringify(data));
+            this.$refs.addUser.isView = true;
+            this.$refs.addUser.dialogVisible = true;
+        },
+        editUser(data) {
+            this.userDetail_title = '用户更新'
+            this.$refs.addUser.form = JSON.parse(JSON.stringify(data));
+            this.$refs.addUser.isView = false;
+            this.$refs.addUser.dialogVisible = true;
+        },
+        delUser(data) {
+            let id = data.id;
+            let params = {
+                id: id,
+                username: 'del',
+                password: 'del'
+            }
+            deleteSingleUser(params).then(res=>{
+                this.$message.success('删除成功');
+                this.$refs.userTableData.initData();
+            })
+        },
+        batchUpdStatus() {
+            let ids = [];
+            if (this.$refs.userTableData.multipleSelection) {
+                this.$refs.userTableData.multipleSelection.forEach(i=>{
+                    ids.push(i.id);
+                })
+            }
+            let params = {
+                users_id: '['+ids.join(',')+']',
+                status: this.active=='0'?'1':'0',
+            }
+            if (ids.length<1) {
+                this.$message.warning('请选择用户')
+                return;
+            }
+            let tips = this.active=='0'?'禁用':'激活';
+            let app = this;
+            this.$confirm('是否'+tips+ids.length+'名用户?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                alterUserStatusByBatched(params).then(res=>{
+                    if (res.data.code==0) {
+                        app.$refs.userTableData.initData();
+                        app.$message({
+                            type: 'success',
+                            message: '操作成功!'
+                        });
+                    }
+                })
+            })
+        },
+        batchDelete() {
+            let ids = [];
+            if (this.$refs.userTableData.multipleSelection) {
+                this.$refs.userTableData.multipleSelection.forEach(i=>{
+                    ids.push(i.id);
+                })
+            }
+            let params = {
+                users_id: '['+ids.join(',')+']'
+            }
+            if (ids.length<1) {
+                this.$message.warning('请选择用户')
+                return;
+            }
+            let app = this;
+            this.$confirm('是否删除'+ids.length+'名用户?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                delUserByBatched(params).then(res=>{
+                    if (res.data.code==0) {
+                        app.$refs.userTableData.initData();
+                        app.$message({
+                            type: 'success',
+                            message: '操作成功!'
+                        });
+                    }
+                })
+            })
+        },
+        exportData() {
+
+            exportUserData().then(res=>{
+                const data = res.data;
+                if (data.type === "application/octet-stream") {
+                    let fileName
+                    if (res.headers['content-disposition']) {
+                        fileName = res.headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
+                        fileName = fileName.replace('attachment; filename=',Date.now()+'-');
+                    } else {
+                        fileName = data.fileName
+                    }
+                    const blob = new Blob([data], { type: data.type });
+                    const url = window.URL.createObjectURL(blob);
+                    const link = document.createElement("a");
+                    link.href = url;
+                    link.download = fileName;
+                    document.body.appendChild(link);
+                    link.click();
+                    link.parentNode.removeChild(link);
+                    window.URL.revokeObjectURL(url);
+                }
+            })
         }
     }
 };
@@ -102,6 +244,30 @@ export default {
 <style lang="less" scoped>
 .container {
 
+    .opr-search {
+        /deep/ .el-input__inner {
+            height: 30px !important;
+            //border-right: none;
+        }
+        /deep/ .el-input-group__append {
+            border: none;
+            background-color: transparent;
+            padding: 0 20px;
+        }
+        /deep/ .el-button {
+            background-color: transparent;
+            border-radius: 0 4px 4px 0;
+            border-bottom: 1px solid #ebebeb;
+            border-right: 1px solid #ebebeb;
+            border-top: 1px solid #ebebeb;
+            height: 30px;
+            width: 30px;
+            text-align: center;
+            vertical-align: top;
+            margin-top: -5px;
+        }
+    }
 
 }
+
 </style>

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

@@ -1,272 +0,0 @@
-<template>
-    <div>
-        <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" :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>
-                            <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="corporation">
-                        <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 v-for="item in statusOptions" :key="item.value" :label="item.label"
-                                    :value="item.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-upload">
-                        <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>
-                    </div>
-                </el-form>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button style="  background-color: #B3B3B3;
-        color: #FFFFFF;" @click="resetForm('form')">重置</el-button>
-                <el-button style="  background-color: #2EA8E6;
-        color: #FFFFFF;" @click="submitForm('form')">确认</el-button>
-            </div>
-        </el-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-
-    data() {
-        return {
-            popTitle:'用户详情',
-            dialogVisible: false,
-            select: '',
-            form: {
-                username: '',
-                password: '',
-                name: '',
-                phone: '',
-                email: '',
-                corporation: '',
-                department: '',
-                role: '',
-                permission: '',
-                working_status: '',
-                post: '',
-                account_status: '',
-                nationality: '',
-                photograph: require('@/assets/upload/头像上传@3x.png')
-            },
-            statusOptions: [
-                {
-                    value: 0,
-                    label: '正常'
-                },
-                {
-                    value: 1,
-                    label: '停用'
-                }
-            ],
-            rules: {
-                username: [{ required: true, trigger: 'blur' }],
-                password: [{ required: true, trigger: 'blur' }]
-            }
-        }
-    },
-    watch: {
-    },
-    methods: {
-        handleNodeClick() {
-
-        },
-        resetForm() {
-            this.$refs.form.resetFields();
-        },
-        submitForm() {
-            this.$refs.form.validate((valid) => {
-                if (valid) {
-                    this.$emit('confirmEvent', this.form);
-                } else {
-                    return false;
-                }
-            })
-        },
-        currentTime() {
-
-        }
-    }
-
-}
-</script>
-<style lang="less" scoped>
-/deep/.el-dialog {
-    height: 750px !important;
-}
-
-.next {
-    background-color: #2EA8E6;
-    color: #FFFFFF;
-}
-
-.avatar-upload {
-    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/failed.vue

@@ -1,22 +0,0 @@
-<template>
-    <el-dialog :visible.sync="centerDialogVisible" width="30%" center style="display: flex;">
-        <div>/////</div>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="centerDialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="centerDialogVisible = false">确 认</el-button>
-        </span>
-    </el-dialog>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            centerDialogVisible: false
-        };
-    }
-};
-</script>
-
-<script lang="less" scoped>
-</script>

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

@@ -1,22 +0,0 @@
-<template>
-    <el-dialog :visible.sync="centerDialogVisible" width="30%" center style="display: flex;">
-        <div>/////</div>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="centerDialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="centerDialogVisible = false">确 认</el-button>
-        </span>
-    </el-dialog>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            centerDialogVisible: false
-        };
-    }
-};
-</script>
-
-<script lang="less" scoped>
-</script>

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

@@ -0,0 +1,313 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" :title="title" :visible.sync="dialogVisible" width="32%" append-to-body
+                   center>
+            <div style="width: 90%;margin: 0 auto">
+                <el-divider></el-divider>
+            </div>
+            <div style="height: 550px; padding: 20px">
+                <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 :disabled="isView || (form.id&&form.id!='')" 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 v-if="!(form.id&&form.id!='')" 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 :disabled="isView" class="name" v-model="form.name" placeholder="姓名"></el-input>
+                    </el-form-item>
+                    <el-form-item v-if="(form.id&&form.id!='')" style="width: 380px; "
+                                  label-width="65px" label="密码:">
+                        <div>
+                            <el-input class="password" value="******" :disabled="true"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="电话：" prop="phone">
+                        <div style="display: flex;">
+                            <el-select class="select" v-model="select" :disabled="isView">
+                                <el-option value="+86" label="CN+86"/>
+                            </el-select>
+                            <el-input :disabled="isView" class="phone" v-model="form.phone" placeholder="请输入手机号">
+                            </el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="邮箱：" prop="email">
+                        <el-input :disabled="isView" v-model="form.email" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item label="公司：" prop="corporation">
+                        <el-input :disabled="isView" v-model="form.corporation" placeholder="公司"></el-input>
+                    </el-form-item>
+                    <el-form-item label="部门：" prop="department">
+                        <el-input :disabled="isView" 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" :disabled="isView">
+                                <el-option value="用户组"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="职务：" prop="post">
+                            <el-select v-model="form.post" :disabled="isView">
+                                <el-option value="1" label="职工"></el-option>
+                                <el-option value="2" label="经理"></el-option>
+                                <el-option value="3" label="董事长"></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" :disabled="isView">
+                                <el-option value="在职"></el-option>
+                                <el-option value="离职"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="国籍：" prop="nationality">
+                            <el-select v-model="form.nationality" :disabled="isView">
+                                <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" :disabled="isView">
+                                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
+                                           :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div class="avatar-upload">
+                        <el-avatar :size="110"  :src="avatarUrl" ></el-avatar>
+                        <span v-show="!isView">
+                            <el-upload
+                                    style=""
+                                    ref="upload"
+                                    action=""
+                                    :show-file-list="false"
+                                    :on-change="handleUploadChange"
+                                    :auto-upload="false">
+                                <p style="font-size: 12px; line-height: 20px; color: #B3B3B3; margin-left: 25px">
+                                    上传头像
+                                </p>
+                            </el-upload>
+                        </span>
+                    </div>
+                </el-form>
+            </div>
+            <div slot="footer" class="dialog-footer" v-show="!isView">
+                <el-button style="  background-color: #B3B3B3;
+        color: #FFFFFF;" @click="resetForm('form')">重置
+                </el-button>
+                <el-button style="  background-color: #2EA8E6;
+        color: #FFFFFF;" @click="submitForm('form')">确认
+                </el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: String,
+    },
+    data() {
+        return {
+            avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+            isView: false,
+            dialogVisible: false,
+            select: '+86',
+            form: {
+                username: '',
+                password: '',
+                name: '',
+                phone: '',
+                email: '',
+                corporation: '',
+                department: '',
+                role: '',
+                permission: '',
+                working_status: '',
+                post: '',
+                account_status: '',
+                nationality: '中国',
+                photograph: '',
+            },
+            statusOptions: [
+                {
+                    value: 0,
+                    label: '正常'
+                },
+                {
+                    value: 1,
+                    label: '禁用'
+                }
+            ],
+            fileList: [],
+            rules: {
+                username: [{required: true, trigger: 'blur', message: ' '}],
+                password: [{required: true, trigger: 'blur', message: ' '}]
+            }
+        }
+    },
+    watch: {
+    },
+    emits: ['confirmEvent'],
+    methods: {
+        handleNodeClick() {
+
+        },
+        resetForm() {
+            this.$refs.form.resetFields();
+        },
+        submitForm() {
+            this.$refs.form.validate((valid) => {
+                let isEdit = this.form.id && this.form.id != '';
+                if (valid) {
+                    this.$emit('confirmEvent', this.form, isEdit);
+                } else {
+                    return false;
+                }
+            })
+        },
+        currentTime() {
+
+        },
+        handleUploadChange(file, fileList) {
+            let reader = new FileReader();
+            reader.readAsDataURL(file.raw);
+            let app = this;
+            reader.onload = function (e) {
+                app.avatarUrl = this.result;
+                app.form.photograph = file.raw;
+            }
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/ .el-dialog {
+  height: 750px !important;
+}
+
+.next {
+  background-color: #2EA8E6;
+  color: #FFFFFF;
+}
+
+.avatar-upload {
+  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 {
+  margin: 0 !important;
+}
+
+/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/userTableData.vue

@@ -1,16 +1,17 @@
 <template>
     <div>
-        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center', fontSize: '14px' }"
-            :cell-style="{ textAlign: 'center' }" style="width: 100%;min-height: 500px"
-            @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="email" label="邮箱"> </el-table-column>
-            <el-table-column prop="role" label="角色"> </el-table-column>
-            <el-table-column prop="permission" label="权限"> </el-table-column>
-            <el-table-column prop="working_address" label="单位"> </el-table-column>
-            <el-table-column prop="register_time" label="注册时间" width="180"> </el-table-column>
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
+                  :header-cell-style="{ textAlign: 'center', fontSize: '14px' }"
+                  :cell-style="{ textAlign: 'center' }" style="width: 100%;min-height: 500px"
+                  @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="email" label="邮箱"></el-table-column>
+            <el-table-column prop="role" label="角色"></el-table-column>
+            <el-table-column prop="permission" label="权限"></el-table-column>
+            <el-table-column prop="working_address" label="单位"></el-table-column>
+            <el-table-column prop="register_time" label="注册时间" width="180"></el-table-column>
             <el-table-column prop="status" label="状态">
                 <template slot-scope="scope">
                     <el-tag :color="scope.row.status !== null || undefined ? '#06f77e' : '#757776'"></el-tag>
@@ -18,30 +19,33 @@
             </el-table-column>
             <el-table-column prop="operation" label="操作">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" style="color: #2ea8e6" v-show="scope.row.username == null ? false : true" @click="userDetail(scope.row)">查看</el-button>
-                    <el-button size="mini" type="text" style="color: #2ea8e6" v-show="scope.row.username == null ? false : true" @click="userInfoEdit(scope.row)">编辑</el-button>
-                    <el-button size="mini" type="text" style="color: #2ea8e6" v-show="scope.row.username == null ? false : true" @click="deleteUser(scope.row)">删除</el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                               v-show="scope.row.username == null ? false : true" @click="view(scope.row)">查看
+                    </el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                               v-show="scope.row.username == null ? false : true" @click="edit(scope.row)">编辑
+                    </el-button>
+                    <el-button size="mini" type="text" style="color: #2ea8e6"
+                               v-show="scope.row.username == null ? false : true" @click="deleteUser(scope.row)">删除
+                    </el-button>
                 </template>
             </el-table-column>
         </el-table>
         <div class="bottom">
             <page class="page" :paginationData="paginationData"></page>
         </div>
-        <!--弹窗-->
-        <user-detail ref="userDetail"></user-detail>
-        <userInfoEdit ref="userInfoEdit"></userInfoEdit>
     </div>
 </template>
 
 <script>
 import page from '@/components/pagination/index';
-import { getUserList, getUserInfo, deleteSingleUser, updateUserInfo } from '@/api/user/user';
-import UserDetail from '../messageDialog/userInfoDetail';
-import userInfoEdit from '../messageDialog/userInfoEdit';
+import {getUserList, getUserInfo, deleteSingleUser, updateUserInfo} from '@/api/user/user';
+
 export default {
-    components: { page, UserDetail, userInfoEdit },
+    components: {page},
     props: {
         active: String,
+        searchVal: String,
     },
     data() {
         return {
@@ -64,11 +68,15 @@ export default {
             },
         };
     },
+    emits: ['view', 'update', 'del'],
     mounted() {
         this.initData();
     },
     methods: {
         initData() {
+            this.paginationData.currentPage=1;
+            this.paginationData.pageSize = 10;
+            this.paginationData.total = 0;
             this.getTableData(1);
         },
         handleSelectionChange(val) {
@@ -79,31 +87,35 @@ export default {
         },
         getTableData(page) {
             this.tableData = [];
-            getUserList(this.active, page, this.currentPageSize, this.name).then((res) => {
-                if (res.data.code === 0 && res.data.data.length > 0) {
+            getUserList(this.active, page, this.currentPageSize, this.searchVal).then((res) => {
+                if (res.data.code === 0) {
                     this.paginationData.total = res.data.total;
-                    this.tableData = res.data.data.map((e) => {
-                        return {
-                            id:e.id,
-                            username: e.user_name,
-                            phone: e.phone == "undefined" || !e.phone ? "--" : e.phone,
-                            email: e.email == "undefined" || !e.email ? "--" : e.email,
-                            role: e.role == "undefined" || !e.role ? "--" : e.role,
-                            permission:
-                                e.permission == "undefined" || !e.permission
-                                    ? e.permission
-                                    : "--",
-                            working_address:
-                                e.company == "undefined" || !e.company ? "--" : e.company,
-                            register_time: this.$dayjs(e.register_time).format(
-                                "YYYY-MM-DD HH:mm:ss"
-                            ),
-                            status:
-                                e.on_job_status == "undefined" || !e.on_job_status
-                                    ? "--"
-                                    : e.on_job_status,
-                        };
-                    });
+                    this.paginationData.currentPage = 1;
+                    this.paginationData.pageSize = 10
+                    if (res.data.data.length > 0) {
+                        this.tableData = res.data.data.map((e) => {
+                            return {
+                                id: e.id,
+                                username: e.user_name,
+                                phone: e.phone == "undefined" || !e.phone ? "--" : e.phone,
+                                email: e.email == "undefined" || !e.email ? "--" : e.email,
+                                role: e.role == "undefined" || !e.role ? "--" : e.role,
+                                permission:
+                                    e.permission == "undefined" || !e.permission
+                                        ? e.permission
+                                        : "--",
+                                working_address:
+                                    e.company == "undefined" || !e.company ? "--" : e.company,
+                                register_time: this.$dayjs(e.register_time).format(
+                                    "YYYY-MM-DD HH:mm:ss"
+                                ),
+                                status:
+                                    e.on_job_status == "undefined" || !e.on_job_status
+                                        ? "--"
+                                        : e.on_job_status,
+                            };
+                        });
+                    }
                 }
             });
         },
@@ -111,102 +123,85 @@ export default {
             this.currentPageSize = val;
             this.getTableData(this.currentPage);
         },
-        userDetail() {
-            this.$refs.userDetail.dialogVisible = true;
+        view(data) {
+            this.$emit('view', data);
         },
-        userInfoEdit() {
-            this.$refs.userInfoEdit.dialogVisible = true;
+        edit(data) {
+            this.$emit('edit', data);
         },
-
         deleteUser(data) {
-            let options = {
-                id:data.id,
-                // username: data.username,
-                // password: getUserInfo(data.id).then((res) =>{
-                //     console.log(res);
-                // }),
-            };
-            console.log(options);
-            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) => { });
-        },
-        batchActivate() { },
-        batchDelete() { },
-        exportData() { },
+            let app = this;
+            this.$confirm('是否删除用户：'+data.username+' ？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                app.$emit('del', data)
+            })
+        }
     },
 }
 
 </script>
 <style lang="less" scoped>
 .el-tag {
-    width: 12px;
-    height: 12px;
-    border-radius: 100px;
-    padding: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 100px;
+  padding: 0;
 }
 
 .el-table {
-    margin-top: 12px;
-    border: 1px solid #f0f2f2;
-    font-size: 0.95rem;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #b2b2b2;
-    background: rgba(255, 255, 255, 0.8);
+  margin-top: 12px;
+  border: 1px solid #f0f2f2;
+  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/ th {
+    background: #f7fbff;
+  }
 
-    /deep/.el-checkbox {
-        color: #b2b2b2;
+  /deep/ .el-checkbox {
+    color: #b2b2b2;
 
-        .el-checkbox__input.is-checked+.el-checkbox__label {
-            color: #2ea8e6;
-        }
+    .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__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;
+    .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;
-            }
-        }
+      &::after {
+        transition: 0ms;
+      }
+    }
 
-        .el-checkbox__label {
-            padding-left: 0;
-            font-size: 15px;
-            position: absolute;
-            top: 1px;
-            left: 25px;
-        }
+    .el-checkbox__label {
+      padding-left: 0;
+      font-size: 15px;
+      position: absolute;
+      top: 1px;
+      left: 25px;
     }
+  }
 }
 
 </style>