Skip to content

S
smart
Commit 500601c6 authored by wangqinghua's avatar wangqinghua
Browse files
Options

费用记录

parent aeb7a7e2
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 4 deletions
src/main/webapp/app/app.main.module.ts
View file @ 500601c6
......@@ -116,6 +116,7 @@ import {ServerComponent} from './overAll/modal/server/server.component';
import {DatabaseComponent} from './overAll/modal/database/database.component';
import {TopologyViewComponent} from './component/topology-view/topology-view.component';
import {CostRecordComponent} from './work/cost-record/cost-record.component';
import {CostComponent} from './work/modal/cost/cost.component';
@NgModule({
imports: [
......@@ -233,7 +234,8 @@ import {CostRecordComponent} from './work/cost-record/cost-record.component';
ServerComponent,
DatabaseComponent,
TopologyViewComponent,
CostRecordComponent
CostRecordComponent,
CostComponent,
],
providers:[
OverAllService,
......
src/main/webapp/app/work/cost-record/cost-record.component.html
View file @ 500601c6
<p>
cost-record works!
</p>
<div nz-row class="breadcrumbs" >
<div nz-col nzSpan="16">
<nz-breadcrumb class="padding-8-0">
<nz-breadcrumb-item>
首页
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a>运维工作</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
费用记录
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="8" class="text-right">
<button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<smart-full-screen></smart-full-screen>
</div>
</div>
<div nz-row [nzGutter]="4" class="search-form">
<div nz-col nzSpan="3">
<button (click)="showAddModal()" nz-button nzType="default"><i class="anticon anticon-plus-circle-o"></i>新增费用记录</button>
</div>
<div nz-col nzSpan="2">
</div>
<div nz-col nzSpan="2">
</div>
<div nz-col nzSpan="3">
<nz-select nzAllowClear style="width: 100%;" [(ngModel)]="obj.source" nzPlaceHolder="事件来源">
<nz-option nzLabel="系统警告" nzValue="0"></nz-option>
<nz-option nzLabel="手动新增" nzValue="1"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
<nz-date-picker
[nzFormat]="timeFormat"
[(ngModel)]="startTime"
nzPlaceHolder="开始时间"></nz-date-picker>
<nz-date-picker
[nzFormat]="timeFormat"
[(ngModel)]="endTime"
nzPlaceHolder="结束时间"></nz-date-picker>
</div>
<div nz-col nzSpan="4">
<input type="text" nz-input [(ngModel)]="obj.searchStr" placeholder="填报人">
</div>
<div nz-col nzSpan="2">
<button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
</div>
</div>
<nz-table #nzTable [nzData]="recordList" [nzLoading]="isLoading" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
<thead>
<tr>
<th>费用名称</th>
<th>填报时间</th>
<th>填报人</th>
<th>总金额</th>
<th>备件采购</th>
<th nzWidth="15%">委外费用</th>
<th>其他费用th>
<th>关联事件</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nzTable.data">
<td class="round-tag tag-form">
{{data.id}}
</td>
<td>
{{data.title}}
</td>
<td>{{data.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>
<span *ngIf="data.source == 0">系统告警</span>
<span *ngIf="data.source == 1">手动新增</span>
</td>
<td>{{data.typeName}}</td>
<td>
<span style="margin-right: 5px;" *ngFor="let item of data?.operators">
{{item.username}}
</span>
</td>
<td>
<span *ngIf="data.status == 0">待处理</span>
<span *ngIf="data.status == 1">已结束</span>
</td>
<td class="handle text-center main-color">
<span *ngIf="data.status == 1" (click)="lookRecord(data)">查看</span>
</td>
</tr>
</tbody>
</nz-table>
<!--转派-->
<smart-transfor #smartTransfor (done)="getList()"></smart-transfor>
<!--新增事件-->
<smart-event #smartEvent (done)="getList()"></smart-event>
src/main/webapp/app/work/cost-record/cost-record.component.ts
View file @ 500601c6
import { Component, OnInit } from '@angular/core';
import {pageSize} from '../../app.constants';
@Component({
selector: 'smart-cost-record',
......@@ -7,9 +8,47 @@ import { Component, OnInit } from '@angular/core';
})
export class CostRecordComponent implements OnInit {
recordList = [];
isLoading = false;
totalNum:Number;
pageNum:Number;
pageCount:Number = pageSize;
startTime;
endTime;
timeFormat = 'yyyy-MM-dd';
obj = {
startTime:'',
endTime:'',
searchStr:''
};
constructor() { }
ngOnInit() {
}
//获取列表
getList(){
}
//搜索
search(){
this.pageNum = 1;
this.getList();
}
//翻页
change(e){
this.pageNum = e;
this.getList();
}
//查看
lookRecord(data){
}
}
src/main/webapp/app/work/modal/cost/cost.component.html 0 → 100644
View file @ 500601c6
<!--新增事件-->
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisiable" [nzTitle]="title" (nzOnCancel)="handleEditCancel()"
(nzOnOk)="handEditleOk()">
<form nz-form [formGroup]="validateForm">
<div class="ant-advanced-search-form form-select">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired nzFor="title">费用名称</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="title" nz-input placeholder="事件标题" name="title" formControlName="title">
<nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').errors">最多输入20个字</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzRequired nzFor="type">事件分类
</nz-form-label>
<nz-form-control [nzSpan]="14">
<nz-select name="type" nzPlaceHolder="选择事件分类" formControlName="type">
<ng-container *ngFor="let item of eventTypeList">
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container>
</nz-select>
<nz-form-explain *ngIf="validateForm.get('type').dirty && validateForm.get('type').errors">请选择事件分类</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired nzFor="requester">请求人</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="requester" nz-input placeholder="请求人" name="requester" formControlName="requester">
<nz-form-explain *ngIf="validateForm.get('requester').dirty && validateForm.get('requester').errors">最多输入10个字</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzRequired nzFor="requesterPhone">联系电话
</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="requesterPhone" nz-input placeholder="联系电话" name="requesterPhone" formControlName="requesterPhone">
<nz-form-explain *ngIf="validateForm.get('requesterPhone').dirty && validateForm.get('requesterPhone').errors">请输入13位联系电话</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired>处理人</nz-form-label>
<nz-form-control [nzSpan]="14">
<button (click)="selectPerson()" nz-button><span>选择</span></button>
<ng-container *ngFor="let item of operatorsList;let i = index;">
<span style="margin-right: 10px">
<span>{{item.username}}</span><span class="main-color" (click)="deletePerson(i)">X</span>
</span>
</ng-container>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="description">详细描述</nz-form-label>
<nz-form-control [nzSpan]="14">
<textarea nz-input id="description" name="description" formControlName="description" placeholder="详细描述" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item>
<nz-form-label [nzOffset]="4" [nzSpan]="6">附件</nz-form-label>
<nz-form-control [nzSpan]="14">
<nz-upload [nzBeforeUpload]="beforeUpload" [(nzFileList)]="fileList">
<button nz-button>
<i class="anticon anticon-upload"></i><span>上传</span>
</button>
</nz-upload>
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>
</nz-modal>
<!--选择人员-->
<smart-select-person #smartSelectPerson (done)="getUser($event)"></smart-select-person>
src/main/webapp/app/work/modal/cost/cost.component.ts 0 → 100644
View file @ 500601c6
import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
import {SelectPersonComponent} from '../../../modal/select-person/select-person.component';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NzMessageService, UploadFile} from 'ng-zorro-antd';
import {WorkService} from '../../work.service';
@Component({
selector: 'smart-cost',
templateUrl: './cost.component.html',
styles: []
})
export class CostComponent implements OnInit {
@ViewChild('smartSelectPerson') smartSelectPerson: SelectPersonComponent;
@Output() done = new EventEmitter<any>();
isVisiable = false;
title;
eventId;
validateForm: FormGroup;
fileList: UploadFile[] = [];
operatorsList = []; //处理人列表
eventTypeList = []; //事件分类列表
constructor(private workSer: WorkService, private message: NzMessageService,
private fb: FormBuilder) {
}
ngOnInit() {
this.initForm();
}
initForm() {
this.fileList = [];
this.operatorsList = [];
this.validateForm = this.fb.group(
{
title: [null, [Validators.required,Validators.maxLength(20)]],
description: [null,Validators.maxLength(300)],
type: [null, [Validators.required]],
requester: [null, [Validators.required,Validators.maxLength(10)]],
requesterPhone: [null, [Validators.required,Validators.maxLength(13)]],
operators: [null],
}
);
}
getEventType() {
const data = {
type: 0
};
this.workSer.findByType(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.eventTypeList = res.data;
}
}
);
}
beforeUpload = (file: UploadFile): boolean => {
const isLt5M = file.size / 1024 < 5000;
if (!isLt5M) {
this.message.error('图标必须小于5M!');
} else {
this.fileList.push(file);
}
return false;
};
showAddModal(title) {
this.isVisiable = true;
this.title = title;
this.getEventType();
}
showEditModal(title, id) {
this.isVisiable = true;
this.title = title;
this.eventId = id;
this.getEventType();
this.workSer.findByNo(this.eventId).subscribe(
(res) => {
this.validateForm.patchValue(res.data);
}
);
}
handEditleOk() {
if (this.title == '新增事件') {
this.create();
}
if (this.title == '编辑事件') {
this.update();
}
}
//新增
create() {
let formData = new FormData();
this.fileList.forEach((file: any) => {
formData.append('file', file);
});
if (this.operatorsList.length == 0) {
this.message.error('请选择人员');
return false;
}
this.validateForm.patchValue({
operators: this.operatorsList
});
for (let i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
if (this.validateForm.invalid) {
return false;
}
formData.append('json', JSON.stringify(this.validateForm.value));
this.workSer.create(formData).subscribe(
(res) => {
if (res.errCode == 10000) {
this.isVisiable = false;
this.initForm();
this.done.emit();
this.message.success('新增事件成功');
} else {
this.message.error(res.errMsg);
}
}
);
}
//编辑
update() {
let formData = new FormData();
this.fileList.forEach((file: any) => {
formData.append('file', file);
});
this.validateForm.patchValue({
operators: this.operatorsList
});
if (this.operatorsList.length == 0) {
this.message.error('请选择人员');
return false;
}
for (let i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
if (this.validateForm.invalid) {
return false;
}
formData.append('json', JSON.stringify(this.validateForm.value));
formData.append('id', this.eventId);
this.workSer.update(formData).subscribe(
(res) => {
if (res.errCode == 10000) {
this.isVisiable = false;
this.initForm();
this.done.emit();
this.message.success('修改事件成功');
} else {
this.message.error(res.errMsg);
}
}
);
}
handleEditCancel() {
this.isVisiable = false;
this.initForm();
}
//选择处理人
selectPerson() {
this.smartSelectPerson.showModal('选择处理人', null);
}
deletePerson(i) {
this.operatorsList.splice(i, 1);
}
getUser(e) {
const arr = [];
e.forEach(res => {
const data = {
username: res.name,
userId: res.id
};
arr.push(data);
});
this.operatorsList = arr;
}
}
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