工资单页面

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

@@ -17,7 +17,7 @@
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="时间">
-                <a-range-picker v-model="Date"  style="width: 100%;" @change="changeStartDate" />
+                <a-range-picker v-model="DateTime"  style="width: 100%;" @change="changeStartDate" />
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -68,7 +68,7 @@
           :columns="columns"
           :dataSource="dataSource"
           :pagination="ipagination"
-          :scroll="{x: 2000,y:400}"
+          :scroll="{x: 1000}"
           :loading="loading"
           :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
           @change="handleTableChange">
@@ -85,7 +85,7 @@
       <!-- table区域-end -->
   
       <!-- 表单区域 -->
-
+      <PayrollDetail ref="PayrollDetail"></PayrollDetail>
     </a-card>
   </template>
   
@@ -94,26 +94,25 @@
     import { JeecgListMixin } from '@/mixins/JeecgListMixin'
     import { getAction } from '@/api/manage'
     import moment from 'moment'
-    
-  
+    import PayrollDetail from './modules/PayrollDetail.vue'
     export default {
       name: "Payroll",
       mixins: [JeecgListMixin],
       components: {
-        moment
-          
+        moment,
+        PayrollDetail
       },
       data () {
         return {
           description: '工资单列表',
-          Date:[],
+          DateTime:[],
           selectedRowKeys:[],
           selectedRows:[],
           // 表头
           columns: [
             {
               title: '序号',
-              width: 40,
+              width: 80,
               align:"center",
               dataIndex: 'code'
             },
@@ -156,15 +155,16 @@
               title: '操作',
               align:"center",
               dataIndex: 'operation',
+              width: 200,
               scopedSlots: { customRender: 'operation' } 
             },
           ],
           queryParam:{},
           dataSource:[{}],
           // 请求参数
-          url: {
+        //   url: {
 
-             },
+        //      },
           }
         },
       computed: {},
@@ -173,7 +173,7 @@
       },
       methods: {
         changeStartDate(data){
-            this.Date = data
+            this.DateTime = data
             this.queryParam.Date_begin = data.length==2?moment(data[0]).format('YYYY-MM-DD'):''
             this.queryParam.Date_end = data.length==2?moment(data[1]).format('YYYY-MM-DD'):''
         },
@@ -190,7 +190,7 @@
 
         },
         handleDetail(record){
-
+            this.$refs.PayrollDetail.visible = true
         },
         handleDownload(record){
 

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

@@ -0,0 +1,276 @@
+<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="name">
+                                <a-input  v-model="formState.organization" disabled/>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-model-item label="考勤时间"  prop="totalNum">
+                                <a-input placeholder="" v-model="formState.DateTime" disabled="false"/>
+                            </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-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-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-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: 'PayrollDetail',
+        components: {
+            moment,
+        },
+        data() {
+          return {
+              formState:{},
+              dataSource: [{}],
+              visible:false,
+              loading:false,
+              columns: [
+                {
+                    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%'
+                },
+                {
+                    title: '事假时间',
+                    align: "center",
+                    dataIndex: 'personalLeaveTime',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '病假时间',
+                    align: "center",
+                    dataIndex: 'sickLeaveTime',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '婚假时间',
+                    align: "center",
+                    dataIndex: 'marriageLeaveTime',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '丧假时间',
+                    align: "center",
+                    dataIndex: 'funeralLeaveTime',
+                    ellipsis: true,
+                    width:'4%'
+                },
+                {
+                    title: '年假时间',
+                    align: "center",
+                    dataIndex: 'annualLeaveTime',
+                    ellipsis: true,
+                    width:'4%'
+                },
+             ]
+          }
+        },
+        created(){
+        },
+        watch: {
+        },
+        methods: {
+            handleCancel(){
+                this.visible = false
+            }
+        }
+    }
+    </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>