cd-work-flow-web/src/views/oa/salary_management/Attendance/modules/AttendancelDetail.vue

<template>
    <div class="reply" ref = "replyModal">
      <a-modal
        title="考勤明细"
        width="100%"
        :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="8" :sm="8">
                            <a-form-model-item label="组织"  prop="name">
                                <a-select  v-model="formState.orgName" show-search :filterOption="filterOption" allowClear>
                                    <a-select-option value="">所有</a-select-option>
                                    <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="8" :sm="8">
                            <a-form-model-item label="姓名"  >
                                <j-search-select-tag v-model="formState.name" placeholder="请选择用户名称" 
                                    dict="sys_user,realname,realname" @search="searchName" allowClear/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :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-form-model>
                <a-table
                    bordered
                    :columns="columns"
                    :data-source="dataSource"
                    :loading="loading"
                    :scroll="{x: 3000 ,y:400}"
                    :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'
      import JEllipsis from '@/components/jeecg/JEllipsis'
      import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
      export default {
        name: 'AttendancelDetail',
        components: {
            moment,
            JEllipsis,
            JSearchSelectTag
        },
        data() {
          let ellipsis = (v, l) => <j-ellipsis value={v} length={l} />
          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: 'code',
                    ellipsis: true,
                    customRender: (t) => ellipsis(t,7),
                    width:'3%'
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'name',
                    ellipsis: true,
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '组织',
                    align: "center",
                    dataIndex: 'orgName',
                    ellipsis: true,
                    width:'3%'
                },
                {
                    title: '工资卡号',
                    align: "center",
                    dataIndex: 'cardNo',
                    ellipsis: true,
                    customRender: (t) => ellipsis(t,19),
                    width:'6%'
                },
                {
                    title: '单双休',
                    align: "center",
                    dataIndex: 'restMode',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '工时/天',
                    align: "center",
                    dataIndex: 'workingHours',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '出勤天数',
                    align: "center",
                    dataIndex: 'attendanceDays',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '话费补贴',
                    align: "center",
                    dataIndex: 'phoneBill',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '午餐补贴',
                    align: "center",
                    dataIndex: 'lunch',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '住房补贴',
                    align: "center",
                    dataIndex: 'housingSubsidies',
                    customRender: (t) => ellipsis(t,3),
                    width:'3%'
                },
                {
                    title: '交通补贴',
                    align: "center",
                    dataIndex: 'transportation',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '全勤奖',
                    align: "center",
                    dataIndex: 'fullAttendance',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '养老保险',
                    align: "center",
                    dataIndex: 'endowmentInsurance',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '失业保险',
                    align: "center",
                    dataIndex: 'unemploymentInsurance',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '医疗保险',
                    align: "center",
                    dataIndex: 'medicalInsurance',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '公积金',
                    align: "center",
                    dataIndex: 'accumulationFund',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '工资抵扣',
                    align: "center",
                    dataIndex: 'deduction',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '迟到次数',
                    align: "center",
                    dataIndex: 'latenessTimes',
                    customRender: (t) => ellipsis(t,3),
                    width:'2.5%'
                },
                {
                    title: '迟到扣费',
                    align: "center",
                    dataIndex: 'latenessCost',
                    ellipsis: true,
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '事假时间(分)',
                    align: "center",
                    dataIndex: 'personalLeave',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '病假时间(分)',
                    align: "center",
                    dataIndex: 'sickLeave',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '婚假时间(分)',
                    align: "center",
                    dataIndex: 'marriageLeave',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '丧假时间(分)',
                    align: "center",
                    dataIndex: 'funeralLeave',
                    customRender: (t) => ellipsis(t,4),
                    width:'3%'
                },
                {
                    title: '年假时间(天)',
                    align: "center",
                    dataIndex: 'yearLeave',
                    customRender: (t) => ellipsis(t,5),
                    width:'3%'
                },
                {
                    title: '加班时间(分)',
                    align: "center",
                    dataIndex: 'workOvertime',
                    customRender: (t) => ellipsis(t,3),
                    width:'3%'
                }
             ]
          }
        },
        created(){
        },
        watch: {
        },
        methods: {
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                )
            },
            handleCancel(){
                this.visible = false
                this.formState()
            },
            detail(id){
                this.formState = {}
                this.formState.id = id
                this.getTableList()
            },
            getTableList(){
                this.loading = true
                getAction('/salary/salaryAttendance/querySalaryAttendanceDetailByMainId',this.formState).then(res=>{
                    this.loading = false
                    if(res.success){
                        this.dataSource =res.result
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },
            searchSonList(){
                this.getTableList()
            }
        }
    }
    </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>