新增顶部面包屑

src/views/modules/base/organization/organization.vue

@@ -38,7 +38,16 @@
             </el-col>
         </el-row> -->
         
-        
+        <el-row>
+            <el-col :span="24" style="margin-left: 10px;margin-top: 10px;margin-bottom: 20px;">
+                <el-breadcrumb separator-class="el-icon-arrow-right">
+                    <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbArr" :key="breadcrumb.id">
+                        <el-link v-if="breadcrumb.id === currentBreadCrumbKey" type="primary" @click.native="refreshThisPage(index)">{{ breadcrumb.name }}</el-link>
+                        <el-link v-else type="info" @click.native="refreshThisPage(index)">{{ breadcrumb.name }}</el-link>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </el-col>
+        </el-row>
         <!-- 组织列表 -->
         <el-table v-show="OrganizationList"
         height="250"
@@ -64,7 +73,6 @@
             </el-table-column>
         </el-table>
         
-
          <!-- 下级机关单位/基层科室列表 -->
         <el-table v-show="officeList"
         height="250"
@@ -689,7 +697,10 @@ export default {
            ],
            selectValue: [],
 
-
+            // 顶部 面包屑
+            breadcrumbArr: [],
+            // 面包屑 当前所属机构ID
+            currentBreadCrumbKey: '',
             // 校验
            rules: {
                 departmentName:[
@@ -706,7 +717,9 @@ export default {
         this.getCommunityList()
         this.getGridList()
         this.agencyPeo()
-        this.getNavigation()
+        // this.getNavigation()
+        // 更新顶部面包屑
+        this.assembleBreadcrumbArr(localStorage.getItem('agencyId'), 'agency')
     },
     
     watch: {
@@ -830,7 +843,7 @@ export default {
             }
         },
 
-        // 查询社区人员
+        // 查询部门人员
         async communityPeo(){
             const url = "/data/aggregator/org/stafflist"
 
@@ -1093,8 +1106,7 @@ export default {
             this.OrganizationList = false
             this.officeList = false
             this.GridPeo()
-            
-            
+            this.assembleBreadcrumbArr(row.gridId, 'grid')
         },
         // 进入社区，查询社区所属人员
         entryCommunity(row){
@@ -1111,6 +1123,7 @@ export default {
             this.GridList = false
             this.OrganizationList = false
             this.communityPeo()
+            this.assembleBreadcrumbArr(row.departmentId, 'department')
         },
 
         // 进入组织，重新渲染
@@ -1131,6 +1144,7 @@ export default {
             this.entry = true
             this.levelPeo = true
             this.OrganizationList = false
+            this.assembleBreadcrumbArr(row.agencyId, 'agency')
         },
 
         // 新增组织
@@ -1332,20 +1346,76 @@ export default {
         },
 
         // 获取导航
-        async getNavigation(){
+        // async getNavigation(){
 
-            const url = "/gov/org/customeragency/orgtree"
+        //     const url = "/gov/org/customeragency/orgtree"
 
-            let params = {
+        //     let params = {
 
-            }
+        //     }
             
-            const { data, code, msg } = await requestPost(url,params)
+        //     const { data, code, msg } = await requestPost(url,params)
 
-            if(code === 0){
-                this.Navigation = data.agencyName
+        //     if(code === 0){
+        //         this.Navigation = data.agencyName
+        //     }
+            
+        async assembleBreadcrumbArr (id, orgType) {
+            this.currentBreadCrumbKey = id
+            if (orgType === 'agency') {
+                const url = '/gov/org/agency/agencydetail'
+                let params = {
+                    agencyId : id,
+                }
+                const { data, code, msg } = await requestPost(url, params)
+                if(code === 0){
+                    if (this.breadcrumbArr.length === 0) {
+                        this.breadcrumbArr = [{id: data.agencyId, name: data.agencyName, type: orgType}]
+                    } else {
+                        let breadcrumb = {id: data.agencyId, name: data.agencyName, type: orgType}
+                        this.breadcrumbArr.push(breadcrumb)
+                    }
+                } else {
+                    this.$message.error(msg)
+                }
+            } else if (orgType === 'department') {
+                const url = '/gov/org/department/departmentdetail'
+                let params = {
+                    departmentId : id,
+                }
+                const { data, code, msg } = await requestPost(url, params)
+                if(code === 0){
+                    if (this.breadcrumbArr.length === 0) {
+                        this.breadcrumbArr = [{id: data.departmentId, name: data.departmentName, type: orgType}]
+                    } else {
+                        let breadcrumb = {id: data.departmentId, name: data.departmentName, type: orgType}
+                        this.breadcrumbArr.push(breadcrumb)
+                    }
+                } else {
+                    this.$message.error(msg)
+                }
+            } else if (orgType === 'grid') {
+                const url = '/gov/org/grid/griddetail'
+                let params = {
+                    gridId : id,
+                }
+                const { data, code, msg } = await requestPost(url, params)
+                if(code === 0){
+                    if (this.breadcrumbArr.length === 0) {
+                        this.breadcrumbArr = [{id: data.grid, name: data.gridName, type: orgType}]
+                    } else {
+                        let breadcrumb = {id: data.grid, name: data.gridName, type: orgType}
+                        this.breadcrumbArr.push(breadcrumb)
+                    }
+                } else {
+                    this.$message.error(msg)
+                }
             }
+        },
 
+        async refreshThisPage (index) {
+            console.log(this.currentBreadCrumbKey)
+            console.log(this.breadcrumbArr)
         },
 
        /** 地图初始化 */