edit

src/app/layout/passport/passport.component.ts

@@ -7,9 +7,9 @@ import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
   styleUrls: ['./passport.component.less']
 })
 export class LayoutPassportComponent implements OnInit {
-  constructor(@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
+  constructor() {}
 
   ngOnInit(): void {
-    this.tokenService.clear();
+    // this.tokenService.clear();
   }
 }

src/app/routes/passport/components/order-agreement/order-agreement.component.html

@@ -1,9 +1,9 @@
 <div class="page-box">
   <div style="width: 90%; margin: 5rem auto">
     <h1 class="mb-md mt-md">
-      {{ agreementContent?.typeName }}
+      {{ agreementContent?.agreementName }}
     </h1>
     <p class="md">最新版本生效日期：{{ agreementContent?.modifyTime }}</p>
-    <div [innerHTML]="agreementContent?.content"></div>
+    <div [innerHTML]="agreementContent?.agreementContent | safehtml"></div>
   </div>
 </div>

src/app/routes/passport/components/order-agreement/order-agreement.component.ts

@@ -16,9 +16,10 @@ export class OrderAgreementComponent implements OnInit {
     });
   }
   ngOnInit() {
-    this.service.request(this.service.$api_get_agreement, { type: this.type }).subscribe(res => {
+    console.log({ type: this.type });
+
+    this.service.request(this.service.$api_get_agreement, { type: this.type }, 'POST', true, 'FORM').subscribe(res => {
       if (res) {
-        console.log(res);
         this.agreementContent = res;
       }
     });

src/app/routes/passport/passport.module.ts

@@ -6,6 +6,7 @@ import { SEModule } from '@delon/abc/se';
 import { DelonACLModule } from '@delon/acl';
 import { DelonFormModule } from '@delon/form';
 import { AlainThemeModule } from '@delon/theme';
+import { PipeModule } from '@shared';
 import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -60,6 +61,7 @@ const COMPONENTS = [
     DelonFormModule,
     NzStepsModule,
     ProPageModule,
+    PipeModule
   ],
   declarations: COMPONENTS
 })

src/app/routes/passport/services/passport.service.ts

@@ -9,7 +9,7 @@ import { EAFileUtil } from 'src/app/shared/utils/file.util';
 })
 export class PassportService extends BaseService {
   // 登录协议，服务订购协议
-  public $api_get_agreement = `/scm/cms/cms/agreement/getAgreement?_allow_anonymous=true`;
+  public $api_get_agreement = `/api/mdc/pbc/agreementInfo/getAgreementInfoByType?_allow_anonymous=true`;
 
   constructor(public injector: Injector) {
     super(injector);

src/app/routes/sys-setting/components/agreement-config/agreement-config.component.html

@@ -4,29 +4,31 @@
   <div nz-row [nzGutter]="8">
     <div nz-col nzSpan="4">
       <ul nz-menu nzMode="inline" class="card-height">
-        <li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(idx)" *ngFor="let item of tabs; let idx = index">
-          {{ item.name }}
+        <li nz-menu-item [nzSelected]="item.type===tabItem.type" (click)="changeType(item)" *ngFor="let item of tabs;">
+          {{ item.agreementName }}
         </li>
       </ul>
     </div>
     <div nz-col nzSpan="20" style="overflow: scroll">
       <nz-card class="card-height" *ngIf="!isUpdate">
         <div class="mb-md">
-          <strong>{{ tabItem.typeName }}</strong>
+          <strong>{{ tabItem.agreementName }}</strong>
           <!-- <button class="btn-right" nz-button nzSize="large" nzType="default" (click)="update()">修改</button> -->
         </div>
         <div class="mb-lg">
           更新时间： {{ tabItem.modifyTime }}
-          <a style="margin-left: 8px" target="_blank" [queryParams]="{ type: idx }" [routerLink]="['/agreement']">预览</a>
+          <a style="margin-left: 8px" target="_blank" [queryParams]="{ type: tabItem.type }"
+            [routerLink]="['/passport/agreement']">预览</a>
           <button nz-button nzType="link" (click)="update()">修改</button>
         </div>
-        <div [innerHTML]="tabItem.content"></div>
+        <div [innerHTML]="tabItem.agreementContent | safehtml"></div>
       </nz-card>
 
       <nz-card class="card-height" *ngIf="isUpdate">
         <div nz-row nzGutter="8">
           <div nz-col nzSpan="24">
-            <sf #sf1 mode="edit" [schema]="schema1" [ui]="ui1" button="none"> </sf>
+            <sf #sf mode="edit" [schema]="schema1" [ui]="{ '*': { spanLabelFixed: 10, grid: { span: 24 }} }"
+              button="none"> </sf>
           </div>
         </div>
         <div class="mb-md save-btn">

src/app/routes/sys-setting/components/agreement-config/agreement-config.component.ts

@@ -13,39 +13,11 @@ import { EnvironmentService } from '@env/environment.service';
   templateUrl: './agreement-config.component.html'
 })
 export class AgreementConfigComponentsBaseComponent implements OnInit {
-  @ViewChild('sf1', { static: false }) sf1!: SFComponent;
-
-  i: any;
-  formDate: any = {};
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
   schema1!: SFSchema;
-  ui1: SFUISchema = {};
-  idx: any = 0;
   isUpdate = false;
-  type = 0;
-  tabItem = {
-    content: '',
-    id: 0,
-    modifyTime: '',
-    type: '',
-    typeName: ''
-  };
-  tabs = [
-    {
-      name: '《货主端用户注册协议》'
-    },
-    {
-      name: '《司机端用户注册协议》'
-    },
-    {
-      name: '《服务协议》'
-    },
-    {
-      name: '《隐私政策》'
-    },
-    {
-      name: '《人脸识别协议》'
-    }
-  ];
+  tabItem: any = {};
+  tabs: any[] = [];
 
   constructor(private service: SystemService) {}
 
@@ -53,7 +25,8 @@ export class AgreementConfigComponentsBaseComponent implements OnInit {
     this.loadAgreement();
     this.initSF();
   }
-  initSF() {
+
+  initSF(data?: any) {
     this.schema1 = {
       properties: {
         content: {
@@ -65,58 +38,51 @@ export class AgreementConfigComponentsBaseComponent implements OnInit {
             config: {
               height: 650
             }
-          }
+          },
+          default: data?.agreementContent || ''
         }
       }
     };
-    this.ui1 = {
-      '*': {
-        spanLabelFixed: 10,
-        grid: { span: 24 }
+  }
+
+  changeType(item: any): void {
+    this.isUpdate = false;
+    this.tabItem = item;
+  }
+
+  loadAgreement(type?: number) {
+    this.service.request(`${this.service.$api_get_agreement_page}`).subscribe(res => {
+      if (res) {
+        res.records = res.records.map((item: any) => ({ ...item, agreementContent: decodeURIComponent(item.agreementContent) }));
+        this.tabs = res.records;
+        if (type) {
+          this.tabItem = res.records.find((i: any) => i.type === type);
+        } else {
+          this.tabItem = res.records?.[0];
+        }
       }
-    };
-  }
-
-  changeType(type: number): void {
-    this.idx = type;
-    if (type > 0) {
-      this.isUpdate = false;
-      this.type = +type;
-
-      this.loadAgreement();
-    }
-  }
-
-  loadAgreement() {
-    // this.service.request(`${this.service.$api_general_getAgreement}`, { type: this.type }).subscribe((res) => {
-    //   console.log('🚀 ~ this.service.request ~ res', res);
-    //   if (res) {
-    //     this.tabItem = res;
-    //   }
-    // });
+    });
   }
 
   update() {
     this.isUpdate = true;
-    console.log('🚀 ~ update ~ isUpdate', this.tabItem);
-
-    this.formDate.content = this.tabItem.content;
-    this.initSF();
+    this.initSF(this.tabItem);
   }
   save() {
     const params = {
       id: this.tabItem.id,
-      content: encodeURIComponent(this.sf1?.value.content),
-      type: this.type
+      agreementContent: encodeURIComponent(this.sf?.value.content),
+      type: this.tabItem.type,
+      agreementName: this.tabItem.agreementName
     };
     this.isUpdate = false;
-    // this.service.request(`${this.service.$api_general_updateAgreement}`, params).subscribe((res) => {
-    //   if (res) {
-    //     this.service.msgSrv.success('保存成功');
-    //     this.changeType(this.type);
-    //     this.isUpdate = false;
-    //   }
-    // });
+    this.service.request(`${this.service.$api_update_agreement}`, params).subscribe(res => {
+      if (res) {
+        this.service.msgSrv.success('保存成功');
+        this.isUpdate = false;
+        this.loadAgreement(this.tabItem.type);
+      }
+    });
   }
 
   cancel() {

src/app/routes/sys-setting/services/system.service.ts

@@ -87,6 +87,11 @@ export class SystemService extends BaseService {
   // 查询版本发布表
   public $api_get_version_logs = '/api/mdc/versionPublish/list/page';
 
+  // 查询协议列表
+  public $api_get_agreement_page = '/api/mdc/pbc/agreementInfo/list/page';
+  // 编辑协议
+  public $api_update_agreement = '/api/mdc/pbc/agreementInfo/modifyAgreementInfo';
+
   $api_getRoleTemplateInfo: string = '';
   $api_getFunctionButtonInfo: string = '';
   $api_getFunctionDataInfo: string = '';

src/app/shared/index.ts

@@ -22,6 +22,7 @@ export * from './components/dict-select/index';
 // Utils
 export * from './utils';
 export * from './services';
+export * from './pipes';
 
 // Module
 export * from './shared.module';

src/app/shared/pipes/index.ts

@@ -0,0 +1,2 @@
+export * from './pipe.module';
+export * from './trushtml.pipe';

src/app/shared/pipes/pipe.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TrushtmlPipe } from './trushtml.pipe';
+
+@NgModule({
+  declarations: [TrushtmlPipe],
+  imports: [CommonModule],
+  exports: [TrushtmlPipe]
+})
+export class PipeModule {}

src/app/shared/pipes/trushtml.pipe.ts

@@ -0,0 +1,29 @@
+/*
+ * @Description:
+ * @Author: wsm
+ * @Date: 2021-06-23 17:02:20
+ * @LastEditTime: 2021-06-23 17:04:57
+ * @LastEditors: wsm
+ * @Reference:
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safehtml',
+})
+export class TrushtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(value: any, args?: any): any {
+    try {
+      if (!value || value === '') {
+        return '';
+      }
+      return this.sanitizer.bypassSecurityTrustHtml(value);
+    } catch (e) {
+      console.warn(e);
+      return '';
+    }
+  }
+}

src/app/shared/shared.module.ts

@@ -30,6 +30,7 @@ import { LogisticsTimeLineComponent } from './components/logistics-time-line/log
 import { AmapModule } from './components/amap/amap.module';
 import { ImageListModule } from './components/imagelist';
 import { DictSelectComponent } from './components/dict-select';
+import { PipeModule } from './pipes';
 
 const MODULES = [
   AddressModule,
@@ -43,6 +44,7 @@ const MODULES = [
   SharedThirdModule,
   AmapModule,
   ImageListModule,
+  PipeModule,
   ...PRO_SHARED_MODULES
 ];
 // #endregion