统一鉴权页面

src/components/auth/authAction.vue

@@ -1,3 +1,26 @@
+<script>
+export default {
+  data() {
+    return{
+
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  }
+}
+</script>
 <template>
-  <div>行为权限</div>
-</template>
+  <div class="auth-action">行为权限</div>
+</template>
+<style lang="less" scoped>
+.auth-action{
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 4px;
+}
+</style>

src/components/auth/authRole.vue

@@ -1,3 +1,230 @@
+<script>
+import publicFunc from "@/utils/publicFunc";
+export default {
+  data() {
+    return {
+      tableData:[],
+      roleListData: [
+        {
+          id: publicFunc.buildGuid("group"),
+          column_name: "普通员工角色组",
+          type: "group",
+        },
+      ],
+      systemListData: [
+        {
+          id: publicFunc.buildGuid("system"),
+          column_name: "空间管理系统",
+          type: "system",
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          column_name: "停车管理系统",
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          column_name: "能源管理系统",
+        },
+        {
+          id: publicFunc.buildGuid("system"),
+          type: "system",
+          column_name: "中枢",
+        },
+      ],
+      userListData: [
+        {
+          id: publicFunc.buildGuid("user"),
+          column_name: "超级管理员",
+          type: "user",
+        },
+        {
+          id: publicFunc.buildGuid("user"),
+          column_name: "普通管理员",
+          type: "user",
+        },
+        {
+          id: publicFunc.buildGuid("user"),
+          column_name: "决策组",
+          type: "user",
+        },
+        {
+          id: publicFunc.buildGuid("user"),
+          column_name: "普通用户",
+          type: "user",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initRoleData();
+  },
+  watch: {},
+  methods: {},
+};
+</script>
 <template>
-  <div>角色权限</div>
-</template>
+  <div class="auth-role">
+    <div class="auth-role-title">配置权限</div>
+    <div class="auth-role-content">
+      <div class="left-box">
+        <div class="left-box-list">
+          <div
+            class="left-box-list-item"
+            v-for="item in roleListData"
+            :key="item.id"
+          >
+            <div class="group-icon"></div>
+            <div class="text">{{ item.column_name }}</div>
+          </div>
+        </div>
+        <div class="left-box-list">
+          <div
+            class="left-box-list-item"
+            v-for="item in systemListData"
+            :key="item.id"
+          >
+            <div class="system-icon"></div>
+            <div class="text">{{ item.column_name }}</div>
+          </div>
+        </div>
+        <div class="left-box-list">
+          <div
+            class="left-box-list-item"
+            v-for="item in userListData"
+            :key="item.id"
+          >
+            <div class="role-icon"></div>
+            <div class="text">{{ item.column_name }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="title">权限列表</div>
+        <a-table  :data-source="tableData" bordered></a-table>
+      </div>
+    </div>
+    <div class="auth-role-infolist">123</div>
+    <div class="auth-role-select"></div>
+  </div>
+</template>
+<style lang="less" scoped>
+@fontColor: #66beff;
+.auth-role {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 4px;
+  &-title {
+    width: 100%;
+    height: 5%;
+    background: rgba(200, 200, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 14px;
+    font-weight: bold;
+    text-indent: 30px;
+  }
+  &-content {
+    width: 100%;
+    height: 45%;
+    // background: peachpuff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .left-box {
+      height: 100%;
+      width: 48%;
+      background: peachpuff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      &-list {
+        height: 100%;
+        width: 32%;
+        overflow: auto;
+        // background: palevioletred;
+        &-item {
+          width: 100%;
+          height: 40px;
+          background: rgba(100, 100, 150, 0.2);
+          color: @fontColor;
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          .group-icon,
+          .system-icon,
+          .role-icon {
+            width: 35px;
+            height: 35px;
+          }
+          .group-icon {
+            background: url("@/assets/images/auth/group_gray.png") no-repeat
+              center;
+            &-click {
+              background: url("@/assets/images/auth/group_blue.png") no-repeat
+                center;
+            }
+          }
+          .system-icon {
+            background: url("@/assets/images/auth/system_gray.png") no-repeat
+              center;
+            &-click {
+              background: url("@/assets/images/auth/system_blue.png") no-repeat
+                center;
+            }
+          }
+          .role-icon {
+            background: url("@/assets/images/auth/role_gray.png") no-repeat
+              center;
+            &-click {
+              background: url("@/assets/images/auth/role_blue.png") no-repeat
+                center;
+            }
+          }
+          .text {
+            width: calc(100% - 35px);
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+          }
+        }
+      }
+    }
+    .right-box {
+      height: 100%;
+      width: 45%;
+      background: rgb(255, 165, 0, 0.1);
+      .title{
+        width: 100%;
+        height: 12%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-weight: 400;
+        font-size: 16px;
+      }
+      .table{
+        width: 100%;
+        height: 88%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+  &-infolist {
+    width: 100%;
+    height: 10%;
+    background: yellowgreen;
+  }
+  &-select {
+    width: 100%;
+    height: 10%;
+    background: burlywood;
+  }
+}
+</style>

src/components/auth/authView.vue

@@ -1,3 +1,26 @@
+<script>
+export default {
+  data() {
+    return{
+
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  }
+}
+</script>
 <template>
-  <div>权限查看</div>
-</template>
+  <div class="auth-view">权限查看</div>
+</template>
+<style lang="less" scoped>
+.auth-view{
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 4px;
+}
+</style>

src/utils/publicFunc.js

@@ -0,0 +1,14 @@
+//随机id生成
+const buildGuid = function (options) {
+  var text = "";
+  var mar = options || "default";
+  var possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (var i = 0; i < 18; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  return mar + "_" + new Date().getTime().toString() + text;
+};
+
+export default{
+    buildGuid
+}