Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-01-10 15:49:06 +08:00
parent e3931d50f8
commit 976e3a7b9b
17 changed files with 450 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html Normal file
View File

@ -0,0 +1,81 @@
<nz-card [nzLoading]="service.http.loading">
<div nz-row [nzGutter]="8">
<div nz-col [nzSpan]="tabSpan">
<ul nz-menu nzMode="inline" class="card-height">
<li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(item)"
*ngFor="let item of tabs; let idx = index">
{{ item.name }}
</li>
</ul>
</div>
<div nz-col [nzSpan]="24-tabSpan" style="overflow: scroll">
<nz-card class="card-height" [nzBordered]="null" nzSize="small">
<h2 style="font-weight: 800;">{{selectedTab?.name}}</h2>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="labelWidth">
<se [label]="item.name" *ngFor="let item of configList" col="1">
<ng-container [ngSwitch]="item.itemType">
<ng-container *ngSwitchCase="1">
<nz-input-group [nzAddOnAfter]="item.remark?.afterLable" style="width: 155px;"
class="ml-md mr-xl">
<input type="number" nz-input [(ngModel)]="item.itemValue" placeholder="请输入" />
</nz-input-group>
</ng-container>
<ng-container *ngSwitchCase="2">
<nz-radio-group [(ngModel)]="item.itemValue" class="mr-xl">
<label nz-radio nzValue="0" class="ml-xl">{{item.remark?.[0] || '否'}}</label>
<label nz-radio nzValue="1" class="ml-xl">{{item.remark?.[1] || '是'}}</label>
</nz-radio-group>
</ng-container>
<ng-container *ngSwitchCase="3">
<nz-time-picker nzFormat="HH:mm" nzPlaceHolder="请选择时间" [(ngModel)]="item.itemValue"
class="ml-md mr-xl">
</nz-time-picker>
</ng-container>
<ng-container *ngSwitchCase="5">
<div class="d-flex" style="align-items: center;justify-content: space-between;">
<input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
style="margin-left: 23px;">
<!-- <nz-time-picker nzFormat="HH:mm" nzPlaceHolder="开始时间"
[(ngModel)]="item.itemValue.startTime" style="margin-left: 23px;">
</nz-time-picker> -->
<label class="ml-sm mr-sm"> --</label>
<input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
style="margin-left: 0;" class=" mr-xl">
<!-- <nz-time-picker nzFormat="HH:mm" nzPlaceHolder="结束时间"
[(ngModel)]="item.itemValue.endTime">
</nz-time-picker> -->
</div>
</ng-container>
</ng-container>
<!-- <ng-container *ngFor="let item of item.extend">
<ng-container [ngSwitch]="item">
<ng-container *ngSwitchCase="1">
<button nz-button nzType="default">配置网络货运</button>
</ng-container>
<ng-container *ngSwitchCase="2">
<button nz-button nzType="default">配置货主</button>
</ng-container>
<ng-container *ngSwitchCase="3">
<button nz-button nzType="default">配置司机</button>
</ng-container>
<ng-container *ngSwitchCase="4">
<button nz-button nzType="default">配置车队长</button>
</ng-container>
<ng-container *ngSwitchDefault></ng-container>
</ng-container>
</ng-container> -->
</se>
</div>
</div>
</nz-card>
<div class="mb-md save-btn">
<button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="saveAction()">保存</button>
</div>
</div>
</div>
</nz-card>

27
src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.less Normal file
View File

@ -0,0 +1,27 @@
:host {
::ng-deep {
.card-height {
min-height: 600px;
}
.save-btn {
width : 100%;
text-align: right;
}
.block-radio {
display : flex;
min-height: 32px;
}
input {
width : 100px;
margin-left: 10px;
}
.ant-form-item-control-input-content {
display: flex;
}
}
}

50
src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts Normal file
View File

@ -0,0 +1,50 @@
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { BaseService } from '@shared';
@Component({
selector: 'app-dynamic-setting-h5',
templateUrl: './dynamic-setting-h5.component.html',
styleUrls: ['./dynamic-setting-h5.component.less']
})
export class DynamicSettingH5Component implements OnInit {
@Input()
tabs: any[] = [];
@Input()
selectedTab: any = null;
@Input()
configList: any = [];
@Output()
selectedEvent = new EventEmitter<any>();
@Output()
saveEvent = new EventEmitter<any>();
@Input()
tabSpan = 4;
@Input()
labelWidth = 250;
@Input()
itemValue = 'itemValue';
constructor(public service: BaseService) {}
ngOnInit() {}
changeType(type: any): void {
this.selectedTab = type;
this.selectedEvent.emit(this.selectedTab);
}
saveAction() {
if (this.configList?.length < 0) {
return;
}
const params = this.configList.map((item: any) => ({
...item,
remark: item.remark ? JSON.stringify(item.remark) : null,
itemData: item.itemData ? JSON.stringify(item.itemData) : null,
itemValue: item.itemValue ? JSON.stringify(item.itemValue) : null
}));
this.saveEvent.emit(params);
}
}