| <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="polreportapp"> |
| <el-form :inline="true" ref="preportform" :model="preportform" 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="preportform.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="preportform.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="preportform.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="preportform.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="preportform.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> |
| </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 |
| prop="custname" |
| label="姓名" |
| sortable |
| > |
| </el-table-column> |
| <el-table-column |
| prop="cardno" |
| label="卡号" |
| sortable |
| > |
| </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="cnt1" |
| label="正常(天)" |
| |
| > |
| </el-table-column> |
| <el-table-column |
| prop="cnt2" |
| label="迟到早退(天)" |
| > |
| </el-table-column> |
| <el-table-column |
| prop="cnt3" |
| label="请假(天)" |
| > |
| </el-table-column> |
| <el-table-column |
| prop="cnt4" |
| label="旷工(天)" |
| > |
| </el-table-column> |
| <el-table-column |
| prop="cnts" |
| 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> |
| |
| </div> |
| |
| |
| </div> |
| </div> |
| |
| <script> |
| var polreport_vue = new Vue({ |
| el: '#polreportapp', |
| data:{ |
| tableData: [], |
| currPage: 1, |
| pageSize:10, |
| totSize:0, |
| currentRow: null, |
| stategrplist:[{value:0,label:'未打卡'},{value:1,label:'正常'},{value:2,label:'迟到'},{value:3,label:'请假'},{value:4,label:'旷工'},], |
| preportform:{ |
| 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.preportform.startdate); |
| var enddate=class_Formatdate(_self.preportform.enddate); |
| $.ajax({ |
| type:"post", |
| dataType:"json", |
| url:"[[@{/atte/police/list?startdate=}]]"+startdate+"&enddate="+enddate, |
| contentType: "application/json", |
| headers: { |
| 'Accept': 'application/json', |
| 'Content-Type': 'application/json', |
| 'X-CSRF-TOKEN':token, |
| }, |
| data:JSON.stringify(_self.preportform), |
| 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 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.typegrplist=custtypelist; |
| } |
| }) |
| } |
| |
| }) |
| function refreshAtteDtl(that){ |
| var startdate=class_Formatdate(that.preportform.startdate); |
| var enddate=class_Formatdate(that.preportform.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 = polreport_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 = polreport_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 = polreport_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 = polreport_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.preportform.startdate); |
| var enddate=class_Formatdate(_self.preportform.enddate); |
| $.ajax({ |
| type:"post", |
| dataType:"json", |
| url:"[[@{/atte/police/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.preportform), |
| 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(polreport_vue,polreport_vue.currPage,polreport_vue.pageSize); |
| }; |
| |
| |
| |
| |
| |
| </script> |