用户组编辑

src/views/SystemManage/GroupPermission.vue

@@ -9,6 +9,40 @@
           {{ status === "0" ? "停用" : status === "1" ? "启用" : "无状态" }}
         </div>
       </div>
+      <div class="info">
+        <div class="info-item">
+          <div class="info-title">用户组：</div>
+          <div class="info-value">{{ groupData.groupname }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">组角色：</div>
+          <!--            有角色 角色长度<5-->
+          <div v-if="groupData.rolename !== ''" class="info-value">
+            <div
+              class="tags"
+              v-for="item in groupData.rolename &&
+                groupData.rolename.split(',')"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <!--            无角色-->
+          <div v-else-if="groupData.rolename === ''" class="info-value">
+            无角色
+          </div>
+        </div>
+        <div class="info-item1">
+          <div class="info-title">组用户：</div>
+          <div class="info-value">
+            <svg-icon
+              style="width: 1rem;height: .8125rem;margin-bottom: -0.0625rem;"
+              icon-class="group-item"
+            />
+            {{ groupData.username.split(",").length }}
+          </div>
+          <div class="btn">用户设置</div>
+        </div>
+      </div>
     </div>
 
     <div class="main">
@@ -154,6 +188,8 @@
 </template>
 
 <script>
+import "@/icons/group-item.svg";
+
 export default {
   name: "GroupPermission",
   data() {

src/views/SystemManage/UserPermission.vue

@@ -9,8 +9,45 @@
           {{ status === "0" ? "停用" : status === "1" ? "启用" : "无状态" }}
         </div>
       </div>
+      <div class="info">
+        <div class="info-item">
+          <div class="info-title">用户名：</div>
+          <div class="info-value">{{ userData.username }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">姓名：</div>
+          <div class="info-value">{{ userData.truename }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">警号：</div>
+          <div class="info-value">{{ userData.policemanid }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">用户组：</div>
+          <div class="info-value">{{ userData.group }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">所属单位：</div>
+          <div class="info-value">{{ userData.unitname }}</div>
+        </div>
+        <div class="info-item1">
+          <div class="info-title">角色：</div>
+          <!--            有角色 角色长度<5-->
+          <div v-if="userData.roleName !== ''" class="info-value">
+            <div
+              class="tags"
+              v-for="item in userData.roleName && userData.roleName.split(',')"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <!--            无角色-->
+          <div v-else-if="userData.roleName === ''" class="info-value">
+            无角色
+          </div>
+        </div>
+      </div>
     </div>
-
     <div class="main">
       <div class="header">
         <div class="btns">

src/views/SystemManage/scss/grouppermission.scss

@@ -55,7 +55,63 @@
         }
       }
     }
+    .info{
+      //border: 1px solid hotpink; width: auto;
+      .info-item{
+        padding:0 20px 0 20px;
+        border-right: 1px solid #E6E6E8;
+        .info-title{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #999999;
+          line-height: 22px;
+        }
+        .info-value{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #333333;
+          line-height: 22px;
+          .tags{
+            width: 100px;
+            height: 24px;
+            background: #FFFFFF;
+            border-radius: 4px;
+            text-align: center;
+            margin-right: 16px;
+          }
+        }
+      }
+      .info-item1{
+        padding:0 20px 0 20px;
+        .info-title{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #999999;
+          line-height: 22px;
+        }
+        .info-value{
+          width: 80px;
+          text-align: center;
+          //width: 80px;
+          height: 24px;
+          background: #FFFFFF;
+          border-radius: 12px;
 
+        }
+        .btn{
+          margin-left: 5px;
+          cursor: pointer;
+          width: 80px;
+          height: 22px;
+          font-size: 14px;
+          color: #055FE7;
+          line-height: 22px;
+        }
+      }
+    }
   }
 
 

src/views/SystemManage/scss/userpermission.scss

@@ -54,8 +54,65 @@
         z-index: 100;
       }
       }
+
     }
+    .info{
+      //border: 1px solid hotpink; width: auto;
+      .info-item{
+        padding:0 20px 0 20px;
+        border-right: 1px solid #E6E6E8;
+        .info-title{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #999999;
+          line-height: 22px;
+        }
+        .info-value{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #333333;
+          line-height: 22px;
 
+        }
+        .info-value1{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #333333;
+          line-height: 22px;
+          .tags{
+
+          }
+        }
+      }
+      .info-item1{
+        padding:0 20px 0 20px;
+        .info-title{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #999999;
+          line-height: 22px;
+        }
+        .info-value{
+          width: auto;
+          height: 22px;
+          font-size: 14px;
+          color: #333333;
+          line-height: 22px;
+          .tags{
+            width: 100px;
+            height: 24px;
+            background: #FFFFFF;
+            border-radius: 4px;
+            text-align: center;
+            margin-right: 16px;
+          }
+        }
+      }
+    }
   }