[專案] 1/27 開發程式碼留存
<div
class=""
fxLayout="column wrap"
fxLayoutGap="20px"
fxLayoutAlign="center stretch"
>
<mat-card *ngFor="let aa of this.KycQuestionObj; let i = index">
<b class="kycTitle">{{ aa.qustNo }}、</b>
<b class="kycTitle">{{ aa.qustText }}</b>
<div class="" *ngIf="aa.multiCheck === ''">
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-radio-group aria-label="Select an option">
<ng-container
*ngFor="let cc of this.kycOptionArray[i + 1]; let k = index"
>
<mat-radio-button
[value]="k + 1"
(change)="KYCradioJSONChange($event, cc, k, 'sele1Note')"
>
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<p>{{ cc.sele1Note }}</p>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<ng-container *ngIf="cc.sele2Note">
<mat-form-field class="example-full-width">
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele2Note'
)
"
/>
</mat-form-field>
</ng-container>
<p>{{ cc.sele2Note }}</p>
</div>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-form-field
class="example-full-width"
*ngIf="cc.sele3Note"
>
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele3Note'
)
"
/>
</mat-form-field>
<p>{{ cc.sele3Note }}</p>
</div>
</div>
</mat-radio-button>
</ng-container>
</mat-radio-group>
</div>
<div class="">
<!-- 複選 -->
<div class="" *ngIf="aa.multiCheck === 'Y'">
<section class="example-section">
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-checkbox
class="example-margin"
*ngFor="let cc of this.kycOptionArray[i + 1]; let k = index"
(change)="KYCcheckboxJSONChange($event, cc, k, 'sele1Note')"
>
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<p>{{ cc.sele1Note }}</p>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-form-field
class="example-full-width"
*ngIf="cc.sele2Note"
>
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele2Note'
)
"
/>
</mat-form-field>
<p>{{ cc.sele2Note }}</p>
</div>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-form-field
class="example-full-width"
*ngIf="cc.sele3Note"
>
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele3Note'
)
"
/>
</mat-form-field>
<p>{{ cc.sele3Note }}</p>
</div>
</div>
</mat-checkbox>
</div>
</section>
</div>
</div>
</div>
<div class="" *ngIf="aa.multiCheck === 'Y'">
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<section class="example-section">
<ng-container
*ngFor="let cc of this.kycOptionArray[i + 1]; let k = index"
>
<mat-checkbox
class="example-margin"
(change)="KYCcheckboxJSONChange($event, aa, k, 'sele1Note')"
>
<div
class=""
fxLayout="row wrap"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<p>{{ cc.sele1Note }}</p>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-form-field
class="example-full-width"
*ngIf="cc.sele2Note"
>
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele2Note'
)
"
/>
</mat-form-field>
<p>{{ cc.sele2Note }}</p>
</div>
<div
class=""
fxLayout="row"
fxLayoutGap="10px"
fxLayoutAlign="start center"
>
<mat-form-field
class="example-full-width"
*ngIf="cc.sele3Note"
>
<input
matInput
(input)="
KYCinputJSONChange(
$event.target.value,
aa,
k,
'sele3Note'
)
"
/>
</mat-form-field>
<p>{{ cc.sele3Note }}</p>
</div>
</div>
</mat-checkbox>
</ng-container>
</section>
</div>
</div>
</mat-card>
</div>
<!-- 算分題目 -->
<!-- 客戶風險屬性、風險了解、風險偏好及風險承受度 -->
<mat-card class="mat-elevation-z1">
<div
class=""
fxLayout="column"
fxLayoutAlign="center stretch"
fxLayoutGap="8px"
>
<div
class=""
fxLayout="row wrap"
fxLayoutAlign="start center"
fxLayoutGap="8px"
>
<div class="">
<b>客戶風險屬性、風險了解、風險偏好及風險承受度：</b>
</div>
<mat-form-field>
<mat-label>分數</mat-label>
<input matInput placeholder="分析結果" readonly />
</mat-form-field>
</div>
<div
class=""
fxLayout="column wrap"
fxLayoutAlign="center stretch"
fxLayoutGap="8px"
>
<div class="">
<b>客戶風險等級：</b>
</div>
<mat-radio-group aria-label="Select an option" fxLayoutGap="16px">
<mat-radio-button value="a1"
>低風險承受度(15分以下(含))</mat-radio-button
>
<mat-radio-button value="a2"
>中風險承受度中風險承受度(16~29分(含))</mat-radio-button
>
<mat-radio-button value="a3"
>高風險承受度(30分以上(含))</mat-radio-button
>
</mat-radio-group>
</div>
<div
class=""
fxLayout="column"
fxLayoutAlign="center stretch"
fxLayoutGap="8px"
>
<p>
<b>對於上述投資風險屬性等級評分結果，本人:</b>
</p>
<mat-radio-group aria-label="Select an option" fxLayoutGap="8px">
<div
class=""
fxLayout="row wrap"
fxLayoutAlign="start center"
fxLayoutGap="8px"
>
<mat-radio-button value="a1">同意</mat-radio-button>
<mat-radio-button value="a2">不同意，</mat-radio-button>
</div>
</mat-radio-group>
</div>
<b>請降為</b>
<mat-radio-group aria-label="Select an option">
<div
class=""
fxLayout="row wrap"
fxLayoutAlign="start center"
fxLayoutGap="8px"
>
<mat-radio-button value="a1">低風險</mat-radio-button>
<mat-radio-button value="a2">中風險</mat-radio-button>
<mat-radio-button value="a3">高風險</mat-radio-button>
</div>
</mat-radio-group>
<div class="">
<button class="Btn" mat-button (click)="sendKyc()">確認送出</button>
</div>
</div>
</mat-card>
<b>KYC Array</b>
<pre>
{{ finalJSONKYCArray | json }}
</pre>
<!-- <p>開發範例</p>
<ng-container *ngFor="let sort of someName; let i = index">
<label id="example-radio-group-label">Rate your favorite section</label>
<br />
{{ sort.name }}
<br />
<mat-radio-group
aria-labelledby="example-radio-group-label"
class="example-radio-group"
>
<mat-radio-button
class="example-radio-button"
*ngFor="let section of sort.rating"
[value]="section"
(change)="radioChange($event, sort)"
>
{{ section }}</mat-radio-button
>
</mat-radio-group>
<br />
<br />
</ng-container>
<b>Selected Array</b>
<div>
{{ finalArray | json }}
</div>
<p>KYC題目</p>
<mat-card *ngFor="let aa of this.KycQuestionObj; let i = index">
<b>{{ aa.QTopic }}</b>
<mat-radio-group aria-label="Select an option">
<mat-radio-button
*ngFor="let bb of aa.QOption; let j = index"
[value]="j + 1"
(change)="KYCradioChange($event, aa)"
>{{ bb }}</mat-radio-button
>
<div class="" *ngIf="aa.QOptionIsFillIn">
<mat-radio-button
*ngFor="let cc of aa.QOptionFillInTopic; let k = index"
[value]="aa.QOption.length + k + 1"
(change)="KYCradioChange($event, aa)"
>{{ cc }}
<mat-form-field class="example-full-width">
<mat-label></mat-label>
<input
matInput
[value]="aa.QOptionFillInValue"
(input)="KYCinputChange($event.target.value, aa, k)"
/>
</mat-form-field>
</mat-radio-button>
</div>
</mat-radio-group>
</mat-card>
<b>KYC Array</b>
<pre>
{{ finalKYCArray | json }}
</pre> -->
// radio單選
KYCradioJSONChange(event: MatRadioChange, data, index, field) {
// console.log('event', event);
console.log('data', data);
console.log('data.qustNo', data.qustNo);
console.log('data.ansNo', data.ansNo);
const obj1 = this.KycOptionObj.filter(x => {
// 把該題的選項都撈出來
if (x.qustNo === data.qustNo) {
return true;
}
});
console.log('obj1', obj1);
const inputValue = event.value;
// obj1.console.log(' x.ansNo === data.ansNo;', x.ansNo === data.ansNo);
// console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));
if (field === 'sele1Note') {
// 將上次選擇的其他單選的答案清除
obj1.map(y => {
y.ans1Text = '';
});
}
// 清除後再把值設定進去
obj1[index].ans1Text = String(inputValue);
// 準備回傳array
if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
this.finalJSONKYCArray.splice(index, 1, obj1);
}
}
showOptions(event: MatCheckboxChange): void {
console.log(event.checked);
}
// checkbox複選
KYCcheckboxJSONChange(event: MatCheckboxChange, data, index, field) {
// console.log('event', event);
// console.log('data', data);
const obj2 = this.KycOptionObj.filter(x => {
// 把該題的選項都撈出來
if (x.qustNo === data.qustNo) {
return true;
}
});
let inputValue;
// 後端需求將true/false轉成0和1給他
if (event.checked === true) {
inputValue = 1;
} else if (event.checked === false) {
inputValue = 0;
}
// console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));
if (field === 'sele1Note') {
obj2[index].ans1Text = String(inputValue);
}
if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
this.finalJSONKYCArray.push(obj2);
}
}
// input框
KYCinputJSONChange(event, data, index, field) {
// console.log('event', event);
// console.log('data', data);
// console.log('index', index);
const obj3 = this.KycQuestionObj.filter(x => x.qustNo === data.qustNo)[0];
const inputValue = event;
if (field === 'sele2Note') {
obj3.answerList[index].ans2Text = inputValue;
}
if (field === 'sele3Note') {
obj3.answerList[index].ans3Text = inputValue;
}
// console.log(this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo));
if (!this.finalJSONKYCArray.some(x => x.qustNo === data.qustNo)) {
this.finalJSONKYCArray.push(obj3);
}
}
留言
張貼留言