This commit is contained in:
wangshiming
2022-02-11 15:35:33 +08:00
parent bbd47bd2b7
commit fc661bd697
21 changed files with 581 additions and 670 deletions

View File

@ -0,0 +1,12 @@
/*
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:30:28
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\index.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
export * from './singlepage-setting.module';
export * from './singlepage-setting-modal/singlepage-setting-modal.component';

View File

@ -0,0 +1,86 @@
<!--
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:31:45
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting-h5\\singlepage-setting-h5.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<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;">
<label class="ml-sm mr-sm"> --</label>
<input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
style="margin-left: 0;" class=" mr-xl">
</div>
</ng-container>
<ng-container *ngSwitchCase="6">
<div class="d-flex" style="align-items: center;justify-content: space-between;">
<nz-radio-group [(ngModel)]="item.itemValue.radio" 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>
<input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
style="margin-left: 23px;">
<label class="ml-sm mr-sm"> --</label>
<input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
style="margin-left: 0;" class=" mr-xl">
</div>
</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()"
*ngIf="selectedTab?.configKey!=='freight'">保存</button>
</div>
</div>
</div>
</nz-card>

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;
}
}
}

View File

@ -0,0 +1,69 @@
/*
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:29:00
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting-h5\\singlepage-setting-h5.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { BaseService } from '@shared';
const JSONTYPE = new Set([5,6]);
@Component({
selector: 'app-singlepage-setting-h5',
templateUrl: './singlepage-setting-h5.component.html',
styleUrls: ['./singlepage-setting-h5.component.less']
})
export class SinglepageSettingH5Component 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;
console.log(type);
this.selectedEvent.emit(this.selectedTab);
}
saveAction() {
if (this.configList?.length < 0) {
return;
}
let params = [...this.configList];
params = params.map((item: any) => {
if (JSONTYPE.has(item.itemType)) {
item.itemValue = item.itemValue ? JSON.stringify(item.itemValue) : null;
}
return {
...item,
remark: item.remark ? JSON.stringify(item.remark) : null,
itemData: item.itemData ? JSON.stringify(item.itemData) : null
};
});
this.saveEvent.emit(params);
}
}

View File

@ -0,0 +1,13 @@
<!--
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:29:21
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting-modal\\singlepage-setting-modal.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<app-singlepage-setting-h5 [tabs]="tabs" [configList]="configList" [selectedTab]="selectedTab"
(selectedEvent)="changeType($event)" (saveEvent)="saveAction($event)" [tabSpan]="6" [labelWidth]="200" >
</app-singlepage-setting-h5>

View File

@ -0,0 +1,101 @@
/*
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:33:08
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting-modal\\singlepage-setting-modal.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
import { Component, Input, OnInit } from '@angular/core';
import { ModalHelper } from '@delon/theme';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { BaseService } from 'src/app/shared/services';
@Component({
selector: 'app-singlepage-setting-modal',
templateUrl: './singlepage-setting-modal.component.html',
styleUrls: ['./singlepage-setting-modal.component.less']
})
export class SinglepageSettingModalComponent implements OnInit {
tabs: any[] = [];
selectedTab: any = null;
configList: any = [];
@Input()
extendType!: string;
@Input()
businessId!: string;
constructor(public service: BaseService, private modalHelp: NzModalRef) {}
ngOnInit() {
this.getTypeList();
}
getTypeList() {
this.service
.request('/api/mdc/pbc/sysConfigItemExtend/getSysConfigExtend', {
configFullKey: 'insurance',
extendType: this.extendType,
businessId: this.businessId
})
.subscribe((res: Array<any>) => {
if (res?.length > 0) {
const typeData = res.find(config => config.configFullKey === 'insurance');
if (typeData) {
this.tabs = typeData.children;
this.selectedTab = typeData.children[0];
this.configList = this.formatItems(this.selectedTab.items);
}
}
});
}
changeType(type: any): void {
this.selectedTab = type;
this.configList = this.formatItems(type.items);
}
saveAction(params: Array<any>) {
const p = params.map(config => ({
businessId: this.businessId,
configId: config.configId,
extendType: this.extendType,
id: config.extendId,
configItemId: config.id,
parentId: config.parentId,
itemData: config.itemData,
itemValue: config.itemValue,
remark: config.remark
}));
this.service.request('/api/mdc/pbc/sysConfigItemExtend/saveBatch', p).subscribe(res => {
if (res) {
this.service.msgSrv.success('修改配置成功');
this.modalHelp.destroy();
}
});
}
private formatItems(items: Array<any>): Array<any> {
if (items?.length > 0) {
return items
.map(item => ({
...item,
itemData: item.extendItemData || item.itemData,
itemValue: item.extendItemValue || item.itemValue
}))
.map(item => ({
...item,
remark: item.remark ? JSON.parse(item.remark) : null,
extend: item.extend ? JSON.parse(item.extend) : [],
// itemData: item.itemData ? JSON.parse(item.itemData) : item.itemData,
itemValue: item.itemValue ? JSON.parse(item.itemValue) : item.itemValue
}));
}
return [];
}
}

View File

@ -0,0 +1,24 @@
/*
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-02-11 14:23:46
* @LastEditors : Shiming
* @LastEditTime : 2022-02-11 14:30:15
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting.module.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SinglepageSettingH5Component } from './singlepage-setting-h5/singlepage-setting-h5.component';
import { SHARED_ZORRO_MODULES } from '../../shared-zorro.module';
import { SHARED_DELON_MODULES } from '../../shared-delon.module';
import { FormsModule } from '@angular/forms';
import { SinglepageSettingModalComponent } from './singlepage-setting-modal/singlepage-setting-modal.component';
const COMPONENTS = [SinglepageSettingH5Component, SinglepageSettingModalComponent];
@NgModule({
declarations: [...COMPONENTS],
imports: [CommonModule, FormsModule, SHARED_ZORRO_MODULES, SHARED_DELON_MODULES],
exports: [...COMPONENTS]
})
export class SinglepageSettingModule {}