全景视图

src/api/system.js

@@ -119,6 +119,11 @@ export function getOrganizationTree () {
   return http.post('/digitizationData/employee/organization/tree')
 }
 
+// 获取机构明细
+export function getOrganizationDetails (data) {
+  return http.post('/organization/detail', data)
+}
+
 // 花名册列表
 export function getRosterList (params) {
   return http.post('/digitizationData/employee/list', params)

src/components/AutoComponents/MTable/MTableColumn.vue

@@ -1,8 +1,8 @@
 <template>
   <el-table-column v-bind="item">
-    <template slot="header">
+    <template slot="header" slot-scope="scope">
       <template v-if="$scopedSlots[`${item.prop}-header`]">
-        <slot :name="`${item.prop}-header`"></slot>
+        <slot :name="`${item.prop}-header`" v-bind="scope"></slot>
       </template>
       <template v-else>
         {{ item.label }}

src/layout/components/MenuSide.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="box pl-3" :class="{active: !collapse}">{{ $DEFAULT_TITLE }}</div>
     <el-menu
-      :default-active="$route.path"
+      :default-active="defaultActive"
       background-color="#001529"
       text-color="#fff"
       active-text-color="#ffd04b"
@@ -37,9 +37,25 @@ export default {
   computed: {
     ...mapGetters(['routes']),
     menus () {
-      return this.filterMenu(this.routes)
+      return this.filterMenu(JSON.parse(JSON.stringify(this.routes)))
+    },
+    defaultActive () {
+      function findActive (items) {
+        while (items.length) {
+          const _path = items.pop()
+          if (!_path.meta.hidden) {
+            return _path.path
+          }
+        }
+      }
+      const paths = this.$route.matched.slice()
+      return findActive(paths)
     }
   },
+  created () {
+    console.log(this.$route)
+    console.log(this.menus)
+  },
   methods: {
     filterMenu (items) {
       return items.filter(item => {

src/layout/index.vue

@@ -10,12 +10,17 @@
               v-for="(breadcrumb, index) in breadcrumbs"
               :key="index"
               :to="breadcrumb.disable ? undefined : { path: breadcrumb.path }"
-            >{{ breadcrumb.name }} {{ breadcrumb.type }}</el-breadcrumb-item>
+            >{{ breadcrumb.name }}</el-breadcrumb-item>
           </el-breadcrumb>
         </div>
         <div class="layout-body-header-right">
+          <div class="navBtn">
+            <el-badge :value="3">
+              <span class="el-icon-bell"></span>
+            </el-badge>
+          </div>
           <el-dropdown @command="handleCommand">
-            <div class="cursor-pointer username">
+            <div class="cursor-pointer username btn">
               <el-avatar icon="el-icon-user-solid" class="mr-3"></el-avatar>
               {{ userInfo.name || userInfo.username }}
             </div>
@@ -77,11 +82,11 @@ export default {
   computed: {
     ...mapGetters(['userInfo']),
     breadcrumbs () {
-      return this.$route.matched.map(e => {
+      return this.$route.matched.map((e, i) => {
         return {
           path: e.path,
           name: e.meta.title,
-          disable: e.meta.type === 0
+          disable: e.meta.hidden || i === 0
         }
       })
     }
@@ -134,7 +139,7 @@ export default {
           align-items: center;
           padding: 0 10px;
         }
-        .username:hover {
+        .btn:hover {
           background: #f5f7f9;
         }
       }
@@ -151,4 +156,16 @@ export default {
     }
   }
 }
+.navBtn {
+  height: 100%;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 24px;
+  color: #333;
+  &:hover {
+    background: #f5f7f9;
+  }
+}
 </style>

src/permission.js

@@ -104,6 +104,7 @@ function mapASyncRoutes (data) {
   return data.map(item => {
     item.meta.title = item.label
     item.meta.type = item.type
+    item.meta.hidden = item.hidden === 0
     item.component = item.component === 'Layout' ? Layout : loadView(item.component)
     if (item.children && item.children.length > 0) {
       item.children = mapASyncRoutes(item.children)

src/views/humanResources/panorama/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="white pa-3 content" v-loading="loading">
+    <m-card class="content-left mr-3">
+      <el-tree
+        ref="tree"
+        :data="treeItems"
+        :props="defaultProps"
+        node-key="organizationNo"
+        :expand-on-click-node="false"
+        highlight-current
+        :default-expanded-keys="[expandExpandedKeys]"
+        @node-click="handleNodeClick"
+      >
+        <template v-slot="{ data }">
+          <div class="text">
+            <div>{{ data.organizationName }}</div>
+            <div class="eye link" @click.stop="onJump(data)">
+              <span class="mdi mdi-eye"></span>
+              <span class="min ml-1">
+                详情
+              </span>
+            </div>
+          </div>
+        </template>
+      </el-tree>
+    </m-card>
+
+    <m-table
+      class="content-right"
+      :headers="headers"
+      :items="items"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      :total="total"
+      @page-change="onPageChange"
+    >
+      <template #parentOrganizationName="{ row }">
+        <span class="link" @click="onJump(row)">
+          {{ row.parentOrganizationName || '--' }}
+        </span>
+      </template>
+      <template #deptName="{ row }">
+        <span class="link" @click="onJump(row)">
+          {{ row.deptName || '--' }}
+        </span>
+      </template>
+      <template #employeeName="{ row }">
+        <span class="link" @click="onJump(row, true)">
+          {{ row.employeeName || '--' }}
+        </span>
+      </template>
+      <template #actions-header>
+        <el-input
+          v-model="searchQuery.employeeName"
+          size="mini"
+          placeholder="输入员工名字，按回车搜索"
+          @keydown.enter.native="onSearch"
+        ></el-input>
+      </template>
+    </m-table>
+  </div>
+</template>
+
+<script>
+import {
+  getOrganizationTree,
+  getOrganizationDetails
+} from '@/api/system'
+export default {
+  name: 'human-resources-panorama',
+  data () {
+    return {
+      searchQuery: {
+        organizationNo: null,
+        employeeName: null
+      },
+      loading: false,
+      defaultProps: {
+        children: 'child',
+        label: 'organizationName'
+      },
+      expandExpandedKeys: null,
+      treeItems: [],
+      pageInfo: {
+        current: 1,
+        size: 10
+      },
+      total: 0,
+      orders: [],
+      headers: [
+        { label: '上级机构', prop: 'parentOrganizationName' },
+        { label: '部门', prop: 'deptName' },
+        { label: '员工姓名', prop: 'employeeName', align: 'center' },
+        { label: '岗位', prop: 'postName' },
+        { label: '', prop: 'actions' }
+      ],
+      items: []
+    }
+  },
+  created () {
+    this.getDept()
+  },
+  methods: {
+    async getDept () {
+      try {
+        const { data } = await getOrganizationTree()
+        this.expandExpandedKeys = data.organizationNo
+        this.treeItems = [
+          data
+        ]
+        this.handleNodeClick({ organizationNo: data.organizationNo })
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(data.organizationNo)
+        })
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    async onInit () {
+      this.loading = true
+      try {
+        const { data } = await getOrganizationDetails({
+          ...this.searchQuery,
+          employeePage: {
+            ...this.pageInfo,
+            orders: this.orders
+          }
+        })
+        this.items = data.employees.records
+        this.total = data.employees.total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleNodeClick ({ organizationNo }) {
+      this.searchQuery.organizationNo = organizationNo
+      this.onInit()
+    },
+    onJump (data, employee) {
+      if (employee) {
+        window.open('/human-resources/panorama/details?passes=' + data.passes)
+      } else {
+        window.open('/human-resources/panorama/details?organizationNo=' + data.organizationNo)
+      }
+    },
+    onPageChange (index) {
+      this.pageInfo.current = index
+      this.onInit()
+    },
+    onSearch () {
+      this.pageInfo.current = 1
+      this.onInit()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  &-left {
+    width: 400px;
+    overflow: auto;
+    font-size: 14px;
+    .text {
+      display: flex;
+      justify-content: space-between;
+      flex: 1;
+      .eye {
+        position: absolute;
+        right: 0;
+        padding: 0 10px;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  &-right {
+    flex: 1;
+    width: 0;
+    overflow: auto;
+  }
+}
+.link {
+  cursor: pointer;
+  &:hover {
+    color: #409eff;
+  }
+}
+.min {
+  font-size: 12px;
+}
+</style>

src/views/humanResources/panorama/panoramaDetails.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'panorama-details'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/menu/menuEdit.vue

@@ -41,19 +41,7 @@ export default {
   data () {
     return {
       itemsParents: [],
-      editValues: {
-        parentId: null,
-        label: null,
-        type: null,
-        icon: null,
-        path: null,
-        component: null,
-        name: null,
-        code: null,
-        sort: null,
-        hidden: null,
-        keepAlive: null
-      },
+      editValues: {},
       currentNodeName: null,
       isEdit: null
     }
@@ -110,7 +98,7 @@ export default {
           hidden: [2].includes(type),
           type: 'input',
           options: { placeholder: '请输入组件地址' },
-          rules: [{ required: true, message: '请输入组件地址', trigger: 'change' }]
+          rules: [{ required: type !== 0, message: '请输入组件地址', trigger: 'change' }]
         },
         {
           label: '组件名称',