fix bug

2020-07-26 13:42:30 +08:00
parent 38e24fdd2c
commit f42beeb5bb
5 changed files with 74 additions and 49 deletions
--- a/src/app/view/write/components/publish-form/publish-form.component.html
+++ b/src/app/view/write/components/publish-form/publish-form.component.html
@@ -1,6 +1,6 @@
 <form nz-form [formGroup]="formGroup" (ngSubmit)="publishArticle()">
    <!--     文章类型       -->
-    <nz-form-item *ngIf="primaryData.id">
+    <nz-form-item *ngIf="primaryData?.id">
        <nz-form-label nzSpan="4">发布为</nz-form-label>
        <nz-form-control nzSpan="19" nzOffset="1" nzErrorTip="请选择文章发布类型">
            <nz-radio-group formControlName="isUpdate">
@@ -20,37 +20,7 @@
            </nz-radio-group>
        </nz-form-control>
    </nz-form-item>
-    <!--     标签       -->
-    <nz-form-item>
-        <nz-form-label [nzSpan]="4" (click)="showTagInput()">文章标签</nz-form-label>
-        <nz-form-control [nzSpan]="19" [nzOffset]="1">
-            <input formControlName="tagList" style="display: none">
-            <nz-tag *ngFor="let t of tagTmpList" nzMode="closeable"
-                    (nzOnClose)="handleClose(t)">{{t}}</nz-tag>
-            <nz-tag *ngIf="!tagInputVisible&&tagTmpList.length<5" (click)="showTagInput()">
-                <i nz-icon nzType="plus"></i> New Tag
-            </nz-tag>
-            <input #inputElement nz-input nzSize="small" *ngIf="tagInputVisible" formControlName="tags"
-                   type="text" style="width: 78px;" (blur)="handleTagInputConfirm()"
-                   (keydown.enter)="handleTagInputConfirm()">

-            <div *ngIf="tagListTouched&&formGroup.get('tagList').hasError('required')"
-                 class="errTip">未选择或添加标签
-            </div>
-
-            <nz-card nzSize="small" nzTitle="已有标签" title="最多可选五个标签">
-                <nz-tag *ngFor="let tag of tagNacList"
-                        style="margin: 4px; border: 1px dashed #6A6A6A;user-select: none"
-                        [nzMode]="(tagTmpList.length<5||tagTmpList.indexOf(tag.name) > -1)?'checkable':'default'"
-                        [nzChecked]="tagTmpList.indexOf(tag.name) > -1"
-                        (nzCheckedChange)="tagChange($event,tag.name)">
-                    {{ tag.name }}
-                </nz-tag>
-            </nz-card>
-
-
-        </nz-form-control>
-    </nz-form-item>
    <!--      文章分类      -->
    <nz-form-item>
        <nz-form-label nzSpan="4">文章分类</nz-form-label>
@@ -83,6 +53,40 @@
        </nz-form-control>
    </nz-form-item>

+    <!--     标签       -->
+    <nz-form-item>
+        <nz-form-label [nzSpan]="4" (click)="showTagInput()">文章标签</nz-form-label>
+        <nz-form-control [nzSpan]="19" [nzOffset]="1">
+            <input formControlName="tagList" style="display: none">
+            <nz-tag *ngFor="let t of tagTmpList;let i =index" nzMode="closeable"
+                    (nzOnClose)="handleClose(t)" [nzColor]="color[i]">{{t}}</nz-tag>
+            <div style="display: inline-block; width: 60px">
+                <editable-tag *ngIf="tagTmpList?.length!=5" [autoClear]="false"
+                              [text]="editTagText"
+                              [showConfirmModal]="false"
+                              [showEditIcon]="false"
+                              (inEditStatus)="editTagText=null"
+                              (valueChange)="handleTagInputConfirm($event)"
+                              size="small">
+                    <i nz-icon nzType="plus"></i>
+                </editable-tag>
+            </div>
+
+            <span *ngIf="tagListTouched&&formGroup.get('tagList').hasError('required')" class="errTip">未选择或添加标签</span>
+            <nz-card nzSize="small" nzTitle="已有标签" title="最多可选五个标签" style="margin-top: 10px;">
+                <nz-tag *ngFor="let tag of tagNacList"
+                        style="margin: 4px; border: 1px dashed #6A6A6A;user-select: none"
+                        [nzMode]="(tagTmpList?.length<5||tagTmpList?.indexOf(tag.name) > -1)?'checkable':'default'"
+                        [nzChecked]="tagTmpList&&tagTmpList.indexOf(tag.name) > -1"
+                        (nzCheckedChange)="tagChange($event,tag.name)">
+                    {{ tag.name }}
+                </nz-tag>
+            </nz-card>
+
+
+        </nz-form-control>
+    </nz-form-item>
+
    <button nz-button style="width: 100%" nzType="primary"
            type="submit" [disabled]="!formGroup.valid">提交
    </button>
--- a/src/app/view/write/components/publish-form/publish-form.component.less
+++ b/src/app/view/write/components/publish-form/publish-form.component.less
@@ -1,4 +1,3 @@
 .errTip {
  color: #f5222d;
-  line-height: 30px;
 }
--- a/src/app/view/write/components/publish-form/publish-form.component.ts
+++ b/src/app/view/write/components/publish-form/publish-form.component.ts
@@ -1,6 +1,7 @@
 import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Category, Tag} from '../../../../class/Tag';
+import {ColorList} from '../../../../utils/color'

@Component({
    selector: 'c-publish-form',
@@ -12,17 +13,28 @@ export class PublishFormComponent implements OnInit {
    constructor(private fb: FormBuilder) {
    }

-    @ViewChild('inputElement', {static: false}) tagInputElement: ElementRef;
+    @ViewChild('inputElement', {static: true}) tagInputElement: ElementRef;

    @Input() tagNacList: { name: string, size: number }[];
    @Input() categoryList: Category[];
    @Input() primaryData: { id: number, type: boolean, tags: string[], category: string, url?: string };
-    @Output() submitEvent = new EventEmitter<{ id: number, type: boolean, tags: string[], category: string, url?: string }>();
+    @Output() submitEvent = new EventEmitter<{
+        id: number,
+        type: boolean,
+        tags: string[],
+        category: string,
+        isUpdate: boolean,
+        url?: string
+    }>();

    formGroup: FormGroup;
    tagTmpList: string[] = [];
    tagInputVisible: boolean = false;
    tagListTouched: boolean = false;
+    editTagText: string = '新增';
+
+    color: string[] = [];
+    randomColor = () => this.color = ColorList.map(c => c.bgColor).sort(() => Math.floor(Math.random() * 2));

    ngOnInit(): void {
        this.formGroup = this.fb.group({
@@ -41,15 +53,18 @@ export class PublishFormComponent implements OnInit {
            this.formGroup.get('category').setValue(this.primaryData.category);
            this.formGroup.get('url').setValue(this.primaryData.url);
        }
+        this.randomColor();
    }

    publishArticle() {
+        console.log(this.formGroup.value)
        const formData = {
-            id: this.formGroup.value.isUpdate ? this.primaryData.id : null,
+            id: this.formGroup.value.isUpdate ? this.primaryData?.id : null,
            type: this.formGroup.value.type,
            tags: this.formGroup.value.tagList,
            category: this.formGroup.value.category,
-            url: this.formGroup.value.type ? null : this.formGroup.value.url
+            url: this.formGroup.value.type ? null : this.formGroup.value.url,
+            isUpdate: this.formGroup.value.isUpdate
        };
        this.submitEvent.emit(formData);
    }
@@ -58,6 +73,7 @@ export class PublishFormComponent implements OnInit {
    showTagInput() {
        this.tagInputVisible = true;
        setTimeout(() => {
+
            this.tagInputElement.nativeElement.focus();
        }, 10);
    }
@@ -69,9 +85,10 @@ export class PublishFormComponent implements OnInit {
    }

    // 输入框输入完成
-    handleTagInputConfirm() {
+    handleTagInputConfirm($event: { value: string; originalValue: string; changed: boolean }) {
        this.tagListTouched = true;
-        const tmpTag = this.formGroup.get('tags').value;
+        // const tmpTag = this.formGroup.get('tags').value;
+        const tmpTag = $event.value;
        if (tmpTag && this.tagTmpList.indexOf(tmpTag) === -1) {
            this.tagTmpList = [...this.tagTmpList, tmpTag];
        }
@@ -79,12 +96,13 @@ export class PublishFormComponent implements OnInit {
        this.formGroup.get('tagList').setValue(this.tagTmpList.length ? this.tagTmpList : null);
        this.formGroup.get('tagList').updateValueAndValidity();
        this.tagInputVisible = false;
+        this.editTagText = '新增'
    }

    // 点击tag切换
    tagChange($event: boolean, name: string) {
        this.tagListTouched = true;
-        if (this.tagTmpList.indexOf(name) > -1) {
+        if (this.tagTmpList?.indexOf(name) > -1) {
            this.tagTmpList = this.tagTmpList.filter(v => v !== name);
        } else {
            this.tagTmpList.push(name);
@@ -99,6 +117,7 @@ export class PublishFormComponent implements OnInit {
    }

    // 点选了文章类型
+
    articleTypeChanged() {
        this.formGroup.get(`url`).clearValidators();
        const type = this.formGroup.get(`type`).value;
--- a/src/app/view/write/write.component.ts
+++ b/src/app/view/write/write.component.ts
@@ -35,7 +35,7 @@ export class WriteComponent implements OnInit {
    userInfo: User;
    categoryList: Tag[];
    tagNacList: { name: string, size: number }[];
-    primaryData = {};
+    primaryData = null;
    // 发布新文章时，文章相同会被拦回 此处判断一下
    title: string;

@@ -44,6 +44,8 @@ export class WriteComponent implements OnInit {
    // 同步属性内容
    syncModel(str): void {
        this.article.mdContent = str;
+        // 文章 暂存
+        localStorage.setItem('tmpArticle', JSON.stringify(this.article));
    }


@@ -109,12 +111,13 @@ export class WriteComponent implements OnInit {
    /**
     * 文章数据提交
     */
-    publishArticle(e: { id: number, type: boolean, tags: string[], category: string, url?: string }) {
+    publishArticle(e: { id: number; type: boolean; tags: string[]; category: string; isUpdate: boolean; url?: string }) {
        this.article.type = e.type;
        this.article.tags = e.tags;
        this.article.category = e.category;
        this.article.url = e.url;
        this.article.id = e.id;
+        this.isUpdate = e.isUpdate

        this.modalVisible = false;

@@ -123,11 +126,8 @@ export class WriteComponent implements OnInit {
        //     return;
        // }

-        // 文章 暂存
-        localStorage.setItem('tmpArticle', JSON.stringify(this.article));

        this.article.url = this.article.type ? null : this.article.url;
-
        if (!this.isUpdate) {
            // 非文章更新

@@ -149,6 +149,7 @@ export class WriteComponent implements OnInit {
                    if (err.code === 3020) {
                        this.message.error('你没有发布文章的权限,文章替你暂存在本地');
                    }
+                    this.message.error(err.msg);
                }
            });

@@ -163,13 +164,13 @@ export class WriteComponent implements OnInit {
                        this.router.navigateByUrl('article/' + data.result.id);
                    }, 2500);
                },
-                error: e => {
-                    if (e.code === 3010) {
+                error: err => {
+                    if (err.code === 3010) {
                        this.router.navigateByUrl('login');
-                    } else if (e.code === 3020) {
+                    } else if (err.code === 3020) {
                        this.message.error('你没有更新文章的权限');
                    } else {
-                        this.message.error('失败，原因：' + e.msg);
+                        this.message.error('失败，原因：' + err.msg);
                    }
                }
            });
--- a/src/app/view/write/write.module.ts
+++ b/src/app/view/write/write.module.ts
@@ -15,6 +15,7 @@ import {
    NzSelectModule,
    NzTagModule
 } from 'ng-zorro-antd';
+import {EditableTagModule} from '../admin/components/editable-tag/editable-tag.module';

 const routes: Route[] = [
    {path: '**', component: WriteComponent}
@@ -38,6 +39,7 @@ const routes: Route[] = [
        NzSelectModule,
        NzCardModule,
        NzDividerModule,
+        EditableTagModule
    ]
 })
 export class WriteModule {