src/main/resources/templates/atte/timedtl/index.html

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">考勤状态维护</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#">人员考勤</a>
          <a><cite>考勤状态维护</cite></a>
        </span>
    </div>
    <div class="layui-card-body" >
        <div id="timedtlapp">
            <el-form :inline="true" ref="attedtlform" :model="attedtlform" data-parsley-validate class="form-horizontal form-label-left">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">开始日期:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-date-picker style="width: 100%"
                                    v-model="attedtlform.startdate" type="date"
                                    placeholder="选择日期" :editable="false"  value-format="yyyyMMdd">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">结束日期:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-date-picker style="width: 100%"
                                    v-model="attedtlform.enddate" type="date"
                                    placeholder="选择日期" :editable="false"  value-format="yyyyMMdd">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">卡号:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-input v-model="attedtlform.cardno" placeholder="输入%模糊查询"></el-input>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">姓名:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-input v-model="attedtlform.custname" ></el-input>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;">人员类别:</span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                            <el-select v-model="attedtlform.custtypeid" style="width:100%;" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="custtypeid in typegrplist"
                                        :key="custtypeid.value"
                                        :label="custtypeid.label"
                                        :value="custtypeid.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>


                <div    class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-4 col-sm-12 col-xs-12" style="font-size: 14px;"></span>
                        </label>
                        <div class="col-md-8 col-sm-12 col-xs-12">
                        <button type="button" class="btn btn-info" @click="query" id="attedtl_qrybtn">查 询</button>
                        <button class="btn btn-primary" type="button" @click="refreshdtl">刷新流水</button>
                        </div>
                    </div>
                </div>
            </el-form>

            <template>
                <el-table
                        ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="currRowChange"
                        stripe
                        border
                        max-height="2000"
                        style="width: 100%">
                    <el-table-column
                            label="操作">

                        <template scope="scope">
                            <button type="button" class="btn btn-info btn-xs" title="修改考勤状态" @click="editDtl(scope.row)">修改考勤状态</button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="atteno"
                            label="流水号"
                            sortable
                           >
                    </el-table-column>
                    <el-table-column
                            prop="custname"
                            label="姓名"
                            sortable
                           >
                    </el-table-column>
                    <el-table-column
                            prop="cardno"
                            label="卡号"
                            sortable
                    >
                    </el-table-column>
                    <el-table-column
                            prop="attedate"
                            label="日期"
                            :formatter="attedatefor"
                           >
                    </el-table-column>
                    <el-table-column
                            prop="timeid"
                            label="考勤时段"
                            :formatter="timenamefor"
                    >
                    </el-table-column>
                    <el-table-column
                            label="考勤状态"
                            >
                        <template scope="scope">
                            <span v-if="scope.row.state=='0'" class="layui-badge layui-bg-orange">未打卡</span>
                            <span v-if="scope.row.state=='1'" class="layui-badge layui-bg-green">正常</span>
                            <span v-if="scope.row.state=='2'" class="layui-badge layui-bg-red">迟到</span>
                            <span v-if="scope.row.state=='3'" class="layui-badge layui-bg-gray">请假</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="原始状态"
                    >
                        <template scope="scope">
                            <span v-if="scope.row.oldstate=='0'" class="layui-badge layui-bg-orange">未打卡</span>
                            <span v-if="scope.row.oldstate=='1'" class="layui-badge layui-bg-green">正常</span>
                            <span v-if="scope.row.oldstate=='2'" class="layui-badge layui-bg-red">迟到</span>
                            <span v-if="scope.row.oldstate=='3'" class="layui-badge layui-bg-gray">请假</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="custtypeid"
                            label="人员类别"
                            :formatter="custtypefor"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="deptcode"
                            label="部门"
                            :formatter="deptfor"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                    >
                    </el-table-column>

                </el-table>
                <div class="clearfix"></div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="currPageChange"
                        :current-page="currPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="prev, pager, next,sizes, jumper,total"
                        :total="totSize">
                </el-pagination>
            </template>

            <!--修改考勤状态-->
            <el-dialog :title="updatetitle" :visible.sync="dialogFormVisible" top="80px" size="tiny" :modal-append-to-body='false' @close="closeDialog('dtlDiaForm')">
                <el-form ref="dtlDiaForm" class="el-form-item el-form-item--mini" :model="dtlDiaForm" size="mini" :rules="rules" label-width="36%">
                    <el-form-item label="姓名:" prop="custname">
                        <el-col :span="18">
                            <el-input v-model="dtlDiaForm.custname" readonly style="width: 250px;" maxlength="20">
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="考勤状态:" prop="state">
                        <el-col :span="18">
                            <el-select v-model="dtlDiaForm.state" style="width: 250px;" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="state in stategrplist"
                                        :key="state.value"
                                        :label="state.label"
                                        :value="state.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="备注:" prop="remark">
                        <el-col :span="18">
                            <el-input type="textarea" v-model="dtlDiaForm.remark" placeholder="填写备注" style="width: 250px;" >
                            </el-input>
                        </el-col>
                    </el-form-item>


                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('dtlDiaForm') ">取 消</el-button>
                    <el-button type="primary" @click="saveState('dtlDiaForm')">确 定</el-button>
                </div>
            </el-dialog>
        </div>


    </div>
</div>

<script>
    var timedtl_vue = new Vue({
        el: '#timedtlapp',
        data:{
            tableData: [],
            currPage: 1,
            pageSize:10,
            totSize:0,
            currentRow: null,
            stategrplist:[{value:0,label:'未打卡'},{value:1,label:'正常'},{value:2,label:'迟到'},{value:3,label:'请假'},],
            attedtlform:{
                startdate:Date.now(),
                enddate:Date.now(),
                cardno:'',
                custname:'',
                custtypeid:'',
                deptcode:''
            },
            timegrplist:[],
            typegrplist:[],
            deptlist:[],
            dialogFormVisible: false,
            dlgAllotDevVisible:false,
            updatetitle:'修改考勤状态',
            dtlDiaForm:{
                atteno:'',
                custname:'',
                state:'',
                remark:''
            },
            rules: {
                season: [
                    { required: true, message: '请输入时令名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],


            },

        },
        methods: {
            handleSizeChange:function(val) {
                this.pageSize=val;
                attedtl_commonQuery(this,this.currPage,val);
            },
            currPageChange:function(val) {
                this.currPage=val;
                attedtl_commonQuery(this,this.currPage,this.pageSize);
            },
            currRowChange:function(val) {
                this.currentRow = val;
            },
            attedatefor:function(row){
                if(row.attedate!= null){
                    return dateformatter(row.attedate);
                }
            },
            statimefor:function(row){
                if(row.statime!= null){
                    return timeformatter(row.statime);
                }
            },
            statefor:function(row){
                if(row.state!= null){
                    return state_grpname(row.state);
                }
            },
            oldstatefor:function(row){
                if(row.oldstate!= null){
                    return state_grpname(row.oldstate);
                }
            },
            timenamefor:function(row){
                if(row.timeid!=null){
                    return timeid_grpname(row.timeid);
                }
            },
            query:function () {
                this.pagesize=10;
                this.currPage=1;
                attedtl_commonQuery(this,this.currPage,this.pageSize);
            },
            resetForm:function(formName) {
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false
            },
            closeDialog:function(formName) {
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false
            },
            saveState:function (formName) {

                 var _that=this;
                    attedtl_saveData(_that,formName);

            },
            editDtl:function (row) {
                 dtl_getFillData(this,row);
                 this.dialogFormVisible = true;
                 this.updatetitle="修改流水状态"
            },
            custtypefor:function (row) {
                return custtype_grpname(row.custtypeid);
            },
            deptfor:function (row) {
                return dept_grpname(row.deptcode);
            },
            refreshdtl:function (){
                var _that=this;
                refreshAtteDtl(_that);
            }

        },
        created:function(){
            var _self=this;
            var token=$("meta[name='_csrf_token']").attr("value");
            var startdate=class_Formatdate(_self.attedtlform.startdate);
            var enddate=class_Formatdate(_self.attedtlform.enddate);
            $.ajax({
                type:"post",
                dataType:"json",
                url:"[[@{/atte/timedtl/list?startdate=}]]"+startdate+"&enddate="+enddate,
                contentType: "application/json",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN':token,
                },
                data:JSON.stringify(_self.attedtlform),
                success:function(ret){
                    // //console.log(ret);
                    // _self.totSize=ret.PageResult.totalCount;
                    _self.tableData=ret.PageResult.list;
                    var custtypelist = [];
                    var types=ret.custtypelist;
                    for (var i = 0; i < types.length; i++) {
                        custtypelist.push({
                            value: types[i].custtypeid,
                            label: types[i].custtypename
                        });
                    }
                    var timelist=[];
                    var times=ret.timelist;
                    for (var i = 0; i < times.length; i++) {
                        timelist.push({
                            value: times[i].timeid,
                            label: times[i].timename
                        });
                    }
                    var deptlist=[];
                    var depts=ret.deptlist;
                    for (var i = 0; i < depts.length; i++) {
                        deptlist.push({
                            value: depts[i].deptcode,
                            label: depts[i].deptname
                        });
                    }
                    _self.deptlist=deptlist;
                    _self.timegrplist=timelist;
                    _self.typegrplist=custtypelist;
                }
            })
        }

    })
    function refreshAtteDtl(that){
        var startdate=class_Formatdate(that.attedtlform.startdate);
        var enddate=class_Formatdate(that.attedtlform.enddate);
        if(startdate== '' || enddate=='') {
            layer.msg("请选择日期", {icon: 2, time: 1000});
            return;
        }
        if(startdate>enddate){
            layer.msg("开始日期不能大于结束日期！", {icon: 2, time: 1000});
            return;
        }
        layer.confirm('你确定要刷新所选日期的流水吗?', {icon: 3, title:'请确认',offset:'30%'},function (){

            $.ajax({
                type:"get",
                dataType:"json",
                url:"[[@{/atte/adddtlbyhand?enddate=}]]"+enddate+"&startdate="+startdate,
                success:function(ret){
                    layer.msg('保存信息成功!', {icon: 1, time: 1000});
                    dtl_refreshThisTable();
                }
            })
        })
    }
    function dateformatter(time){
        return time.substr(0,4)+'-'+time.substr(4,2)+'-'+time.substr(6,2);
    }
    function timeformatter(time){
        return time.substr(0,2)+':'+time.substr(2,2)+':'+time.substr(4,2);
    }

    function dept_grpname(grpid){
//        console.log(typeof timeid)
        if(grpid!=null){
            var list = timedtl_vue.deptlist;
            for(var i=0;i<list.length;i++){
                if(list[i].value == grpid){
                    return list[i].label;
                }
            }
        }
    }
    function custtype_grpname(grpid){
//        console.log(typeof timeid)
        if(grpid!=null){
            var list = timedtl_vue.typegrplist;
            for(var i=0;i<list.length;i++){
                if(list[i].value == grpid){
                    return list[i].label;
                }
            }
        }
    }
    function state_grpname(grpid){
        if(grpid!=null){
            var list = timedtl_vue.stategrplist;
            for(var i=0;i<list.length;i++){
                if(list[i].value == grpid){
                    return list[i].label;
                }
            }
        }
    }

    function timeid_grpname(grpid){
        if(grpid!=null){
            var list = timedtl_vue.timegrplist;
            for(var i=0;i<list.length;i++){
                if(list[i].value == grpid){
                    return list[i].label;
                }
            }
        }
    }
    function class_Formatdate(date){
        if(date==null||date==''){
            return '';
        }
        var d=new Date(date);
        var month=d.getMonth() + 1+'';
        var date=d.getDate()+'';
        if(month.length==1){
            month='0'+month;
        }
        if(date.length==1){
            date='0'+date;
        }
        var formated=d.getFullYear() + '' + month + '' +date;

        return formated;
    }
    function attedtl_commonQuery(_self,pageno,pagesize) {

        var token=$("meta[name='_csrf_token']").attr("value");
        var startdate=class_Formatdate(_self.attedtlform.startdate);
        var enddate=class_Formatdate(_self.attedtlform.enddate);
        $.ajax({
            type:"post",
            dataType:"json",
            url:"[[@{/atte/timedtl/list?startdate=}]]"+startdate+"&enddate="+enddate+"&pageNo="+pageno+"&pageSize="+pagesize,
            contentType: "application/json",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN':token,
            },
            data:JSON.stringify(_self.attedtlform),
            success:function(ret){
                _self.totSize=ret.PageResult.totalCount;
                _self.tableData=ret.PageResult.list;
                if(_self.totSize == 0 ){
                    layer.msg("暂无数据", {icon: 2, time: 1000});
                }

            }
        })
    }

    function dtl_getFillData(_self,row){
            _self.dtlDiaForm.atteno=row.atteno;
            _self.dtlDiaForm.custname=row.custname;
            _self.dtlDiaForm.state=row.state;
            _self.dtlDiaForm.remark=row.remark;
    }

    function attedtl_saveData(_that,formName) {
            var atteno=_that.dtlDiaForm.atteno;
            var state=_that.dtlDiaForm.state;
            var remark=_that.dtlDiaForm.remark;
            if(remark==null){
                remark='';
            }
            var token=$("meta[name='_csrf_token']").attr("value");
            $.ajax({
                type: "POST",
                url: '[[@{/atte/updatetimeDtl?atteno=}]]'+atteno+"&state="+state+"&remark="+remark,
                dataType: "json",
                contentType: "application/json",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN':token,
                },
                success: function (data) {
                    if (data.errStr == undefined) {
                        layer.msg('用户认证已过期，请重新登录', {icon: 2, time: 1000});
                        window.location = "login";
                        return;
                    }
                    if (data.errStr != "") {
                        layer.msg(data.errStr, {icon: 2, time: 1000});
                    } else {
                        layer.msg('保存信息成功!', {icon: 1, time: 1000});
                        _that.dialogFormVisible = false;
                        dtl_refreshThisTable();
                        _that.$refs[formName].resetFields();
                    }
                }
            })

    }

    function dtl_refreshThisTable(){
        attedtl_commonQuery(timedtl_vue,timedtl_vue.currPage,timedtl_vue.pageSize);
    };





</script>