工资单

src/views/salary/payroll/index.vue

@@ -18,6 +18,7 @@
         <m-button text type="primary" @click="onDetail(row)">明细</m-button>
       </template>
     </m-table>
+    <payrollDetails ref="payrollDetailsRefs"></payrollDetails>
   </div>
 </template>
 
@@ -27,9 +28,12 @@ import {
   downloadPayroll
 } from '@/api/salary'
 import { downloadFile } from '@/utils'
-import { dateFormat } from '@/utils/date'
+import payrollDetails from './payrollDetails.vue'
 export default {
   name: 'salary-payroll',
+  components: {
+    payrollDetails
+  },
   data () {
     return {
       exportLoading: false,
@@ -49,18 +53,21 @@ export default {
         { label: '姓名', prop: 'employeeName', type: 'input', option: { placeholder: '请输入姓名' } }
       ],
       searchValues: {
-        month: dateFormat('YYYY-mm', new Date()),
+        month: null,
         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 }
+        { label: '机构', prop: 'organizationName' },
+        { label: '姓名', prop: 'employeeName', align: 'center' },
+        { label: '统一认证号', prop: 'unifiedCertificationNumber', align: 'center' },
+        { label: '绩效工资', prop: 'meritPay', align: 'center' },
+        // { label: '企业年金', prop: 'enterpriseAnnuity', align: 'center' },
+        // { label: '住房公积金', prop: 'housingProvidentFund', align: 'center' },
+        { label: '加班工资', prop: 'workOvertime', align: 'center' },
+        { label: '合计', prop: 'total', align: 'center' },
+        { label: '操作', prop: 'actions', width: 100, fixed: 'right' }
       ],
       items: [],
       loading: false,
@@ -95,7 +102,9 @@ export default {
       this.pageInfo.current = 1
       this.init()
     },
-    onDetail (item) {},
+    onDetail (item) {
+      this.$refs.payrollDetailsRefs.open(item)
+    },
     async onExport () {
       try {
         this.exportLoading = true

src/views/salary/payroll/payrollDetails.vue

@@ -0,0 +1,88 @@
+<template>
+  <m-dialog ref="dialog" :title="`${itemData.month} 工资单明细`" v-bind="$attrs" >
+    <div v-loading="loading"></div>
+    <!-- <el-descriptions :column="2" :border="true">
+      <el-descriptions-item :labelStyle="{'width': '200px'}">
+        <template slot="label">
+          用户名
+        </template>
+        {{ itemData.employeeName }}
+      </el-descriptions-item>
+      <el-descriptions-item :labelStyle="{'width': '200px'}">
+        <template slot="label">
+          机构
+        </template>
+        {{ itemData.organizationName }}
+      </el-descriptions-item>
+      <el-descriptions-item :labelStyle="{'width': '200px'}">
+        <template slot="label">
+          统一认证号
+        </template>
+        {{ itemData.unifiedCertificationNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item :labelStyle="{'width': '200px'}">
+        <template slot="label">
+          起薪类型
+        </template>
+        {{ itemData.payrollCategory }}
+      </el-descriptions-item>
+    </el-descriptions> -->
+    <el-descriptions :column="2" :border="true" class="mt-3">
+      <el-descriptions-item v-for="item in items" :key="item.label" :labelStyle="{'width': '150px'}">
+        <template slot="label">
+          {{ item.label }}
+        </template>
+        {{ itemData[item.value] }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </m-dialog>
+</template>
+
+<script>
+// import {
+//   getPayrollDetails
+// } from '@/api/salary'
+export default {
+  name: 'payroll-details',
+  data () {
+    return {
+      loading: false,
+      itemData: {},
+      items: [
+        { label: '用户名', value: 'employeeName' },
+        { label: '机构', value: 'organizationName' },
+        { label: '统一认证号', value: 'unifiedCertificationNumber' },
+        { label: '起薪类型', value: 'payrollCategory' },
+        { label: '交通补贴', value: 'commuteSubsidy' },
+        { label: '通讯补贴', value: 'communicationSubsidy' },
+        { label: '午餐费补贴', value: 'lunchSubsidy' },
+        { label: '岗位贡献补贴', value: 'jobContributionSubsidy' },
+        { label: '交流干部补贴', value: 'exchangeCadresSubsidy' },
+        { label: '网点岗位津贴', value: 'networkJobSubsidy' },
+        { label: '绩效工资', value: 'meritPay' },
+        { label: '网讯稿酬', value: 'newsSubsidy' },
+        { label: '加班工资', value: 'workOvertime' },
+        { label: '独生子女费', value: 'onlyChild' },
+        { label: '养老保险', value: 'pensionInsurance' },
+        { label: '医疗保险', value: 'medicalInsurance' },
+        { label: '失业保险', value: 'unemploymentInsurance' },
+        { label: '住房公积金', value: 'housingProvidentFund' },
+        { label: '企业年金', value: 'enterpriseAnnuity' },
+        { label: '个人所得税', value: 'individualIncomeTax' },
+        { label: '工资扣款', value: 'payrollDeduction' },
+        { label: '合计', value: 'total' }
+      ]
+    }
+  },
+  methods: {
+    async open (item) {
+      this.itemData = item
+      this.$refs.dialog.open()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>