我有两个表fnc和analysis\ fnc,我有一个表单创建一个fnc元素。我想在创建fnc的元素时,使用fnc表的id(n\u fnc)为我创建analyze\u fnc的元素。但是id在后端自动生成。我在前端使用angular 9,在后端使用spring boot和postgres数据库。表2为fnc表。
**Front end**
Fnc form html :
<h3>Creation Fiche de non conformité</h3>
<div [hidden]="submitted" style="width: 400px;">
<form (ngSubmit)="onsubmit()">
<div class="container">
<div class="row">
<div class="form-group">
<label for="name">Cloturé par :</label>
<input type="text" class="form-control" id="cloture_par" required [(ngModel)]="fnc.cloture_par" name="cloture_par" >
</div>
<div class="form-group">
<label for="name">Date Cloture</label>
<input type="date" class="form-control" id="date_cloture" required [(ngModel)]="fnc.date_cloture" name="date_cloture">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Code Article</label>
<select (change)="changeOtherToggles($event.target.value)" class="form-control" id="codeart" required [(ngModel)]="fnc.codeart" name="codeart">
<option>Select</option>
<option *ngFor="let o of origine">{{o.codeart}}</option>
</select>
</div>
<div class="form-group">
<label for="name">Libelle Article</label>
<input type="text" class="form-control" id="libelle_art" required [(ngModel)]="fnc.libelle_art" name="libelleart">
</div>
<div class="form-group">
<label for="name">Collection</label>
<input type="text" class="form-control" id="collection" required [(ngModel)]="fnc.collection" name="collection">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Type de detection</label>
<input type="text" class="form-control" id="type" required [(ngModel)]="fnc.type" name="type">
</div>
<div class="form-group">
<label for="name">Detecté par</label>
<input type="text" class="form-control" id="detect_par" required [(ngModel)]="fnc.detect_par" name="detect_par">
</div>
<div class="form-group">
<label for="name">Date de detection</label>
<input type="date" class="form-control" id="date_detection" required [(ngModel)]="fnc.date_detection" name="datedetection">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">lieu de detection</label>
<input type="text" class="form-control" id="lieu_detection" required [(ngModel)]="fnc.lieu_detection" name="lieudetection">
</div>
<div class="form-group">
<label for="name">Document de référence </label>
<input type="text" class="form-control" id="doc_ref" required [(ngModel)]="fnc.doc_ref" name="doc_ref">
</div>
<div class="form-group">
<label for="name">Libelle de defaut </label>
<input type="text" class="form-control" id="libelle_def" required [(ngModel)]="fnc.libelle_def" name="libelle_def">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Description de non conformité </label>
<input type="text" class="form-control" id="desc_non_confir" required [(ngModel)]="fnc.desc_non_confir" name="descnonconfir">
</div>
<div class="form-group">
<label for="name">Description principale</label>
<input type="text" class="form-control" id="desc_principale" required [(ngModel)]="fnc.desc_principale" name="descprincipale">
</div>
<div class="form-group">
<label for="name">Defaut secondaire </label>
<input type="text" class="form-control" id="defaut_secon" required [(ngModel)]="fnc.defaut_secon" name="defautsecon">
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Quantite litigieuse </label>
<input type="text" class="form-control" id="quantite_litigieuse" required [(ngModel)]="fnc.quantite_litigieuse" name="quantitelitigieuse">
</div>
<div class="form-group">
<label for="name">Quantite de non conformité </label>
<input type="text" class="form-control" id="quantite_non_conf" required [(ngModel)]="fnc.quantite_non_conf" name="quantitenonconf">
</div>
<div class="form-group">
<label for="name">Unité </label>
<input type="text" class="form-control" id="unite" required [(ngModel)]="fnc.unite" name="unite">
</div>
</div>
</div>
<div class="row1">
<div class="form-group">
<label for="name">Nature </label>
<select class="form-control" id="nature" required [(ngModel)]="fnc.nature" name="nature">
<option>Select</option>
<option *ngFor="let o of origineart ">{{o.nature}}</option>
</select>
</div>
<div class="form-group">
<label for="name">N°phase </label>
<select class="form-control" id="n_phase" required [(ngModel)]="fnc.n_phase" name="n_phase">
<option>Select</option>
<option *ngFor="let o of origineart">{{o.n_phase}}</option>
</select>
</div>
<div class="form-group">
<label for="name">N°Operation </label>
<select class="form-control" id="n_operation" required [(ngModel)]="fnc.n_operation" name="n_operation">
<option>Select</option>
<option *ngFor="let o of origineart ">{{o.n_operation}}</option>
</select>
</div>
</div>
<button class="btn btn-success">Créer</button>
</form>
</div>
**Fnc form .ts**
` import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Fnc } from '../models/fnc.model';
import { FncService } from '../services/fnc.service';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { Origine } from '../models/origine.model';
import { OrigineService } from '../services/origine.service';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { UseExistingWebDriver } from 'protractor/built/driverProviders';
import { Statement } from '@angular/compiler';
import { Pipe, PipeTransform } from '@angular/core';
import { analyseFnc } from '../models/analysefnc.model';
import { analyseFncService } from '../services/analysefnc.service';
@Component({
selector: 'app-creation-fnc',
templateUrl: './creation-fnc.component.html',
styleUrls: ['./creation-fnc.component.css']
})
export class CreationFncComponent implements OnInit {
/**Based on the screen size, switch from standard to one column per row */
origine:Origine[]=[];
fnc:Fnc=new Fnc();
analysefnc:analyseFnc=new analyseFnc();
a:number;
submitted=false;
origineart:Origine[]=[];
constructor(private analyseFncService:analyseFncService,private origineservice:OrigineService,private fncservice:FncService,private router:Router) {}
ngOnInit(){
this.origine=[];
this.origineart = [];
this.origineservice.obs.subscribe((response)=>this.origineservice.maptoorigine(response,this.origine));
// Overrride default filter behaviour of Material Datatable
this.origineservice.obs.subscribe((response)=>this.origineservice.maptoorigine(response,this.origineart));
}
changeOtherToggles(codearti:String) {
console.log(codearti);
this.origineart =[];
console.log(this.origineart);
console.log(this.origine);
this.origineart =this.origine.filter(
org => org.codeart === codearti);
console.log(this.origineart);
console.log(this.origine);
}
onsubmit(){
this.submitted=true;
this.fnc.etat="en cours";
this.fncservice.create(this.fnc).subscribe(
data=>console.log(data),error=>console.error(error)
);
this.analysefnc.n_fnc=this.fnc.n_fnc;
this.analysefnc.statut="A créer";
this.analyseFncService.create(this.analysefnc).subscribe(
data=>console.log(data),error=>console.error(error)
);
this.fnc=new Fnc();
this.router.navigate(['/nav-quali/home-quali']);
}
}
@Pipe({ name: "filter" })
export class ManualFilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
// Remove the duplicate elements (this will remove duplicates
let uniqueArray = value.filter(function (el, index, array) {
return array.indexOf (el) == index;
});
return uniqueArray; }
}`
**Fnc form service**
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Fnc } from '../models/fnc.model';
const baseUrl = 'http://192.168.100.9:8081/fncs';
@Injectable({
providedIn: 'root'
})
export class FncService {
obs:Observable<Object>;
constructor(private http: HttpClient) {this.getAll(); }
maptofnc(response,fncs:Fnc[]):void{
let fnc:Fnc;
response.forEach(element => {
fnc =new Fnc();
fnc.n_fnc=element.n_fnc;
fnc.etat=element.etat;
fnc.cloture_par=element.cloture_par;
fnc.date_cloture=element.date_cloture;
fnc.codeart=element.codeart;
fnc.libelle_art=element.libelle_art;
fnc.collection=element.collection;
fnc.type=element.type;
fnc.detect_par=element.detect_par;
fnc.date_detection=element.date_detection;
fnc.lieu_detection=element.lieu_detection;
fnc.libelle_def=element.libelle_def;
fnc.doc_ref=element.doc_ref;
fnc.desc_non_confir=element.desc_non_confir;
fnc.desc_principale=element.desc_principale;
fnc.quantite_litigieuse=element.quantite_litigieuse;
fnc.quantite_non_conf=element.quantite_non_conf;
fnc.defaut_secon=element.defaut_secon;
fnc.unite=element.unite;
fnc.nature=element.nature;
fnc.n_phase=element.n_phase;
fnc.n_operation=element.n_operation;
fncs.push(fnc);
});
}
maptofncbyetat(response,fncs:Fnc[],etat:String):void{
let fnc:Fnc;
response.forEach(element => {
if(element.etat==etat){
fnc =new Fnc();
fnc.n_fnc=element.n_fnc;
fnc.etat=element.etat;
fnc.cloture_par=element.cloture_par;
fnc.date_cloture=element.date_cloture;
fnc.codeart=element.codeart;
fnc.libelle_art=element.libelle_art;
fnc.collection=element.collection;
fnc.type=element.type;
fnc.detect_par=element.detect_par;
fnc.date_detection=element.date_detection;
fnc.lieu_detection=element.lieu_detection;
fnc.libelle_def=element.libelle_def;
fnc.doc_ref=element.doc_ref;
fnc.desc_non_confir=element.desc_non_confir;
fnc.desc_principale=element.desc_principale;
fnc.quantite_litigieuse=element.quantite_litigieuse;
fnc.quantite_non_conf=element.quantite_non_conf;
fnc.defaut_secon=element.defaut_secon;
fnc.unite=element.unite;
fnc.nature=element.nature;
fnc.n_phase=element.n_phase;
fnc.n_operation=element.n_operation;
fncs.push(fnc);
}});
}
getAll(): Observable<any> {
this.obs=this.http.get('http://192.168.100.9:8081/fncs');
return this.http.get(baseUrl);
}
get(id): Observable<any> {
return this.http.get(`${baseUrl}/${id}`);
}
create(data): Observable<any> {
return this.http.post(baseUrl, data);
}
update(id:number, data): Observable<any> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Basic bWFuYWdlcjptYW5hZ2Vy'
})
};
return this.http.put(`${baseUrl}/${id}`, data,httpOptions);
}
delete(id): Observable<any> {
return this.http.delete(`${baseUrl}/${id}`);
}
deleteAll(): Observable<any> {
return this.http.delete(baseUrl);
}
findByTitle(title): Observable<any> {
return this.http.get(`${baseUrl}?title=${title}`);
}
}
`
**Analyse_fnc service**
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { analyseFnc } from '../models/analysefnc.model';
import { pluck } from 'rxjs/operators';
const baseUrl = 'http://192.168.100.9:8081/analyseFnc';
@Injectable({
providedIn: 'root'
})
export class analyseFncService {
obs:Observable<Object>;
constructor(private http:HttpClient) {
this.getAll();
}
maptoplanaction(response,analysefnc:analyseFnc[]):void{
let pln:analyseFnc;
response.forEach(element => {
pln =new analyseFnc();
pln.id=element.id;
pln.classification=element.classification;
pln.suivi_par=element.suivi_par;
pln.cause_princ=element.cause_princ;
pln.ouvert_par=element.ouvert_par;
pln.cause_secon=element.cause_secon;
pln.n_action=element.n_action;
pln.action_libel=element.action_libel;
pln.resp=element.resp;
pln.etat=element.etat;
pln.quantite=element.quantite;
pln.date_fin_act=element.date_fin_act;
pln.visa=element.visa;
pln.n_fnc=element.n_fnc;
analysefnc.push(pln);
});
}
getAll(): Observable<any> {
this.obs=this.http.get('http://192.168.100.9:8081/analyseFnc');
return this.http.get(baseUrl);
}
get(id): Observable<any> {
return this.http.get(`${baseUrl}/${id}`);
}
create(data): Observable<any> {
return this.http.post(baseUrl, data);
}
update(id, data): Observable<any> {
return this.http.put(`${baseUrl}/${id}`, data);
}
delete(id): Observable<any> {
return this.http.delete(`${baseUrl}/${id}`);
}
deleteAll(): Observable<any> {
return this.http.delete(baseUrl);
}
findByTitle(title): Observable<any> {
return this.http.get(`${baseUrl}?title=${title}`);
}
}
#back end FNc and analyse fnc is the same i just change /fncs to /analysefncs #
private FncService fncservice;
@RequestMapping(value="/fncs", method=RequestMethod.GET)
public List<Fnc> getAllFncs() {
return fncservice.getAllFnc();
}
@RequestMapping(value="/fncs/{id}", method=RequestMethod.GET)
public Fnc getFnc(@PathVariable int id){
return fncservice.getFnc(id);
}
@RequestMapping(value="/fncs", method=RequestMethod.POST)
public void addFnc(@RequestBody Fnc fnc){
fncservice.addFnc(fnc);
}
@RequestMapping(value="/fncs/{id}", method=RequestMethod.PUT)
public void updateFnc(@PathVariable int id,@RequestBody Fnc fnc)
{
fncservice.updataFnc(id,fnc);
}
@RequestMapping(value="/fncs/{id}", method=RequestMethod.DELETE)
public void deleteFnc(@PathVariable int id){
fncservice.deleteFnc(id);
}
暂无答案!
目前还没有任何答案,快来回答吧!