Merge branch 'master' of http://www.baoxianzhanggui.com:8090/sxzgd/vue-insagent-pc

src/views/Sys/Role.vue

@@ -3,7 +3,7 @@
     <!--工具栏-->
     <div
       class="toolbar"
-      style="float: left; padding-top: 10px; padding-left: 15px"
+      style="float: left; padding-top: 10px; padding-left: 50px"
     >
       <el-form :inline="true" :model="filters" :size="size">
         <el-form-item>
@@ -29,22 +29,84 @@
         </el-form-item>
       </el-form>
     </div>
-    <!--表格内容栏-->
-    <kt-table
-      :height="220"
-      permsEdit="sys:role:edit"
-      permsDelete="sys:role:delete"
-      :highlightCurrentRow="true"
-      :stripe="false"
-      :data="pageResult"
-      :columns="columns"
-      :showBatchDelete="false"
-      @handleCurrentChange="handleRoleSelectChange"
-      @findPage="findPage"
-      @handleEdit="handleEdit"
-      @handleDelete="handleDelete"
-    >
-    </kt-table>
+    <div class="conent-box" >
+      <!--表格内容栏-->
+      <kt-table
+        :height="500"
+        permsEdit="sys:role:edit"
+        permsDelete="sys:role:delete"
+        :highlightCurrentRow="true"
+        :stripe="false"
+        :data="pageResult"
+        :columns="columns"
+        :showBatchDelete="false"
+        @handleCurrentChange="handleRoleSelectChange"
+        @findPage="findPage"
+        @handleEdit="handleEdit"
+        @handleDelete="handleDelete"
+      >
+      </kt-table>
+      <!--角色菜单，表格树内容栏-->
+      <div class="menu-container" :v-if="true">
+        <div class="menu-header">
+          <span><B>角色菜单授权</B></span>
+        </div>
+        <el-tree
+          :data="menuData"
+          size="mini"
+          show-checkbox
+          node-key="id"
+          :props="defaultProps"
+          ref="menuTree"
+          :render-content="renderContent"
+          v-loading="menuLoading"
+          element-loading-text="拼命加载中"
+          @check-change="handleMenuCheckChange"
+        >
+        </el-tree>
+        <div
+          style="
+            float: left;
+            padding-left: 24px;
+            padding-top: 12px;
+            padding-bottom: 4px;
+          "
+        >
+          <el-checkbox
+            v-model="checkAll"
+            @change="handleCheckAll"
+            :disabled="this.selectRole.id == null"
+            ><b>全选</b></el-checkbox
+          >
+        </div>
+      </div>
+    </div>
+    <div class="btn-box">
+      <div
+        style="
+          float: right;
+          padding-right: 15px;
+          padding-top: 4px;
+          padding-bottom: 4px;
+        "
+      >
+        <kt-button
+          :label="$t('action.reset')"
+          perms="sys:role:edit"
+          type="primary"
+          @click="resetSelection"
+          :disabled="this.selectRole.id == null"
+        />
+        <kt-button
+          :label="$t('action.submit')"
+          perms="sys:role:edit"
+          type="primary"
+          @click="submitAuthForm"
+          :disabled="this.selectRole.id == null"
+          :loading="authLoading"
+        />
+      </div>
+    </div>
     <!-- </el-col> -->
     <!--新增编辑界面-->
     <el-dialog
@@ -92,65 +154,6 @@
         >
       </div>
     </el-dialog>
-    <!--角色菜单，表格树内容栏-->
-    <div class="menu-container" :v-if="true">
-      <div class="menu-header">
-        <span><B>角色菜单授权</B></span>
-      </div>
-      <el-tree
-        :data="menuData"
-        size="mini"
-        show-checkbox
-        node-key="id"
-        :props="defaultProps"
-        style="width: 100%; pading-top: 20px"
-        ref="menuTree"
-        :render-content="renderContent"
-        v-loading="menuLoading"
-        element-loading-text="拼命加载中"
-        @check-change="handleMenuCheckChange"
-      >
-      </el-tree>
-      <div
-        style="
-          float: left;
-          padding-left: 24px;
-          padding-top: 12px;
-          padding-bottom: 4px;
-        "
-      >
-        <el-checkbox
-          v-model="checkAll"
-          @change="handleCheckAll"
-          :disabled="this.selectRole.id == null"
-          ><b>全选</b></el-checkbox
-        >
-      </div>
-      <div
-        style="
-          float: right;
-          padding-right: 15px;
-          padding-top: 4px;
-          padding-bottom: 4px;
-        "
-      >
-        <kt-button
-          :label="$t('action.reset')"
-          perms="sys:role:edit"
-          type="primary"
-          @click="resetSelection"
-          :disabled="this.selectRole.id == null"
-        />
-        <kt-button
-          :label="$t('action.submit')"
-          perms="sys:role:edit"
-          type="primary"
-          @click="submitAuthForm"
-          :disabled="this.selectRole.id == null"
-          :loading="authLoading"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -294,26 +297,27 @@ export default {
         return;
       }
       this.selectRole = val.val;
-      if(val.val.id==1&& val.val.name=='admin'){
+      if (val.val.id == 1 && val.val.name == "admin") {
         let allMenus = [];
         this.checkAllMenu(this.menuData, allMenus);
         this.$refs.menuTree.setCheckedNodes(allMenus);
-        return
+        return;
       }
-      let res=await this.$api.role.findRoleMenus({ roleId: val.val.id })
-      if(res.code==200){
+      let res = await this.$api.role.findRoleMenus({ roleId: val.val.id });
+      if (res.code == 200) {
         this.$nextTick(() => {
-        const arr = []
-        res.data.forEach(item => {
-          if (!this.$refs.menuTree.getNode(item.id).childNodes || !this.$refs.menuTree.getNode(item.id).childNodes.length) {
-            arr.push(item)
-          }
-          
-        })
-        this.$refs.menuTree.setCheckedNodes(arr)
-      })
+          const arr = [];
+          res.data.forEach((item) => {
+            if (
+              !this.$refs.menuTree.getNode(item.id).childNodes ||
+              !this.$refs.menuTree.getNode(item.id).childNodes.length
+            ) {
+              arr.push(item);
+            }
+          });
+          this.$refs.menuTree.setCheckedNodes(arr);
+        });
       }
-      
     },
     // 树节点选择监听
     handleMenuCheckChange(data, check, subCheck) {
@@ -432,4 +436,45 @@ export default {
   font-size: 16px;
   color: rgb(20, 89, 121);
 }
+.conent-box{
+  width: 100%; 
+  display: flex; 
+  justify-content: space-around
+}
+/deep/ .el-table {
+  max-height: 500px !important;
+}
+.el-tree {
+  width: 800px;
+  height: 500px;
+  overflow-x: auto;
+}
+/deep/ .el-tree > .el-tree-node {
+  display: inline-block !important;
+}
+.btn-box {
+  padding-right: 100px;
+}
+/*定义滚动条高宽及背景
+ 高宽分别对应横竖滚动条的尺寸*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+/*定义滚动条轨道
+ 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+/*定义滑块
+     内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #b3b3b3;
+}
 </style>

src/views/Sys/User.vue

@@ -95,7 +95,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="角色权限" prop="email">
-                <el-select size="small"  v-model="dataForm.remark" placeholder="请选择" @change="changeRole($event)" >
+                <el-select size="small"  v-model="dataForm.roleId" placeholder="请选择" @change="changeRole($event)" >
                   <el-option :label="roleItem.name" :value="roleItem.id" v-for="(roleItem,roleIndex) in roleoptions" :key="roleIndex"></el-option>
                 </el-select>
               </el-form-item>
@@ -210,7 +210,8 @@
         // 新增或修改的弹出框Start
         dialogVisible: false, // 新增编辑界面是否显示
         dataForm:{  // 人员个人信息
-          remark:""
+          remark:"",
+          roleId:""
         },
         // 新增或修改的弹出框End
         roleoptions: [],
@@ -243,7 +244,6 @@
     methods: {
       getRoles(){
         this.$api.role.findAll().then((res) => {
-          console.log(res.data)
         	this.roleoptions = res.data
         }).catch((error)=>{
           this.roleoptions = [];
@@ -299,14 +299,21 @@
           this.pageRequest.pageSize = data.pageRequest.pageSize;
         }
          this.$api.user.userQueryPage(this.pageRequest).then((res) => {
-           console.log(res.data)
+          //角色权限过滤转换
+           res.data.content.forEach(item=>{
+            let roleArr = this.roleoptions.filter(items=>{
+              return item.roleId==items.id
+            })
+            if(roleArr.length){
+              item.roleId = roleArr[0].name
+            }
+           })
           this.pageResult = res.data;
         }).then(data != null ? data.callback : '')
       },
 
       handleTableEdit(params) {
         // 编辑后线人员
-        console.log(params.row)
         Object.assign(this.dataForm, params.row);
         this.dialogVisible = true
       },