基础信息

src/styles/index.scss

@@ -62,6 +62,14 @@ $max-classes: 10;
   background-color: white;
 }
 
+.text-link {
+  color: #409eff;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    color: #409eff;
+  }
+}
 
 .text-right {
   text-align: right;

src/views/humanResources/panorama/dynamic/panoramaDetailsBaseInfo.vue

@@ -1,20 +1,148 @@
 <template>
-  <div>
-    <el-empty description="暂无数据"></el-empty>
+  <div v-loading="loading">
+    <m-card>
+      <el-descriptions :column="3" border>
+        <el-descriptions-item
+          v-for="list in lists"
+          :key="list.prop"
+          :label="list.label"
+        >
+        {{ itemData[list.prop] }}
+          <!-- <el-tag>{{ itemData[list.prop] }}</el-tag> -->
+        </el-descriptions-item>
+      </el-descriptions>
+      <m-table
+        v-if="type === 'organization'"
+        card-title="下级机构"
+        class="mt-3"
+        shadow="never"
+        :headers="headers"
+        :items="itemData.items"
+      >
+        <template #organizationName="{ row }">
+          <span class="text-link" @click="onJump(row.organizationNo)">{{ row.organizationName }}</span>
+        </template>
+      </m-table>
+    </m-card>
   </div>
 </template>
 
 <script>
+import {
+  getRosterList,
+  getOrganizationDetails
+} from '@/api/system'
+import qs from 'qs'
 export default {
   name: 'panoramaDetailsBaseInfo',
+  data () {
+    return {
+      headers: [
+        { label: '机构名称', prop: 'organizationName' },
+        { label: '机构类型', prop: 'organizationCategory' },
+        { label: '上级机构', prop: 'parentOrganizationName' },
+        { label: '上级机构类型', prop: 'parentOrganizationCategory' }
+      ],
+      itemData: {},
+      loading: false,
+      type: 'employee',
+      item: {}
+    }
+  },
+  computed: {
+    lists () {
+      if (this.type === 'employee') {
+        return [
+          { label: '员工名称', prop: 'employeeName' },
+          { label: '部门', prop: 'deptName' },
+          { label: '上级机构', prop: 'parentOrganizationName' },
+          { label: '人员类别', prop: 'personnelCategory' },
+          { label: '岗位名称', prop: 'postName' },
+          { label: '岗位序列', prop: 'positionSequence' },
+          { label: '岗位类别', prop: 'positionCategory' },
+          { label: '职务层级', prop: 'jobLevel' },
+          { label: '通行证号', prop: 'passes' },
+          { label: '工行时间', prop: 'tradeUnionsTimeText' },
+          { label: '薪酬档次', prop: 'salaryCategory' },
+          { label: '薪酬级别', prop: 'salaryLevel' }
+        ]
+      }
+      return [
+        { prop: 'organizationName', label: '机构名称' },
+        { prop: 'organizationCategory', label: '机构类型' },
+        { prop: 'organizationNo', label: '机构编码' },
+        { prop: 'parentOrganizationName', label: '上级机构' },
+        { prop: 'parentOrganizationCategory', label: '上级机构类型' },
+        { prop: 'parentOrganizationNo', label: '上级机构编码' },
+        { prop: 'employeeTotal', label: '员工数' }
+      ]
+    }
+  },
   methods: {
+    // 入口执行方法
     onInitPanorama (organizationNo, employeeNo) {
       if (employeeNo) {
         // 个人全景
+        this.type = 'employee'
+        this.getEmployeeInfo(employeeNo)
         return
       }
       // 机构全景
-      console.log('机构全景')
+      this.type = 'organization'
+      this.getOrganizationInfo(organizationNo)
+    },
+    async getEmployeeInfo (personnelCode) {
+      this.loading = true
+      try {
+        const { data } = await getRosterList({
+          entity: {
+            personnelCode
+          }
+        })
+        this.itemData = data.records.map(e => {
+          const date = new Date(e.tradeUnionsTime)
+          // 获取年、月、日
+          const year = date.getFullYear()
+          const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以要加1
+          const day = String(date.getDate()).padStart(2, '0')
+          return {
+            ...e,
+            tradeUnionsTimeText: `${year}年${month}月${day}日`
+          }
+        }).pop() || {}
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getOrganizationInfo (organizationNo) {
+      this.loading = true
+      try {
+        const { data } = await getOrganizationDetails({
+          organizationNo
+        })
+        this.itemData = {
+          ...data.organization,
+          employeeTotal: data.employees.total,
+          items: data.childOrganization
+        }
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    onJump (organizationNo, employee) {
+      const _ROOT = this.$route.path
+      const query = {
+        organizationNo: organizationNo
+      }
+      if (employee) {
+        query.employeeNo = employee.personnelCode
+        query.employeeName = employee.employeeName
+      }
+      window.open(`${_ROOT}?${qs.stringify(query)}`)
     }
   }
 }

src/views/humanResources/panorama/index.vue

@@ -14,7 +14,7 @@
         <template v-slot="{ data }">
           <div class="text">
             <div>{{ data.organizationName }}</div>
-            <div class="eye link" @click.stop="onJump(data.organizationNo)">
+            <div class="eye text-link" @click.stop="onJump(data.organizationNo)">
               <span class="mdi mdi-eye"></span>
               <span class="min ml-1">
                 详情
@@ -35,17 +35,17 @@
       @page-change="onPageChange"
     >
       <template #parentOrganizationName="{ row }">
-        <span class="link" @click="onJump(row.parentOrganizationNo)">
+        <span class="text-link" @click="onJump(row.parentOrganizationNo)">
           {{ row.parentOrganizationName || '--' }}
         </span>
       </template>
       <template #deptName="{ row }">
-        <span class="link" @click="onJump(row.organizationNo)">
+        <span class="text-link" @click="onJump(row.organizationNo)">
           {{ row.deptName || '--' }}
         </span>
       </template>
       <template #employeeName="{ row }">
-        <span class="link" @click="onJump(row.organizationNo, row)">
+        <span class="text-link" @click="onJump(row.organizationNo, row)">
           {{ row.employeeName || '--' }}
         </span>
       </template>
@@ -189,14 +189,6 @@ export default {
     overflow: auto;
   }
 }
-.link {
-  color: #409eff;
-  text-decoration: underline;
-  cursor: pointer;
-  &:hover {
-    color: #409eff;
-  }
-}
 .min {
   font-size: 12px;
 }

src/views/humanResources/roster/index.vue

@@ -169,7 +169,7 @@ export default {
           const day = String(date.getDate()).padStart(2, '0')
           return {
             ...e,
-            tradeUnionsTimeText: `${year}${month}${day}`
+            tradeUnionsTimeText: `${year}年${month}月${day}日`
           }
         })
         this.total = data.total