Browse Source

[完善]修改输入框样式

master
邵佳豪 5 years ago
parent
commit
0bba21fc6d
  1. 11
      src/app/ui/learning-record-details/learning-record-details.component.html
  2. 11
      src/app/ui/learning-record-details/learning-record-details.component.scss
  3. 30
      src/app/ui/learning-record-details/learning-record-details.component.ts
  4. 4
      src/styles.scss

11
src/app/ui/learning-record-details/learning-record-details.component.html

@ -2,24 +2,21 @@
<div style="height: 100%; width: 100%;"> <div style="height: 100%; width: 100%;">
<div class="topbox"> <div class="topbox">
<div class="backtop"> <div class="backtop">
<button type="button" mat-raised-button color="primary">返回</button> <button type="button" mat-raised-button color="primary" routerLink="/home/statistics"><mat-icon style="vertical-align: middle;font-size: 20px;">reply</mat-icon>返回</button>
</div> </div>
<div class="datasearch"> <div class="datasearch">
<div class="starttime"> <div class="starttime">
<span>开始时间 :</span> <span>开始时间 :</span>
<mat-form-field> <input style="width: 220px; height:22px;line-height: 22px;font-size: 15px;" matInput [matDatepicker]="dp" readonly [formControl]="startdate">
<input matInput [matDatepicker]="dp" disabled [formControl]="startdate">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp disabled="false"></mat-datepicker> <mat-datepicker #dp disabled="false"></mat-datepicker>
</mat-form-field>
</div> </div>
<div class="endtime"> <div class="endtime">
<span>结束时间 :</span> <span>结束时间 :</span>
<mat-form-field> <input style="width: 220px; height:22px;line-height: 22px;font-size: 15px;" matInput [matDatepicker]="dp2" readonly [formControl]="enddate">
<input matInput [matDatepicker]="dp2" disabled [formControl]="enddate">
<mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle>
<mat-datepicker #dp2 disabled="false"></mat-datepicker> <mat-datepicker #dp2 disabled="false"></mat-datepicker>
</mat-form-field>
</div> </div>
</div> </div>
<div class="btnbox"> <div class="btnbox">

11
src/app/ui/learning-record-details/learning-record-details.component.scss

@ -14,7 +14,10 @@
} }
mat-form-field{ mat-form-field{
input{ input{
padding-left: 3px; padding-left: 3px;
// width: 200px;
// height: 26px;
// line-height: 26px;
} }
} }
@ -29,7 +32,7 @@
.listbox{ .listbox{
margin-top: 18px; margin-top: 18px;
margin-left: 26%; margin-left: 26%;
height: 82%; height: 84%;
overflow-y: auto; overflow-y: auto;
.timeTitle{ .timeTitle{
font-weight: 800; font-weight: 800;
@ -40,4 +43,8 @@
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
} }
}
.mat-paginator {
background-color: hsla(0,0%,100%,0);
padding-right: 10%;
} }

30
src/app/ui/learning-record-details/learning-record-details.component.ts

@ -26,7 +26,7 @@ export class LearningRecordDetailsComponent implements OnInit {
PageNumber:any = 1//当前页数 PageNumber:any = 1//当前页数
id:any = this.route.snapshot.queryParams.id//身份证 id:any = this.route.snapshot.queryParams.id//身份证
PostName:any = this.route.snapshot.queryParams.PostName.replace(/-/g,'/')//传过来的职务名称
recordList:any//渲染的100条列表 recordList:any//渲染的100条列表
oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳 oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳
@ -42,6 +42,7 @@ export class LearningRecordDetailsComponent implements OnInit {
pageNumber:number = 1; //第几页 pageNumber:number = 1; //第几页
ngOnInit(): void { ngOnInit(): void {
console.log(this.PostName)
this.adapter.setLocale('CH'); this.adapter.setLocale('CH');
let nowdate = new Date().toLocaleDateString() //本月日期 2020/07/11 形式 let nowdate = new Date().toLocaleDateString() //本月日期 2020/07/11 形式
@ -91,8 +92,30 @@ export class LearningRecordDetailsComponent implements OnInit {
return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds; return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds;
} }
//获得所有学习记录 //初始获得所有学习记录
getAllStudyRecords(){ getAllStudyRecords(){
let date:any = new Date()
let data = {
Name : this.id,
Catalog : this.Catalog || "",
PageNumber : this.PageNumber,
PageSize:"100",
PostName:""
}
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => {
this.recordList = data.items
this.recordList.forEach((item) => {
item.time = item.creationTime.substring(0,10)
item.time2 = item.creationTime.substring(11,16)
})
this.length = data.totalCount
this.pageSize = data.pageSize
this.pageEvent.pageIndex = 0
})
}
//带查询时间获得所有学习记录
getAllStudyRecords2(){
let date:any = new Date() let date:any = new Date()
let data = { let data = {
Name : this.id, Name : this.id,
@ -114,6 +137,7 @@ export class LearningRecordDetailsComponent implements OnInit {
}) })
} }
//
//查询 //查询
onSubmit(){ onSubmit(){
if(this.startdate.value > this.enddate.value){ if(this.startdate.value > this.enddate.value){
@ -130,7 +154,7 @@ export class LearningRecordDetailsComponent implements OnInit {
} }
this.startTime = this.getTIme(this.startdate.value) this.startTime = this.getTIme(this.startdate.value)
this.endTime = this.getTIme(this.enddate.value) this.endTime = this.getTIme(this.enddate.value)
this.getAllStudyRecords() this.getAllStudyRecords2()
} }
//重置 //重置
reset(){ reset(){

4
src/styles.scss

@ -83,3 +83,7 @@ table td.mat-footer-cell:last-of-type{
width: 210px; width: 210px;
font-size: 13px!important; font-size: 13px!important;
} }
.mat-drawer-container{
background-color: none;
}
Loading…
Cancel
Save