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">&#xe63c;</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>&nbsp;指示书接收</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>&nbsp;指示書展開</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>&nbsp;費用結算</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>&nbsp;費用收取</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>&nbsp;結案判定</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_stageresult.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_stagethis.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);}}