Angular_代码片段_一步步进行
笪欣嘉
Angular_代码片段_一步步进行
<page-header title="簽核詳情"></page-header>
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="簽核进度">
<nz-steps [nzCurrent]=c.router_stage nzProgressDot>
<nz-step [nzTitle]="'指示書接收'" [nzDescription]="createDesc">
<ng-template #createDesc>
<div class="desc">
<div class="my-sm">
{{c.wok_user}}
<i nz-icon nzType="dingding" class="ml-sm"></i>
</div>
<div>{{c.no}}</div>
<div>{{c.create_date|date:'yyyy-MM-dd'}}</div>
</div>
</ng-template>
</nz-step>
<nz-steps>
</nz-steps>
<nz-step [nzTitle]="'指示書展開'" [nzDescription]="checkedDesc">
<ng-template #checkedDesc>
<div class="desc">
<div class="my-sm">
{{c.maintain_stage_conclusion}}
</div>
<div>{{c.maintain_status}}</div>
</div>
</ng-template>
</nz-step>
<nz-step [nzTitle]="'費用結算'" [nzDescription]="CloseDesc">
<ng-template #CloseDesc>
<div class="desc">
<div class="my-sm">{{c.cost_close_date|date:'yyyy-MM-dd'}}</div>
</div>
<div>{{c.cost_close_money}}</div>
</ng-template>
</nz-step>
<nz-step [nzTitle]="'費用收取'" [nzDescription]="BackDesc">
<ng-template #BackDesc>
<div class="desc">
<div class="my-sm"> {{c.cost_back_date|date:'yyyy-MM-dd'}}
</div>
<div>{{c.cost_back_money}}</div>
</div>
</ng-template>
</nz-step>
<nz-step [nzTitle]="'結案判定'" [nzDescription]="FinishDesc">
<ng-template #FinishDesc>
<div class="desc">
<div class="my-sm">{{c.finish_flag}}</div>
</div>
</ng-template>
</nz-step>
</nz-steps>
<div class="steps-content"></div></nz-card>
<nz-card [nzBordered]="false">
<form nz-form se-container="1" labelWidth="150">
<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px">
<legend style="width:auto;font-size:20px;color:black"><i class="layui-icon" style="height:20px"></i> WOK 指示書 maintain</legend>
<blockquote class="layui-elem-quote layui-quote-nm" style="overflow:hidden;background-color:white;border-color:#009688" *ngIf="isshow>=0">
<div class="indicationtitle"> <span class="layui-badge-dot">
<!-- =============================================第零====指示书接收 -->
</span> 指示书接收</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<se label="No." error="請輸入指示書編號" required>
<input nz-input [(ngModel)]="c.no" name="no" [disabled]="isread.isread0" />
</se>
</div>
<div class="layui-inline">
<se label="WOK擔當" error="请输入WOK擔當" required>
<input nz-input [(ngModel)]="c.wok_user" name="jdi_user" [disabled]="isread.isread0" />
</se>
</div>
<div class="layui-inline">
<se label="申请日期" error="請輸入申请日期" required>
<nz-date-picker [(ngModel)]="c.create_date" name="create_date" nzFormat="YYYY/MM/DD" [disabled]="isread.isread0">
</nz-date-picker>
</se>
</div>
<div class="layui-inline">
<se label="名稱" error="請輸入名稱" required>
<textarea nz-input [(ngModel)]="c.name" name="name" [nzAutosize]="{ minRows: 3 }" style="width:180px" [disabled]="isread.isread0"></textarea>
</se>
</div>
<div class="layui-inline">
<se label="目的" error="請輸入目的" required>
<textarea nz-input [(ngModel)]="c.target" name="target" [nzAutosize]="{ minRows: 3 }" style="width:180px" [disabled]="isread.isread0"></textarea>
</se>
</div>
<div class="layui-inline">
<se label="指示書附件" error="請輸入指定路徑" required>
<button style="text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary" type="primary" [disabled]="isread.isread0">上傳</button>
<input nz-input [(ngModel)]="c.file_url" name="file_url" placeholder="请上传附件" [disabled]="isread.isread0" />
<input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event,0)">
</se>
</div>
<div style="width:100%">
<sf #sf mode="edit" [schema]="schema" [formData]="c" button="none" (click)="save(sf.value)">
</sf>
</div>
<button nz-button (click)="next(0)" nzType="primary" type="primary" [disabled]="isread.isread0" style="position: absolute;bottom: -22px;right: 85px;">下一步</button>
<button nz-button nzType="primary" type="primary" (click)="edit(0)" [disabled]="isedit.isedit0" style="position: absolute;bottom: -22px;right: 15px;">編輯</button>
</div>
</div>
</blockquote>
<!-- =================================================第一=========指示書展開 -->
<blockquote class="layui-elem-quote layui-quote-nm" style="overflow:hidden;background-color:white;border-color:#009688" *ngIf="isshow>=1">
<div class="indicationtitle"> <span class="layui-badge-dot layui-bg-orange">
</span> 指示書展開</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<se label="上傳日期" error="請選擇上傳日期" required>
<nz-date-picker [(ngModel)]="c.maintain_stage_date" name="maintain_stage_date" [disabled]="isread.isread1" nzFormat="YYYY/MM/DD">
</nz-date-picker>
</se>
</div>
<div class="layui-inline">
<se label="data" error="請輸入指定路徑" required>
<button style="text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary" type="primary" [disabled]="isread.isread1">上傳</button>
<input nz-input [(ngModel)]="c.file_url" name="file_url" placeholder="请上传附件" [disabled]="isread.isread1" />
<input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event,0)">
</se>
</div>
<div class="layui-inline">
<se label="有無例外費用" error="請點選是否" required>
<nz-select [(ngModel)]="c.unfold_cost" name="unfold_cost" [disabled]="isread.isread1" style="width:180px">
<nz-option nzValue="Y" nzLabel="是"></nz-option>
<nz-option nzValue="N" nzLabel="否"></nz-option>
</nz-select>
</se>
</div>
<div>
<div style="
margin-left: 1000px;">
<button nz-button (click)="end(1)" nzType="primary" type="primary" [disabled]="isread.isread1">結案</button>
<button nz-button nzType="primary" type="primary" (click)="next(1)" [disabled]="isedit.isedit1">下一步</button>
<button nz-button nzType="primary" type="primary" (click)="edit(1)" [disabled]="isedit.isedit1">編輯</button>
</div>
</div>
</div>
</div>
</blockquote>
<!-- =================================================第二=========費用結算 -->
<blockquote class="layui-elem-quote layui-quote-nm" style="overflow:hidden;background-color:white;border-color:#009688" *ngIf="isshow>=2">
<div class="indicationtitle"> <span class="layui-badge-dot">
</span> 費用結算</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<se label="人事費用" error="請輸入人事費用" required>
<input nz-input [(ngModel)]="c.no" name="no" [disabled]="isread.isread2" />
</se>
</div>
<div class="layui-inline">
<se label="data" error="請輸入指定路徑" required>
<button style="text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary" type="primary" [disabled]="isread.isread2">上傳</button>
<input nz-input [(ngModel)]="c.file_url" name="file_url" placeholder="请上传附件" [disabled]="isread.isread2" />
<input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event,0)">
</se>
</div>
<div class="layui-inline">
<se label="月份">
<nz-select [(ngModel)]="c.month" name="month" [disabled]="isread.isread2" nzAllowClear style="width:120px">
<nz-option nzValue="null" nzLabel=""></nz-option>
<nz-option nzValue="一" nzLabel="一"></nz-option>
<nz-option nzValue="二" nzLabel="二"></nz-option>
</nz-select>
</se>
</div>
<div class="layui-inline">
<se label="BOM耗材費用" error="請輸入BOM耗材費用" required>
<input nz-input [(ngModel)]="c.no" name="no" [disabled]="isread.isread2" />
</se>
</div>
<div class="layui-inline">
<se label="data" error="請輸入指定路徑" required>
<button style="text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary" type="primary" [disabled]="isread.isread2">上傳</button>
<input nz-input [(ngModel)]="c.file_url" name="file_url" placeholder="请上传附件" [disabled]="isread.isread2" />
<input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event,0)">
</se>
</div>
<div class="layui-inline">
<se label="上傳日期" error="請輸入費用結算日期">
<nz-date-picker [(ngModel)]="c.cost_close_date" name="cost_close_date" style="width:180px" [disabled]="isread.isread2" nzFormat="YYYY/MM/DD">
</nz-date-picker>
</se>
</div>
<button nz-button nzType="primary" type="paimary" style="position: absolute;bottom: -22px;right: 85px;" (click)="next(2)" [disabled]="isread.isread2">下一步</button>
<button nz-button nzType="primary" type="primary" style="position: absolute;bottom: -22px;right: 15px;" (click)="edit(2)" [disabled]="isedit.isedit2">編輯</button>
</div>
</div>
</blockquote>
<!-- =================================================第三=========費用收取 -->
<blockquote class="layui-elem-quote layui-quote-nm" style="overflow:hidden;background-color:white;border-color:#009688" *ngIf="isshow>=3">
<div class="indicationtitle"> <span class="layui-badge-dot">
</span> 費用收取</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<se label="人事費用" error="請輸入人事費用" required>
<input nz-input [(ngModel)]="c.no" name="no" [disabled]="isread.isread3" />
</se>
</div>
<div class="layui-inline">
<se label="月份">
<nz-select [(ngModel)]="c.month" [disabled]="isread.isread3" name="month" nzAllowClear style="width:120px">
<nz-option nzValue="null" nzLabel=""></nz-option>
<nz-option nzValue="一" nzLabel="一"></nz-option>
<nz-option nzValue="二" nzLabel="二"></nz-option>
</nz-select>
</se>
</div>
<div class="layui-inline">
<se label="BOM耗材費用" error="請輸入BOM耗材費用" required>
<input nz-input [(ngModel)]="c.no" name="no" [disabled]="isread.isread3" />
</se>
</div>
</div>
<div class="layui-inline">
<se label="上傳日期" error="請輸入費用結算日期">
<nz-date-picker [(ngModel)]="c.cost_close_date" name="cost_close_date" style="width:180px" [disabled]="isread.isread3" nzFormat="YYYY/MM/DD">
</nz-date-picker>
</se>
</div>
<div class="layui-inline">
<se label="data" error="請輸入指定路徑" required>
<button style="text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary" type="primary" [disabled]="isread.isread3">上傳</button>
<input nz-input [(ngModel)]="c.file_url" name="file_url" placeholder="请上传附件" [disabled]="isread.isread3" />
<input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event,0)">
</se>
</div>
<input #uploadExcel2 type="file" id="inputFileClose" hidden (change)="change($event,4)">
<button nz-button nzType="primary" type="paimary" style="margin-left: 260px;" (click)="next(3)" [disabled]="isread.isread3">下一步</button>
<button nz-button nzType="primary" type="primary" (click)="edit(3)" [disabled]="isedit.isedit3">編輯</button>
</div>
</blockquote>
<!-- =================================================第四=========結案判定 -->
<blockquote class="layui-elem-quote layui-quote-nm" style="overflow:hidden;background-color:white;border-color:#009688" *ngIf="isshow>=4">
<div class="indicationtitle"> <span class="layui-badge-dot layui-bg-green">
</span> 結案判定</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-inline">
<se label="是否結案" error="請點選是否結案" required>
<nz-select [(ngModel)]="c.finish_flag" name="finish_flag2" [disabled]="isread.isread4" style="width:180px">
<nz-option nzValue="Y" nzLabel="是"></nz-option>
<nz-option nzValue="N" nzLabel="否"></nz-option>
</nz-select>
</se>
</div>
<div class="layui-inline">
<button nz-button nzType="primary" type="paimary" (click)="next(4)" [disabled]="isread.isread4" style="margin-left: 700px;">提交</button>
<button nz-button nzType="primary" type="primary" (click)="edit(4)" [disabled]="isedit.isedit4">編輯</button>
</div>
</div>
</div>
</blockquote>
</fieldset>
</form>
</nz-card>
import {
Component,
OnInit,
ElementRef,
Renderer2,
ChangeDetectorRef,
} from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { _HttpClient, SettingsService } from "@delon/theme";
import { webApiUrls } from "../../../../../services/webApiUrls";
import { NzMessageService } from "ng-zorro-antd/message";
import { SFSchema } from "@delon/form";
import { FormGroup } from "@angular/forms";
@Component({
selector: "app-maintain",
templateUrl: "./maintain.component.html",
styles: [],
})
export class MaintainComponent implements OnInit {
form: FormGroup;
c: any = {
router_stage:0,
};
isshow: any = "";
isread: any = {};
isedit: any = {};
isnum:any=0;
selectList: any = [];
url = window.location.href;
params = this.url.split("=");
flag = true; // 是否有改变有无费用的值
constructor(
private sanitizer: DomSanitizer,
private http: _HttpClient,
private el: ElementRef,
private render: Renderer2,
public msg: NzMessageService,
private cdr: ChangeDetectorRef,
private settingService: SettingsService
) {}
schema: SFSchema = {
properties: {
choose: {
type: "string",
title: "岗位物品检查",
enum: [
{ value: "电脑", label: "电脑" },
{ value: "探测门", label: "探测门" },
{ value: "探测棒", label: "探测棒" },
{ value: "电话", label: "电话" },
{ value: "巡更棒", label: "巡更棒" },
{ value: "其他", label: "其他" },
],
default: "电脑",
ui: {
spanLabelFixed: 120,
widget: "tag",
size: "large",
},
},
},
};
ngOnInit() {
//#region 初始化
this.isshow = "";
this.isread = {};
this.isedit = {};
this.selectList = [];
this.http.get(webApiUrls.indication.selectList + "&page_num=P01&type=indicate").subscribe((res) => {
this.selectList = res;
const fab = [];
const mo_type = [];
const correspond_section = [];
//厂别
for (let i = 0; i < res.fab.length; i++) {
fab.push({
value: res.fab[i].select_value,
label: res.fab[i].select_text,
});
}
//通用品种
for (let i = 0; i < res.mo_type.length; i++) {
mo_type.push({
value: res.mo_type[i].select_value,
label: res.mo_type[i].select_text,
});
}
//对应部门
for (let i = 0; i < res.correspond_section.length; i++) {
correspond_section.push({
value: res.correspond_section[i].select_value,
label: res.correspond_section[i].select_text,
});
}
this.schema = {
properties: {
fab: {
type: "string",
title: "廠別",
readOnly: true,
enum: fab,
ui: {
spanLabelFixed: 150,
widget: "tag",
size: "large",
grid: { span: 8 },
},
},
mo_type: {
type: "string",
title: "適用品種",
enum: mo_type,
ui: {
spanLabelFixed: 150,
widget: "tag",
size: "large",
grid: { span: 8 },
},
},
correspond_section: {
type: "string",
title: "對應部門",
enum: correspond_section,
ui: {
spanLabelFixed: 150,
widget: "tag",
size: "large",
grid: { span: 24 },
},
},
},
required: ["fab", "mo_type", "correspond_section"],
ui: {
grid: { span: 24 },
},
};
});
this.http.get(webApiUrls.indication.searchByno + "&no=" + this.params[1]).subscribe((res) => {
if(res.length==0){
this.c={};
}else{
this.c = res[0];
}
this.c.router_stage=this.isnum;
this.isshow = this.c.router_stage;
console.log("isread-----------"+this.isread.toString());
for (let i = 0; i < this.isnum; i++) {
this.isread['isread' + i] = true;
this.isedit['isedit' + i] = true;
console.log("第次------"+i)
console.log(this.isread)
}
});
}
// 下一步
next(step) {
const result: any = { no: this.c.no }; // 存放臨時數據
// 獲取階段參數
// 下一步
step == this.c.router_stage
result.router_stage = Number(this.c.router_stage) + 1;
this.flag = true;
if (this.c.unfold_cost == "N" && result.router_stage != 5) {
result.router_stage = (Number(this.c.router_stage) + 5).toString();
}
var temp=result.router_stage
this.c.router_stage=temp;
this.isnum=temp;
this.ngOnInit();
}
// 上傳附件
change(e: Event, step) {
}
// 對日期進行處理
dateFormatter(date) {
const result = new Date(date);
return result.getFullYear() + '-' + (result.getMonth() + 1) + '-' + result.getDate();
}
// 編輯
edit(step) {
console.log("编辑得到参数step"+step);
}
// 是否結案值改變時執行
ngModelChange(e: Event) {
}
// 多選
save(value: any) {
}
// 结案
end(num) {
console.log("结案得到参数step"+num);
}
}
类似资料：