update:角色详情页面显示优化&&角色管理页部分逻辑完善

server/controllers/role.js

@@ -31,7 +31,6 @@ exports.getAdd_role = async (ctx, next) => {
     json: true,
     body: ctx.request.body
   }
-  console.log('server getAdd_role::::', opts)
   ctx.body = await req(ctx, opts)
 }
 exports.get_role_info = async (ctx, next) => {

src/pages/Life-no/index.vue

@@ -13,8 +13,8 @@
         </el-form-item>
         <el-form-item label="类型">
           <el-select v-model="life_account.type" placeholder="类型">
-            <el-option value="个人" label="个人"></el-option>
-            <el-option value="企业" label="企业"></el-option>
+            <el-option value="1" label="个人"></el-option>
+            <el-option value="2" label="企业"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -83,7 +83,7 @@ export default {
         page,
         page_size,
         life_account_name: name,
-        life_account_type: type == "个人" ? 1 : type == "企业" ? 2 : ''
+        life_account_type: type
       }
       reqGetLifeNoList(params).then(res => {
         this.totalNum = res.count

src/pages/Life-no/life-no-detail.vue

 <template>
   <div class="life-no-detail">
+    <el-button type="text" @click="goBack" icon="el-icon-arrow-left"
+      >返回</el-button
+    >
+    <el-card class="management">
       <h4 class="titleInfo">生活号信息</h4>
       <el-descriptions :column="3" border>
         <template #extra> </template>
@@ -24,6 +28,8 @@
           {{ life_account.life_account_name }}
         </el-descriptions-item>
       </el-descriptions>
+    </el-card>
+    <el-card class="management">
       <h4 class="titleInfo">类型信息</h4>
       <el-descriptions :column="3" border>
         <template #extra> </template>
@@ -50,7 +56,10 @@
           </el-descriptions-item>
         </div>
       </el-descriptions>
-    <h4 class="title">用户信息</h4>
+    </el-card>
+    <el-card class="management">
+      <h4 class="titleInfo">用户信息</h4>
+      <div class="accountRoleList">
         <el-table :data="accountRoleList" border style="width: 100%">
           <el-table-column prop="nick_name" label="昵称" width="180">
           </el-table-column>
@@ -60,6 +69,8 @@
           </el-table-column>
         </el-table>
       </div>
+    </el-card>
+  </div>
 </template>
 <script>
 import { getLife_info as reqGetLife_info } from "../../service/life-no";
@@ -86,14 +97,14 @@ export default {
     roleRangeFormat (row) {
       return row.role_type == 1 ? '是' : '否'
     },
+    goBack () {
+      this.$router.go(-1)
+    }
   }
 }
 </script>
 <style lang="less" scoped>
 .life-no-detail {
-  .title {
-    margin: 10px;
-  }
   .titleInfo {
     margin-top: 10px;
   }
@@ -101,5 +112,11 @@ export default {
   .box-card {
     width: 100%;
   }
+  .accountRoleList {
+    margin-top: 20px;
+  }
+  .management {
+    margin-top: 20px;
+  }
 }
 </style>
\ No newline at end of file

src/pages/Role/add-role.vue

@@ -6,7 +6,7 @@
       :data="roleDataList"
       style="width: 100%; margin-top: 10px"
       :header-cell-style="{ background: '#e1e4e5', color: '#80878f' }"
-      @row-click="toLifeDetail"
+      @row-click="toRoleDetail"
     >
       <el-table-column prop="role_name" label="角色名称" width="180">
       </el-table-column>
@@ -109,7 +109,7 @@ export default {
     return {
       parmas: {
         page: 1,
-        page_size: 20
+        page_size: 10
       },
       user_info: {
         user_name: "jianghaiming",
@@ -128,7 +128,7 @@ export default {
         children: 'sub_permissions'//children值和哪个值绑定
       },
       formLabelWidth: '120px',
-      selectedOptions: [189, 190],//选中权限类型
+      selectedOptions: [230, 231, 232],//选中权限类型
       currentRolePrivilege: [],//当前权限设置
       role_info_detail: {//详情非编辑项
         role_id: "",
@@ -152,7 +152,7 @@ export default {
     })
   },
   methods: {
-    toLifeDetail (row) {
+    toRoleDetail (row) {
       this.$router.push({ name: 'RoleDetail', query: { roleId: row.role_id } });
     },
     newAddRole () {
@@ -167,7 +167,7 @@ export default {
       let { page, page_size } = this.parmas
       reqGetRole_list(page, page_size).then(res => {
         this.roleDataList = res.result
-        this.totalNum = res.count
+        this.totalNum = 24
       })
     },
     //列表分页

src/pages/Role/role-detail.vue

 <template>
   <div class="user-detail">
+    <el-button type="text" @click="goBack" icon="el-icon-arrow-left"
+      >返回</el-button
+    >
+    <el-card class="management">
       <h3 style="margin-bottom: 10px">角色详情</h3>
-    <el-descriptions class="margin-top" :column="2" :size="size" border>
+      <el-descriptions class="margin-top" :column="2" border>
         <el-descriptions-item>
           <template #label>状态 </template>
           {{ role_info_detail.role_status }}
@@ -35,14 +39,42 @@
           {{ role_info_detail.role_status }}
         </el-descriptions-item>
       </el-descriptions>
+      <div class="tree">
+        <div class="content">
+          <el-tree
+            :data="permissionsAll"
+            show-checkbox
+            :default-checked-keys="checkedKeys"
+            :default-expanded-keys="expandedKeys"
+            node-key="id"
+            ref="tree"
+            highlight-current
+            :props="defaultProps"
+            :expand-on-click-node="false"
+          >
+          </el-tree>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 <script>
-import { get_role_info as reqGet_role_info } from '../../service/role'
+import { get_role_info as reqGet_role_info, getAll_role_list as reqGetAll_role_list, } from '../../service/role'
 export default {
   data () {
     return {
       roleId: this.$route.query.roleId,
+      defaultProps: {
+        children: 'sub_permissions',
+        label: 'desc'
+      },
+      user_info: {
+        user_name: "jianghaiming",
+        user_email: "jianghaiming@126.com",
+      },
+      checkedKeys: [],
+      expandedKeys: [],
+      permissionsAll: [],
       role_info_detail: {//详情非编辑项
         role_id: "",
         role_name: "",
@@ -55,8 +87,18 @@ export default {
     }
   },
   created () {
+    let { user_name, user_email } = this.user_info
+    reqGetAll_role_list(user_name, user_email).then(res => {
+      this.permissionsAll = res
+      this.permissionsAll.forEach(item => {
+        item.disabled = true
+        item.sub_permissions.forEach(element => {
+          element.disabled = true
+        })
+      })
+    })
     reqGet_role_info(this.roleId).then((res) => {
-      const { role_id, role_name, role_status, update_time, update_user_name, create_time, create_user_name } = res
+      const { role_id, role_name, role_status, update_time, update_user_name, create_time, create_user_name, permissions } = res
       this.role_info_detail = {
         role_id,
         role_name,
@@ -66,12 +108,46 @@ export default {
         create_time,
         create_user_name
       }
+      this.editEchoData(permissions)
+    })
+  },
+  methods: {
+    goBack () {
+      this.$router.go(-1)
+    },
+    //遍历回显值selectedOptions
+    editEchoData (permissions) {
+      let parentArr = [], childArr = [], selectExpandedKeys = []
+      permissions.forEach(item => {
+        parentArr.push(item.sub_permissions)
+        selectExpandedKeys.push(item.id)
+      })
+      parentArr.forEach(element => {
+        element.forEach(val => {
+          childArr.push(val.id)
+        })
       })
+
+      let selectedArr = []
+      for (let i in childArr) {
+        selectedArr.push(childArr[i]);
+      }
+      this.checkedKeys = selectedArr
+      this.expandedKeys = selectExpandedKeys
+      console.log(selectedArr, 'selectedArrselectedArrselectedArr')
+    },
   }
 }
 </script>
 <style lang="less" scoped>
 .user-detail {
   margin: 50px;
+  .management {
+    margin-top: 20px;
+  }
+  .tree {
+    border: 1px solid #ebeef5;
+    margin-top: 20px;
+  }
 }
 </style>
\ No newline at end of file

src/pages/User/user-detail.vue

 <template>
   <div class="user-detail">
+    <el-button type="text" @click="goBack" icon="el-icon-arrow-left"
+      >返回</el-button
+    >
+    <el-card class="management">
       <h2 style="margin-bottom: 10px">用户详情</h2>
       <el-descriptions class="margin-top" :column="3" :size="size" border>
         <el-descriptions-item>
@@ -37,9 +41,11 @@
       </el-descriptions>
       <div class="role">已拥有角色池</div>
       <el-table :data="role_list" border style="width: 100%">
-      <el-table-column prop="role_id" label="ID" width="180"> </el-table-column>
+        <el-table-column prop="role_id" label="ID" width="180">
+        </el-table-column>
         <el-table-column prop="role_name" label="角色名称"> </el-table-column>
       </el-table>
+    </el-card>
   </div>
 </template>
 <script>
@@ -61,6 +67,9 @@ export default {
         this.user_info = res.user_info
         this.role_list = res.role_list
       })
+    },
+    goBack () {
+      this.$router.go(-1)
     }
   }
 }

src/pages/components/Pagination.vue

 <template>
   <div class="block">
-    <!-- <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :page-size="page_size"
-      background
-      layout="total,prev, pager, next"
-      :total="totalNum"
-    >
-    </el-pagination> -->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -27,7 +18,7 @@ export default {
   data () {
     return {
       currentPage: 1,
-      page_size: 20
+      page_size: 10
     }
   },
   methods: {