工资单

src/api/salary.js

@@ -60,3 +60,13 @@ export function getComparisonConfirm (data) {
 export function confirmComparisonVersion (data) {
   return http.post('/employee/performance/confirmation/save', data)
 }
+
+// 工资单 - 分页查询
+export function getPayrollPage (data) {
+  return http.post('/employee/payroll/page', data)
+}
+
+// 工资单 - 导出报表
+export function downloadPayroll () {
+  return http.download('/employee/payroll/employee/download/export')
+}

src/views/salary/comparison/index.vue

@@ -43,7 +43,7 @@
                   <el-col class="col" :span="4">{{ list.dataType === 1 ? '手工录入' : '系统数据'}}</el-col>
                   <el-col class="col" :span="4">{{ list.createDate }}</el-col>
                   <el-col class="col" :span="4">
-                    <m-button v-if="checked"  type="text" size="small" icon="el-icon-checked" disabled>已使用当前版本</m-button>
+                    <m-button v-if="checked"  type="text" size="small" icon="el-icon-check" disabled>已使用当前版本</m-button>
                     <m-button
                       v-else
                       type="primary"

src/views/salary/payroll/index.vue

@@ -1,12 +1,113 @@
 <template>
-  <div>
-
+  <div class="pa-3 white">
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
+      <template #button>
+        <m-button type="primary" icon="el-icon-download" :loading="exportLoading" @click="onExport">导出报表</m-button>
+      </template>
+    </m-search>
+    <m-table
+      :items="items"
+      :headers="headers"
+      :loading="loading"
+      :total="total"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      @page-change="onPageChange"
+    >
+      <template #actions="{ row }">
+        <m-button text type="primary" @click="onDetail(row)">明细</m-button>
+      </template>
+    </m-table>
   </div>
 </template>
 
 <script>
+import {
+  getPayrollPage,
+  downloadPayroll
+} from '@/api/salary'
+import { downloadFile } from '@/utils'
+import { dateFormat } from '@/utils/date'
 export default {
-  name: 'salary-payroll'
+  name: 'salary-payroll',
+  data () {
+    return {
+      exportLoading: false,
+      searchItems: [
+        {
+          label: '月份',
+          prop: 'month',
+          type: 'date',
+          option: {
+            placeholder: '请选择月份',
+            type: 'month',
+            valueFormat: 'yyyy-MM',
+            format: 'yyyy 年 MM 月'
+          }
+        },
+        { label: '部门', prop: 'organizationName', type: 'input', option: { placeholder: '请输入部门' } },
+        { label: '姓名', prop: 'employeeName', type: 'input', option: { placeholder: '请输入姓名' } }
+      ],
+      searchValues: {
+        month: dateFormat('YYYY-mm', new Date()),
+        organizationName: null,
+        employeeName: null
+      },
+      headers: [
+        { label: '机构', prop: 'organizationName' },
+        { label: '姓名', prop: 'employeeName' },
+        { label: '统一认证号', prop: 'unifiedCertificationNumber' },
+        { label: '月份', prop: 'month' },
+        { label: '税前收入', prop: 'month' },
+        { label: '税后收入', prop: 'month' },
+        { label: '操作', prop: 'action', align: 'center', width: 100 }
+      ],
+      items: [],
+      loading: false,
+      total: 0,
+      pageInfo: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    async init () {
+      try {
+        const { data } = await getPayrollPage({
+          page: this.pageInfo,
+          entity: this.searchValues
+        })
+        this.items = data.records
+        this.total = data.total
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    onPageChange (index) {
+      this.pageInfo.current = index
+      this.init()
+    },
+    onSearch () {
+      this.pageInfo.current = 1
+      this.init()
+    },
+    onDetail (item) {},
+    async onExport () {
+      try {
+        this.exportLoading = true
+        const { data, name } = await downloadPayroll()
+        downloadFile(data, name)
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.exportLoading = false
+      }
+    }
+  }
 }
 </script>