工资单

src/views/oa/salary_management/personnelSalary/Payroll.vue

@@ -84,6 +84,9 @@
   
       <!-- 表单区域 -->
       <PayrollDetail ref="PayrollDetail"></PayrollDetail>
+      <AnnualLeavePayroll ref="AnnualLeavePayroll"></AnnualLeavePayroll>
+      <OvertimePayroll ref="OvertimePayroll"></OvertimePayroll>
+      <uploadModal ref="uploadModal"></uploadModal>
     </a-card>
   </template>
   
@@ -93,12 +96,18 @@
     import { getAction } from '@/api/manage'
     import moment from 'moment'
     import PayrollDetail from './modules/PayrollDetail.vue'
+    import AnnualLeavePayroll from './modules/AnnualLeavePayroll.vue'
+    import OvertimePayroll from './modules/OvertimePayroll.vue'
+    import uploadModal from './modules/uploadModal.vue'
     export default {
       name: "Payroll",
       mixins: [JeecgListMixin],
       components: {
         moment,
-        PayrollDetail
+        PayrollDetail,
+        uploadModal,
+        AnnualLeavePayroll,
+        OvertimePayroll
       },
       data () {
         return {
@@ -158,7 +167,7 @@
             },
           ],
           queryParam:{},
-          dataSource:[{}],
+          dataSource:[],
           // 请求参数
         //   url: {
 
@@ -179,10 +188,16 @@
 
         },
         createPayroll(){
-
+          this.$refs.uploadModal.visible = true
         },
         handleDetail(record){
+          if(record.type=='加班费'){
+            this.$refs.OvertimePayroll.visible = true
+          }else if(record.type=='年休假补贴'){
+            this.$refs.AnnualLeavePayroll.visible = true
+          }else if(record.type=='月度工资'){
             this.$refs.PayrollDetail.visible = true
+          }
         },
         handleDownload(record){
 

src/views/oa/salary_management/personnelSalary/modules/AnnualLeavePayroll.vue

@@ -0,0 +1,253 @@
+<template>
+    <div class="reply" ref = "replyModal">
+      <a-modal
+        title="年休工资单"
+        width="85%"
+        :visible="visible"
+        :confirmLoading="loading"
+        :getContainer ='()=>$refs.replyModal'
+        @cancel="handleCancel"
+        destroyOnClose
+       >
+            <template #footer>
+                <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
+            </template>
+            <div class="table-page-search-wrapper">
+                <a-form-model layout="inline" ref="form" :model="formState" >
+                    <a-row :gutter="24">
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="时间"  prop="totalNum">
+                                <a-input placeholder="" v-model="formState.DateTime" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="版本" >
+                                <a-input placeholder="请输入" v-model="formState.version"  />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="姓名"  >
+                                <a-input placeholder="请输入" v-model="formState.name" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label=""  >
+                                <a-button type="primary" icon="search" @click="searchSonList">查询</a-button>
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :md="24" :sm="8"> 
+                            <a-form-model-item label="备注"  class="nresume" style="height:100px !important">
+                                <a-input type="textarea" placeholder="请输入" v-model="formState.demo" />
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                </a-form-model>
+                <a-table
+                    bordered
+                    :columns="columns"
+                    :data-source="dataSource"
+                    :loading="loading"
+                    :scroll="{x: 3500 ,y:300}"
+                    :pagination="false"
+                >
+                </a-table>
+            </div>
+      </a-modal>
+    </div>
+</template>
+<script>
+    
+      import moment from 'moment'
+      import pick from 'lodash.pick'
+      import { FormTypes } from '@/utils/JEditableTableUtil'
+      import { putAction,getAction } from '@/api/manage'
+      export default {
+        name: 'AnnualLeavePayroll',
+        components: {
+            moment,
+        },
+        data() {
+          return {
+              formState:{},
+              dataSource: [{}],
+              visible:false,
+              loading:false,
+              columns: [
+                {
+                    title: '序号',
+                    align:"center",
+                    width:'2%',
+                    dataIndex: 'index',
+                    customRender:function (t, r, index) {
+                        return parseInt(index)+1;
+                    }
+                },
+                {
+                    title: '编号',
+                    align: "center",
+                    dataIndex: 'number',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '姓名',
+                    align: "center",
+                    dataIndex: 'name',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '基本薪资',
+                    align: "center",
+                    dataIndex: 'organization',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '话费补贴',
+                    align: "center",
+                    dataIndex: 'salaryCardNumber',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '午餐补贴',
+                    align: "center",
+                    dataIndex: 'singlesWeekendsOff',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '住房补贴',
+                    align: "center",
+                    dataIndex: 'workingHours',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '交通补贴',
+                    align: "center",
+                    dataIndex: 'attendanceDays',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '全勤奖',
+                    align: "center",
+                    dataIndex: 'telephoneSubsidy',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '合计应发',
+                    align: "center",
+                    dataIndex: 'lunchSubsidy',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '社保',
+                    align: "center",
+                    dataIndex: 'housingSubsidies',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '公积金',
+                    align: "center",
+                    dataIndex: 'transportationSubsidies',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '个税',
+                    align: "center",
+                    dataIndex: 'fullAttendanceAward',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '迟到',
+                    align: "center",
+                    dataIndex: 'endowmentInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '事假',
+                    align: "center",
+                    dataIndex: 'unemploymentInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '病假',
+                    align: "center",
+                    dataIndex: 'medicalInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '婚假',
+                    align: "center",
+                    dataIndex: 'accumulationFund',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '丧假',
+                    align: "center",
+                    dataIndex: 'salaryDeduction',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '合计应扣',
+                    align: "center",
+                    dataIndex: 'latenessTimes',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '实发合计',
+                    align: "center",
+                    dataIndex: 'lateDeductionFees',
+                    ellipsis: true,
+                    width:'4%'
+                },
+             ]
+          }
+        },
+        created(){
+        },
+        watch: {
+        },
+        methods: {
+            handleCancel(){
+                this.visible = false
+            },
+            searchSonList(){
+
+            }
+        }
+    }
+    </script>
+    
+    <style scoped lang="less">
+    /deep/ .nresume .ant-input{
+      height: 100px !important;
+    }
+
+    /deep/ .ant-select{
+      width: 100%;
+    }
+    .form-table-heard:before {
+          content: '*';
+          color: red;
+    }
+    /deep/ .ant-calendar-picker{
+      width: 113px !important;
+    }
+    </style>

src/views/oa/salary_management/personnelSalary/modules/OvertimePayroll.vue

@@ -0,0 +1,253 @@
+<template>
+    <div class="reply" ref = "replyModal">
+      <a-modal
+        title="加班工资单"
+        width="85%"
+        :visible="visible"
+        :confirmLoading="loading"
+        :getContainer ='()=>$refs.replyModal'
+        @cancel="handleCancel"
+        destroyOnClose
+       >
+            <template #footer>
+                <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
+            </template>
+            <div class="table-page-search-wrapper">
+                <a-form-model layout="inline" ref="form" :model="formState" >
+                    <a-row :gutter="24">
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="时间"  prop="totalNum">
+                                <a-input placeholder="" v-model="formState.DateTime" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="版本" >
+                                <a-input placeholder="请输入" v-model="formState.version"  />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="姓名"  >
+                                <a-input placeholder="请输入" v-model="formState.name" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label=""  >
+                                <a-button type="primary" icon="search" @click="searchSonList">查询</a-button>
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :md="24" :sm="8"> 
+                            <a-form-model-item label="备注"  class="nresume" style="height:100px !important">
+                                <a-input type="textarea" placeholder="请输入" v-model="formState.demo" />
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                </a-form-model>
+                <a-table
+                    bordered
+                    :columns="columns"
+                    :data-source="dataSource"
+                    :loading="loading"
+                    :scroll="{x: 3500 ,y:300}"
+                    :pagination="false"
+                >
+                </a-table>
+            </div>
+      </a-modal>
+    </div>
+</template>
+<script>
+    
+      import moment from 'moment'
+      import pick from 'lodash.pick'
+      import { FormTypes } from '@/utils/JEditableTableUtil'
+      import { putAction,getAction } from '@/api/manage'
+      export default {
+        name: 'OvertimePayroll',
+        components: {
+            moment,
+        },
+        data() {
+          return {
+              formState:{},
+              dataSource: [{}],
+              visible:false,
+              loading:false,
+              columns: [
+                {
+                    title: '序号',
+                    align:"center",
+                    width:'2%',
+                    dataIndex: 'index',
+                    customRender:function (t, r, index) {
+                        return parseInt(index)+1;
+                    }
+                },
+                {
+                    title: '编号',
+                    align: "center",
+                    dataIndex: 'number',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '姓名',
+                    align: "center",
+                    dataIndex: 'name',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '基本薪资',
+                    align: "center",
+                    dataIndex: 'organization',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '话费补贴',
+                    align: "center",
+                    dataIndex: 'salaryCardNumber',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '午餐补贴',
+                    align: "center",
+                    dataIndex: 'singlesWeekendsOff',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '住房补贴',
+                    align: "center",
+                    dataIndex: 'workingHours',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '交通补贴',
+                    align: "center",
+                    dataIndex: 'attendanceDays',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '全勤奖',
+                    align: "center",
+                    dataIndex: 'telephoneSubsidy',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '合计应发',
+                    align: "center",
+                    dataIndex: 'lunchSubsidy',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '社保',
+                    align: "center",
+                    dataIndex: 'housingSubsidies',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '公积金',
+                    align: "center",
+                    dataIndex: 'transportationSubsidies',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '个税',
+                    align: "center",
+                    dataIndex: 'fullAttendanceAward',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '迟到',
+                    align: "center",
+                    dataIndex: 'endowmentInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '事假',
+                    align: "center",
+                    dataIndex: 'unemploymentInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '病假',
+                    align: "center",
+                    dataIndex: 'medicalInsurance',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '婚假',
+                    align: "center",
+                    dataIndex: 'accumulationFund',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '丧假',
+                    align: "center",
+                    dataIndex: 'salaryDeduction',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '合计应扣',
+                    align: "center",
+                    dataIndex: 'latenessTimes',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '实发合计',
+                    align: "center",
+                    dataIndex: 'lateDeductionFees',
+                    ellipsis: true,
+                    width:'4%'
+                },
+             ]
+          }
+        },
+        created(){
+        },
+        watch: {
+        },
+        methods: {
+            handleCancel(){
+                this.visible = false
+            },
+            searchSonList(){
+
+            }
+        }
+    }
+    </script>
+    
+    <style scoped lang="less">
+    /deep/ .nresume .ant-input{
+      height: 100px !important;
+    }
+
+    /deep/ .ant-select{
+      width: 100%;
+    }
+    .form-table-heard:before {
+          content: '*';
+          color: red;
+    }
+    /deep/ .ant-calendar-picker{
+      width: 113px !important;
+    }
+    </style>

src/views/oa/salary_management/personnelSalary/modules/PayrollDetail.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="reply" ref = "replyModal">
       <a-modal
-        title="考勤明细"
+        title="月度工资单"
         width="85%"
         :visible="visible"
         :confirmLoading="loading"
@@ -17,24 +17,29 @@
                     <a-row :gutter="24">
                         <a-col :md="6" :sm="8">
                             <a-form-model-item label="时间"  prop="totalNum">
-                                <a-input placeholder="" v-model="formState.DateTime" disabled="false"/>
+                                <a-input placeholder="" v-model="formState.DateTime" />
                             </a-form-model-item>
                         </a-col>
                         <a-col :md="6" :sm="8">
                             <a-form-model-item label="版本" >
-                                <a-input placeholder="请输入" v-model="formState.version" disabled="false" />
+                                <a-input placeholder="请输入" v-model="formState.version"  />
                             </a-form-model-item>
                         </a-col>
                         <a-col :md="6" :sm="8">
                             <a-form-model-item label="姓名"  >
-                                <a-input placeholder="请输入" v-model="formState.name" disabled/>
+                                <a-input placeholder="请输入" v-model="formState.name" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label=""  >
+                                <a-button type="primary" icon="search" @click="searchSonList">查询</a-button>
                             </a-form-model-item>
                         </a-col>
                     </a-row>
                     <a-row :gutter="24">
                         <a-col :md="24" :sm="8"> 
                             <a-form-model-item label="备注"  class="nresume" style="height:100px !important">
-                                <a-input type="textarea" placeholder="请输入" v-model="formState.demo" disabled/>
+                                <a-input type="textarea" placeholder="请输入" v-model="formState.demo" />
                             </a-form-model-item>
                         </a-col>
                     </a-row>
@@ -222,6 +227,9 @@
         methods: {
             handleCancel(){
                 this.visible = false
+            },
+            searchSonList(){
+
             }
         }
     }

src/views/oa/salary_management/personnelSalary/modules/uploadModal.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="reply" ref = "replyModal">
+      <a-modal
+        title="生成工资单"
+        width="25%"
+        :visible="visible"
+        :confirmLoading="loading"
+        :getContainer ='()=>$refs.replyModal'
+        @cancel="handleCancel"
+        destroyOnClose
+       >
+            <template #footer>
+                <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
+                <a-button  @click="handleOk" type="primary" style="margin-left: 8px;">确认</a-button>
+            </template>
+            <div class="table-page-search-wrapper">
+                <a-form-model layout="inline" ref="form" :model="formState" >
+                    <a-row :gutter="24">
+                        <a-col :md="24" >
+                            <a-form-model-item label="年月"  prop="name">
+                                <a-month-picker placeholder="请选择" v-model="formState.yearMonth" @change="onChange" style="width:100% !important"/>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="24">
+                            <a-form-model-item label="类型"  prop="totalNum">
+                                <a-select  v-model="formState.type">
+                                    <a-select-option value="加班费">加班费</a-select-option>
+                                    <a-select-option value="年休假补贴">年休假补贴</a-select-option>
+                                    <a-select-option value="月底工资">月底工资</a-select-option>
+                                </a-select>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="24">
+                            <a-form-model-item label="文件" >
+                                <a-upload name="file" :multiple="false"  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"  :headers="headers"   @change="handleChange" >
+                                    <a-button> <a-icon type="upload" /> 上  传 </a-button>
+                                </a-upload>
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                </a-form-model>
+            </div>
+      </a-modal>
+    </div>
+</template>
+<script>
+    
+      import moment from 'moment'
+      import pick from 'lodash.pick'
+      import { FormTypes } from '@/utils/JEditableTableUtil'
+      import { putAction,getAction } from '@/api/manage'
+      export default {
+        name: 'uploadModal',
+        components: {
+            moment,
+        },
+        data() {
+          return {
+              formState:{},
+              dataSource: [{}],
+              visible:false,
+              loading:false,
+              headers: {
+                authorization: 'authorization-text',
+             },
+            
+          }
+        },
+        created(){
+        },
+        watch: {
+        },
+        methods: {
+            handleCancel(){
+                this.visible = false
+            },
+            handleOk(){
+
+            },
+            onChange(data){
+            },
+            handleChange(){
+
+            }
+        }
+    }
+    </script>
+    
+    <style scoped lang="less">
+    /deep/ .nresume .ant-input{
+      height: 100px !important;
+    }
+
+    /deep/ .ant-select{
+      width: 100%;
+    }
+    .form-table-heard:before {
+          content: '*';
+          color: red;
+    }
+    /deep/ .ant-calendar-picker{
+      width: 113px !important;
+    }
+    /deep/.ant-modal-root>.ant-modal-wrap>.ant-modal {
+      min-width: 0 !important;
+    }
+    </style>