员工历史进程

src/views/humanResources/roster/index.vue

@@ -29,11 +29,13 @@
       </template>
       <template #actions="{ row }" v-if="!$attrs.panorama">
         <m-button text type="primary" @click="onEdit(row)">编辑</m-button>
+        <m-button text type="primary" @click="onHistory(row)">变更历史</m-button>
         <m-button text type="danger" @click="onDelete(row)">删除</m-button>
       </template>
     </m-table>
     <RosterEdit ref="rosterEditRef" :title="title" @refresh="init"></RosterEdit>
     <RosterVersion ref="rosterVersionRefs"></RosterVersion>
+    <RosterHistory ref="rosterHistoryRefs"></RosterHistory>
   </div>
 </template>
 
@@ -41,6 +43,7 @@
 import { downloadFile } from '@/utils'
 import RosterEdit from './rosterEdit.vue'
 import RosterVersion from './rosterVersion.vue'
+import RosterHistory from './rosterHistory.vue'
 import {
   getRosterList,
   deleteRoster,
@@ -57,7 +60,7 @@ import {
 import { mapGetters } from 'vuex'
 export default {
   name: 'sys-roster',
-  components: { RosterEdit, RosterVersion },
+  components: { RosterEdit, RosterVersion, RosterHistory },
   data () {
     return {
       EMPLOYEE_STATUS,
@@ -114,22 +117,22 @@ export default {
     },
     headers () {
       const header = [
-        { label: '上级机构', prop: 'parentOrganizationName' },
-        { label: '部门', prop: 'deptName' },
-        { label: '通行证号', prop: 'passes' },
-        { label: '员工名称', prop: 'employeeName' },
-        { label: '工行时间', prop: 'tradeUnionsTime' },
-        { label: '员工状态', prop: 'employeeStatus' },
-        { label: '人员类别', prop: 'personnelCategory' },
-        { label: '岗位名称', prop: 'postName' },
-        { label: '岗位序列', prop: 'positionSequence' },
-        { label: '岗位类别', prop: 'positionCategory' },
-        { label: '职务层级', prop: 'jobLevel' },
-        { label: '薪酬档次', align: 'center', prop: 'salaryCategory' },
-        { label: '薪酬级别', align: 'center', prop: 'salaryLevel' }
+        { label: '上级机构', prop: 'parentOrganizationName', width: 120 },
+        { label: '部门', prop: 'deptName', width: 150 },
+        { label: '通行证号', prop: 'passes', width: 120 },
+        { label: '员工名称', prop: 'employeeName', width: 120 },
+        { label: '工行时间', prop: 'tradeUnionsTime', width: 120 },
+        { label: '员工状态', prop: 'employeeStatus', width: 120 },
+        { label: '人员类别', prop: 'personnelCategory', width: 120 },
+        { label: '岗位名称', prop: 'postName', width: 120 },
+        { label: '岗位序列', prop: 'positionSequence', width: 120 },
+        { label: '岗位类别', prop: 'positionCategory', width: 120 },
+        { label: '职务层级', prop: 'jobLevel', width: 120 },
+        { label: '薪酬档次', align: 'center', prop: 'salaryCategory', width: 100 },
+        { label: '薪酬级别', align: 'center', prop: 'salaryLevel', width: 100 }
       ]
       if (!this.$attrs.panorama) {
-        header.push({ label: '操作', prop: 'actions' })
+        header.push({ label: '操作', prop: 'actions', fixed: 'right', width: 200 })
       }
       return header
     }
@@ -196,6 +199,9 @@ export default {
         this.loading = false
       }
     },
+    onHistory (item) {
+      this.$refs.rosterHistoryRefs.open(item)
+    },
     onSearch () {
       this.pageInfo.current = 1
       this.init()

src/views/humanResources/roster/rosterHistory.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-drawer
+    title="员工信息变更历史"
+    :visible.sync="drawer"
+    direction="rtl"
+  >
+    <div class="pa-3">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(item, index) in items"
+          :key="index"
+          :timestamp="item.createDate"
+          placement="top"
+        >
+          <m-card>
+            <el-descriptions :column="2" border :label-style="{ width: '80px' }">
+              <el-descriptions-item
+                v-for="header in headers"
+                :key="header.prop + index"
+              >
+                <template slot="label">
+                  {{ header.label }}
+                </template>
+                {{ header.handle ? header.handle(item[header.prop]) : item[header.prop] }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </m-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import {
+  EMPLOYEE_STATUS
+} from '@/utils/dict'
+import {
+  getRosterList
+} from '@/api/system'
+export default {
+  name: 'rosterHistory',
+  data () {
+    return {
+      drawer: false,
+      loading: false,
+      items: [],
+      headers: [
+        { label: '上级机构', prop: 'parentOrganizationName' },
+        { label: '部门', prop: 'deptName' },
+        { label: '通行证号', prop: 'passes' },
+        { label: '员工名称', prop: 'employeeName' },
+        { label: '工行时间', prop: 'tradeUnionsTime' },
+        {
+          label: '员工状态',
+          prop: 'employeeStatus',
+          handle: (v) => {
+            const item = EMPLOYEE_STATUS.find(e => e.value === v)
+            return item.text
+          }
+        },
+        { label: '人员类别', prop: 'personnelCategory' },
+        { label: '岗位名称', prop: 'postName' },
+        { label: '岗位序列', prop: 'positionSequence' },
+        { label: '岗位类别', prop: 'positionCategory' },
+        { label: '职务层级', prop: 'jobLevel' },
+        { label: '薪酬档次', prop: 'salaryCategory' },
+        { label: '薪酬级别', prop: 'salaryLevel' }
+      ]
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    async open (item) {
+      this.drawer = true
+      try {
+        const { data } = await getRosterList({
+          page: { size: 9999, current: 1, orders: [{ column: 'create_date', asc: false }] },
+          entity: {
+            uuid: item.uuid,
+            history: 1
+          }
+        })
+        this.items = data.records
+      } catch (error) {
+        this.$message.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>