福利待遇

src/api/salary.js

@@ -31,3 +31,8 @@ export function addConfig (param) {
 export function updateConfig (param) {
   return http.put('/configurations', param)
 }
+
+// 福利待遇 - 分页查询
+export function getWelfarePage (param) {
+  return http.post('/subsidy/personnel/category/page', param)
+}

src/views/humanResources/welfare/index.vue

@@ -1,12 +1,33 @@
 <template>
-  <div>
-
+  <div class="white pa-3">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="福利待遇列表" name="welfareList">
+        <welfare-list></welfare-list>
+      </el-tab-pane>
+      <el-tab-pane label="福利类型" name="welfareType">
+        <welfare-type></welfare-type>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
+import welfareList from './welfareList.vue'
+import welfareType from './welfareType.vue'
 export default {
-  name: 'human-resources-welfare'
+  name: 'human-resources-welfare',
+  components: {
+    welfareList,
+    welfareType
+  },
+  data () {
+    return {
+      activeName: 'welfareList'
+    }
+  },
+  created () {
+    console.log(this.$route)
+  }
 }
 </script>
 

src/views/humanResources/welfare/welfareList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <m-search :items="searchItems" v-model="searchValues" @search="search" class="mb-3"></m-search>
+    <m-table
+      :items="items"
+      :headers="headers"
+      :loading="loading"
+      :total="total"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      @page-change="onPageChange"
+    ></m-table>
+  </div>
+</template>
+
+<script>
+import {
+  getWelfarePage
+} from '@/api/salary'
+export default {
+  name: 'welfare-list',
+  data () {
+    return {
+      searchItems: [
+        {
+          label: '业务类别',
+          name: 'name',
+          type: 'input',
+          option: {
+            placeholder: '请输入业务类别'
+          }
+        },
+        {
+          label: '职务/岗位',
+          name: 'jobNumber',
+          type: 'input',
+          option: {
+            placeholder: '请输入职务/岗位'
+          }
+        },
+        {
+          label: '补助分类',
+          name: 'jobNumber',
+          type: 'autocomplete',
+          option: {
+            placeholder: '请输入补助分类',
+            fetchSuggestions: this.fetchSuggestions
+          }
+        }
+      ],
+      searchValues: {},
+      headers: [
+        {
+          label: '姓名',
+          name: 'name'
+        },
+        {
+          label: '工号',
+          name: 'jobNumber'
+        },
+        {
+          label: '部门',
+          name: 'department'
+        }
+      ],
+      items: [],
+      loading: false,
+      total: 0,
+      pageInfo: {
+        current: 1,
+        size: 10
+      }
+
+    }
+  },
+  methods: {
+    async init () {
+      try {
+        const { data } = await getWelfarePage()
+        console.log(data)
+      } catch (error) {
+        this.$snackbar.error(error)
+      }
+    },
+    search () {
+      console.log(this.searchValues)
+    },
+    onPageChange (page) {
+      this.pageInfo.current = page
+      this.init()
+    },
+    fetchSuggestions () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/humanResources/welfare/welfareType.vue

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