@dignite-ng/expand.cms 0.0.58 → 2.0.0-rc.10

package/src/lib/components/admin/sections/entry-types/create-or-edit.component.html

@@ -0,0 +1,195 @@
+<form class="row g-3 needs-validation" [formGroup]="newEntity" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}"  (submit)="save()">
+    <abp-page [title]="entryTypesId ? ('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)"
+        [toolbar]="true">
+        <div class="create-or-edit-entry-type-page">
+            <div class="card">
+                <button type="submit" style="display: none;" #submitclick></button>
+                <div class="card-body">
+                    <div class="">
+                        <div class="mb-3">
+                            <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                            <input type="text" class="form-control" formControlName="displayName"
+                                (blur)="disPlayNameInputBlur($event)" placeholder="" />
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                            <input type="text" class="form-control" formControlName="name" placeholder="" />
+                        </div>
+                        <div formArrayName="fieldTabs">
+                            <div class="mb-3">
+                                <label class="form-label">{{'Cms::FieldLayout' | abpLocalization}}</label>
+                                <div class="container">
+                                    <div class="row">
+                                        <div class="col-sm-8">
+                                            <ul ngbNav #nav="ngbNav" [(activeId)]="navActive" class="nav nav-tabs">
+                                                <ng-container *ngFor="let item of resultSource; let i = index">
+                                                    <li [ngbNavItem]="i">
+                                                        <button type="button" ngbDropdown ngbNavLink>
+                                                            {{ item.name }}
+                                                            <span class="ms-1" (click.stop)="$event.stopPropagation()"
+                                                                ngbDropdownToggle></span>
+                                                            <div ngbDropdownMenu style="z-index: 999;">
+                                                    <li ngbDropdownItem type="button"
+                                                        (click.stop)="editFieldTabs(item,i)">
+                                                        <i class="fas fa-edit"></i>
+                                                        {{'AbpUi::Edit' | abpLocalization}}
+                                                    </li>
+                                                    <li ngbDropdownItem *ngIf="resultSource.length !== 1" type="button"
+                                                        (click.stop)="deleteFieldTabs(i)">
+                                                        <i class="fas fa-trash"></i>
+                                                        {{'AbpUi::Delete' | abpLocalization}}
+                                                    </li>
+                                        </div>
+                                        </button>
+                                        <ng-template ngbNavContent>
+                                            <div class="p-2" ondragover="event.preventDefault();"
+                                                (drop)="dragToResultSourceDropped(item,i)" style="height: 100%;">
+                                                <p  class="form-text text-muted" *ngIf="item.fields.length === 0">
+                                                    {{'Cms::DragAndDropFieldTips' | abpLocalization}}
+                                                </p>
+                                                <ul class="list-group" style="height: 100%;">
+                                                    <ng-container *ngFor="let el of item.fields; let iel = index">
+                                                        <li draggable="true" (dragstart)="fromResultSourceDragStart(el)"
+                                                            (drop)="dragToResultSourceItemDropped(iel)"
+                                                            class="list-group-item d-flex align-items-center justify-content-between py-1"
+                                                            style="position: unset;">
+                                                            {{ el.displayName }}
+                                                            <button class="p-0 btn btn-sm btn-light"
+                                                                (click.stop)="EditFieldModalOpen(el,iel)"
+                                                                type="button"><i class="fas fa-wrench p-sm-1"
+                                                                    role="button"></i></button>
+                                                        </li>
+                                                    </ng-container>
+                                                </ul>
+
+                                            </div>
+                                        </ng-template>
+                                        </li>
+                                        </ng-container>
+                                        <li class="nav-item" role="presentation">
+                                            <button type="button" class="nav-link" (click.stop)="addFieldTabs()">
+                                                <i class="fas fa-plus-circle"></i>
+                                                {{'Cms::NewTab' | abpLocalization}}
+                                            </button>
+                                        </li>
+                                        </ul>
+                                        <div [ngbNavOutlet]="nav" class="mt-2 bordernNavs p-0"></div>
+                                    </div>
+                                    <div class="col-sm-4">
+                                        <div ngbAccordion #accordion="ngbAccordion" ondragover="event.preventDefault();"
+                                            (drop)="dragToDataSourceDropped()" style="min-height: 80px;">
+                                            <ng-container *ngFor="let item of fieldGroupList; let i = index">
+                                                <div [ngbAccordionItem]="item.name" *ngIf="item.fields.length > 0">
+                                                    <h2 ngbAccordionHeader>
+                                                        <button ngbAccordionButton>{{
+                                                            ('Cms::'+item.name) | abpLocalization }}</button>
+                                                    </h2>
+                                                    <div ngbAccordionCollapse>
+                                                        <div ngbAccordionBody>
+                                                            <ng-template>
+                                                                <ul class="list-group">
+                                                                    <ng-container
+                                                                        *ngFor="let el of item.fields; let ii = index">
+                                                                        <li draggable="true"
+                                                                            (dragstart)="fromDataSourceDragStart(el,ii,i)"
+                                                                            class="list-group-item">
+                                                                            {{ el.displayName }}
+                                                                        </li>
+                                                                    </ng-container>
+                                                                </ul>
+                                                            </ng-template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </ng-container>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        </div>
+    </abp-page>
+
+</form>
+
+<abp-modal [(visible)]="visibleTabsOpen" [busy]="modalBusy" (visibleChange)="VisibleTabsChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{ editFieldTabsSelect ? ('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>22
+    </ng-template>
+    <ng-template #abpBody>
+        <ng-template #loaderRef>
+            <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
+        </ng-template>
+        <ng-container *ngIf="editFieldTabsFrom; else loaderRef">
+            <form class="sites-modal-form" [formGroup]="editFieldTabsFrom" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}" (submit)="editFieldTabsSave()">
+                <button type="submit" #editFieldTabsModalSubmitBtn style="display: none"></button>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="name" placeholder="" />
+                </div>
+            </form>
+        </ng-container>
+    </ng-template>
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check" 
+            (click)="editFieldTabsModalSubmitBtn.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>
+
+
+<abp-modal [(visible)]="visibleEditFieldOpen" [busy]="modalBusy" (visibleChange)="VisibleEditFieldChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{'AbpUi::Edit' | abpLocalization}}</h3>
+    </ng-template>
+    <ng-template #abpBody>
+        <ng-template #loaderRef>
+            <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
+        </ng-template>
+        <ng-container *ngIf="editFieldFrom; else loaderRef">
+            <form class="sites-modal-form" [formGroup]="editFieldFrom" (keydown.enter)="$event.preventDefault()" (submit)="editFieldSave()">
+                <button type="submit" #editFieldModalSubmitBtn style="display: none"></button>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName" placeholder="" />
+                </div>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="required"
+                            id="required" />
+                        <label class="form-check-label" for="required"> {{'Cms::Required' | abpLocalization}} </label>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="showInList"
+                            id="showInList" />
+                        <label class="form-check-label" for="showInList"> {{'Cms::ShowInList' | abpLocalization}}
+                        </label>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="enableSearch"
+                            id="enableSearch" />
+                        <label class="form-check-label" for="enableSearch"> {{'Cms::EnableSearch' | abpLocalization}}
+                        </label>
+                    </div>
+                </div>
+            </form>
+        </ng-container>
+    </ng-template>
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check" [disabled]="!editFieldFrom.valid"
+            (click)="editFieldModalSubmitBtn.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

package/src/lib/components/admin/sections/entry-types/create-or-edit.component.scss

@@ -0,0 +1 @@
+::ng-deep .create-or-edit-entry-type-page{.dignite_page{height:calc(100vh - 32px - 53px - 40px);overflow:auto}.form-control,.form-select{padding:.475rem 1.25rem}.cursor-move{cursor:move}.bordernNavs{border:var(--bs-border-width) solid var(--lpx-border-color);padding-left:inherit;padding-right:inherit;height:calc(100% - 60px)}.tab-pane{height:100%}}

package/src/lib/components/admin/sections/entry-types/create-or-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateOrEditComponent } from './create-or-edit.component';
+
+describe('CreateOrEditComponent', () => {
+  let component: CreateOrEditComponent;
+  let fixture: ComponentFixture<CreateOrEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateOrEditComponent]
+    });
+    fixture = TestBed.createComponent(CreateOrEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/admin/sections/entry-types/create-or-edit.component.ts

@@ -0,0 +1,442 @@
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import { LocalizationService } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { CmsApiService } from '../../../../services';
+import {
+  CreateOrEditEntryTypeInputBase,
+  fieldTabsBase,
+  fieldsBase,
+} from './create-or-edit.-entry-type-input-base';
+import { Location } from '@angular/common';
+import { ECmsComponent } from '../../../../enums';
+import { ValidatorsService } from '@dignite-ng/expand.core';
+import { UpdateListService } from '@dignite-ng/expand.core';
+import { finalize } from 'rxjs';
+import { FieldAdminService, FieldGroupAdminService } from '../../../../proxy/dignite/cms/admin/fields';
+import { EntryTypeAdminService } from '../../../../proxy/dignite/cms/admin/sections';
+@Component({
+  selector: 'cms-create-or-edit',
+  templateUrl: './create-or-edit.component.html',
+  styleUrls: ['./create-or-edit.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.SectionsCreateOrEdit,
+    },
+  ],
+})
+export class CreateOrEditComponent implements OnInit {
+  constructor(
+    private toaster: ToasterService,
+    public _location: Location,
+    private route: ActivatedRoute,
+    public _FieldGroupAdminService: FieldGroupAdminService,
+    public _FieldAdminService: FieldAdminService,
+    public _EntryTypeAdminService: EntryTypeAdminService,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService
+  ) {}
+  private fb = inject(FormBuilder);
+  private _UpdateListService = inject(UpdateListService);
+  /**表单实体 */
+  newEntity: FormGroup | undefined = this.fb.group(new CreateOrEditEntryTypeInputBase());
+  /**版块id */
+  sectionId: string = '';
+  /**条目类型id */
+  entryTypesId: string = '';
+  /**条目类型详情 */
+  entryTypesSelect: any;
+
+  get fieldTabs() {
+    return this.newEntity.get('fieldTabs') as FormArray;
+  }
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**触发提交按钮 */
+  submitclickBtn() {
+    this.submitclick.nativeElement.click();
+  }
+  ngOnInit() {
+    let sectionId = this.route.snapshot.params.sectionsId;
+    this.entryTypesId = this.route.snapshot.params.entryTypesId || '';
+    if (sectionId) {
+      this.sectionId = sectionId;
+      this.addControlToFieldTabs();
+      this.getFieldGroup();
+    }
+  }
+
+  /**给fieldTabs添加新控件 */
+  addControlToFieldTabs(nameValue = '') {
+    const newFormGroup = this.fb.group(
+      new fieldTabsBase({
+        name:
+          this.fieldTabs.length === 0
+            ? this._LocalizationService.instant(`Cms::FieldTab`)
+            : nameValue,
+      })
+    );
+    this.fieldTabs.push(newFormGroup);
+    this.resultSource.push(newFormGroup.value);
+    this.navActive = this.resultSource.length - 1;
+  }
+
+  /**获取字段分组 */
+  getFieldGroup() {
+    this._FieldGroupAdminService.getList({}).subscribe(async res => {
+      let fieldList: any = await this.getFieldList();
+      let fieldGroupList = res.items;
+      fieldGroupList.unshift({
+        id: null,
+        name: 'UngroupedFields',
+      });
+      fieldGroupList.forEach((el: any, index) => {
+        el.fields = fieldList.filter(els => els.groupId === el.id);
+      });
+      this.fieldGroupList = fieldGroupList;
+      this.fieldList = this.deepClone(fieldList);
+      let entryTypesId = this.entryTypesId;
+      if (entryTypesId) {
+        this.entryTypesId = entryTypesId;
+        this.getEntryTypes();
+      }
+    });
+  }
+  /**获取条目类型详情 */
+  getEntryTypes() {
+    let fieldList: any = this.deepClone(this.fieldList);
+    this._EntryTypeAdminService.get(this.entryTypesId).subscribe(res => {
+      res.fieldTabs.forEach(el => {
+        el.fields.forEach((eld: any) => {
+          eld.id = eld.fieldId;
+          eld.groupId = fieldList.find(elfd => elfd.id == eld.fieldId).groupId;
+          this.formRightGroup.push(eld);
+          let fieldindex = fieldList.findIndex(elfl => elfl.id == eld.fieldId);
+          fieldList.splice(fieldindex, 1);
+        });
+      });
+      this.fieldGroupList.forEach((el: any, index) => {
+        el.fields = fieldList.filter(els => els.groupId === el.id);
+      });
+      this.newEntity.patchValue(res);
+      this.entryTypesSelect = res;
+      this.resultSource = res.fieldTabs;
+    });
+  }
+  /**
+   * 深拷贝--方法
+   * $api.deepClone()  */
+  deepClone(obj: any) {
+    if (typeof obj !== 'object' || obj === null) return obj;
+    const result = Array.isArray(obj) ? [] : {};
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+          if (obj[key] instanceof Date) {
+            result[key] = new Date(obj[key].getTime());
+          } else if (obj[key] instanceof RegExp) {
+            result[key] = new RegExp(obj[key]);
+          } else {
+            result[key] = this.deepClone(obj[key]);
+          }
+        } else {
+          result[key] = obj[key];
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   *
+   * @param nameValue 获取所有字段
+   */
+  getFieldList() {
+    return new Promise((resolve, rejects) => {
+      this._FieldAdminService
+        .getList({
+          maxResultCount: 1000,
+        })
+        .subscribe((res: any) => {
+          res.items.forEach(el => {
+            el.required = false;
+            el.showInList = false;
+            el.enableSearch = false;
+          });
+          resolve(res.items);
+        });
+    });
+  }
+
+  /**
+   * 拖拽 功能*/
+  /**数据源 */
+  /**数据源-字段分组数据-包含字段数据 fields */
+  fieldGroupList: any[] = [];
+  /**数据源-所有字段列表 */
+  fieldList: any[] = [];
+  /**数据源拖拽的分组下标 */
+  DataSourceGroupIndex: number;
+  /**数据源拖拽的字段下标 */
+  DataSourceFieldIndex: number;
+  /**目标源 结果*/
+  resultSource: any[] = [];
+
+  /**从数据源拖拽的元素 */
+  fromDataSourceDragEl: any;
+  /**从目标源拖拽的元素 */
+  fromResultSourceDragEl: any;
+
+  /**来自数据源的集合，用于从目标源拖回数据源时的判断，与取值 */
+  formRightGroup: any[] = [];
+  /**从数据源开始拖拽 */
+  fromDataSourceDragStart(element, fieldIndex, groupIndex) {
+    this.fromDataSourceDragEl = element;
+    this.DataSourceFieldIndex = fieldIndex;
+    this.DataSourceGroupIndex = groupIndex;
+    this.fromResultSourceDragEl = undefined;
+  }
+  /**从目标源开始拖拽 */
+  fromResultSourceDragStart(element) {
+    this.fromResultSourceDragEl = element;
+    this.fromDataSourceDragEl = undefined;
+    this.DataSourceFieldIndex = undefined;
+    this.DataSourceGroupIndex = undefined;
+  }
+  /**拖拽到数据源时触发 */
+  dragToDataSourceDropped() {
+    //从数据源拖拽到数据源-排序
+    if (this.fromDataSourceDragEl) {
+    }
+    let _fromResultSourceDragEl = this.fromResultSourceDragEl;
+    let formRightGroup = this.deepClone(this.formRightGroup);
+    let fieldList = this.deepClone(this.fieldList);
+
+    if (_fromResultSourceDragEl) {
+      //移动
+      //从目标源拖拽到数据源
+      // 拖拽目标源的下标
+      let dragResultSourceIndex = this.resultSource[this.navActive].fields.findIndex(
+        el => el.id == _fromResultSourceDragEl.id
+      );
+      //删除目标源中的数据
+      this.resultSource[this.navActive].fields.splice(dragResultSourceIndex, 1);
+      formRightGroup.splice(
+        formRightGroup.findIndex(el => el.id == _fromResultSourceDragEl.id),
+        1
+      );
+      this.fieldGroupList.forEach(el => {
+        if (el.id == _fromResultSourceDragEl.groupId) {
+          const elFieldsAll = fieldList.filter(els => els.groupId === el.id);
+          el.fields = elFieldsAll.filter(
+            item => !formRightGroup.some(itemB => item.id === itemB.id)
+          );
+        }
+      });
+      this.formRightGroup = formRightGroup;
+    }
+
+    this.setfieldTabsFrom();
+  }
+  /**拖拽到目标源时触发
+   *
+   */
+  dragToResultSourceDropped(fieldTabstem: any, fieldTabsIndex) {
+    const _fromDataSourceDragEl = this.fromDataSourceDragEl;
+    //从数据源拖拽到目标源
+    if (_fromDataSourceDragEl) {
+      this.fieldGroupList[this.DataSourceGroupIndex].fields.splice(this.DataSourceFieldIndex, 1);
+      this.resultSource[fieldTabsIndex].fields.push(_fromDataSourceDragEl);
+      this.formRightGroup.push(_fromDataSourceDragEl);
+    }
+
+    this.setfieldTabsFrom();
+  }
+  /** 从目标源拖拽到目标源*/
+  dragToResultSourceItemDropped(fieldsIndex) {
+    const _fromResultSourceDragEl = this.fromResultSourceDragEl;
+    if (_fromResultSourceDragEl) {
+      // 拖拽目标源的下标
+      let dragResultSourceIndex = this.resultSource[this.navActive].fields.findIndex(
+        el => el.id == _fromResultSourceDragEl.id
+      );
+      //删除目标源中的数据
+      this.resultSource[this.navActive].fields.splice(dragResultSourceIndex, 1);
+      this.resultSource[this.navActive].fields.splice(fieldsIndex, 0, _fromResultSourceDragEl);
+    }
+    this.setfieldTabsFrom();
+  }
+  /**设置formA表单 */
+  setfieldTabsFrom() {
+    let setArray = [];
+    this.resultSource.forEach(el => {
+      let fieldsArray = [];
+      el.fields.forEach(item => {
+        fieldsArray.push({
+          fieldId: item.id || item.fieldId,
+          displayName: item.displayName,
+          required: item?.required,
+          showInList: item?.showInList,
+          enableSearch: item?.enableSearch,
+        });
+      });
+      setArray.push({
+        name: el.name,
+        fields: fieldsArray,
+      });
+    });
+    this.newEntity.patchValue({
+      fieldTabs: setArray,
+    });
+  }
+  private _ValidatorsService = inject(ValidatorsService);
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+isSubmit:boolean = false;
+  /**保存表单 */
+  save() {
+    console.log(this.newEntity.value,'this.newEntity.value');
+    
+    if(this.isSubmit) return;
+    this.isSubmit = true;
+    let input = this.newEntity.value;
+
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.newEntity);
+    if (this._ValidatorsService.isCheckForm(this.formValidation, 'Cms')) return   this.isSubmit = false;
+
+    if (this.entryTypesSelect) {
+      this._EntryTypeAdminService.update(this.entryTypesSelect.id, input).pipe(finalize(()=>{
+        this.isSubmit = false;
+      })).subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`Cms::SavedSuccessfully`));
+        this._location.back();
+        this._UpdateListService.updateList();
+      });
+      return;
+    }
+    input.sectionId = this.sectionId;
+    this._EntryTypeAdminService.create(input).pipe(finalize(()=>{
+      this.isSubmit = false;
+    })).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`Cms::SavedSuccessfully`));
+      this._location.back();
+      this._UpdateListService.updateList();
+    });
+  }
+  /**编辑Tabs表单 */
+  editFieldTabsFrom: FormGroup | undefined;
+  /**模态框状态 */
+  visibleTabsOpen: boolean = false;
+  /**是否是忙碌状态 */
+  modalBusy: boolean = false;
+  /**正在编辑的tabs */
+  editFieldTabsSelect: any;
+  /**正在选中的nav */
+  navActive: any = 0;
+
+  /**表单控件模板-动态赋值表单控件 */
+  @ViewChild('editFieldTabsModalSubmitBtn', { static: false })
+  editFieldTabsModalSubmitBtn: ElementRef;
+
+  /**模态框状态改变回调 */
+  VisibleTabsChange(event) {
+    if (!event) {
+      this.editFieldTabsSelect = '';
+      this.formValidation = '';
+      return;
+    }
+  }
+  /**新建增加FieldTabs */
+  addFieldTabs() {
+    this.editFieldTabsFrom = this.fb.group(new fieldTabsBase());
+    this.visibleTabsOpen = true;
+  }
+  /**正在编辑的tab下标 */
+  newEditFieldTabsIndex: number;
+  /**编辑FieldTabs */
+  editFieldTabs(item, i) {
+    this.editFieldTabsFrom = this.fb.group(new fieldTabsBase());
+    this.editFieldTabsFrom.patchValue({
+      name: item.name,
+    });
+    this.editFieldTabsSelect = item;
+    this.visibleTabsOpen = true;
+    this.newEditFieldTabsIndex = i;
+  }
+
+  /**保存编辑tabs表单 */
+  editFieldTabsSave() {
+    if (!this.editFieldTabsFrom.value.name) {
+      return;
+    }
+    //编辑
+    if (this.editFieldTabsSelect) {
+      this.resultSource[this.newEditFieldTabsIndex].name = this.editFieldTabsFrom.value.name;
+      this.navActive = this.newEditFieldTabsIndex;
+    } else {
+      //新建
+      this.addControlToFieldTabs(this.editFieldTabsFrom.value.name);
+    }
+    this.visibleTabsOpen = false;
+    this.setfieldTabsFrom();
+  }
+  /**删除某个tabs表单 */
+  deleteFieldTabs(index) {
+    this.fieldTabs.removeAt(index);
+    this.resultSource.splice(index, 1);
+  }
+
+  /**编辑字段模态框状态 */
+  visibleEditFieldOpen: boolean = false;
+  /**编辑字段模态框表单 */
+  editFieldFrom: FormGroup | undefined;
+  /**表单控件模板-动态赋值表单控件-编辑字段 */
+  @ViewChild('editFieldModalSubmitBtn', { static: false }) editFieldModalSubmitBtn: ElementRef;
+  /**正在编辑的字段下标 */
+  EditFieldIndex: number;
+  /**编辑字段模态框状态状态改变回调 */
+  VisibleEditFieldChange(event) {
+    if (!event) {
+      this.EditFieldIndex = undefined;
+      return;
+    }
+  }
+  /**打开编辑字段模态框 */
+  EditFieldModalOpen(items, elIndex) {
+    this.visibleEditFieldOpen = true;
+    this.EditFieldIndex = elIndex;
+    this.editFieldFrom = this.fb.group(new fieldsBase());
+    this.editFieldFrom.patchValue(this.fieldTabs.value[this.navActive].fields[elIndex]);
+  }
+  /**保存编辑字段 */
+  editFieldSave() {
+    let input = this.editFieldFrom.value;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].displayName = input.displayName;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].required = input.required;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].showInList = input.showInList;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].enableSearch = input.enableSearch;
+    this.visibleEditFieldOpen = false;
+    this.setfieldTabsFrom();
+  }
+
+  /**name表单控件 */
+  get nameInput() {
+    return this.newEntity.get('name');
+  }
+  /**字段标签input失去标点生成字段名字 */
+  disPlayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let nameInput = this.nameInput;
+    if (nameInput.value) return;
+    nameInput.patchValue(pinyin);
+  }
+}

package/src/lib/components/admin/sections/entry-types/index.ts

@@ -0,0 +1,2 @@
+export * from './create-or-edit.-entry-type-input-base'
+export * from './create-or-edit.component'

package/src/lib/components/admin/sections/index.ts

@@ -0,0 +1,3 @@
+export * from './sections.component'
+export * from './entry-types'
+export * from './create-or-update-sections-input-base'