工作笔记

更改过程让数据不时时更新

let add = JSON.stringify(editMarketChannel);
this.editMarketChannel = JSON.parse(add);

这个为函数传入的对象，Obj

提示信息

成功的

this.msgs = [];

this.msgs.push({severity:'success', summary:'提示信息', detail:'修改成功'});

const timers = setInterval(() => {

  this.clear();

  clearInterval(timers);

}, 3000);

失败的

this.msgs = [];

this.msgs.push({severity: 'error', summary: '错误信息', detail: '渠道不能为空'});

const timers = setInterval(() => {

  this.clear();

  clearInterval(timers);

}, 3000);

clear() {

  this.msgs = [];

}

msgs: Message[] = [];

引入这个组件

import {Message} from 'primeng/primeng';

ngOnInit() {

项目初始化

就比如vue的生命周期  钩子函数mouted(){}

}

三元运算符转换格式

let roleIds = this.roleId.length<=0? '': ','+this.roleId.join(",")+',';

this.addMarketSource["roleId"] = roleIds;

前后都加逗号

切割字符串前面和后面的逗号  然后中间用逗号切割

const roleIds = editmarketSource.roleId;

this.roleId = roleIds === null? []: roleIds.substring(1, roleIds.length-1).split(',');

提交的时候用逗号链接起来

let roles = this.roleId.join(",");

this.editmarketSource["roleId"] = roles.length>0? ','+ roles+',': '';

下拉框增加显示全部内容选项

let  marketList=[];

marketList.push({marketSourceId:'',marketSource:'全部'});

data.forEach(function(element) {

  marketList.push(element);

});

this.marketSourceList = marketList;

angular切换分页

this.totalRecords = data.data.total;(请求数据时)

组件

<p-paginator rows="10" totalRecords="{{totalRecords}}" (onPageChange)="paginate($event)"></p-paginator>

方法

paginate($event) {

  this.leadList.page = $event.page + 1;

  this.loadData();

}

上传图片  删除图片

Html

<div style="width: 120px;height:120px;border:1px dashed #ccc;margin-bottom:5px;float:left;">

  <button type="button" name="+" (click)="F_Open_dialog()" style="border: none;font-size: 40px;text-align: center;position: relative;left:37%;top:31%;background:#fff;">+</button>

</div>

<input type="file" name="fileToUpload2" id="fileToUpload2"  (change)="onSelectByButton()" multiple="multiple" style="display:none"/>

<ul style="float:left;" id="deal">

  <li class="fl"  *ngFor="let data of fileUploaded let idx=index" style="float:left;">

    <img width="100" height="100" src="{{data.fileUrl}}"/>

    <span class="fa fa-fw fa-close" (click)="deletePicture(idx)" style="float: right;"></span>

  </li>

  <li class="fl" *ngFor="let dataLoading of loadingObj"style="float:left;"><img width="100" height="100" src="{{dataLoading.url}}"/></li>

</ul>

Js部分

fileObj :any =[];

fileUploaded:any=[];

loadingObj :any=[];

loadingImage={"url":"./assets/images/loading.gif"};

onSelectByButton(){

  let fileObjSelect = document.getElementById("fileToUpload2")["files"];

  for(let file of fileObjSelect) {

    this.fileObj.push(file);

  }

  console.log(fileObjSelect);

  var formdata  = new FormData();

  for (var i = 0; i <   fileObjSelect.length; i++){

    this.loadingObj.push(this.loadingImage);

    formdata.append("file"  , fileObjSelect[i]);

  }



  this.httpService.httpPostAFile(formdata,"/file/test").then(data=>{

    //  this.allBranchList = data.data;

    console.log(data);

    if(data !=null && data["success"]) {

      data.data.forEach(dataFile=>{

        this.fileUploaded.push(dataFile);

        this.loadingObj=[];

      });

      console.log( this.fileUploaded);

    }

    console.log(data);

  })

  console.log(this.fileObj)

}

删除图片

deletePicture(idx){

  var oBox = document.getElementById( 'deal' );

  var aSpan=oBox.getElementsByTagName("span");

      oBox.removeChild( aSpan[idx].parentNode );

      this.fileUploaded.splice(idx,1);

      this.fileObj.splice(idx,1);

      console.log(this.fileObj);

}

F_Open_dialog()

{

  document.getElementById("fileToUpload2").click();

}

点击状态按钮弹出弹框

<span style="position: relative">

  <p-inputSwitch onLabel="Yes" offLabel="No" [style]="{'position':'relative','top':'5px'}" [(ngModel)]="checked"></p-inputSwitch>

  <div style="width: 50px;height: 22px;position: absolute;top: -3px;left: 0;cursor: pointer;" (click)="switchAudition()">



  </div>

</span>

弹框和遮罩层

<p-dialog [(visible)]="switchUseDisplay" showHeader="" width="300" >

  <div style="margin: 15px;text-align: center;padding: 15px 0">

    你确认要{{checked==true ? "开启" : "关闭"}}总部管控吗？

  </div>

  <p-footer>

    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">

      <button type="button" pButton icon="fa-check" (click)="switchAuditionData()" label="确定"></button>

      <button type="button" pButton icon="fa-close" class="ui-button-secondary" (click)="switchUseDisplay=false" label="取消"></button>

    </div>

  </p-footer>

</p-dialog>

<div style="z-index:103;" class="mask" (click)="switchUseDisplay=false" *ngIf="switchUseDisplay"></div>

动态增加一行元素和删除元素(非节点操作)

addContact(){

  //添加联系人

    this.list.push({"contactName":"","contactRelation":"","contactPhone":""})

}

/*删除联系人*/

removeContact($event,index){

  this.list.splice(index,1)

}

list=[];

this.memberInfoList = data.data;

this.list.push(data.data)

日期控件

Html

<span>

    <i (click)="backWeek()" class="fa fa-angle-left" aria-hidden="true"></i>

    　<span (click)="selectWeekDisplay=true">{{schedule_time}}</span>　<p-calendar *ngIf="selectWeekDisplay" [style]="{'position':'absolute','top':'100%','left':'0','z-index':'100'}" (onSelect)="selectWeekDate($event)" dateFormat="yy-mm-dd" [(ngModel)]="date9" [inline]="true" [locale]="en" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>

    <i (click)="forwardWeek()" class="fa fa-angle-right" aria-hidden="true"></i>

  </span>

Js部分

//显示周时间

schedule_time = "";

//周开始时间

weekStartDate = "";

//周结束时间

weekEndDate = "";

//一周时间

weekDateList = [];

//绑定时间

weekDate = ""

//是否显示时间选择

selectWeekDisplay:boolean = false

//获取周的日期

getWeekDate(weekStartDate){

  let weekDateList = [];

  let dayNamesMin = ["一","二","三","四","五","六","日"];

  for(let i = 0;i<7;i++){

    let date = new Date(weekStartDate)

    date.setDate(date.getDate()+i);

    weekDateList.push({"dayNamesMin":"周"+ dayNamesMin[i],"date":date})

  }

  return weekDateList

}

this.weekStartDate = this.getWeekStartDate();

this.weekEndDate = this.getWeekEndDate();

this.weekDateList = this.getWeekDate(this.weekStartDate);

//获得本周的开始日期

getWeekStartDate(date?) {

  if(date){

    var dt = new Date(date);

  }else{

    var dt = new Date();

  }



  var yyyy = dt.getFullYear();

  var mm = dt.getMonth();

  var dd = dt.getDate();

  var week = dt.getDay(); //0-6

  var weekStartDate = new Date(yyyy, mm, dd - week + 1);

  var m = weekStartDate.getFullYear();

  return this.formatDate(weekStartDate);

}

//获得本周的结束日期

getWeekEndDate(date?) {

  if(date){

    var dt = new Date(date);

  }else{

    var dt = new Date();

  }

  var yyyy = dt.getFullYear();

  var mm = dt.getMonth();

  var dd = dt.getDate();

  var week = dt.getDay(); //0-6

  var weekEndDate = new Date(yyyy, mm, dd + 7 - week);

  return this.formatDate(weekEndDate);

}

//获取周的日期

getWeekDate(weekStartDate){

  let weekDateList = [];

  let dayNamesMin = ["一","二","三","四","五","六","日"];

  for(let i = 0;i<7;i++){

    let date = new Date(weekStartDate)

    date.setDate(date.getDate()+i);

    weekDateList.push({"dayNamesMin":"周"+ dayNamesMin[i],"date":date})

  }

  return weekDateList

}

//上一周

backWeek(){

  var now = new Date(this.weekStartDate); //当前日期

  now.setDate(now.getDate()-7);

  var nowDayOfWeek = now.getDay(); //今天本周的第几天

  var nowDay = now.getDate(); //当前日

  var nowMonth = now.getMonth()+1; //当前月

  var nowYear = now.getFullYear(); //当前年

  nowYear += (nowYear < 2000) ? 1900 : 0; //

  this.weekStartDate = this.commonService.getWeekStartDate(nowYear+"-"+nowMonth+"-"+nowDay);

  this.weekEndDate = this.commonService.getWeekEndDate(this.weekStartDate);

  this.schedule_time = this.weekStartDate.replace(/-/g,"/")+"-"+this.weekEndDate.replace(/-/g,"/");

  this.findTimetableList();

  this.weekDateList = this.getWeekDate(this.weekStartDate);

}

//下一周

forwardWeek(){

  var now = new Date(this.weekStartDate); //当前日期

  now.setDate(now.getDate()+7);

  var nowDayOfWeek = now.getDay(); //今天本周的第几天

  var nowDay = now.getDate(); //当前日

  var nowMonth = now.getMonth()+1; //当前月

  var nowYear = now.getFullYear(); //当前年

  nowYear += (nowYear < 2000) ? 1900 : 0; //

  this.weekStartDate = this.commonService.getWeekStartDate(nowYear+"-"+nowMonth+"-"+nowDay);

  this.weekEndDate = this.commonService.getWeekEndDate(this.weekStartDate);

  this.schedule_time = this.weekStartDate.replace(/-/g,"/")+"-"+this.weekEndDate.replace(/-/g,"/")

  this.findTimetableList();

  this.weekDateList = this.getWeekDate(this.weekStartDate);

}

Ui框架里面的样式更改

[style]="{'position':'absolute','top':'100%','left':'0','z-index':'100'}"

Angularjs请求数据中的循环

data.forEach(function(element) {

  element.marketSourceTypeStr = element.marketSourceType === 1 ? '市场形式' : '渠道';

});

根据日期获取星期几

if(date.getDay()==0){

  this.date1='周日';

}

if(date.getDay()===1){

  this.date1='周一';

}

if(date.getDay()===2){

  this.date1='周二';

}

if(date.getDay()===3){

  this.date1='周三';

}

if(date.getDay()===4){

  this.date1='周四';

}

if(date.getDay()===5){

  this.date1='周五';

}

if(date.getDay()===6){

  this.date1='周六';

}

angularjs后台数据循环处理

if(data){

  this.memberContractList = data.data;

  this.memberContractList.forEach((element)=>{

    let Hour = element.surplusClassHour===null?0:element.surplusClassHour;

    let actHour=element.surplusActClassHour===null?0: element.surplusActClassHour;

    let priceStr=element.price===null?0:element.price;

    this.sum+=Hour;

    this.sumActivity+=actHour;

    this.contractSum+=priceStr;

    console.log( this.sum);

  });

三元运算符判断多个值(后台数据转换)

ES6循环写法

this.courseRecordList.forEach( (element)=> {

});

this.courseRecordList.forEach( (element)=> {

  element.dataStatusStr=element.dataStatus=='1'?'排课':element.dataStatus=='2'?'签到':element.dataStatus=='3'?'停课':element.dataStatus=='4'?'请假':element.dataStatus=='5'?'调课':element.dataStatus=='6'?'取消':element.dataStatus=='7'?'班级停课':element.dataStatus=='8'?'试听':element.dataStatus=='9'?'结课':element.dataStatus=='10'?'试听签到':element.dataStatus=='11'?'升班':element.dataStatus=='12'?'转校':'';

  console.log(element.dataStatusStr);

  // element.lessonTimeStr = element.lessonTime.substring(0, 11);

  // element.timeStr = element.lessonTime.substring(11, 16) + '-' + element.lessonEndTime.substring(11, 16);

});

切割字符串只要年月日的 

this.courseRmarkList.forEach( (element)=> {

  element.lessonTimeStr = element.lessonTime.substring(0, 11);年月日

  element.timeStr = element.lessonTime.substring(11, 16) + '-' + element.lessonEndTime.substring(11, 16);时分

});

查询列表

/*查询会员列表*/

loadData(){

  this.httpService.httpPostAll(this.searchList, "/member/memberInfoList", true).then(data => {

    this.totalRecords = data.data.total;

    this.memberList = data.data.rows;

    console.log(this.memberList);

  });

}

返回系统给的信息

this.msgs = [];

this.msgs.push({severity:'error', summary:'提示信息', detail:data["message"]});

const timers = setInterval(() => {

  this.clear();

  clearInterval(timers);

}, 3000);

angularjs支持es6

this.memberCourseList.forEach((element)=>{

  element.shortTime=(element.lessonTime).substring(0,10);

  console.log(element.shortTime);

  element.beginTime=(element.lessonTime).substring(10,18);

  element.endTime=(element.lessonEndTime).substring(10,18);

  // this.currentDate=this.transformDate(new Date(),"yyyy-MM-dd");

  console.log(new Date(element.shortTime))

  console.log(new Date())



  console.log(this.commonService.dateDiff("d",new Date('2017-8-14'),new Date()))

  if(this.commonService.dateDiff("d",element.shortTime,this.transformDate(new Date(),"yyyy-MM-dd"))<0){

    this.delFlag=true;

    console.log(this.delFlag);

  } 

});

1、         JSON.parse()用于从一个字符串中解析出json对象。

2、      JSON.stringify()用于从一个对象解析出字符串。

3、    data = data === undefined ? [] : data;

this.memberContractList = data;

this.memberContractList.forEach((element)=>{

  element.surplusClassHourStr=element.surplusClassHour===null?0:element.surplusClassHour;

  element.surplusActClassHourStr=element.surplusActClassHour===null?0: element.surplusActClassHour;

  let Hour = element.surplusClassHour===null?0:element.surplusClassHour;

  let ClassHour=element.classHour===null?0:element.classHour;

  let actHour=element.surplusActClassHour===null?0: element.surplusActClassHour;

  let actHourAll=element.actClassHour===null?0:element.actClassHour;

  let priceStr=element.price===null?0:element.price;

  this.sum+=Hour;

  this.sumActivity+=actHour;

  this.contractSum+=priceStr;

  element.hourNum = parseFloat(parseFloat(String(Number(Hour)/Number(ClassHour)*100)).toFixed(2));

  element.actHourNum=parseFloat(parseFloat(String(Number(actHour)/Number(actHourAll)*100)).toFixed(2))

});

angularjs框架里面的相册滑动

html

<div style="width:725px;overflow: hidden;position: relative;">

  <div  class="arrange_center" style="min-width: 2200px;position: relative;left:0px;top:12px;" id="arrange" [style.width]="(inviteInfo.length)*765 + 'px'">

    <div  class="invite" *ngFor="let item of inviteInfo">

      <div *ngFor="let key of item;let idx=index;"(click)="toggleChecked(idx)">

        <i class="fa fa-check-circle" aria-hidden="true" style="position: relative;left: 36px;top: 4px;" *ngIf="isChecked[idx]"></i>

        <p>{{key.lessonTimeStr}}</p>

        <p>{{key.weekday}}</p>

        <p>{{key.timeStr}}</p>

      </div>

    </div>

  </div>

</div>

<span style="position: relative;left: 0%;top: -90px;"(click)="slideLeft()" ><img src="./../assets/images/left.png" height="23" alt=""></span>

<span style="position: relative;right: -92%;top: -90px;"(click)="slideRight()" ><img src="./../assets/images/right.png" height="23" alt=""></span>

Js部分

/*课程向左滑动*/

slideLeft(){

  let slide_left = document.getElementById("arrange");

  slide_left.style.left=slide_left.offsetLeft+765+"px";

  // console.log(slide_left.style.left);

}

slideRight(){

  let slide_left = document.getElementById("arrange");

  slide_left.style.left=slide_left.offsetLeft-765+"px";

  // console.log(slide_left.style.left);

};

Angularjs的时间管道

//修改时间格式

transformDate(date,format){

  return this.datePipe.transform(date,format)

}

可以转换不同的格式

例如yyyy年MM月dd日

import { DatePipe } from '@angular/common';

@Component({

  selector: 'app-member',

  templateUrl: './member.component.html',

  styleUrls: ['./member.component.css'],

  providers:[HttpService,DatePipe,CommonService]

})

constructor(

  private datePipe: DatePipe,

  public commonService:CommonService,这部分可以不写

  public httpService: HttpService这部分可以不写

) {}

//判断是否关闭加载蒙版

isLoading(){

  if(this.loadingNum>0) {

    this.loadingNum--;

  }

  if(this.loadingNum<=0){

    this.isLogineds = false;

    this.subject.next(this.isLogineds);

  }

}