历史配置

src/components/DrawerHistory/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="show"
+    :direction="direction"
+  >
+    <div class="pa-3" v-loading="startLoading">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(item, index) in items"
+          :key="index"
+          :timestamp="item[createDate]"
+          placement="top"
+        >
+          <m-card>
+            <slot name="panel" :item="item"></slot>
+          </m-card>
+        </el-timeline-item>
+      </el-timeline>
+      <no-more v-if="total === items.length"></no-more>
+      <div v-else class="text-center my-3">
+        <m-button text type="primary" :loading="loading" @click="onMore">查看更多</m-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import NoMore from '@/components/NoMore'
+export default {
+  name: 'drawer-history',
+  props: {
+    // 获取数据， 返回 { data: Array, total: Number }
+    getPage: {
+      type: Function,
+      default: () => {}
+    },
+    // 创建日期字段
+    createDate: {
+      type: String,
+      default: 'createDate'
+    }
+  },
+  components: {
+    NoMore
+  },
+  data () {
+    return {
+      title: '',
+      loading: false,
+      startLoading: false,
+      show: false,
+      direction: 'rtl',
+      pageInfo: {
+        size: 10,
+        current: 1
+      },
+      total: 0,
+      items: []
+    }
+  },
+  methods: {
+    async open (title) {
+      this.title = title
+      this.show = true
+      this.items = []
+      this.pageInfo.current = 1
+      this.startLoading = true
+      await this.onInit()
+      this.startLoading = false
+    },
+    async onInit () {
+      this.loading = true
+      try {
+        const { data, total } = await this.getPage(this.pageInfo)
+        console.log(data, total)
+        this.items.push(...data)
+        this.total = total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    onMore () {
+      this.pageInfo.current++
+      this.onInit()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/NoMore/index.vue

@@ -0,0 +1,20 @@
+<template>
+
+  <el-divider>
+    <span class="noMore">
+      没有更多了
+    </span>
+  </el-divider>
+</template>
+
+<script>
+export default {
+  name: 'no-more'
+}
+</script>
+
+<style lang="scss" scoped>
+.noMore {
+  color: #999;
+}
+</style>

src/layout/components/MenuSide.vue

@@ -52,10 +52,6 @@ export default {
       return findActive(paths)
     }
   },
-  created () {
-    console.log(this.$route)
-    console.log(this.menus)
-  },
   methods: {
     filterMenu (items) {
       return items.filter(item => {

src/views/humanResources/welfare/index.vue

@@ -21,10 +21,12 @@
         <m-button text type="primary" size="small" @click="onEdit(row)">编辑</m-button>
         <m-button text type="primary" size="small" @click="onEditRules(row)">规则配置</m-button>
         <m-button text type="danger" size="small" @click="onDelete(row)">删除</m-button>
+        <m-button text type="primary" size="small" @click="onHistory(row)">历史配置</m-button>
       </template>
     </m-table>
     <WelfareEdit ref="welfareEditRefs" @refresh="onInit"></WelfareEdit>
     <WelfareRules ref="WelfareRulesRefs" @refresh="onInit"></WelfareRules>
+    <welfareHistory ref="welfareHistoryRefs"></welfareHistory>
   </div>
 </template>
 
@@ -35,10 +37,12 @@ import {
 } from '@/api/welfare'
 import WelfareEdit from './welfareEdit.vue'
 import WelfareRules from './welfareRules'
+import welfareHistory from './welfareHistory'
 export default {
   name: 'human-resources-welfare',
   components: {
     WelfareEdit,
+    welfareHistory,
     WelfareRules
   },
   data () {
@@ -124,6 +128,9 @@ export default {
     onPageChange (page) {
       this.pageInfo.current = page
       this.onInit()
+    },
+    onHistory (row) {
+      this.$refs.welfareHistoryRefs.open(row)
     }
   }
 }

src/views/humanResources/welfare/welfareHistory.vue

@@ -0,0 +1,87 @@
+<template>
+  <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
+    <template #panel="{ item }">
+      <h3 class="mb-3 title">{{ item.name }}</h3>
+        <el-form label-position="left" class="m-form">
+          <el-form-item label="配置分类">
+            <span>{{ item.category }}</span>
+          </el-form-item>
+          <el-form-item label="数值">
+            <span>{{ item.value }}</span>
+          </el-form-item>
+          <el-form-item label="计算月份">
+            <span>{{ item.month }}</span>
+          </el-form-item>
+          <el-form-item label="描述">
+            <span>{{ item.tag }}</span>
+          </el-form-item>
+        </el-form>
+    </template>
+  </DrawerHistory>
+</template>
+
+<script>
+import {
+  getWelfarePage
+} from '@/api/welfare'
+import DrawerHistory from '@/components/DrawerHistory'
+import { dateFormat } from '@/utils/date'
+export default {
+  name: 'welfare-history',
+  components: {
+    DrawerHistory
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    async open (item) {
+      this.$refs.drawerHistoryRefs.open(item.name)
+    },
+    getPage (pageInfo) {
+      return new Promise((resolve, reject) => {
+        getWelfarePage({
+          page: {
+            ...pageInfo,
+            orders: [
+              {
+                asc: false,
+                column: 'create_date'
+              }
+            ]
+          },
+          history: 1,
+          uuid: this.uuid
+        }).then(({ data }) => {
+          resolve({
+            data: data.records.map(({ createDate, ...e }) => {
+              return {
+                ...e,
+                createDate: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(createDate))
+              }
+            }),
+            total: data.total
+          })
+        }).catch(reject)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.title {
+  color: #666;
+}
+::v-deep .m-form label{
+  width: 90px;
+  color: #99a9bf;
+  text-align: right;
+}
+::v-deep .m-form .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+</style>

src/views/salary/calculate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="white pa-3">
-    <div class="content pa-3">
+    <m-card shadow="never" class="content pa-3">
       <m-form ref="form" :items="items" v-model="query" label-width="300px">
         <template v-for="item in items" #[item.prop]>
           <el-upload
@@ -12,17 +12,17 @@
             :http-request="e => onImport(e, item.prop)"
             :on-remove="() => onRemove(item.prop)"
           >
-            <m-button slot="trigger" size="small">点击上传</m-button>
+            <m-button slot="trigger" size="small" type="primary">点击上传</m-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>
         </template>
       </m-form>
       <div class="buttons">
-        <m-button icon="el-icon-upload">上传</m-button>
-        <m-button icon="el-icon-s-tools">加工</m-button>
-        <m-button icon="el-icon-time">加工历史记录</m-button>
+        <m-button icon="el-icon-upload" type="primary" size="small">提交</m-button>
+        <m-button icon="el-icon-s-tools" type="primary" size="small">加工</m-button>
+        <m-button icon="el-icon-time" type="primary" size="small">加工历史记录</m-button>
         </div>
-    </div>
+    </m-card>
   </div>
 </template>
 

src/views/salary/config/configHistory.vue

@@ -0,0 +1,81 @@
+<template>
+  <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">
+    <template #panel="{ item }">
+      <h3 class="mb-3 title">{{ item.name }}</h3>
+      <el-form label-position="left" class="m-form">
+        <el-form-item label="配置分类">
+          <span>{{ item.category }}</span>
+        </el-form-item>
+        <el-form-item label="数值">
+          <span>{{ item.value }}</span>
+        </el-form-item>
+        <el-form-item label="计算月份">
+          <span>{{ item.month }}</span>
+        </el-form-item>
+        <el-form-item label="描述">
+          <span>{{ item.tag }}</span>
+        </el-form-item>
+      </el-form>
+    </template>
+  </DrawerHistory>
+</template>
+
+<script>
+import {
+  getConfigPage
+} from '@/api/salary'
+import DrawerHistory from '@/components/DrawerHistory'
+import { dateFormat } from '@/utils/date'
+export default {
+  name: 'config-history',
+  components: {
+    DrawerHistory
+  },
+  data () {
+    return {
+      uuid: null
+    }
+  },
+  methods: {
+    getPage (pageInfo) {
+      return new Promise((resolve, reject) => {
+        getConfigPage({
+          ...pageInfo,
+          history: 1,
+          uuid: this.uuid
+        }).then(({ data }) => {
+          resolve({
+            data: data.records.map(({ createDate, ...e }) => {
+              return {
+                ...e,
+                createDate: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(createDate))
+              }
+            }),
+            total: data.total
+          })
+        }).catch(reject)
+      })
+    },
+    async open (item) {
+      this.uuid = item.uuid
+      this.$refs.drawerHistoryRefs.open(`历史记录 - ${item.name}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  color: #666;
+}
+::v-deep .m-form label{
+  width: 90px;
+  color: #99a9bf;
+  text-align: right;
+}
+::v-deep .m-form .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+</style>

src/views/salary/config/index.vue

@@ -18,14 +18,17 @@
       <template #actions="{ row }">
         <m-button text type="primary" @click="onEdit(row)" size="small">编辑</m-button>
         <m-button text type="danger" @click="onDelete(row)" size="small">删除</m-button>
+        <m-button text type="primary" @click="onHistory(row)" size="small">历史配置记录</m-button>
       </template>
     </m-table>
     <config-edit ref="editRefs" :title="title" @refresh="init"></config-edit>
+    <ConfigHistory ref="configHistoryRefs"></ConfigHistory>
   </div>
 </template>
 
 <script>
 import ConfigEdit from './configEdit'
+import ConfigHistory from './configHistory.vue'
 import {
   getConfigPage,
   getConfigCateGories,
@@ -34,7 +37,7 @@ import {
 } from '@/api/salary'
 export default {
   name: 'salary-config',
-  components: { ConfigEdit },
+  components: { ConfigEdit, ConfigHistory },
   data () {
     return {
       title: '',
@@ -78,7 +81,8 @@ export default {
       try {
         const { data } = await getConfigPage({
           ...this.searchValues,
-          ...this.pageInfo
+          ...this.pageInfo,
+          history: 0
         })
         this.items = data.records
         this.total = data.total
@@ -136,6 +140,9 @@ export default {
     onPageChange (index) {
       this.pageInfo.current = index
       this.init()
+    },
+    onHistory (row) {
+      this.$refs.configHistoryRefs.open(row)
     }
   }
 }