添加富文本插件

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

@@ -0,0 +1,39 @@
+<page-header-wrapper [title]="'协议配置'"></page-header-wrapper>
+
+<nz-card>
+  <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>
+      </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>
+          <!-- <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>
+          <button nz-button nzType="link" (click)="update()">修改</button>
+        </div>
+        <div [innerHTML]="tabItem.content"></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>
+          </div>
+        </div>
+        <div class="mb-md save-btn">
+          <button nz-button nzSize="large" nzType="default" (click)="cancel()">取消</button>
+          <button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="save()">保存</button>
+        </div>
+      </nz-card>
+    </div>
+  </div>
+</nz-card>

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

@@ -0,0 +1,90 @@
+:host {
+  // [nz-menu] {
+  //   float: left;
+  //   width: 254px;
+  //   min-height: 810px;
+  // }
+  ::ng-deep {
+    .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+      font-weight: 500;
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+      // background: transparent;
+    }
+    .ant-menu-inline .ant-menu-item::after {
+      border-right: none;
+    }
+    .ant-menu-item-selected {
+      background: transparent;
+    }
+    .ant-menu-inline .ant-menu-submenu-title {
+      margin: 0;
+    }
+    .console-menu-icon {
+      width: 20px;
+    }
+    .console-menu-title {
+      margin-left: 9px;
+      vertical-align: middle;
+    }
+    .ant-menu-item:focus {
+      outline: none !important;
+    }
+    .tabset-container {
+      height: 450px;
+      margin-top: 16px;
+      overflow-y: auto;
+    }
+  }
+  h3 {
+    margin-left: 15px;
+    padding: 8px 15px;
+    font-weight: 700;
+  }
+  .times {
+    display: inline-block;
+    padding-right: 15px;
+  }
+  .width100 {
+    width: 100px;
+    margin: 0 5px;
+  }
+  .width200 {
+    width: 200px;
+    margin: 0 5px;
+  }
+  .sales-order {
+    margin-left: 15px;
+    padding: 8px 40px;
+    font-size: 18px;
+  }
+  .general-box {
+    height: 750px;
+    overflow: auto;
+  }
+  .card-height {
+    height: 800px;
+  }
+  .btn-right {
+    float: right;
+  }
+  .save-btn {
+    width: 100%;
+    text-align: right;
+  }
+  .ant-menu-vertical .ant-menu-item::after,
+  .ant-menu-vertical-left .ant-menu-item::after,
+  .ant-menu-vertical-right .ant-menu-item::after,
+  .ant-menu-inline .ant-menu-item::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-right: 3px solid #202886;
+    content: '';
+  }
+  .but_rigth {
+    margin-left: 16% !important;
+  }
+}

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

@@ -0,0 +1,125 @@
+import { DatePipe } from '@angular/common';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { SFComponent, SFSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import { Observable, Observer } from 'rxjs';
+import { Router } from '@angular/router';
+import { SystemService } from '../../services/system.service';
+import { EnvironmentService } from '@env/environment.service';
+@Component({
+  selector: 'app-agreement-config-components-base',
+  styleUrls: ['./agreement-config.component.less'],
+  templateUrl: './agreement-config.component.html'
+})
+export class AgreementConfigComponentsBaseComponent implements OnInit {
+  @ViewChild('sf1', { static: false }) sf1!: SFComponent;
+
+  i: any;
+  formDate: any = {};
+  schema1!: SFSchema;
+  ui1: SFUISchema = {};
+  idx: any = 0;
+  isUpdate = false;
+  type = 0;
+  tabItem = {
+    content: '',
+    id: 0,
+    modifyTime: '',
+    type: '',
+    typeName: ''
+  };
+  tabs = [
+    {
+      name: '《货主端用户注册协议》'
+    },
+    {
+      name: '《司机端用户注册协议》'
+    },
+    {
+      name: '《服务协议》'
+    },
+    {
+      name: '《隐私政策》'
+    },
+    {
+      name: '《人脸识别协议》'
+    }
+  ];
+
+  constructor(private service: SystemService) {}
+
+  ngOnInit() {
+    this.loadAgreement();
+    this.initSF();
+  }
+  initSF() {
+    this.schema1 = {
+      properties: {
+        content: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'tinymce',
+            loadingTip: 'loading...',
+            config: {
+              height: 650
+            }
+          }
+        }
+      }
+    };
+    this.ui1 = {
+      '*': {
+        spanLabelFixed: 10,
+        grid: { span: 24 }
+      }
+    };
+  }
+
+  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();
+  }
+  save() {
+    const params = {
+      id: this.tabItem.id,
+      content: encodeURIComponent(this.sf1?.value.content),
+      type: this.type
+    };
+    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;
+    //   }
+    // });
+  }
+
+  cancel() {
+    this.isUpdate = false;
+  }
+}

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AgreementConfigComponentsBaseComponent } from './components/agreement-config/agreement-config.component';
 import { AuditReasonConfigComponent } from './components/audit-reason-config/audit-reason-config.component';
 import { BasicConfigComponent } from './components/basic-config/basic-config.component';
 import { CartConfigComponent } from './components/cart-config/cart-config.component';
@@ -18,6 +19,7 @@ const routes: Routes = [
   { path: 'version-logs', component: VersionLogsComponent },
   { path: 'audit-reason-config', component: AuditReasonConfigComponent },
   { path: 'cart-config', component: CartConfigComponent },
+  { path: 'agreement-config', component: AgreementConfigComponentsBaseComponent },
 ];
 
 @NgModule({

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

@@ -15,6 +15,7 @@ import { BasicConfigActionModalComponent } from './components/basic-config/basic
 import { AuditResonConfigActionModalComponent } from './components/audit-reason-config/audit-reson-config-action-modal/audit-reson-config-action-modal.component';
 import { CartConfigComponent } from './components/cart-config/cart-config.component';
 import { CartConfigActionModalComponent } from './components/cart-config/cart-config-action-modal/cart-config-action-modal.component';
+import { AgreementConfigComponentsBaseComponent } from './components/agreement-config/agreement-config.component';
 
 const COMPONENTS = [
   StaffManagementComponent,
@@ -24,7 +25,8 @@ const COMPONENTS = [
   UserLogsComponent,
   VersionLogsComponent,
   AuditReasonConfigComponent,
-  CartConfigComponent
+  CartConfigComponent,
+  AgreementConfigComponentsBaseComponent
 ];
 const NOTROUTECOMPONENTS = [
   BuyerTranspowerComponent,

src/app/shared/index.ts

@@ -22,3 +22,7 @@ export * from './utils/yuan';
 
 // Module
 export * from './shared.module';
+export * from './shared-delon.module';
+export * from './shared-zorro.module';
+export * from './shared-third.module';
+export * from './widget/st-widget.module';

src/app/shared/shared-third.module.ts

@@ -0,0 +1,33 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgModule } from '@angular/core';
+import { apiConf } from '@conf/api.conf';
+import { NgxTinymceModule } from 'ngx-tinymce';
+import { environment } from '@env/environment';
+import { AbmModule } from 'angular-baidu-maps';
+
+const TinyMce = NgxTinymceModule.forRoot({
+  baseURL: 'assets/tinymce/',
+  config: {
+    language_url: 'assets/tinymce/langs/zh_CN.js',
+    language: 'zh_CN',
+    plugins: [
+      'advlist autolink lists link image charmap print preview anchor',
+      'searchreplace visualblocks code fullscreen',
+      'insertdatetime media table paste imagetools wordcount'
+    ],
+    toolbar:
+      'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+  }
+});
+
+const SHARED_THIRD_MODULES = [DragDropModule, ScrollingModule];
+
+@NgModule({
+  declarations: [],
+  entryComponents: [],
+  imports: [...SHARED_THIRD_MODULES, TinyMce, AbmModule.forRoot({ apiKey: '8oZDc2QBZSbjNpoC42cd5jGVa3GknG1c' })],
+  exports: [...SHARED_THIRD_MODULES, NgxTinymceModule]
+})
+export class SharedThirdModule {}

src/app/shared/shared.module.ts

@@ -25,6 +25,7 @@ import { MasonryModule } from './components/masonry';
 import { MouseFocusModule } from './components/mouse-focus';
 import { ScrollbarModule } from './components/scrollbar';
 import { StatusLabelModule } from './components/status-label';
+import { SharedThirdModule } from './shared-third.module';
 
 const MODULES = [
   AddressModule,
@@ -35,6 +36,7 @@ const MODULES = [
   MouseFocusModule,
   ScrollbarModule,
   StatusLabelModule,
+  SharedThirdModule,
   ...PRO_SHARED_MODULES
 ];
 // #endregion

src/app/shared/widget/st-widget.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { STWidgetRegistry } from '@delon/abc/st';
-import { DelonFormModule } from '@delon/form';
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
 import { AddressModule, EditorModule, FileManagerModule } from '@shared';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
@@ -58,7 +58,7 @@ export const STWIDGET_COMPONENTS = [
   entryComponents: STWIDGET_COMPONENTS
 })
 export class STWidgetModule {
-  constructor(widgetRegistry: STWidgetRegistry) {
+  constructor(widgetRegistry: WidgetRegistry) {
     widgetRegistry.register(EditorWidget.KEY, EditorWidget);
     widgetRegistry.register(ImgWidget.KEY, ImgWidget);
     widgetRegistry.register(AddressWidget.KEY, AddressWidget);