修改路由

src/router/routes/routes-file-two.ts

@@ -5,11 +5,18 @@ const HomeRoutes = {
   component: Layout,
   children: [
     {
-      path: 'permission',
+      path: '/permission',
       name: 'Permission',
       component: () => import('@/views/permissionItem/index.vue'),
       //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-      meta: { title: '权限项', elSvgIcon: 'Fold' }
+      meta: { title: '权限项', elSvgIcon: 'Fold' },
+      children: [
+        {
+          path: '/permission',
+          name: 'Permission',
+          component: () => import('@/views/permissionItem/components/home.vue')
+        }
+      ]
     }
   ]
 }

src/views/permissionItem/components/home.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="permission scroll-y">
+    <div class="permission-head rowSS">
+      <div class="manageTitle">权限项管理</div>
+      <div class="status0"><span class="icon"></span>交互权限</div>
+      <div class="status1"><span class="icon"></span>API接口</div>
+      <div class="status2"><span class="icon"></span>数据读写</div>
+    </div>
+    <div class="permission-content rowSS">
+      <div class="permission-content-tree box">
+        <div class="manageTitle">权限树</div>
+        <div class="contentTree">
+          <el-tree :data="data" :props="defaultProps" node-key="auth_id" highlight-current :default-expanded-keys="currentKey" :expand-on-click-node="false" @node-click="handleNodeClick" />
+        </div>
+      </div>
+      <div class="permission-content-card box">
+        <div class="grid-contentBottom">
+          <div class="capTitle rowBS">
+            <div class="manageTitle">下级权限</div>
+            <div class="btn-create">
+              <el-button size="default" plain @click="addAuth" class="btn-white">新增</el-button>
+            </div>
+          </div>
+          <div class="content">
+            <template v-if="childrenData.length">
+              <el-row :gutter="24">
+                <el-col :span="6" v-for="data in childrenData" :key="data.auth_id">
+                  <div class="account-left-content-teams">
+                    <div class="team">
+                      <div class="bg" :class="data.auth_type == 1 ? 'status0' : data.auth_type == 2 ? 'status1' : 'status2'"></div>
+                      <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
+                        <div class="rowBS info">
+                          <div :title="data.auth_name" class="name">
+                            {{ data.auth_name }}
+                          </div>
+                          <div v-if="data.auth_type > 0" class="icon">
+                            <el-tooltip effect="dark" :content="`修改${data.auth_name}`" placement="bottom">
+                              <span @click="renderEdit(data)" class="cap cap-edit"></span>
+                            </el-tooltip>
+                          </div>
+                        </div>
+                        <div v-if="data.auth_type > 0" class="rowBS details">
+                          <div class="details-msg">
+                            状态：<span :class="data.auth_status ? 'success' : 'error'">{{ data.auth_status ? "启用" : "禁用" }}</span>
+                          </div>
+                          <div class="details-info">
+                            <el-switch v-model="data.auth_status" @change="renderChange(data)" active-color="#AC014D"> </el-switch>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div v-if="data.auth_type !== 0" @click.stop="onNodeClick(data)" class="info-close">
+                        <CloseBold class="icon" :class="data.auth_type === 1 ? 'close1' : data.auth_type > 2 ? 'close2' : ''" />
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </template>
+            <template v-else>
+              <el-empty description="暂无数据" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--删除弹框-->
+  <Dialog :flag="flag">
+    <div class="airportInfoDialog">
+      <div class="title del-title">删除权限</div>
+      <div class="Delcontent">
+        <div class="content del-content">
+          <span class="DelIcon"></span>是否确认删除<span class="error l10">{{ title }}</span>？
+        </div>
+        <div class="foot Delfoot text-right t30">
+          <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
+          <el-button size="medium" @click="flag = false">取消</el-button>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import Dialog from "@/components/dialog/index.vue";
+import { ElMessage } from "element-plus";
+
+interface Tree {
+  label: string;
+  children?: Tree[];
+}
+
+//下级权限数据
+const childrenData = ref([]);
+//默认展开
+const currentKey = ref([-1]);
+//权限树
+const data: Tree[] = [
+  {
+    auth_name: "应用名称",
+    auth_id: -1,
+    auth_type: -1,
+    QueryTarget: -1,
+    auth_status: true,
+    children: [
+      {
+        auth_name: "交互权限",
+        auth_id: 1,
+        auth_type: 1,
+        QueryTarget: 1,
+        auth_status: true,
+      },
+      {
+        auth_name: "API接口",
+        auth_id: 2,
+        auth_type: 1,
+        QueryTarget: 1,
+        auth_status: true,
+      },
+      {
+        auth_name: "数据读写",
+        auth_id: 3,
+        auth_type: 1,
+        QueryTarget: 1,
+        auth_status: true,
+      },
+    ],
+  },
+];
+//删除弹框
+const flag = ref(false);
+//删除弹框标题
+const title = ref("");
+//删除id
+const auId = ref("");
+const defaultProps = {
+  children: "children",
+  label: "auth_name",
+};
+//权限树点击
+const handleNodeClick = (data: Tree) => {
+  if (data.children) {
+    childrenData.value = data.children;
+  } else {
+    childrenData.value = [];
+  }
+};
+
+//启用禁用
+const renderChange = (data) => {
+  console.log(data);
+};
+
+//修改
+const renderEdit = (data) => {
+  console.log(data);
+};
+
+//删除弹框
+const onNodeClick = (data) => {
+  flag.value = true;
+  title.value = data.auth_name;
+  auId.value = data.auth_id;
+};
+
+//删除
+const remove = () => {
+  const datas = childrenData.value;
+  datas.filter((item, index) => {
+    if (item.auth_id == auId.value) {
+      datas.splice(index, 1);
+    }
+  });
+  flag.value = false;
+  ElMessage.success("删除成功");
+};
+
+//新增
+const addAuth = () => {
+  console.log("新增");
+};
+</script>
+
+<style lang="scss" scoped>
+.permission {
+  &-head {
+    line-height: 35px;
+    font-size: 14px;
+    margin-bottom: 30px;
+    .icon {
+      width: 14px;
+      height: 14px;
+      background: #58c274;
+      border-radius: 2px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 10px;
+      position: relative;
+      top: -2px;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .status2 {
+      margin-left: 28px;
+      .icon {
+        background: #2d67e3;
+      }
+    }
+    .status0 {
+      margin-right: 28px;
+      .icon {
+        background: #d8b53b;
+      }
+    }
+  }
+  &-content {
+    height: calc(100% - 65px);
+    &-tree {
+      width: 504px;
+      height: 100%;
+      margin-right: 24px;
+      .contentTree {
+        margin-top: 30px;
+      }
+    }
+    &-card {
+      height: 100%;
+      flex: 1;
+    }
+  }
+  .account-left-content-teams {
+    position: relative;
+    margin-top: 24px;
+    .info-close {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background: #000000;
+      border-radius: 50%;
+      top: -12px;
+      right: -12px;
+      z-index: 5;
+      cursor: pointer;
+      .icon {
+        color: #fff;
+        font-weight: 600;
+        width: 12px;
+        height: 12px;
+      }
+    }
+    .list {
+      background-color: #f5f7fa;
+      .info {
+        line-height: normal;
+        margin-bottom: 37px;
+        .name {
+          font-size: 16px;
+          font-weight: bold;
+          max-width: 120px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .cap {
+          width: 16px;
+          height: 16px;
+          display: inline-block;
+          background-repeat: no-repeat;
+          background-size: 100%;
+          transition: all 0.3s;
+          margin-left: 16px;
+          &:first-child {
+            margin-right: 0;
+          }
+        }
+        .cap-plus {
+          background-image: url("@/assets/status/ic_plus.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_plus_hovar.png");
+          }
+        }
+        .cap-edit {
+          background-image: url("@/assets/status/ic_edit_default.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_edit_hovar.png");
+          }
+        }
+        .cap-sub {
+          background-image: url("@/assets/status/ic_permissions_add_default.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_permissions_add_hoavr.png");
+          }
+        }
+        .cap-job {
+          background-image: url("@/assets/status/ic_jobs.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_jobs_hovar.png");
+          }
+        }
+        .cap-member {
+          background-image: url("@/assets/status/ic_member.png");
+          &:hover {
+            background-image: url("@/assets/status/ic_member_hovar.png");
+          }
+        }
+      }
+    }
+    .team {
+      background: #fff;
+      border-radius: 4px;
+      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      .bg {
+        height: 4px;
+        background: #6f81bc;
+      }
+      .status0 {
+        background: #d8b53b;
+      }
+      .status1 {
+        background: #58c274;
+      }
+      .status2 {
+        background: #2d67e3;
+      }
+    }
+    .list {
+      padding: 23px 24px;
+      position: relative;
+      min-width: 240px;
+      min-height: 118px;
+      .info {
+        margin-bottom: 20px;
+        .info-avoutr {
+          display: flex;
+          .avoutr {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #303133;
+            img {
+              max-width: 100%;
+            }
+          }
+          .msg {
+            margin-left: 20px;
+            p {
+              margin: 0;
+              padding: 0;
+              height: 20px;
+              line-height: 20px;
+            }
+            .name {
+              font-weight: bold;
+              color: #303133;
+              font-size: 18px;
+              margin-bottom: 8px;
+            }
+            .group {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #303133;
+            }
+          }
+        }
+        .icon {
+          font-size: 16px;
+          cursor: pointer;
+        }
+      }
+      .time,
+      .ip {
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        .glr {
+          color: #909399;
+        }
+      }
+      .ip {
+        margin-top: 23px;
+        margin-bottom: 38px;
+      }
+      .details {
+        height: 24px;
+        line-height: 24px;
+        font-size: 14px;
+        .success {
+          color: #2d67e3;
+        }
+        .error {
+          color: #909399;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/permissionItem/index.vue

@@ -1,407 +1,5 @@
 <template>
-  <div class="permission scroll-y">
-    <div class="permission-head rowSS">
-      <div class="manageTitle">权限项管理</div>
-      <div class="status0"><span class="icon"></span>交互权限</div>
-      <div class="status1"><span class="icon"></span>API接口</div>
-      <div class="status2"><span class="icon"></span>数据读写</div>
-    </div>
-    <div class="permission-content rowSS">
-      <div class="permission-content-tree box">
-        <div class="manageTitle">权限树</div>
-        <div class="contentTree">
-          <el-tree :data="data" :props="defaultProps" node-key="auth_id" highlight-current :default-expanded-keys="currentKey" :expand-on-click-node="false" @node-click="handleNodeClick" />
-        </div>
-      </div>
-      <div class="permission-content-card box">
-        <div class="grid-contentBottom">
-          <div class="capTitle rowBS">
-            <div class="manageTitle">下级权限</div>
-            <div class="btn-create">
-              <el-button size="default" plain @click="addAuth" class="btn-white">新增</el-button>
-            </div>
-          </div>
-          <div class="content">
-            <template v-if="childrenData.length">
-              <el-row :gutter="24">
-                <el-col :span="6" v-for="data in childrenData" :key="data.auth_id">
-                  <div class="account-left-content-teams">
-                    <div class="team">
-                      <div class="bg" :class="data.auth_type == 1 ? 'status0' : data.auth_type == 2 ? 'status1' : 'status2'"></div>
-                      <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
-                        <div class="rowBS info">
-                          <div :title="data.auth_name" class="name">
-                            {{ data.auth_name }}
-                          </div>
-                          <div v-if="data.auth_type > 0" class="icon">
-                            <el-tooltip effect="dark" :content="`修改${data.auth_name}`" placement="bottom">
-                              <span @click="renderEdit(data)" class="cap cap-edit"></span>
-                            </el-tooltip>
-                          </div>
-                        </div>
-                        <div v-if="data.auth_type > 0" class="rowBS details">
-                          <div class="details-msg">
-                            状态：<span :class="data.auth_status ? 'success' : 'error'">{{ data.auth_status ? "启用" : "禁用" }}</span>
-                          </div>
-                          <div class="details-info">
-                            <el-switch v-model="data.auth_status" @change="renderChange(data)" active-color="#AC014D"> </el-switch>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      <div v-if="data.auth_type !== 0" @click.stop="onNodeClick(data)" class="info-close">
-                        <CloseBold class="icon" :class="data.auth_type === 1 ? 'close1' : data.auth_type > 2 ? 'close2' : ''" />
-                      </div>
-                    </div>
-                  </div>
-                </el-col>
-              </el-row>
-            </template>
-            <template v-else>
-              <el-empty description="暂无数据" />
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    <router-view />
   </div>
-  <!--删除弹框-->
-  <Dialog :flag="flag">
-    <div class="airportInfoDialog">
-      <div class="title del-title">删除权限</div>
-      <div class="Delcontent">
-        <div class="content del-content">
-          <span class="DelIcon"></span>是否确认删除<span class="error l10">{{ title }}</span>？
-        </div>
-        <div class="foot Delfoot text-right t30">
-          <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
-          <el-button size="medium" @click="flag = false">取消</el-button>
-        </div>
-      </div>
-    </div>
-  </Dialog>
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { CloseBold } from '@element-plus/icons-vue'
-import Dialog from '@/components/dialog/index.vue'
-import { ElMessage } from 'element-plus'
-
-interface Tree {
-  label: string
-  children?: Tree[]
-}
-
-//下级权限数据
-const childrenData = ref([])
-//默认展开
-const currentKey = ref([-1])
-//权限树
-const data: Tree[] = [
-  {
-    auth_name: '应用名称',
-    auth_id: -1,
-    auth_type: -1,
-    QueryTarget: -1,
-    auth_status: true,
-    children: [
-      {
-        auth_name: '交互权限',
-        auth_id: 1,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true
-      },
-      {
-        auth_name: 'API接口',
-        auth_id: 2,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true
-      },
-      {
-        auth_name: '数据读写',
-        auth_id: 3,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true
-      }
-    ]
-  }
-]
-//删除弹框
-const flag = ref(false)
-//删除弹框标题
-const title = ref('')
-//删除id
-const auId = ref('')
-const defaultProps = {
-  children: 'children',
-  label: 'auth_name'
-}
-//权限树点击
-const handleNodeClick = (data: Tree) => {
-  if (data.children) {
-    childrenData.value = data.children
-  } else {
-    childrenData.value = []
-  }
-}
-
-//启用禁用
-const renderChange = (data) => {
-  console.log(data)
-}
-
-//修改
-const renderEdit = (data) => {
-  console.log(data)
-}
-
-//删除弹框
-const onNodeClick = (data) => {
-  flag.value = true
-  title.value = data.auth_name
-  auId.value = data.auth_id
-}
-
-//删除
-const remove = () => {
-  const datas = childrenData.value
-  datas.filter((item, index) => {
-    if (item.auth_id == auId.value) {
-      datas.splice(index, 1)
-    }
-  })
-  flag.value = false
-  ElMessage.success('删除成功')
-}
-
-//新增
-const addAuth = () => {
-  console.log('新增')
-}
-</script>
-
-<style lang="scss" scoped>
-.permission {
-  &-head {
-    line-height: 35px;
-    font-size: 14px;
-    margin-bottom: 30px;
-    .icon {
-      width: 14px;
-      height: 14px;
-      background: #58c274;
-      border-radius: 2px;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 10px;
-      position: relative;
-      top: -2px;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .status2 {
-      margin-left: 28px;
-      .icon {
-        background: #2d67e3;
-      }
-    }
-    .status0 {
-      margin-right: 28px;
-      .icon {
-        background: #d8b53b;
-      }
-    }
-  }
-  &-content {
-    height: calc(100% - 65px);
-    &-tree {
-      width: 504px;
-      height: 100%;
-      margin-right: 24px;
-      .contentTree {
-        margin-top: 30px;
-      }
-    }
-    &-card {
-      height: 100%;
-      flex: 1;
-    }
-  }
-  .account-left-content-teams {
-    position: relative;
-    margin-top: 24px;
-    .info-close {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      background: #000000;
-      border-radius: 50%;
-      top: -12px;
-      right: -12px;
-      z-index: 5;
-      cursor: pointer;
-      .icon {
-        color: #fff;
-        font-weight: 600;
-        width: 12px;
-        height: 12px;
-      }
-    }
-    .list {
-      background-color: #f5f7fa;
-      .info {
-        line-height: normal;
-        margin-bottom: 37px;
-        .name {
-          font-size: 16px;
-          font-weight: bold;
-          max-width: 120px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .cap {
-          width: 16px;
-          height: 16px;
-          display: inline-block;
-          background-repeat: no-repeat;
-          background-size: 100%;
-          transition: all 0.3s;
-          margin-left: 16px;
-          &:first-child {
-            margin-right: 0;
-          }
-        }
-        .cap-plus {
-          background-image: url('@/assets/status/ic_plus.png');
-          &:hover {
-            background-image: url('@/assets/status/ic_plus_hovar.png');
-          }
-        }
-        .cap-edit {
-          background-image: url('@/assets/status/ic_edit_default.png');
-          &:hover {
-            background-image: url('@/assets/status/ic_edit_hovar.png');
-          }
-        }
-        .cap-sub {
-          background-image: url('@/assets/status/ic_permissions_add_default.png');
-          &:hover {
-            background-image: url('@/assets/status/ic_permissions_add_hoavr.png');
-          }
-        }
-        .cap-job {
-          background-image: url('@/assets/status/ic_jobs.png');
-          &:hover {
-            background-image: url('@/assets/status/ic_jobs_hovar.png');
-          }
-        }
-        .cap-member {
-          background-image: url('@/assets/status/ic_member.png');
-          &:hover {
-            background-image: url('@/assets/status/ic_member_hovar.png');
-          }
-        }
-      }
-    }
-    .team {
-      background: #fff;
-      border-radius: 4px;
-      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
-      overflow: hidden;
-      .bg {
-        height: 4px;
-        background: #6f81bc;
-      }
-      .status0 {
-        background: #d8b53b;
-      }
-      .status1 {
-        background: #58c274;
-      }
-      .status2 {
-        background: #2d67e3;
-      }
-    }
-    .list {
-      padding: 23px 24px;
-      position: relative;
-      min-width: 240px;
-      min-height: 118px;
-      .info {
-        margin-bottom: 20px;
-        .info-avoutr {
-          display: flex;
-          .avoutr {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: #303133;
-            img {
-              max-width: 100%;
-            }
-          }
-          .msg {
-            margin-left: 20px;
-            p {
-              margin: 0;
-              padding: 0;
-              height: 20px;
-              line-height: 20px;
-            }
-            .name {
-              font-weight: bold;
-              color: #303133;
-              font-size: 18px;
-              margin-bottom: 8px;
-            }
-            .group {
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #303133;
-            }
-          }
-        }
-        .icon {
-          font-size: 16px;
-          cursor: pointer;
-        }
-      }
-      .time,
-      .ip {
-        height: 16px;
-        line-height: 16px;
-        font-size: 16px;
-        .glr {
-          color: #909399;
-        }
-      }
-      .ip {
-        margin-top: 23px;
-        margin-bottom: 38px;
-      }
-      .details {
-        height: 24px;
-        line-height: 24px;
-        font-size: 14px;
-        .success {
-          color: #2d67e3;
-        }
-        .error {
-          color: #909399;
-        }
-      }
-    }
-  }
-}
-</style>