edit

src/app/routes/sys-setting/components/basic-setting/basic-setting.component.html

@@ -1,81 +1,3 @@
-<nz-card [nzLoading]="service.http.loading">
+<app-dynamic-setting-h5 [tabs]="tabs" [configList]="configList" [selectedTab]="selectedTab"
-    <div nz-row [nzGutter]="8">
+    (selectedEvent)="getConfigList($event?.id)" (saveEvent)="saveAction($event)">
-        <div nz-col nzSpan="4">
+</app-dynamic-setting-h5>
-            <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="20" 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]="250">
-                        <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>

src/app/routes/sys-setting/components/basic-setting/basic-setting.component.ts

@@ -43,7 +43,6 @@ export class BasicSettingComponent implements OnInit {
           itemValue: item.itemValue ? JSON.parse(item.itemValue) : item.itemValue
         }));
         this.configList = res;
-        console.log(res);
       } else {
         this.configList = [];
       }
@@ -55,15 +54,7 @@ export class BasicSettingComponent implements OnInit {
     this.getConfigList(this.selectedTab.id);
   }
 
-  saveAction() {
+  saveAction(params: any) {
-    if (this.configList?.length < 0) {
-      return;
-    }
-    const params = this.configList.map((item: any) => ({
-      ...item,
-      remark: item.remark ? JSON.stringify(item.remark) : null,
-      itemValue: item.itemValue ? JSON.stringify(item.itemValue) : null
-    }));
     this.service.request(this.service.$api_update_config_batch, params).subscribe(res => {
       if (res) {
         this.service.msgSrv.success('修改配置成功');

src/app/routes/sys-setting/components/network-freight/network-freight.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { STComponent, STColumn, STChange } from '@delon/abc/st';
 import { SFComponent, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { DynamicSettingModalComponent } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { SystemService } from '../../services/system.service';
 
@@ -19,7 +20,7 @@ export class NetworkFreightComponent implements OnInit {
   schema: SFSchema = {};
   addSchema: SFSchema = {};
   _$expand = false;
-  formData :any;
+  formData: any;
   isVisible = false;
   edit = false;
   editId = false;
@@ -33,7 +34,13 @@ export class NetworkFreightComponent implements OnInit {
     { title: '电子合同账号', index: 'electronicContractAccount' },
     { title: '开户行', index: 'bankName' },
     { title: '虚拟账户', index: 'virtualAccount' },
-    { title: '附加费比例', index: 'surchargeRate', format: (item: any) => {return item.surchargeRate + '%'} },
+    {
+      title: '附加费比例',
+      index: 'surchargeRate',
+      format: (item: any) => {
+        return item.surchargeRate + '%';
+      }
+    },
     {
       title: '操作',
       buttons: [
@@ -45,22 +52,27 @@ export class NetworkFreightComponent implements OnInit {
           text: '合同设置',
           click: item => this.roleAction(item, 2)
         },
+        {
+          text: '基础设置',
+          click: item => this.settingAction(item)
+        }
       ]
     }
   ];
 
   selectedRows: any[] = [];
 
-  get reqParams (){ 
+  get reqParams() {
     return {
-    ...this.sf?.value,
+      ...this.sf?.value
-  }};
+    };
+  }
 
   constructor(public service: SystemService, private nzModalService: NzModalService) {}
 
   ngOnInit(): void {
-    this.initSF()
+    this.initSF();
-    this.initSFFre()
+    this.initSFFre();
   }
 
   stChange(e: STChange): void {
@@ -73,83 +85,80 @@ export class NetworkFreightComponent implements OnInit {
         break;
     }
   }
-    /**
+  /**
-  * 伸缩查询条件
+   * 伸缩查询条件
-  */
+   */
-     expandToggle(): void {
+  expandToggle(): void {
-      this._$expand = !this._$expand;
+    this._$expand = !this._$expand;
-      this.sf?.setValue('/_$expand', this._$expand);
+    this.sf?.setValue('/_$expand', this._$expand);
-    }
+  }
-    /**
+  /**
    * 查询字段个数
    */
-     get queryFieldCount(): number {
+  get queryFieldCount(): number {
-      return Object.keys(this.schema?.properties || {}).length;
+    return Object.keys(this.schema?.properties || {}).length;
-    }
+  }
-  initSF(){
+  initSF() {
-  this.schema = {
+    this.schema = {
-    properties: {
+      properties: {
-      _$expand: { type: 'boolean', ui: { hidden: true } },
+        _$expand: { type: 'boolean', ui: { hidden: true } },
-      enterpriseName: {
+        enterpriseName: {
-        type: 'string',
+          type: 'string',
-        title: '公司名称',
+          title: '公司名称',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        },
-      taxCode: {
+        taxCode: {
-        type: 'string',
+          type: 'string',
-        title: '纳税人识别号',
+          title: '纳税人识别号',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        }
-    }
+      }
-    
+    };
-  };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
-  this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
   }
   initSFFre() {
-  this.addSchema = {
+    this.addSchema = {
-    properties: {
+      properties: {
-      enterpriseName: {
+        enterpriseName: {
-        type: 'string',
+          type: 'string',
-        title: '公司名称',
+          title: '公司名称',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        },
-      taxCode: {
+        taxCode: {
-        type: 'string',
+          type: 'string',
-        title: '纳税人识别号',
+          title: '纳税人识别号',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        },
-      customerCode: {
+        customerCode: {
-        type: 'string',
+          type: 'string',
-        title: '税收分类编码',
+          title: '税收分类编码',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        },
-      invoiceTaxRate: {
+        invoiceTaxRate: {
-        type: 'string',
+          type: 'string',
-        title: '发票税率',
+          title: '发票税率',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
+        },
-      surchargeRate: {
+        surchargeRate: {
-        type: 'string',
+          type: 'string',
-        title: '附加费比例',
+          title: '附加费比例',
-        ui: { placeholder: '请输入' }
+          ui: { placeholder: '请输入' }
-      },
-  
-  },
-  required: ['enterpriseName', 'taxCode', 'customerType', 'invoiceTaxRate', 'surchargeRate']
-  };
-this.ui2 = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
-}
-  roleAction(value: any,item?: any) {
-
-      this.service.request(this.service.$api_get_crmCustomer, {id: value.id}).subscribe((res: any) => {
-        console.log(res)
-        if(res) {
-          this.formData = res;
         }
-      })
+      },
-      this.edit = true;
+      required: ['enterpriseName', 'taxCode', 'customerType', 'invoiceTaxRate', 'surchargeRate']
-      this.editId = value.id;
+    };
-      this.isVisible = true;
+    this.ui2 = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
+  }
+  roleAction(value: any, item?: any) {
+    this.service.request(this.service.$api_get_crmCustomer, { id: value.id }).subscribe((res: any) => {
+      console.log(res);
+      if (res) {
+        this.formData = res;
+      }
+    });
+    this.edit = true;
+    this.editId = value.id;
+    this.isVisible = true;
   }
 
   deleteAction(item?: any) {
@@ -161,6 +170,19 @@ this.ui2 = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
     });
   }
 
+  settingAction(item?: any) {
+    this.nzModalService.create({
+      nzTitle: '基础设置',
+      nzContent: DynamicSettingModalComponent,
+      nzWidth: 900,
+      nzComponentParams: {
+        extendType: '1',
+        businessId: item.id
+      },
+      nzFooter: null
+    });
+  }
+
   /**
    * 重置表单
    */
@@ -168,30 +190,29 @@ this.ui2 = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
     this.sf.reset();
   }
   handleCancel() {
-    this.isVisible = false
+    this.isVisible = false;
   }
 
   handleOK() {
-    console.log(this.sfFre.value)
+    console.log(this.sfFre.value);
-    if(!this.sfFre.valid) {
+    if (!this.sfFre.valid) {
-      this.service.msgSrv.warning('请正确填写完整！')
+      this.service.msgSrv.warning('请正确填写完整！');
-      return
+      return;
     }
-    const params ={
+    const params = {
       ...this.sfFre.value
+    };
+    if (this.editId) {
+      params.id = this.editId;
     }
-    if(this.editId) {
+    this.service.request(this.service.$api_save_crmCustomer, params).subscribe((res: any) => {
-      params.id = this.editId
+      if (res) {
-    }
+        this.service.msgSrv.success('保存成功！');
-    this.service.request(this.service.$api_save_crmCustomer, params).subscribe((res:any) => {
+        this.isVisible = false;
-      if(res) {
+        this.st.reload();
-    this.service.msgSrv.success('保存成功！')
-    this.isVisible = false
-    this.st.reload();
       } else {
-    this.service.msgSrv.warning(res?.msg)
+        this.service.msgSrv.warning(res?.msg);
-
       }
-    })
+    });
   }
 }

src/app/routes/sys-setting/sys-setting.module.ts

@@ -8,7 +8,7 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared';
+import { DynamicSettingModule, SharedModule } from '@shared';
 import { StaffManagementComponent } from './components/staff-management/staff-management.component';
 import { SysSettingRoutingModule } from './sys-setting-routing.module';
 import { BuyerTranspowerComponent } from './components/staff-management/transpower/transpower.component';
@@ -61,10 +61,10 @@ const NOTROUTECOMPONENTS = [
   AuditResonConfigActionModalComponent,
   CartConfigActionModalComponent,
   SettingRoleEditComponent,
-  SettingMenuComponent,
+  SettingMenuComponent
 ];
 @NgModule({
   declarations: [...COMPONENTS, ...NOTROUTECOMPONENTS],
-  imports: [CommonModule, SysSettingRoutingModule, SharedModule]
+  imports: [CommonModule, SysSettingRoutingModule, SharedModule, DynamicSettingModule]
 })
 export class SysSettingModule {}

src/app/routes/usercenter/components/driver/captain/captain.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STColumn, STColumnBadge, STComponent, STData } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
+import { DynamicSettingModalComponent } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { UsermanageService } from '../../../services/usercenter.service';
 @Component({
@@ -82,6 +83,19 @@ export class UserCenterComponentsDriverCaptainComponent implements OnInit {
     });
   }
 
+  settingAction(item?: any) {
+    this.modal.create({
+      nzTitle: '基础设置',
+      nzContent: DynamicSettingModalComponent,
+      nzWidth: 900,
+      nzComponentParams: {
+        extendType: '4',
+        businessId: item.id
+      },
+      nzFooter: null
+    });
+  }
+
   expandToggle() {
     this._$expand = !this._$expand;
     this.sf?.setValue('/expand', this._$expand);
@@ -206,6 +220,10 @@ export class UserCenterComponentsDriverCaptainComponent implements OnInit {
             click: item => {
               this.router.navigate(['/usercenter/driver/captain/detail', item.appUserId]);
             }
+          },
+          {
+            text: '基础设置',
+            click: item => this.settingAction(item)
           }
         ]
       }

src/app/routes/usercenter/components/driver/driver.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STColumn, STColumnBadge, STComponent, STData } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { DynamicSettingModalComponent } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { UsermanageService } from '../../services/usercenter.service';
 @Component({
@@ -77,6 +78,19 @@ export class UserCenterComponentsDriverComponent implements OnInit {
     });
   }
 
+  settingAction(item?: any) {
+    this.modal.create({
+      nzTitle: '基础设置',
+      nzContent: DynamicSettingModalComponent,
+      nzWidth: 900,
+      nzComponentParams: {
+        extendType: '3',
+        businessId: item.id
+      },
+      nzFooter: null
+    });
+  }
+
   expandToggle() {
     this._$expand = !this._$expand;
     this.sf?.setValue('/expand', this._$expand);
@@ -264,6 +278,10 @@ export class UserCenterComponentsDriverComponent implements OnInit {
               this.router.navigate(['./detail', item.appUserId], { relativeTo: this.ar });
               // this.router.navigate(['./view', item.id], { relativeTo: this.ar, queryParams: { tenantId: item.tenantId } });
             }
+          },
+          {
+            text: '基础设置',
+            click: item => this.settingAction(item)
           }
         ]
       }

src/app/routes/usercenter/components/freight/list/list.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STColumn, STColumnBadge, STComponent, STData } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
+import { DynamicSettingModalComponent } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { UsermanageService } from '../../../services/usercenter.service';
 @Component({
@@ -52,6 +53,20 @@ export class FreightComponentsListComponent implements OnInit {
       return i;
     });
   }
+
+  settingAction(item?: any) {
+    this.modal.create({
+      nzTitle: '基础设置',
+      nzContent: DynamicSettingModalComponent,
+      nzWidth: 900,
+      nzComponentParams: {
+        extendType: '2',
+        businessId: item.id
+      },
+      nzFooter: null
+    });
+  }
+
   initSF() {
     this.schema = {
       properties: {
@@ -180,6 +195,10 @@ export class FreightComponentsListComponent implements OnInit {
               this.router.navigate(['./detail', item.id], { relativeTo: this.ar });
               // this.router.navigate(['./view', item.id], { relativeTo: this.ar, queryParams: { tenantId: item.tenantId } });
             }
+          },
+          {
+            text: '基础设置',
+            click: item => this.settingAction(item)
           }
         ]
       }

src/app/routes/usercenter/usercenter.module.ts

@@ -7,7 +7,7 @@
  * @FilePath: \tms-obc-web\src\app\routes\usercenter\usercenter.module.ts
  */
 import { NgModule } from '@angular/core';
-import { SharedModule } from '@shared';
+import { DynamicSettingModule, SharedModule } from '@shared';
 import { UserCenterComponentsDriverCaptainComponent } from './components/driver/captain/captain.component';
 import { UserCenterComponentsDriverDetailComponent } from './components/driver/detail/detail.component';
 import { UserCenterComponentsDriverComponent } from './components/driver/driver.component';
@@ -40,7 +40,7 @@ const COMPONENTS = [
 ];
 
 @NgModule({
-  imports: [SharedModule, UsercenterRoutingModule],
+  imports: [SharedModule, UsercenterRoutingModule, DynamicSettingModule],
   declarations: [...COMPONENTS]
 })
 export class UsercenterModule {}

src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html

@@ -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>

src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.less

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

src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts

@@ -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);
+  }
+}

src/app/shared/components/dynamic-setting/dynamic-setting-modal/dynamic-setting-modal.component.html

@@ -0,0 +1,3 @@
+<app-dynamic-setting-h5 [tabs]="tabs" [configList]="configList" [selectedTab]="selectedTab"
+    (selectedEvent)="changeType($event)" (saveEvent)="saveAction($event)" [tabSpan]="6" [labelWidth]="200" >
+</app-dynamic-setting-h5>

src/app/shared/components/dynamic-setting/dynamic-setting-modal/dynamic-setting-modal.component.ts

@@ -0,0 +1,91 @@
+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-dynamic-setting-modal',
+  templateUrl: './dynamic-setting-modal.component.html',
+  styleUrls: ['./dynamic-setting-modal.component.less']
+})
+export class DynamicSettingModalComponent 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: 'sys.config',
+        extendType: this.extendType,
+        businessId: this.businessId
+      })
+      .subscribe((res: Array<any>) => {
+        if (res?.length > 0) {
+          const typeData = res.find(config => config.configFullKey === 'sys.config');
+          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 [];
+  }
+}

src/app/shared/components/dynamic-setting/dynamic-setting.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicSettingH5Component } from './dynamic-setting-h5/dynamic-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 { DynamicSettingModalComponent } from './dynamic-setting-modal/dynamic-setting-modal.component';
+
+@NgModule({
+  declarations: [DynamicSettingH5Component, DynamicSettingModalComponent],
+  imports: [CommonModule, FormsModule, SHARED_ZORRO_MODULES, SHARED_DELON_MODULES],
+  exports: [DynamicSettingH5Component]
+})
+export class DynamicSettingModule {}

src/app/shared/components/dynamic-setting/index.ts

@@ -0,0 +1,2 @@
+export * from './dynamic-setting.module';
+export * from './dynamic-setting-modal/dynamic-setting-modal.component';

src/app/shared/index.ts

@@ -18,6 +18,7 @@ export * from './components/address/index';
 export * from './components/captcha/index';
 export * from './components/amap/index';
 export * from './components/dict-select/index';
+export * from './components/dynamic-setting';
 
 // Utils
 export * from './utils';