feat(Perm.vue): 侧边栏调整为setup语法糖，权限修改回显处理完成。

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,212 +1,102 @@
 <template>
-  <div
+  <div v-if="!item.meta || !item.meta.hidden">
-      v-if="!item.meta || !item.meta.hidden"
-      :class="[isCollapse ? 'simple-mode' : 'full-mode',
-      {'first-level': !isFirstLevel}]"
-  >
     <template
-        v-if="!alwaysShowParent && onlyOneChild && !onlyOneChild.children"
+        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&(!item.meta|| !item.meta.alwaysShow)"
     >
-      <AppLink
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-          v-if="onlyOneChild.meta"
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          :to="resolvePath(onlyOneChild.path)"
+          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-      >
+          <template #title>{{ onlyOneChild.meta.title }}</template>
-        <el-menu-item
-            :index="resolvePath(onlyOneChild.path)"
-            :class="{'submenu-title-noDropdown':!isFirstLevel}"
-        >
-          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-          <template v-if="onlyOneChild.meta && onlyOneChild.meta.title" #title>{{ onlyOneChild.meta.title }}</template>
         </el-menu-item>
-      </AppLink>
+      </app-link>
     </template>
-    <el-sub-menu
+    <el-sub-menu v-else :index="resolvePath(item.path)">
-        v-else
-        :index="resolvePath(item.path)"
-    >
       <!-- popper-append-to-body -->
       <template #title>
-        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+        <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
         <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
-      <template v-if="item.children">
+
-        <sidebar-item
+      <sidebar-item
-            v-for="child in item.children"
+          v-for="child in item.children"
-            :key="child.path"
+          :key="child.path"
-            :item="child"
+          :item="child"
-            :is-collapse="isCollapse"
+          :is-nest="true"
-            :is-first-level="false"
+          :base-path="resolvePath(child.path)"
-            :base-path="resolvePath(child.path)"
+          class="nest-menu"
-            class="nest-menu"
+      />
-        />
-      </template>
     </el-sub-menu>
   </div>
 </template>
 
 
-<script lang="ts">
+<script setup lang="ts">
 import path from 'path-browserify'
-import {defineComponent, PropType, computed} from "vue";
+import {defineProps, PropType, computed, ref} from "vue";
-import {RouteRecordRaw} from 'vue-router'
 import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import {RouteRecordRaw} from "vue-router";
 
-
+const props = defineProps({
-export default defineComponent({
+  item: {
-  props: {
+    type: Object as PropType<RouteRecordRaw>,
-    item: {
+    required: true
-      type: Object as PropType<RouteRecordRaw>,
-      required: true
-    },
-    isCollapse: {
-      type: Boolean,
-      required: false
-    },
-    isFirstLevel: {
-      type: Boolean,
-      required: false
-    },
-    basePath: {
-      type: String,
-      required: true
-    }
   },
-  components: {
+  isNest: {
-    AppLink,
+    type: Boolean,
-    SvgIcon
+    required: false
   },
-  setup(props) {
+  basePath: {
-    const alwaysShowParent = computed(() => {
+    type: String,
-      if (props.item.meta && props.item.meta.alwaysShow) {
+    required: true
-        return true
-      } else {
-        return false
-      }
-    })
-
-    const showingChildrenNum = computed(() => {
-      if (props.item.children) {
-        const showingChildren = props.item.children.filter((item) => {
-          if (item.meta && item.meta.hidden) {
-            return false
-          } else {
-            return true
-          }
-        })
-        return showingChildren.length
-      }
-      return 0
-    })
-
-    const onlyOneChild = computed(() => {
-      if (showingChildrenNum.value > 1) {
-        return null
-      }
-      if (props.item.children) {
-        for (const child of props.item.children) {
-          if (!child.meta || !child.meta.hidden) {
-            return child
-          }
-        }
-      }
-      // If there is no children, return itself with path removed,
-      // because this.basePath already contains item's path information
-      return {...props.item, path: ''}
-    })
-
-    const resolvePath = (routePath: string) => {
-      if (isExternal(routePath)) {
-        return routePath
-      }
-      if (isExternal(props.basePath)) {
-        return props.basePath
-      }
-      return path.resolve(props.basePath, routePath)
-    }
-
-    return {
-      alwaysShowParent,
-      showingChildrenNum,
-      onlyOneChild,
-      resolvePath
-    }
   }
 })
 
+const onlyOneChild = ref({});
+
+function hasOneShowingChild(children = [] as any, parent: RouteRecordRaw) {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter((item: any) => {
+    if (item.mata && item.mata.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
+    return true
+  }
+
+  return false
+};
+
+
+function resolvePath(routePath: string) {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  return path.resolve(props.basePath, routePath)
+}
+
+
 </script>
 
 <style lang="scss" scoped>
-.el-sub-menu.is-active > .el-sub-menu__title {
-  color: #f4f4f5 !important;
-}
 
-.full-mode {
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-sub-menu .el-menu-item {
-    min-width: 210px !important;
-    #background-color: #1f2d3d !important;
-
-    &:hover {
-      background-color: #001528 !important;
-    }
-  }
-
-  .el-menu-item {
-    & > span {
-      display: inline-block;
-      padding-left: 5px;
-    }
-  }
-
-  .el-sub-menu {
-    overflow: hidden;
-
-    & > .el-sub-menu__title {
-      .el-sub-menu__icon-arrow {
-        display: none;
-      }
-
-      & > span {
-        padding-left: 5px;
-
-      }
-    }
-  }
-}
-
-.simple-mode {
-  &.first-level {
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      & > span {
-        display: none;
-      }
-
-      & > svg {
-        margin-left: 20px;
-      }
-    }
-
-    .el-sub-menu {
-      overflow: hidden;
-
-
-      & > .el-sub-menu__title {
-        padding: 0px !important;
-
-        .el-sub-menu__icon-arrow {
-          display: none;
-        }
-
-        & > span {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/system/menu/components/Perm.vue

@@ -19,7 +19,7 @@
             @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item>
-        <el-button  :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Search" @click="handleQuery">搜索</el-button>
         <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -114,7 +114,7 @@
               </el-select>
             </template>
           </el-input>
-          <el-link  v-show="state.urlPerm.requestMethod">
+          <el-link v-show="state.urlPerm.requestMethod">
             {{ state.urlPerm.requestMethod }}:/{{ state.urlPerm.serviceName }}{{ state.urlPerm.requestPath }}
           </el-link>
         </el-form-item>
@@ -126,7 +126,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary"  @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -137,7 +137,7 @@
 <script setup lang="ts">
 import {listPermsWithPage, getPermDetail, addPerm, updatePerm, deletePerms} from "@/api/system/perm"
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import {onMounted,watch, reactive, ref, unref, getCurrentInstance} from 'vue'
+import {onMounted, watch, reactive, ref, unref, getCurrentInstance} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus"
 
 const {proxy}: any = getCurrentInstance();
@@ -183,7 +183,8 @@ const state = reactive({
     id: undefined,
     name: undefined,
     urlPerm: undefined,
-    btnPerm: undefined
+    btnPerm: undefined,
+    menuId: undefined
   },
   rules: {
     name: [
@@ -240,7 +241,6 @@ function handleSelectionChange(selection: any) {
 }
 
 
-
 /**
  * 字典数据准备
  */
@@ -272,7 +272,15 @@ function handleUpdate(row: any) {
   }
   const id = row.id || state.ids
   getPermDetail(id).then(response => {
-    state.formData = response.data
+    const {data} = response
+    state.formData = data
+    if (data && data.urlPerm) {
+      // GET:/youlai-admin/api/v1/users
+      const urlPermArr = data.urlPerm.split(':')
+      state.urlPerm.requestMethod = urlPermArr[0]
+      state.urlPerm.serviceName = urlPermArr[1].substring(1, urlPermArr[1].substring(1).indexOf('/') + 1)
+      state.urlPerm.requestPath = urlPermArr[1].substring(urlPermArr[1].substring(1).indexOf('/') + 1)
+    }
   })
 }