Jelajahi Sumber

用户管理完成

luolei 5 tahun lalu
induk
melakukan
a54e8fcf16

+ 58 - 0
src/css/index.less

@@ -452,3 +452,61 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
     -moz-appearance: textfield;
 }
+
+
+.itemContentBoxLis {
+  width: 220px;
+  height: 365px;
+  margin: 30px 20px 20px 70px;
+  border: 1px solid #EFF0F9;
+  .title {
+      height: 40px;
+      line-height: 40px;
+      background-color: #EFF0F9;
+      text-align: center;
+  }
+  .partPub {
+    padding-top: 10px;
+    height: 315px;
+    overflow: auto;
+    li {
+      padding: 8px 20px;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+    img {
+      width: 14px;
+      height: 14px;
+      position: relative;
+      top: 2px;
+      margin-right: 10px;
+    }
+  }
+}
+.itemContentBoxLisL {
+  float: left;
+}
+.itemContentBoxLisR {
+  margin-left: 20px;
+  margin-right: 70px;
+  float: right;
+}
+.activeGo {
+  position: absolute;
+  width: 40px;
+  height: 60px;
+  left: 50%;
+  top: 50%;
+  margin-left: -20px;
+  margin-top: -45px;
+  img {
+    width: 40px;
+    height: 22px;
+    cursor: pointer;
+  }
+  .btm {
+    margin-top: 15px;
+  }
+}

+ 199 - 171
src/css/itemManager.less

@@ -1,196 +1,224 @@
-.container{
+.managerContainer{
     width: 100%;
     height: 100%;
     overflow-y: auto;
-}
-ul,li{
-    padding:0;
-    margin:0;
-    list-style:none;
-}
-h2{
-    width: 100%;
-    box-sizing: border-box;
-    background-color: #fff;
-    z-index: 20;
-    height: 44px;
-    line-height: 44px;
-    padding: 0 0 0 15px;
-    border-bottom: 1px solid #E2E5EF;
-    font-size: 16px;
-    font-weight: bold;
-    letter-spacing: 1px;
-}
-.main-body{
-    margin: 20px 40px;
-}
-table{
-    width: 100%;
-    border:1px solid #E2E5EF;
-    border-collapse: collapse;
-    thead{
-        background: #EFF0F9;
-       
+    .selectUsed,.selectReject {
+        float: right;
     }
-    th,td{
-        height: 40px;
+    ul,li{
+        padding:0;
+        margin:0;
+        list-style:none;
+    }
+    h2{
+        width: 100%;
         box-sizing: border-box;
-        padding: 10px;
+        background-color: #fff;
+        z-index: 20;
+        height: 44px;
+        line-height: 44px;
+        padding: 0 0 0 15px;
+        border-bottom: 1px solid #E2E5EF;
+        font-size: 16px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+    .main-body{
+        margin: 20px 40px;
+    }
+    table{
+        width: 100%;
         border:1px solid #E2E5EF;
         border-collapse: collapse;
+        thead{
+            background: #EFF0F9;
+           
+        }
+        th,td{
+            height: 40px;
+            box-sizing: border-box;
+            padding: 10px;
+            border:1px solid #E2E5EF;
+            border-collapse: collapse;
+        }
+        th{
+            font-size: 14px;
+            font-weight: 500;
+        }
+        td{
+            font-size: 14px;
+            font-weight: 400 
+        }
+        .moduleNumber{
+            text-align: center;
+        }
+        
     }
-    th{
-        font-size: 14px;
-        font-weight: 500;
+    // .filterBox{
+    //     margin: 0 0 20px 0;
+    // }
+    .filterItem{
+        position: relative;
+        display: inline-block;
+        margin-right: 20px;
+        height: 40px;
+        line-height: 40px;
+        margin: 0 20px 20px 0;
     }
-    td{
-        font-size: 14px;
-        font-weight: 400 
+    .filterDropList{
+        position: absolute;
+        right: 0;
+        height: 200px;
+        overflow-y: auto;
+        background: #fff;
+        display: none;
+        border: 1px solid #e4e7ed;
+        box-shadow: 0 2px 12px 0 #e4e7ed;
+        z-index: 2;
+        li{
+            padding: 0 10px;
+        }
     }
-    .moduleNumber{
-        text-align: center;
+    .rejectList, .usedList{
+        height: 120px;
+        li{
+            padding: 0 10px;
+        }
+        li:hover{
+            background-color: #EEF4FF;
+            cursor: pointer;
+        }
     }
-    
-}
-// .filterBox{
-//     margin: 0 0 20px 0;
-// }
-.filterItem{
-    position: relative;
-    display: inline-block;
-    margin-right: 20px;
-    height: 40px;
-    line-height: 40px;
-    margin: 0 20px 20px 0;
-}
-.filterDropList{
-    position: absolute;
-    right: 0;
-    height: 200px;
-    overflow-y: auto;
-    background: #fff;
-    display: none;
-    border: 1px solid #e4e7ed;
-    box-shadow: 0 2px 12px 0 #e4e7ed;
-    z-index: 2;
-    li{
-        padding: 0 10px;
+    .switchImg{
+        width: 30px;
     }
-}
-.rejectList, .usedList{
-    height: 120px;
-    li{
+    .roleSelect {
+        position: relative;
+        top: 3px;
+        cursor: pointer;
+    }
+    .selectModuleType,.moduleItemInp,.selectUsed, .selectReject{
+        display: inline-block;
+        position: relative;
+        width:140px;
         padding: 0 10px;
+        height:40px;
+        border-radius:4px;
+        border: 1px solid #E2E5EF;
+        box-sizing: border-box;
+        cursor: pointer;
+        padding-right: 26px;
+    }
+    .arrow{
+        position: absolute;
+        width: 10px;
+        top: 16px;
+        right: 10px;
+    }
+    .moduleItemInp{
+        cursor: default;
+        outline: none;
+    }
+    .moduleTypeList{
+         width: 160px;
     }
-    li:hover{
+    .selectUsed, .selectReject{
+        width: 140px;
+    }
+    .modeTypeItem:hover{
         background-color: #EEF4FF;
         cursor: pointer;
     }
-}
-.switchImg{
-    width: 30px;
-}
-.selectModuleType,.moduleItemInp,.selectUsed, .selectReject{
-    display: inline-block;
-    position: relative;
-    width:160px;
-    padding: 0 10px;
-    height:40px;
-    border-radius:4px;
-    border: 1px solid #E2E5EF;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-.arrow{
-    position: absolute;
-    width: 10px;
-    top: 16px;
-    right: 10px;
-}
-.moduleItemInp{
-    cursor: default;
-    outline: none;
-}
-.moduleTypeList{
-     width: 160px;
-}
-.selectUsed, .selectReject{
-    width: 120px;
-}
-.modeTypeItem:hover{
-    background-color: #EEF4FF;
-    cursor: pointer;
-}
-.rejectList, .usedList {
-    width: 120px;
-}
-.filter{
-    display: inline-block;
-    width:60px;
-    height:36px;
-    background:#5A8EEE;
-    border-radius:4px;
-    color: #fff;
-    text-align: center;
-    line-height: 36px;
-    position: relative;
-    top: -1px;
-    cursor: pointer;
-}
-.editItem{
-   color: #5A8EEE;
-   cursor: pointer;
-}
-
-.ellipsis{
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-}
-.textCenter{
-    text-align: center;
-}
-
-
-.pagination{
-    margin: 35px 0 0 0  ;
-    text-align: right;
-}
-.totalSum{
-    font-size:12px;
-    line-height:17px;
-    color: #777777;
-    margin-right: 20px;
-}
-.pageNum,.prePage,.nextPage, .more{
-    display: inline-block;
-    width: 20px;
-    cursor: pointer;
-    margin: 0 20px 0 0;
-    text-align: center;
-    color: #777;
-}
-.prePage,.nextPage{
-    img{
+    .rejectList, .usedList {
+        width: 140px;
+    }
+    .filter{
+        display: inline-block;
+        width:60px;
+        height:36px;
+        background:#5A8EEE;
+        border-radius:4px;
+        color: #fff;
+        text-align: center;
+        line-height: 36px;
         position: relative;
-        top: 0px   ;
+        top: -1px;
+        cursor: pointer;
+    }
+    .editItem{
+       color: #5A8EEE;
+       cursor: pointer;
+    }
+    
+    .ellipsis{
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+    }
+    .textCenter{
+        text-align: center;
+    }
+    
+    
+    .pagination{
+        margin: 35px 0 0 0  ;
+        text-align: right;
+    }
+    .totalSum{
+        font-size:12px;
+        line-height:17px;
+        color: #777777;
+        margin-right: 20px;
+    }
+    .pageNum,.prePage,.nextPage, .more{
+        display: inline-block;
+        width: 20px;
+        cursor: pointer;
+        margin: 0 20px 0 0;
+        text-align: center;
+        color: #777;
+    }
+    .prePage,.nextPage{
+        img{
+            position: relative;
+            top: 0px   ;
+        }
+    }
+     .more{
+        cursor: not-allowed;
+    }
+    .arrowPage{
+        width: 6px;
+    }
+    .activePage{
+        color: #5A8EEE;
+    }
+    
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+     
+    input[type="number"] {
+        -moz-appearance: textfield;
     }
 }
- .more{
-    cursor: not-allowed;
+
+.usrContain .selectReject,.usrContain .selectModuleType ,.managerContainer .selectModuleType  {
+    float: right;
+}
+.usrContain .rejectList,.usrContain .usedList{
+    height: 200px;
 }
-.arrowPage{
-    width: 6px;
+.usrContain .selectModuleType, .usrContain .moduleItemInp, .usrContain .selectUsed, .usrContain .selectReject {
+    width: 170px;
 }
-.activePage{
-    color: #5A8EEE;
+.managerContainer .moduleTypeList {
+    width: 140px;
 }
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+.managerContainer.usrContain .moduleTypeList {
+    width: 170px;
 }
- 
-input[type="number"] {
-    -moz-appearance: textfield;
+.managerContainer.usrContain .selectReject {
+    width: 140px;
 }

+ 6 - 0
src/css/roleManager.less

@@ -0,0 +1,6 @@
+.leftMenu {
+    border: 1px solid #E2E5EF;
+    padding: 20px;
+    width: 450px;
+    height: 700px;
+}

+ 4 - 4
src/html/itemManager.html

@@ -10,13 +10,13 @@
 </head>
 
 <body>
-    <div class="container">
+    <div class="managerContainer">
         <h2>条目数据维护</h2>
         <div class="main-body">
             <div class="filterBox">
                 <span class="filterItem typeFilter">
                     <span>模块名称:</span>
-                    <span class="selectModuleType">全部 </span>
+                    <span class="selectModuleType ellipsis">全部 </span>
                     <ul class="moduleTypeList filterDropList"></ul>
                 </span>
                 <span class="filterItem">
@@ -27,7 +27,7 @@
                 </span>
                 <span class="filterItem">
                     <span>单项否决:</span>
-                    <span class="selectReject">全部</span>
+                    <span class="selectReject ellipsis">全部</span>
                     <ul class="rejectList filterDropList">
                         <Li  class="rejectItem" data-name="全部" data-id="">全部</Li>
                         <li  class="rejectItem" data-name="是" data-id=1>是</li>
@@ -36,7 +36,7 @@
                 </span>
                 <span class="filterItem">
                     <span>启用状态:</span>
-                    <span class="selectUsed">全部</span>
+                    <span class="selectUsed ellipsis">全部</span>
                     <ul class="usedList filterDropList">
                         <Li class="usedItem" data-name="全部" data-id="">全部</Li>
                         <li class="usedItem" data-name="是" data-id=1>是</li>

+ 27 - 0
src/html/roleManager.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title></title>
+</head>
+
+<body>
+    <div class="managerContainer role">
+        <h2>角色管理</h2>
+        <div class="main-body">
+            <div class="filterBox">
+                <div class="leftMenu">
+                    
+                </div>
+                <div class="rightMenu">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

+ 64 - 0
src/html/userManager.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title></title>
+</head>
+
+<body>
+    <div class="managerContainer usrContain">
+        <h2>用户管理</h2>
+        <div class="main-body">
+            <div class="filterBox">
+                <span class="filterItem">
+                    <span>姓名:</span>
+                    <span class="">
+                        <input class="moduleItemInp" type="text" placeholder="请输入姓名">
+                    </span>
+                </span>
+                <span class="filterItem typeFilter">
+                    <span>科室:</span>
+                    <span class="selectModuleType ellipsis">全部</span>
+                    <ul class="moduleTypeList filterDropList"></ul>
+                </span>
+                <span class="filterItem">
+                    <span>角色:</span>
+                    <span class="selectReject ellipsis">全部</span>
+                    <ul class="rejectList filterDropList"></ul>
+                </span>
+                <!-- <span class="filterItem">
+                    <span>启用状态:</span>
+                    <span class="selectUsed">全部</span>
+                    <ul class="usedList filterDropList">
+                        <Li class="usedItem" data-name="全部" data-id="">全部</Li>
+                        <li class="usedItem" data-name="是" data-id=1>是</li>
+                        <li class="usedItem" data-name="否" data-id=0>否</li>
+                    </ul>
+                </span> -->
+                <span class="filter">查询</span>
+            </div>
+            <table>
+                <thead>
+                    <th class="moduleName">序号</th>
+                    <th class="moduleType" width="80">姓名</th>
+                    <th class="moduleItemName">科室</th>
+                    <th class="moduleTipsMsg">角色</th>
+                    <th class="moduleUsed">状态</th>
+                    <th class="moduleOpera" style="width: 150px;">操作</th>
+                </thead>
+                <tbody>
+    
+                </tbody>
+            </table>
+            <div class="pagination"></div>
+        </div>
+        
+        
+        
+    </div>
+</body>
+
+</html>

TEMPAT SAMPAH
src/images/goLeft.png


TEMPAT SAMPAH
src/images/goLeftDis.png


TEMPAT SAMPAH
src/images/goRight.png


TEMPAT SAMPAH
src/images/goRightDis.png


+ 1 - 1
src/js/itemManager.js

@@ -254,7 +254,7 @@ function bindModuleTypeSelect(){
         const modeTypeItemName = $(this).attr("data-name")
         const modeTypeItemId = $(this).attr("data-id")
         casesIdTemp =modeTypeItemId
-        $('.selectModuleType').html(modeTypeItemName)
+        $('.selectModuleType').html(modeTypeItemName).attr("title",modeTypeItemName)
         $(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
 
         $(".moduleTypeList ").css("display", "none")

+ 68 - 0
src/js/roleManager.js

@@ -0,0 +1,68 @@
+const $ = require('jquery');
+require("../css/roleManager.less");
+require('./../resource/jquery-ui/jquery-ui.min.js');
+require('./modal.js');
+const {api} = require('./api.js')
+const {post} = require('./utils.js')
+const switchIconOpen = require("./../images/btn_open.png")
+const switchIconClose = require("./../images/btn_close.png")
+const iconDown= require("./../images/arrow_down.png")
+const iconUp = require("./../images/arrow_up.png")
+const arrowLeft= require("./../images/arrow_left.png")
+const arrowRight = require("./../images/arrow_right.png")
+
+$(function(){
+    $(".role .leftMenu").css("height",$(window).height()-128+'px')
+    '/sys/role/getRoleMenu'//获取角色菜权限单等数据
+    '/sys/role/list' //获取角色列表信息
+    '/sys/role/listForUser'//获取角色下拉列表信息
+    '/sys/role/saveRoleMenu'//修改角色菜单权限数据
+    getRoleList()
+    listForUser()
+    getRoleMenu()
+    // saveRoleMenu()
+    function getRoleMenu(){
+        post('/sys/role/getRoleMenu',{roleId:-1}).then(res =>{
+            let data = res.data;
+            console.log(data)
+            if(data.code == '0'){
+
+            }else{}
+        }).catch((e) =>{
+        
+        })
+    }
+    function getRoleList(){
+        post('/sys/role/list').then(res =>{
+            let data = res.data;
+            console.log(data)
+            if(data.code == '0'){
+
+            }else{}
+        }).catch((e) =>{
+        
+        })
+    }
+    function listForUser(){
+        post('/sys/role/listForUser').then(res =>{
+            let data = res.data;
+            console.log(data)
+            if(data.code == '0'){
+                
+            }else{}
+        }).catch((e) =>{
+        
+        })
+    }
+    function saveRoleMenu(){
+        post('/sys/role/saveRoleMenu').then(res =>{
+            let data = res.data;
+            console.log(data)
+            if(data.code == '0'){
+                
+            }else{}
+        }).catch((e) =>{
+        
+        })
+    }
+})

+ 615 - 0
src/js/userManager.js

@@ -0,0 +1,615 @@
+const $ = require('jquery');
+require("../css/itemManager.less");
+require('./../resource/jquery-ui/jquery-ui.min.js');
+require('./modal.js');
+const {api} = require('./api.js')
+const {post} = require('./utils.js')
+const switchIconOpen = require("./../images/btn_open.png")
+const switchIconClose = require("./../images/btn_close.png")
+const iconDown= require("./../images/arrow_down.png")
+const iconUp = require("./../images/arrow_up.png")
+const arrowLeft= require("./../images/arrow_left.png")
+const arrowRight = require("./../images/arrow_right.png")
+
+let casesId="", name="", isReject ="", isUsed ="",casesIdTemp="", nameTemp="", isRejectTemp ="", isUsedTemp =""
+$(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+$(".selectReject").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+$(".selectUsed").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+
+//获取表格数据
+function getTabData(activePage){
+    let params = {
+        "current": activePage,
+        "deptId": casesId||"",
+        "linkman": name||"",
+        "roleId": isReject||"",
+        "size": 15
+    }
+    post('/sys/user/userPage',params).then(res =>{
+        if(res.data.code == '0'){
+            const data = res.data.data.records
+            const totalPage = res.data.data.pages
+            const totalNum = res.data.data.total
+            renderTab(data,activePage)
+            if(totalPage > 1){
+                renderPagination(totalPage,Number(activePage),totalNum)
+            } else{
+                $('.pagination').html("")
+            }
+
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+$(".moduleItemInp").on("input", function(e){
+    const val = $(this).val().trim()
+    nameTemp = val
+})
+$(".filter").on("click", function(e){
+    casesId=casesIdTemp, name=nameTemp, isReject =isRejectTemp, isUsed =isUsedTemp
+    getTabData(1)
+})
+$('.selectModuleType').on("click", function(e){
+    e.stopPropagation()
+    $(".rejectList ").css("display","none")
+    $(".usedList ").css("display", "none")
+    $(".selectReject .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
+    const showList =  $(".moduleTypeList ").css("display")
+    if(showList == "none" ||!showList){
+        $(".moduleTypeList ").css("display","block")
+        $(".selectModuleType .arrow").attr("src",iconUp)
+    }else{
+        $(".moduleTypeList ").css("display", "none")
+        $(".selectModuleType .arrow").attr("src",iconDown)
+    }
+})
+    
+$('.selectReject').on("click", function(e){
+    e.stopPropagation()
+    $(".moduleTypeList ").css("display", "none")
+    $(".usedList ").css("display", "none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
+    const showList =  $(".rejectList ").css("display")
+    if(showList == "none" ||!showList){
+        $(".rejectList ").css("display","block")
+        $(".selectUsed .arrow").attr("src",iconUp)
+    }else{
+        $(".rejectList ").css("display", "none")
+        $(".selectUsed .arrow").attr("src",iconDown)
+    }
+})
+$('.selectUsed').on("click", function(e){
+    e.stopPropagation()
+    $(".moduleTypeList ").css("display", "none")
+    $(".rejectList ").css("display","none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectReject .arrow").attr("src",iconDown)
+    const showList =  $(".usedList ").css("display")
+    if(showList == "none" ||!showList){
+        $(".usedList ").css("display","block")
+        $(".selectUsed .arrow").attr("src",iconUp)
+    }else{
+        $(".usedList ").css("display", "none")
+        $(".selectUsed .arrow").attr("src",iconDown)
+    }
+})
+bindUsedSelect()
+getTabData(1)
+getmoduleTypeList()
+function renderTab(data,activePage){
+    let str = ``
+    for(let i = 0; i < data.length; i++){
+        const item = data[i]
+        str += `
+            <tr data-id=${item.id} data-index=${i}>
+                <td  class="textCenter">${(activePage-1)*10 + i+1}</td>
+                <td class="textCenter">${item.linkman}</td>
+                <td class="textCenter">${item.deptName||''}</td>
+                <td class="textCenter">${item.roleName||''}</td>
+                <td  class="textCenter">
+                    <div class="itemMsgInfoBox">
+                        <p class="itemInfoRight itemReject">
+                            <img data-id="${item.userId}" data-status="${item.status}" class="switchImg roleSelect" src=${item.status==1?switchIconOpen:switchIconClose} /><span class="imgInfo"> ${item.status==1?"启用":"禁用"}</span>
+                        </p>
+                    </div>
+                </td>
+                <td class="textCenter clearfix"><span data-title="科室" data-id="${item.userId}" class="editItem deptEdit fl">科室编辑</span><span data-id="${item.userId}" data-title="角色" class="editItem roleEdit fr">角色编辑</span></td>
+            </tr>
+        `
+    }
+    $('tbody').html(str)
+    bindEdit(data,activePage)
+}
+
+//获取用户科室列表
+function getDeptList(id,activePage,title){
+    post('/sys/user/getUserDepts',{userId:id}).then(res =>{
+        let data = res.data;
+        if(data.code == '0'){
+            let result = data.data
+            console.log(result,'科室列表')
+            editItem(result,activePage,title)
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+//获取用户角色列表
+function getUserList(id,activePage,title){
+    post('/sys/user/getUserRoles',{userId:id}).then(res =>{
+        let data = res.data;
+        if(data.code == '0'){
+            const result = data.data
+            console.log(result,'角色列表')
+            editItemRole(result,activePage,title)
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+function bindEdit(data,activePage){
+    $('.editItem').click(function(e){
+        const index = $(this).parents("tr").attr('data-index') 
+        const id = $(this).attr('data-id') 
+        const title = $(this).attr('data-title') 
+        if(title == "科室"){
+            getDeptList(id,activePage,title)
+        }else if(title == "角色"){
+            getUserList(id,activePage,title)
+        }
+    })
+    $(".roleSelect").click(function(){
+        const id = $(this).attr('data-id')
+        const status = $(this).attr('data-status')
+        let that = $(this);
+        if(status == 1){
+            toggleOnOff('/sys/user/disable',id,that,status)
+        }else{
+            toggleOnOff('/sys/user/enable',id,that,status)
+        }
+    })
+}
+//启用禁用
+function toggleOnOff(url,id,that,status){
+    post(url,{userId:id}).then(res =>{
+        if(res.data.code == '0'){
+            // const data = res.data.data
+            that.attr({
+                "src":status==1?switchIconClose:switchIconOpen,
+                "data-status":status==1?0:1
+            })
+            that.siblings().html(status==1?' 禁用':' 启用')
+            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+let leftDeptLis = [],
+    rightDeptLis = [],
+    selectDeptLeft = [],
+    selectDeptRight = [],
+    leftRoleLis = [],
+    rightRoleLis = [],
+    selectRoleLeft = [],
+    selectRoleRight = [];
+function upDataLis(leftDeptLis,rightDeptLis){
+    let allLeft = '',allRight = '';
+    for(let i = 0;i < leftDeptLis.length;i++){//未选中
+        allLeft+=`
+            <li class="eclips" data-flg="0" data-id="${leftDeptLis[i].deptId}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${leftDeptLis[i].deptName}</li>
+        `
+    }
+    for(let j = 0;j < rightDeptLis.length;j++){//已选
+        allRight+=`
+            <li class="eclips" data-flg="0" data-id="${rightDeptLis[j].deptId}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${rightDeptLis[j].deptName}</li>
+        `
+    }
+    $("#partLeftNo", parent.document).html(allLeft)
+    $("#partRightSelect", parent.document).html(allRight)
+    $(".partLeft li", parent.document).click(function(){
+        let dataFlg = $(this).attr("data-flg")
+        let deptId = $(this).attr("data-id")
+        $(this).attr({
+            "data-flg":dataFlg == 0?1:0
+        }).children("img").attr({
+            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png'),
+        })
+        if(dataFlg == 0){
+            selectDeptLeft.push(deptId)
+        }else{
+            selectDeptLeft.splice($.inArray(deptId,selectDeptLeft),1)
+        }
+    })
+    $(".partRight li", parent.document).click(function(){
+        let dataFlg = $(this).attr("data-flg")
+        let deptId = $(this).attr("data-id")
+        $(this).attr({
+            "data-flg":dataFlg == 0?1:0
+        }).children("img").attr({
+            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png')
+        })
+        if(dataFlg == 0){
+            selectDeptRight.push(deptId)
+        }else{
+            selectDeptRight.splice($.inArray(deptId,selectDeptRight),1)
+        }
+    })
+}
+function upDataLisRole(leftDeptLis,rightDeptLis){
+    let allLeft = '',allRight = '';
+    for(let i = 0;i < leftDeptLis.length;i++){//未选中
+        allLeft+=`
+            <li class="eclips" data-flg="0" data-id="${leftDeptLis[i].id}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${leftDeptLis[i].name}</li>
+        `
+    }
+    for(let j = 0;j < rightDeptLis.length;j++){//已选
+        allRight+=`
+            <li class="eclips" data-flg="0" data-id="${rightDeptLis[j].id}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${rightDeptLis[j].name}</li>
+        `
+    }
+    $("#partLeftNo", parent.document).html(allLeft)
+    $("#partRightSelect", parent.document).html(allRight)
+    $(".partLeft li", parent.document).click(function(){
+        let dataFlg = $(this).attr("data-flg")
+        let deptId = $(this).attr("data-id")
+        $(this).attr({
+            "data-flg":dataFlg == 0?1:0
+        }).children("img").attr({
+            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png'),
+        })
+        if(dataFlg == 0){
+            selectRoleLeft.push(deptId)
+        }else{
+            selectRoleLeft.splice($.inArray(deptId,selectRoleLeft),1)
+        }
+    })
+    $(".partRight li", parent.document).click(function(){
+        let dataFlg = $(this).attr("data-flg")
+        let deptId = $(this).attr("data-id")
+        $(this).attr({
+            "data-flg":dataFlg == 0?1:0
+        }).children("img").attr({
+            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png')
+        })
+        if(dataFlg == 0){
+            selectRoleRight.push(deptId)
+        }else{
+            selectRoleRight.splice($.inArray(deptId,selectRoleRight),1)
+        }
+    })
+}
+//修改科室
+function editItem(result,activePage,title){
+    $('.pop-box').remove()
+    $('.container').append('<div class="pop-box"></div>')
+    let userId = result.userId;
+    leftDeptLis = result.notSelDepts||[],rightDeptLis = result.selDepts||[];
+    const str = `
+        <div class="itemMsgBox">
+            <div class="mask"></div>
+            <div class="itemMsgContent" style="height:552px;width:680px;margin: -276px 0 0 -340px;">
+                <p class="itemMsgTitle">${title}编辑 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
+                <div class="itemContentBoxLisL itemContentBoxLis">
+                    <p class="title">所有${title}</p>
+                    <ul class="partLeft partPub" id="partLeftNo">
+                    
+                    </ul>
+                </div>
+                <div class="activeGo">
+                    <p class="activeGoRight"><img src="${require('../images/goRight.png')}" /></p>
+                    <p class="btm activeGoLeft"><img src="${require('../images/goLeft.png')}" /></p>
+                </div>
+                <div class="itemContentBoxLisR itemContentBoxLis">
+                    <p class="title">已选${title}</p>
+                    <ul class="partRight partPub" id="partRightSelect">
+                    
+                    </ul>
+                </div>
+                <div class="clearfix"></div>
+                <div class="confirmEditBox"><span class="confirmEdit">保存</span></div>
+            </div>
+        </div>
+    `
+    $("#mainBox", parent.document).append(str)
+    
+    upDataLis(leftDeptLis,rightDeptLis)
+    $("#mainBox .itemMsgBox .iconClose", parent.document).on("click", function(e){
+        $("#mainBox .itemMsgBox", parent.document).remove()
+    })
+    $("#mainBox .itemMsgBox .activeGoRight", parent.document).on("click", function(e){//数据往右
+        let selectDeptLeftTmp = selectDeptLeft
+        for(let j = 0;j < selectDeptLeftTmp.length;j++){
+            for(let i = 0;i < leftDeptLis.length;i++){
+                if(leftDeptLis[i].deptId == selectDeptLeftTmp[j]){
+                    rightDeptLis.push(leftDeptLis[i])
+                    leftDeptLis.splice(i,1)
+                }
+            }
+        }
+        upDataLis(leftDeptLis,rightDeptLis)
+        selectDeptLeft=[]
+    })
+    $("#mainBox .itemMsgBox .activeGoLeft", parent.document).on("click", function(e){//数据往左
+        let selectDeptRightTmp = selectDeptRight
+        for(let j = 0;j < selectDeptRightTmp.length;j++){
+            for(let i = 0;i < rightDeptLis.length;i++){
+                if(rightDeptLis[i].deptId == selectDeptRightTmp[j]){
+                    leftDeptLis.push(rightDeptLis[i])
+                    rightDeptLis.splice(i,1)
+                }
+            }
+        }
+        upDataLis(leftDeptLis,rightDeptLis)
+        selectDeptRight=[]
+    })
+    $("#mainBox .itemMsgBox .confirmEdit", parent.document).on("click", function(){
+        saveEdit(userId,activePage)
+    })
+}
+//修改角色
+function editItemRole(result,activePage,title){
+    $('.pop-box').remove()
+    $('.container').append('<div class="pop-box"></div>')
+    let userId = result.userId;
+    leftRoleLis = result.notSelRoles||[],rightRoleLis = result.selRoles||[];
+    const str = `
+        <div class="itemMsgBox">
+            <div class="mask"></div>
+            <div class="itemMsgContent" style="height:552px;width:680px;margin: -276px 0 0 -340px;">
+                <p class="itemMsgTitle">${title}编辑 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
+                <div class="itemContentBoxLisL itemContentBoxLis">
+                    <p class="title">所有${title}</p>
+                    <ul class="partLeft partPub" id="partLeftNo">
+                    
+                    </ul>
+                </div>
+                <div class="activeGo">
+                    <p class="activeGoRight"><img src="${require('../images/goRight.png')}" /></p>
+                    <p class="btm activeGoLeft"><img src="${require('../images/goLeft.png')}" /></p>
+                </div>
+                <div class="itemContentBoxLisR itemContentBoxLis">
+                    <p class="title">已选${title}</p>
+                    <ul class="partRight partPub" id="partRightSelect">
+                    
+                    </ul>
+                </div>
+                <div class="clearfix"></div>
+                <div class="confirmEditBox"><span class="confirmEdit">保存</span></div>
+            </div>
+        </div>
+    `
+    $("#mainBox", parent.document).append(str)
+    
+    upDataLisRole(leftRoleLis,rightRoleLis)
+    $("#mainBox .itemMsgBox .iconClose", parent.document).on("click", function(e){
+        $("#mainBox .itemMsgBox", parent.document).remove()
+    })
+    $("#mainBox .itemMsgBox .activeGoRight", parent.document).on("click", function(e){//数据往右
+        let selectDeptLeftTmp = selectRoleLeft
+        let leftDeptLis = leftRoleLis
+        for(let j = 0;j < selectDeptLeftTmp.length;j++){
+            for(let i = 0;i < leftDeptLis.length;i++){
+                if(leftDeptLis[i].id == selectDeptLeftTmp[j]){
+                    rightRoleLis.push(leftDeptLis[i])
+                    leftRoleLis.splice(i,1)
+                }
+            }
+        }
+        
+        console.log(leftRoleLis,rightRoleLis)
+        upDataLisRole(leftRoleLis,rightRoleLis)
+        selectRoleLeft=[]
+    })
+    $("#mainBox .itemMsgBox .activeGoLeft", parent.document).on("click", function(e){//数据往左
+        let selectDeptRightTmp = selectRoleRight
+        let rightDeptLis = rightRoleLis
+        for(let j = 0;j < selectDeptRightTmp.length;j++){
+            for(let i = 0;i < rightDeptLis.length;i++){
+                if(rightDeptLis[i].id == selectDeptRightTmp[j]){
+                    leftRoleLis.push(rightDeptLis[i])
+                    rightRoleLis.splice(i,1)
+                }
+            }
+        }
+        upDataLisRole(leftRoleLis,rightRoleLis)
+        selectRoleRight=[]
+    })
+    $("#mainBox .itemMsgBox .confirmEdit", parent.document).on("click", function(){
+        saveEditRole(userId,activePage)
+    })
+}
+
+//保存科室修改
+function saveEdit(id,activePage){
+    let ids = []
+    for(let i = 0;i < rightDeptLis.length;i++){
+        ids.push(rightDeptLis[i].deptId)
+    }
+    const param = {
+        "deptIds": ids,
+        "userId": id
+      }
+    post('/sys/user/editUserDepts',param).then(res =>{
+        if(res.data.code == '0'){
+            // const data = res.data.data
+            getTabData(activePage)
+            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
+            $('#mainBox .itemMsgBox', parent.document).remove()
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+//保存角色修改
+function saveEditRole(id,activePage){
+    let ids = []
+    for(let i = 0;i < rightRoleLis.length;i++){
+        ids.push(rightRoleLis[i].id)
+    }
+    const param = {
+        "roleIds": ids,
+        "userId": id
+      }
+    post('/sys/user/editUserRoles',param).then(res =>{
+        if(res.data.code == '0'){
+            // const data = res.data.data
+            getTabData(activePage)
+            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
+            $('#mainBox .itemMsgBox', parent.document).remove()
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+
+//获取科室,角色列表
+function getmoduleTypeList(){
+    post('/bas/dept/listForUser',{
+        "inputStr": ""
+      }).then(res =>{
+        if(res.data.code == '0'){
+           const  moduleTypeList = res.data.data
+           renderModuleTypeList(moduleTypeList)
+        }else{}
+    }).catch((e) =>{
+    
+    })
+    post('/sys/role/listForUser').then(res =>{
+        if(res.data.code == '0'){
+           const  moduleTypeList = res.data.data
+           renderRoleTypeList(moduleTypeList)
+        }else{}
+    }).catch((e) =>{
+    
+    })
+}
+
+
+function renderRoleTypeList(moduleTypeList){
+    let str = `<li class="modeTypeItem " data-id="" data-name="全部">全部</li>`
+    for(let i = 0; i < moduleTypeList.length; i++){
+        str += `<li class="modeTypeItem ellipsis" title=${moduleTypeList[i].name} data-id=${moduleTypeList[i].id} data-name=${moduleTypeList[i].name}> ${moduleTypeList[i].name}</li>`
+    }
+    $('.rejectList').html(str)
+    bindRoleTypeSelect()
+}
+function renderModuleTypeList(moduleTypeList){
+    let str = `<li class="modeTypeItem " data-id="" data-name="全部">全部</li>`
+    for(let i = 0; i < moduleTypeList.length; i++){
+        str += `<li class="modeTypeItem ellipsis" title=${moduleTypeList[i].deptName} data-id=${moduleTypeList[i].deptId} data-name=${moduleTypeList[i].deptName}> ${moduleTypeList[i].deptName}</li>`
+    }
+    $('.moduleTypeList').html(str)
+    bindModuleTypeSelect()
+}
+
+//模块类型选择
+function bindModuleTypeSelect(){
+    $('.moduleTypeList .modeTypeItem').on("click",function(){
+        const modeTypeItemName = $(this).attr("data-name")
+        const modeTypeItemId = $(this).attr("data-id")
+        casesIdTemp =modeTypeItemId
+        $('.selectModuleType').html(modeTypeItemName).attr("title",modeTypeItemName)
+        $(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+
+        $(".moduleTypeList ").css("display", "none")
+    })
+}
+function bindRoleTypeSelect(){
+    $('.rejectList .modeTypeItem').on("click",function(){
+        const modeTypeItemName = $(this).attr("data-name")
+        const modeTypeItemId = $(this).attr("data-id")
+        isRejectTemp =modeTypeItemId
+        $('.selectReject').html(modeTypeItemName)
+        $(".selectReject").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+
+        $(".moduleTypeList ").css("display", "none")
+    })
+}
+
+//是否启用选择
+function bindUsedSelect(){
+    $('.usedItem').on("click",function(){
+        const usedItemName = $(this).attr("data-name")
+        const usedItemItemId = $(this).attr("data-id")
+        isUsedTemp =usedItemItemId
+        $('.selectUsed').html(usedItemName)
+        $(".usedList").css("display", "none")
+        $(".selectUsed").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
+    })
+}
+
+
+
+
+//分页渲染
+function renderPagination(totalPage,activePage,totalNum){
+    let str = `<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft} /></span>`
+    if(totalPage <= 6){
+        for(let i = 1; i <= totalPage; i++){
+            str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
+        }
+    }else{
+        if(activePage <= 3){ //选中页数小于4
+            for(let i = 1; i <= 4; i++){
+                str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
+            }
+            str += `<span class="more" >...</span>`
+        str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
+
+        } else if(activePage > totalPage -3){
+            str += `<span class="pageNum page1" data-page=1>1</span>`
+            str += `<span class="more" >...</span>`
+            str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
+            str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
+            str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
+            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
+        } else {
+            str += `<span class="pageNum page1" data-page=1>1</span>`
+            str += `<span class="more" >...</span>`
+            str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
+            str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
+            str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
+            str += `<span class="more" >...</span>`
+            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
+        }
+       
+    }
+    str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight} /></span>`
+    $('.pagination').html(str)
+    $('.page' + activePage).addClass('activePage')
+    $(".pageNum").on("click", function(e){
+        const activePageNow = Number($(this).attr('data-page'))
+        getTabData(activePageNow)
+        // renderPagination(totalPage,activePageNow,totalNum)
+    })
+    $(".prePage").on("click", function(e){
+        let activePageNow = Number($(".activePage").attr('data-page'))
+        if(activePageNow > 1){
+            activePageNow--
+            getTabData(activePageNow)
+            // renderPagination(totalPage,activePageNow,totalNum)
+        }
+    })
+    $(".nextPage").on("click", function(e){
+        let activePageNow = Number($(".activePage").attr('data-page'))
+        if(activePageNow < totalPage){
+            activePageNow++
+            getTabData(activePageNow)
+            // renderPagination(totalPage,activePageNow,totalNum)
+        }
+    })
+    
+}
+
+$(document).on("click", function(){
+    $(".moduleTypeList ").css("display", "none")
+    $(".rejectList ").css("display","none")
+    $(".usedList ").css("display", "none")
+    $(".selectModuleType .arrow").attr("src",iconDown)
+    $(".selectReject .arrow").attr("src",iconDown)
+    $(".selectUsed .arrow").attr("src",iconDown)
+})

+ 2 - 0
src/js/utils.js

@@ -9,6 +9,8 @@ const pageMap={
   'YH-JCSJWH-TMSJWH':'itemManager.html',
   'YH-BLZK-ZKPF':'qcList.html',
   'YH-TJFX':'statistics.html',
+  'YH-QXGL-YHGL':'userManager.html',
+  'YH-QXGL-JSGL':'roleManager.html',
 };
 const api={
   getMenu:'/sys/user/getUserOrgMenu',     //获取菜单

+ 31 - 2
webpack.config.js

@@ -6,7 +6,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const webpack = require('webpack');
-const proxyHost = "http://192.168.2.241:5858";
+const proxyHost = "http://192.168.2.236:5858";
+// const proxyHost = "http://192.168.2.241:5858";
 // const proxyHost = "http://192.168.3.117:5858";//铁钢
 module.exports = {
   entry: {
@@ -17,6 +18,8 @@ module.exports = {
     moduleManager: path.resolve(__dirname, 'src/js', 'moduleManager.js'),
     itemManager: path.resolve(__dirname, 'src/js', 'itemManager.js'),
     qcList: path.resolve(__dirname, 'src/js', 'qcList.js'),
+    userManager: path.resolve(__dirname, 'src/js', 'userManager.js'),
+    roleManager: path.resolve(__dirname, 'src/js', 'roleManager.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
   },
   output: {
@@ -133,6 +136,32 @@ module.exports = {
         collapseWhitespace: true //删除空白符与换行符
       }
     }),
+    new HtmlWebpackPlugin({
+      title: 'userManager.html',
+      template: path.resolve(__dirname, 'src/html', 'userManager.html'),
+      filename: 'userManager.html',
+      chunks: ['userManager', 'vendor', 'common'],
+      hash: true, //防止缓存
+      inject: true,
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
+    new HtmlWebpackPlugin({
+      title: 'roleManager.html',
+      template: path.resolve(__dirname, 'src/html', 'roleManager.html'),
+      filename: 'roleManager.html',
+      chunks: ['roleManager', 'vendor', 'common'],
+      hash: true, //防止缓存
+      inject: true,
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
     new CopyWebpackPlugin([
       {
         from:'src/resource',
@@ -241,7 +270,7 @@ module.exports = {
       '/': proxyHost
     },
     hot: true,
-    openPage:'index.html'
+    openPage:'login.html'
     
   }
 }