aside改用setup方式。
This commit is contained in:
		@@ -2,7 +2,7 @@
 | 
				
			|||||||
 * @Author: Kane
 | 
					 * @Author: Kane
 | 
				
			||||||
 * @Date: 2023-01-04 11:30:33
 | 
					 * @Date: 2023-01-04 11:30:33
 | 
				
			||||||
 * @LastEditors: Kane
 | 
					 * @LastEditors: Kane
 | 
				
			||||||
 * @LastEditTime: 2023-02-05 10:47:17
 | 
					 * @LastEditTime: 2023-02-05 23:38:54
 | 
				
			||||||
 * @FilePath: /IT工具综合平台/src/layout/components/Aside.vue
 | 
					 * @FilePath: /IT工具综合平台/src/layout/components/Aside.vue
 | 
				
			||||||
 * @Description: 
 | 
					 * @Description: 
 | 
				
			||||||
 * 
 | 
					 * 
 | 
				
			||||||
@@ -12,7 +12,7 @@
 | 
				
			|||||||
    <el-scrollbar class="wrapper" height="400px">
 | 
					    <el-scrollbar class="wrapper" height="400px">
 | 
				
			||||||
        <el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
 | 
					        <el-menu id="side-bar" router :default-active="currentPath" background-color="#2f4156" text-color="#fff"
 | 
				
			||||||
            active-text-color="#ffd04b" :collapse="asideCollapse">
 | 
					            active-text-color="#ffd04b" :collapse="asideCollapse">
 | 
				
			||||||
            <template v-for="route in this.routers" :key="route.path">
 | 
					            <template v-for="route in routes" :key="route.path">
 | 
				
			||||||
                <template v-if="!route.hidden">
 | 
					                <template v-if="!route.hidden">
 | 
				
			||||||
                    <template v-if="hasOnlyChild(route.children)">
 | 
					                    <template v-if="hasOnlyChild(route.children)">
 | 
				
			||||||
                        <!-- 当只有一个子路由时,直接渲染子路由 -->
 | 
					                        <!-- 当只有一个子路由时,直接渲染子路由 -->
 | 
				
			||||||
@@ -46,19 +46,20 @@
 | 
				
			|||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
 | 
					import { computed } from "vue";
 | 
				
			||||||
 | 
					import { useStore } from "vuex";
 | 
				
			||||||
import { useRouter, useRoute } from "vue-router";
 | 
					import { useRouter, useRoute } from "vue-router";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    name: "LayoutAside",
 | 
					    name: "LayoutAside",
 | 
				
			||||||
    data()
 | 
					    setup()
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
        return {
 | 
					        const router = useRouter();
 | 
				
			||||||
            routers: null,
 | 
					        const routes = router.getRoutes();
 | 
				
			||||||
        };
 | 
					        const store = useStore();
 | 
				
			||||||
    },
 | 
					
 | 
				
			||||||
    methods: {
 | 
					 | 
				
			||||||
        //用于判断一个路由是否只有一项子路由
 | 
					        //用于判断一个路由是否只有一项子路由
 | 
				
			||||||
        hasOnlyChild: function (children)
 | 
					        const hasOnlyChild = (children) =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            //防御验证
 | 
					            //防御验证
 | 
				
			||||||
            if (!children)
 | 
					            if (!children)
 | 
				
			||||||
@@ -78,27 +79,31 @@ export default {
 | 
				
			|||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            return false;
 | 
					            return false;
 | 
				
			||||||
        },
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    },
 | 
					        //计算变量
 | 
				
			||||||
    computed: {
 | 
					 | 
				
			||||||
        //获取当前的路由
 | 
					        //获取当前的路由
 | 
				
			||||||
        currentPath()
 | 
					        const currentPath = computed(() =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            let path = useRoute().path;
 | 
					            let path = useRoute().path;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            return path;
 | 
					            return path;
 | 
				
			||||||
        },
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        //获取导航栏是否折叠的标志
 | 
					        //获取导航栏是否折叠的标志
 | 
				
			||||||
        asideCollapse()
 | 
					        const asideCollapse = computed(() =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            return this.$store.state.app.ui.asideBarCollapse;
 | 
					            return store.state.app.ui.asideBarCollapse;
 | 
				
			||||||
        }
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        return {
 | 
				
			||||||
 | 
					            router,
 | 
				
			||||||
 | 
					            routes,
 | 
				
			||||||
 | 
					            hasOnlyChild,
 | 
				
			||||||
 | 
					            currentPath,
 | 
				
			||||||
 | 
					            asideCollapse,
 | 
				
			||||||
 | 
					        };
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    created()
 | 
					 | 
				
			||||||
    {
 | 
					 | 
				
			||||||
        this.routers = useRouter().options.routes;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,7 @@
 | 
				
			|||||||
 * @Author: Kane
 | 
					 * @Author: Kane
 | 
				
			||||||
 * @Date: 2023-02-02 22:19:12
 | 
					 * @Date: 2023-02-02 22:19:12
 | 
				
			||||||
 * @LastEditors: Kane
 | 
					 * @LastEditors: Kane
 | 
				
			||||||
 * @LastEditTime: 2023-02-05 11:52:27
 | 
					 * @LastEditTime: 2023-02-05 23:05:12
 | 
				
			||||||
 * @FilePath: /IT工具综合平台/src/views/requirement/RequirementManager.vue
 | 
					 * @FilePath: /IT工具综合平台/src/views/requirement/RequirementManager.vue
 | 
				
			||||||
 * @Description: 
 | 
					 * @Description: 
 | 
				
			||||||
 * 
 | 
					 * 
 | 
				
			||||||
@@ -39,7 +39,7 @@
 | 
				
			|||||||
                <el-col :span="4">
 | 
					                <el-col :span="4">
 | 
				
			||||||
                    <!-- <el-input v-model="query_param.status"></el-input> -->
 | 
					                    <!-- <el-input v-model="query_param.status"></el-input> -->
 | 
				
			||||||
                    <el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status">
 | 
					                    <el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status">
 | 
				
			||||||
                        <el-option v-for="option in statusData" :value="option.status_name" :key="option.status_code + option.status_name"></el-option>
 | 
					                        <el-option v-for="option in statusData" :value="option.status_name" lable="option.status_code" :key="option.status_code + option.status_name"></el-option>
 | 
				
			||||||
                    </el-select>
 | 
					                    </el-select>
 | 
				
			||||||
                </el-col>
 | 
					                </el-col>
 | 
				
			||||||
                <el-col :span="6"></el-col>
 | 
					                <el-col :span="6"></el-col>
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user