Skip to content

Y
ydLife
Commit a26abaed by sunchao
Options

薪资单详情页面

parent 9ff54f76
Showing with 231 additions and 25 deletions
src/app/my/my-routing.module.ts
...@@ -49,6 +49,7 @@ import { SuggestionComponent } from './suggestion/suggestion.component'; ...@@ -49,6 +49,7 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
import { EmployeeSalaryComponent } from './application-process/employee-salary/employee-salary.component'; import { EmployeeSalaryComponent } from './application-process/employee-salary/employee-salary.component';
import { HistoricalRankComponent } from './historical-rank/historical-rank.component'; import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component'; import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
const myRoutes: Routes = [ const myRoutes: Routes = [
{ path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] }, { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
...@@ -104,7 +105,8 @@ const myRoutes: Routes = [ ...@@ -104,7 +105,8 @@ const myRoutes: Routes = [
{ path: 'my_application',component:MyApplicationComponent,data: [{ title: '我的报聘' }],canActivate:[AuthGuard]}, { path: 'my_application',component:MyApplicationComponent,data: [{ title: '我的报聘' }],canActivate:[AuthGuard]},
{ path: 'suggestion',component:SuggestionComponent,data: [{ title: '问题反馈' }],canActivate:[AuthGuard]}, { path: 'suggestion',component:SuggestionComponent,data: [{ title: '问题反馈' }],canActivate:[AuthGuard]},
{ path: 'historical_rank', component: HistoricalRankComponent, canActivate: [AuthGuard] }, { path: 'historical_rank', component: HistoricalRankComponent, canActivate: [AuthGuard] },
{ path: 'team_area',component:TeamAreaPanelComponent, canActivate: [AuthGuard]} { path: 'team_area',component:TeamAreaPanelComponent, canActivate: [AuthGuard]},
{ path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]}
]; ];
@NgModule({ @NgModule({
......
src/app/my/my.module.ts
...@@ -59,9 +59,10 @@ import { SuggestionComponent } from './suggestion/suggestion.component'; ...@@ -59,9 +59,10 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
import { EmployeeSalaryComponent } from './application-process/employee-salary/employee-salary.component'; import { EmployeeSalaryComponent } from './application-process/employee-salary/employee-salary.component';
import { HistoricalRankComponent } from './historical-rank/historical-rank.component'; import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component'; import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
@NgModule({ @NgModule({
declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent], declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, SalaryDetailComponent],
imports: [ imports: [
CommonModule, CommonModule,
LifeCommonModule, LifeCommonModule,
......
src/app/my/salary-detail/salary-detail.component.html 0 → 100644
<div class="wrapper">
<div class="header">
<div class="paginate">
<div class="pre"><span class="iconfont icon-fanhui"></span>上一期</div>
<div class="next">下一期<span class="iconfont icon-ar-r"></span></div>
</div>
<div class="price">
￥30,000.25
</div>
</div>
<div class="content_wrapper">
<div class="part">
<div class="item">
<div class="title">个人销售(A)</div>
<div class="item_detail">
<a style="color:#2c67a0;">首年度销售佣金</a>
<span class="red">18,505.00</span>
</div>
<div class="item_detail">
<span>首年度销售佣金</span>
<span class="red">225.00</span>
</div>
</div>
<div class="item">
<div class="title">销售管理(B)</div>
<div class="item_detail">
<span>首年度辅导奖金</span>
<span class="red">18,505.00</span>
</div>
<div class="item_detail">
<span>首年度辅导奖金</span>
<span class="red">225.00</span>
</div>
<div class="item_detail">
<span>特别管理奖金</span>
<span class="red">225.00</span>
</div>
</div>
<div class="item">
<div class="title">其他应税项目(C)</div>
<div class="item_detail">
<span>其他应税加扣款</span>
<span class="red">225.00</span>
</div>
</div>
<div class="item">
<div class="title">
<span>佣金合计(A+B+C)</span>
<span class="red">225.00</span>
</div>
</div>
</div>
<div class="part">
<div class="item">
<div class="title">
<span>代扣个人所得税/增值税/附加税(D)</span>
<span class="red">225.00</span>
</div>
</div>
</div>
<div class="part">D
<div class="item">
<div class="title">
<span>本期实领(A+B+C-D)</span>
<span class="red">225.00</span>
</div>
</div>
</div>
<a style="color:#2c67a0;" (click)="lookTak()">点击查看个人所得税明细</a>
</div>
</div>
<div class="mask"></div>
<div class="tax_mask">
<div class="mask_title">
<div>个人所得税预扣明细</div>
<div>个人所得税政策</div>
</div>
</div>
src/app/my/salary-detail/salary-detail.component.scss 0 → 100644
.wrapper{
background: #f6f6f6;
min-height: 100%;
.header{
padding:15px;
color: #fff;
background: #1b5b99;
.paginate{
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}
.price{
font-size: 24px;
font-weight:bold;
text-align: center;
}
}
.content_wrapper{
margin: 15px 10px 0;
min-height: 100%;
.part{
margin-bottom: 10px;
background: #fff;
padding:0 10px;
border-radius: 8px;
.item{
border-bottom: 1px #f4f4f4 solid;
padding: 10px 0;
.title{
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: #4e4e4e;
font-weight: 600;
}
.item_detail{
color: #7c7c7c;
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
}
.red{
color:#f8002e;
font-weight: bold;
font-size: 15px;
}
}
}
}
}
.mask{
position: fixed;
margin: 0 auto;
z-index: 3000;
top: 0;
right: 0;
left: 0;
bottom: 0;
min-width: 320px;
max-width: 640px;
background: rgba(0,0,0,.6);
}
src/app/my/salary-detail/salary-detail.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SalaryDetailComponent } from './salary-detail.component';
describe('SalaryDetailComponent', () => {
let component: SalaryDetailComponent;
let fixture: ComponentFixture<SalaryDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SalaryDetailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SalaryDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/my/salary-detail/salary-detail.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { LifeCommonService } from '../../common/life-common.service';
import { ActivatedRoute,Router } from "@angular/router";
@Component({
selector: 'ydlife-salary-detail',
templateUrl: './salary-detail.component.html',
styleUrls: ['./salary-detail.component.scss']
})
export class SalaryDetailComponent implements OnInit {
monDtlPeriod:string;
takFlag:boolean = true;
constructor(public lifeCommonService: LifeCommonService,private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.monDtlPeriod = this.activatedRoute.snapshot.queryParams.monDtlPeriod?this.activatedRoute.snapshot.queryParams.monDtlPeriod:null;
this.lifeCommonService.setTitle(`${this.lifeCommonService.getDate(this.monDtlPeriod)}本期实发佣金`);
}
lookTak(){
this.takFlag = true;
}
}
src/app/my/salary/salary.component.html
...@@ -9,27 +9,29 @@ ...@@ -9,27 +9,29 @@
</li> </li>
</ul> </ul>
<div class="salesContent"> <div class="salesContent">
<div class="salesItem" *ngFor="let payScaleItem of payScaleInfos" (click)="getPdf(payScaleItem.monShId,payScaleItem.pdfOssPath)"> <div class="salesItem" *ngFor="let payScaleItem of payScaleInfos">
<div class="line" style="font-weight: bold;font-size: 16px;"> <div (click)="enterDetail(payScaleItem.monDtlPeriod)">
<span>{{lifeCommonService.getDate(payScaleItem.monDtlPeriod)}}实发佣金</span> <div class="line" style="font-weight: bold;font-size: 16px;">
<div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div> <span>{{lifeCommonService.getDate(payScaleItem.monDtlPeriod)}}实发佣金</span>
<div *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div> <div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlRAmount | number: "1.2-2"}}</div>
<div *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
</div>
<div class="line">
<div>流水编号</div>
<div>{{payScaleItem.monShId}}</div>
</div>
<div class="line">
<span>应发佣金</span>
<div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlAmount | number: "1.2-2"}}</div>
<div *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
</div>
<div class="line">
<span>扣除税</span>
<div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{(payScaleItem.monDtlAmount-payScaleItem.monDtlRAmount) | number: "1.2-2"}}</div>
<div class="price" *ngIf="payScaleItem.pdfOssPath">-</div>
</div>
</div> </div>
<div class="line"> <div class="salary_down" (click)="getPdf(payScaleItem.monShId,payScaleItem.pdfOssPath)">
<div>流水编号</div>
<div>{{payScaleItem.monShId}}</div>
</div>
<div class="line">
<span>应发佣金</span>
<div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{payScaleItem.monDtlAmount | number: "1.2-2"}}</div>
<div *ngIf="payScaleItem.pdfOssPath">直接查看薪资单明细</div>
</div>
<div class="line">
<span>扣除税</span>
<div class="price" *ngIf="!payScaleItem.pdfOssPath">￥{{(payScaleItem.monDtlAmount-payScaleItem.monDtlRAmount) | number: "1.2-2"}}</div>
<div class="price" *ngIf="payScaleItem.pdfOssPath">-</div>
</div>
<div class="salary_down">
<img src="assets/images/salary_download.png" alt="下载"/> <img src="assets/images/salary_download.png" alt="下载"/>
薪资单明细 薪资单明细
</div> </div>
......
src/app/my/salary/salary.component.ts
...@@ -18,7 +18,8 @@ export class SalaryComponent implements OnInit { ...@@ -18,7 +18,8 @@ export class SalaryComponent implements OnInit {
tabList:Array<any>; tabList:Array<any>;
selectedId:any = 1; selectedId:any = 1;
constructor(private activatedRoute: ActivatedRoute,private myService: MyService, constructor(private activatedRoute: ActivatedRoute,private myService: MyService,
public lifeCommonService: LifeCommonService) { } public lifeCommonService: LifeCommonService,
private router: Router) { }
ngOnInit() { ngOnInit() {
const title = this.activatedRoute.snapshot.data[0]['title']; const title = this.activatedRoute.snapshot.data[0]['title'];
...@@ -72,4 +73,10 @@ export class SalaryComponent implements OnInit { ...@@ -72,4 +73,10 @@ export class SalaryComponent implements OnInit {
selectTab(tabId){ selectTab(tabId){
this.selectedId = tabId; this.selectedId = tabId;
} }
//进入薪资详情
enterDetail(monDtlPeriod){
this.router.navigate(['/salary_detail'],{ queryParams: { monDtlPeriod:monDtlPeriod} });
}
} }
src/app/my/team-rank/team-rank.component.html
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
{{i+1}} {{i+1}}
</li> </li>
<li class="name">{{performanceItem.name}}</li> <li class="name">{{performanceItem.name}}</li>
<li class="fyp remark">￥{{performanceItem.fyp | number: "1.0-2"}}</li> <li class="fyp remark">￥{{performanceItem.fyp | number: "1.2-2"}}</li>
<li class="fyc remark">￥{{performanceItem.fyc | number: "1.0-2"}}</li> <li class="fyc remark">￥{{performanceItem.fyc | number: "1.2-2"}}</li>
<li class="count remark">{{performanceItem.count}}</li> <li class="count remark">{{performanceItem.count}}</li>
</ul> </ul>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment