'admin-21.03.15:添加列表详情演示界面、优化tagsView事件冒泡问题'

src/router/index.ts

@@ -485,6 +485,21 @@ export const dynamicRoutes = [
 							icon: 'el-icon-sell',
 						},
 					},
+					{
+						path: '/pages/filteringDetails',
+						name: 'filteringDetails',
+						component: () => import('/@/views/pages/filtering/details.vue'),
+						meta: {
+							title: '过滤筛选组件详情',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-s-order',
+						},
+					},
 					{
 						path: '/pages/iocnfont',
 						name: 'iocnfont',

src/views/layout/navBars/tagsView/tagsView.vue

@@ -20,17 +20,17 @@
 					<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
 					<span>{{ v.meta.title }}</span>
 					<template v-if="isActive(v.path)">
-						<i class="el-icon-refresh-right ml5" @click="refreshCurrentTagsView(v.path)"></i>
+						<i class="el-icon-refresh-right ml5" @click.stop="refreshCurrentTagsView(v.path)"></i>
 						<i
 							class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"
 							v-if="!v.meta.isAffix"
-							@click="closeCurrentTagsView(v.path)"
+							@click.stop="closeCurrentTagsView(v.path)"
 						></i>
 					</template>
 					<i
 						class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"
 						v-if="!v.meta.isAffix"
-						@click="closeCurrentTagsView(v.path)"
+						@click.stop="closeCurrentTagsView(v.path)"
 					></i>
 				</li>
 			</ul>

src/views/pages/filtering/details.vue

@@ -0,0 +1,33 @@
+<template>
+	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="layout-view-bg-white">
+			<div class="w100 h100 flex">
+				<div class="flex-margin color-primary">filtering-details 测试界面</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed } from 'vue';
+import { useStore } from '/@/store/index.ts';
+export default {
+	name: 'filteringDetails',
+	setup() {
+		const store = useStore();
+		const state = reactive({
+			tagViewHeight: '',
+		});
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		return {
+			initTagViewHeight,
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/pages/filtering/index.vue

@@ -86,11 +86,13 @@
 
 <script lang="ts">
 import { ref, toRefs, reactive, onMounted, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import { filtering, filterList } from './mock.ts';
 export default {
 	name: 'filtering',
 	setup() {
 		const dlRefs = ref([]);
+		const router = useRouter();
 		const state = reactive({
 			filtering,
 			tableData: {
@@ -141,7 +143,10 @@ export default {
 		};
 		// 当前列表项点击
 		const onTableItemClick = (v: object) => {
-			console.log(v);
+			router.push({
+				path: '/pages/filteringDetails',
+				query: { id: v.id },
+			});
 		};
 		// 分页点击
 		const onHandleSizeChange = (val: number) => {

src/views/pages/listAdapt/index.vue

@@ -53,10 +53,12 @@
 
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 import { filterList } from './mock.ts';
 export default {
 	name: 'listAdapt',
 	setup() {
+		const router = useRouter();
 		const state = reactive({
 			tableData: {
 				data: filterList,
@@ -68,6 +70,13 @@ export default {
 				},
 			},
 		});
+		// 当前列表项点击
+		const onTableItemClick = (v: object) => {
+			router.push({
+				path: '/pages/filteringDetails',
+				query: { id: v.id },
+			});
+		};
 		// 分页点击
 		const onHandleSizeChange = (val: number) => {
 			state.tableData.param.pageSize = val;
@@ -77,6 +86,7 @@ export default {
 			state.tableData.param.pageNum = val;
 		};
 		return {
+			onTableItemClick,
 			onHandleSizeChange,
 			onHandleCurrentChange,
 			...toRefs(state),