Quellcode durchsuchen

修复面包屑导航显示错误。按面包屑导航里到的代码逻辑,一级菜单只能有一个/ 二级菜单只能有两个/ 不然会解析错误,已经在菜单里配置了一部分,剩下部分明天有空再配置

yanglzh vor 2 Jahren
Ursprung
Commit
666e19666a

+ 98 - 101
src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -1,24 +1,19 @@
 <template>
-	<div class="layout-navbars-breadcrumb" :style="{ display: isShowBreadcrumb }">
-		<SvgIcon
-			class="layout-navbars-breadcrumb-icon"
-			:name="getThemeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
-			:size="16"
-			@click="onThemeConfigChange"
-		/>
-		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
-			<transition-group name="breadcrumb" mode="out-in">
-				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta?.title">
-					<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-						<SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
-					</span>
-					<a v-else @click.prevent="onBreadcrumbClick(v)">
-						<SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
-					</a>
-				</el-breadcrumb-item>
-			</transition-group>
-		</el-breadcrumb>
-	</div>
+  <div class="layout-navbars-breadcrumb" :style="{ display: isShowBreadcrumb }">
+    <SvgIcon class="layout-navbars-breadcrumb-icon" :name="getThemeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'" :size="16" @click="onThemeConfigChange" />
+    <el-breadcrumb class="layout-navbars-breadcrumb-hide">
+      <transition-group name="breadcrumb" mode="out-in">
+        <el-breadcrumb-item v-for="(v) in breadcrumbList" :key="v.meta?.title">
+          <span v-if="(v.menuType=== 0)" class="layout-navbars-breadcrumb-span">
+            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
+          </span>
+          <a v-else @click.prevent="onBreadcrumbClick(v)">
+            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
+          </a>
+        </el-breadcrumb-item>
+      </transition-group>
+    </el-breadcrumb>
+  </div>
 </template>
 
 <script lang="ts">
@@ -29,90 +24,92 @@ import { Local } from '/@/utils/storage';
 
 // 定义接口来定义对象的类型
 interface BreadcrumbState {
-	breadcrumbList: Array<any>;
-	routeSplit: Array<string>;
-	routeSplitFirst: string;
-	routeSplitIndex: number;
+  breadcrumbList: Array<any>;
+  routeSplit: Array<string>;
+  routeSplitFirst: string;
+  routeSplitIndex: number;
 }
 
 export default defineComponent({
-	name: 'layoutBreadcrumb',
-	setup() {
-		const store = useStore();
-		const route = useRoute();
-		const router = useRouter();
-		const state = reactive<BreadcrumbState>({
-			breadcrumbList: [],
-			routeSplit: [],
-			routeSplitFirst: '',
-			routeSplitIndex: 1,
-		});
-		// 获取布局配置信息
-		const getThemeConfig = computed(() => {
-			return store.state.themeConfig.themeConfig;
-		});
-		// 动态设置经典、横向布局不显示
-		const isShowBreadcrumb = computed(() => {
-			initRouteSplit(route.path);
-			const { layout, isBreadcrumb } = store.state.themeConfig.themeConfig;
-			if (layout === 'classic' || layout === 'transverse') return 'none';
-			else return isBreadcrumb ? '' : 'none';
-		});
-		// 面包屑点击时
-		const onBreadcrumbClick = (v: any) => {
-			const { redirect, path } = v;
-			if (redirect) router.push(redirect);
-			else router.push(path);
-		};
-		// 展开/收起左侧菜单点击
-		const onThemeConfigChange = () => {
-			store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
-			setLocalThemeConfig();
-		};
-		// 存储布局配置
-		const setLocalThemeConfig = () => {
-			Local.remove('themeConfig');
-			Local.set('themeConfig', getThemeConfig.value);
-		};
-		// 处理面包屑数据
-		const getBreadcrumbList = (arr: Array<object>) => {
-			arr.map((item: any) => {
-				state.routeSplit.map((v: any, k: number, arrs: any) => {
-					if (state.routeSplitFirst === item.path) {
-						state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
-						state.breadcrumbList.push(item);
-						state.routeSplitIndex++;
-						if (item.children) getBreadcrumbList(item.children);
-					}
-				});
-			});
-		};
-		// 当前路由字符串切割成数组,并删除第一项空内容
-		const initRouteSplit = (path: string) => {
-			if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
-			state.breadcrumbList = [store.state.routesList.routesList[0]];
-			state.routeSplit = path.split('/');
-			state.routeSplit.shift();
-			state.routeSplitFirst = `/${state.routeSplit[0]}`;
-			state.routeSplitIndex = 1;
-			getBreadcrumbList(store.state.routesList.routesList);
-		};
-		// 页面加载时
-		onMounted(() => {
-			initRouteSplit(route.path);
-		});
-		// 路由更新时
-		onBeforeRouteUpdate((to) => {
-			initRouteSplit(to.path);
-		});
-		return {
-			onThemeConfigChange,
-			isShowBreadcrumb,
-			getThemeConfig,
-			onBreadcrumbClick,
-			...toRefs(state),
-		};
-	},
+  name: 'layoutBreadcrumb',
+  setup() {
+    const store = useStore();
+    const route = useRoute();
+    const router = useRouter();
+    const state = reactive<BreadcrumbState>({
+      breadcrumbList: [],
+      routeSplit: [],
+      routeSplitFirst: '',
+      routeSplitIndex: 1,
+    });
+    // 获取布局配置信息
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig.themeConfig;
+    });
+    // 动态设置经典、横向布局不显示
+    const isShowBreadcrumb = computed(() => {
+      initRouteSplit(route.path);
+      const { layout, isBreadcrumb } = store.state.themeConfig.themeConfig;
+      if (layout === 'classic' || layout === 'transverse') return 'none';
+      else return isBreadcrumb ? '' : 'none';
+    });
+    // 面包屑点击时
+    const onBreadcrumbClick = (v: any) => {
+      const { redirect, path } = v;
+      if (redirect) router.push(redirect);
+      else router.push(path);
+    };
+    // 展开/收起左侧菜单点击
+    const onThemeConfigChange = () => {
+      store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
+      setLocalThemeConfig();
+    };
+    // 存储布局配置
+    const setLocalThemeConfig = () => {
+      Local.remove('themeConfig');
+      Local.set('themeConfig', getThemeConfig.value);
+    };
+    // 处理面包屑数据
+    const getBreadcrumbList = (arr: Array<object>) => {
+      arr.map((item: any) => {
+        state.routeSplit.map((v: any, k: number, arrs: any) => {
+          if (state.routeSplitFirst === item.path) {
+            state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
+            state.breadcrumbList.push(item);
+            state.routeSplitIndex++;
+            if (item.children) getBreadcrumbList(item.children);
+          }
+        });
+      });
+    };
+    // 当前路由字符串切割成数组,并删除第一项空内容
+    const initRouteSplit = (path: string) => {
+      if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
+      state.breadcrumbList = [];
+      // state.breadcrumbList = [store.state.routesList.routesList[0]];
+      state.routeSplit = path.split('/');
+      state.routeSplit.shift();
+      state.routeSplitFirst = `/${state.routeSplit[0]}`;
+      state.routeSplitIndex = 1;
+      getBreadcrumbList(store.state.routesList.routesList);
+      // console.log(state.breadcrumbList)
+    };
+    // 页面加载时
+    onMounted(() => {
+      initRouteSplit(route.path);
+    });
+    // 路由更新时
+    onBeforeRouteUpdate((to) => {
+      initRouteSplit(to.path);
+    });
+    return {
+      onThemeConfigChange,
+      isShowBreadcrumb,
+      getThemeConfig,
+      onBreadcrumbClick,
+      ...toRefs(state),
+    };
+  },
 });
 </script>
 

+ 7 - 8
src/views/iot/device/instance/index.vue

@@ -51,10 +51,10 @@
       </div>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
-<!--        <el-table-column label="ID" align="center" prop="id" width="60" v-col="'id'" />-->
-	    <el-table-column label="标识" prop="key"  width="130" :show-overflow-tooltip="true" v-col="'key'"/>
-        <el-table-column label="设备名称"   prop="name" :show-overflow-tooltip="true" v-col="'name'"/>
-        <el-table-column label="产品名称"  prop="productName" :show-overflow-tooltip="true" v-col="'productName'"/>
+        <!--        <el-table-column label="ID" align="center" prop="id" width="60" v-col="'id'" />-->
+        <el-table-column label="标识" prop="key" width="130" :show-overflow-tooltip="true" v-col="'key'" />
+        <el-table-column label="设备名称" prop="name" :show-overflow-tooltip="true" v-col="'name'" />
+        <el-table-column label="产品名称" prop="productName" :show-overflow-tooltip="true" v-col="'productName'" />
         <!-- <el-table-column label="部门" prop="deptName" :show-overflow-tooltip="true" v-col="'deptName'"/> -->
 
         <el-table-column prop="status" label="状态" width="100" align="center" v-col="'status'">
@@ -65,15 +65,14 @@
           </template>
         </el-table-column>
         <el-table-column prop="registryTime" label="激活时间" align="center" width="150" v-col="'registryTime'"></el-table-column>
-<!--        <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="150" v-col="'lastOnlineTime'"></el-table-column>-->
-        <el-table-column prop="registryTime" label="说明"  v-col="'desc'"></el-table-column>
+        <!--        <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="150" v-col="'lastOnlineTime'"></el-table-column>-->
+        <el-table-column prop="registryTime" label="说明" v-col="'desc'"></el-table-column>
 
         <el-table-column label="操作" width="200" align="center" fixed="right">
           <template #default="scope">
 
             <!-- <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button> -->
-            <router-link :to="'/device/instance/detail/' + scope.row.id" class="link-type" style="padding-right: 12px;
-    font-size: 12px;color: #409eff;" v-auth="'detail'">
+            <router-link :to="'/iotmanager/device/instance/' + scope.row.id" class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;" v-auth="'detail'">
               <span>详情</span>
             </router-link>
             <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>

+ 126 - 127
src/views/iot/device/product/index.vue

@@ -48,14 +48,14 @@
       </div>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
-<!--        <el-table-column label="ID" align="center" prop="id" width="60"  v-col="'id'"/>-->
-        <el-table-column label="标识" prop="key" :show-overflow-tooltip="true"  v-col="'key'"/>
-        <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" v-col="'name'"/>
-        <el-table-column label="分类" prop="categoryName" :show-overflow-tooltip="true" v-col="'categoryName'"/>
+        <!--        <el-table-column label="ID" align="center" prop="id" width="60"  v-col="'id'"/>-->
+        <el-table-column label="标识" prop="key" :show-overflow-tooltip="true" v-col="'key'" />
+        <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" v-col="'name'" />
+        <el-table-column label="分类" prop="categoryName" :show-overflow-tooltip="true" v-col="'categoryName'" />
         <!-- <el-table-column label="部门" prop="deptName" :show-overflow-tooltip="true" v-col="'deptName'"/> -->
-        <el-table-column label="消息协议" prop="messageProtocol" :show-overflow-tooltip="true" v-col="'messageProtocol'"/>
-        <el-table-column label="接入方式" prop="transportProtocol" :show-overflow-tooltip="true" v-col="'transportProtocol'"/>
-        <el-table-column label="类型" prop="deviceType" :show-overflow-tooltip="true" v-col="'deviceType'"/>
+        <el-table-column label="消息协议" prop="messageProtocol" :show-overflow-tooltip="true" v-col="'messageProtocol'" />
+        <el-table-column label="接入方式" prop="transportProtocol" :show-overflow-tooltip="true" v-col="'transportProtocol'" />
+        <el-table-column label="类型" prop="deviceType" :show-overflow-tooltip="true" v-col="'deviceType'" />
 
         <el-table-column prop="status" label="状态" width="100" align="center" v-col="'status'">
           <template #default="scope">
@@ -66,12 +66,11 @@
         <!-- <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column> -->
         <el-table-column label="操作" width="150" align="center" fixed="right">
           <template #default="scope">
-		     <router-link :to="'/device/product/detail/' + scope.row.id" class="link-type" style="padding-right: 12px;
-    font-size: 12px;color: #409eff;">
+            <router-link :to="'/iotmanager/device/product/detail/' + scope.row.id" class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;">
               <span>详情</span>
             </router-link>
-            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)"  v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)"  v-auth="'del'">删除</el-button>
+            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -89,126 +88,126 @@ import api from '/@/api/device';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	id: number;
-	name: string;
-	deviceType: string;
-	status: number;
-	desc: string;
-	createBy: string;
+  id: number;
+  name: string;
+  deviceType: string;
+  status: number;
+  desc: string;
+  createBy: string;
 }
 interface TableDataState {
-	ids: number[];
-	tableData: {
-		data: Array<TableDataRow>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-			name: string;
-			deviceType: string;
-			status: string;
-			dateRange: string[];
-		};
-	};
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      name: string;
+      deviceType: string;
+      status: string;
+      dateRange: string[];
+    };
+  };
 }
 
 export default defineComponent({
-	name: 'deviceproduct',
-	components: { EditDic },
-	setup() {
-		const addDicRef = ref();
-		const editDicRef = ref();
-		const queryRef = ref();
-		const state = reactive<TableDataState>({
-			ids: [],
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-					dictName: '',
-					dictType: '',
-					status: '',
-					dateRange: [],
-				},
-			},
-		});
-		// 初始化表格数据
-		const initTableData = () => {
-			typeList();
-		};
-		const typeList = () => {
-			state.tableData.loading = true;
-			api.product.getList(state.tableData.param).then((res: any) => {
-				console.log(res);
-				state.tableData.data = res.product;
-				state.tableData.total = res.total;
-			}).finally(() => (state.tableData.loading = false));
-		};
-		// 打开新增产品弹窗
-		const onOpenAddDic = () => {
-			editDicRef.value.openDialog();
-		};
-		// 打开修改产品弹窗
-		const onOpenEditDic = (row: TableDataRow) => {
-			editDicRef.value.openDialog(row);
-		};
-		// 删除产品
-		const onRowDel = (row: TableDataRow) => {
-			let msg = '你确定要删除所选数据?';
-			let ids: number[] = [];
-			if (row) {
-				msg = `此操作将永久删除产品:“${row.name}”,是否继续?`;
-				ids = [row.id];
-			} else {
-				ids = state.ids;
-			}
-			if (ids.length === 0) {
-				ElMessage.error('请选择要删除的数据。');
-				return;
-			}
-			ElMessageBox.confirm(msg, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					api.product.delete(ids).then(() => {
-						ElMessage.success('删除成功');
-						typeList();
-					});
-				})
-				.catch(() => {});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initTableData();
-		});
-		/** 重置按钮操作 */
-		const resetQuery = (formEl: FormInstance | undefined) => {
-			if (!formEl) return;
-			formEl.resetFields();
-			typeList();
-		};
-		// 多选框选中数据
-		const handleSelectionChange = (selection: TableDataRow[]) => {
-			state.ids = selection.map((item) => item.id);
-		};
-		return {
-			addDicRef,
-			editDicRef,
-			queryRef,
-			onOpenAddDic,
-			onOpenEditDic,
-			onRowDel,
-			typeList,
-			resetQuery,
-			handleSelectionChange,
-			...toRefs(state),
-		};
-	},
+  name: 'deviceproduct',
+  components: { EditDic },
+  setup() {
+    const addDicRef = ref();
+    const editDicRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          dictName: '',
+          dictType: '',
+          status: '',
+          dateRange: [],
+        },
+      },
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      typeList();
+    };
+    const typeList = () => {
+      state.tableData.loading = true;
+      api.product.getList(state.tableData.param).then((res: any) => {
+        console.log(res);
+        state.tableData.data = res.product;
+        state.tableData.total = res.total;
+      }).finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增产品弹窗
+    const onOpenAddDic = () => {
+      editDicRef.value.openDialog();
+    };
+    // 打开修改产品弹窗
+    const onOpenEditDic = (row: TableDataRow) => {
+      editDicRef.value.openDialog(row);
+    };
+    // 删除产品
+    const onRowDel = (row: TableDataRow) => {
+      let msg = '你确定要删除所选数据?';
+      let ids: number[] = [];
+      if (row) {
+        msg = `此操作将永久删除产品:“${row.name}”,是否继续?`;
+        ids = [row.id];
+      } else {
+        ids = state.ids;
+      }
+      if (ids.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+      }
+      ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          api.product.delete(ids).then(() => {
+            ElMessage.success('删除成功');
+            typeList();
+          });
+        })
+        .catch(() => { });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      typeList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    return {
+      addDicRef,
+      editDicRef,
+      queryRef,
+      onOpenAddDic,
+      onOpenEditDic,
+      onRowDel,
+      typeList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
 });
 </script>