修复bug

修复bug

src/app/view/admin/components/editable-tag/editable-tag.component.ts

@@ -59,6 +59,7 @@ export class EditableTagComponent implements OnInit, OnChanges {
     @Input() doubleClick: boolean;
     @Input() autoClear: boolean;
     @Input() size: 'small' | 'default' | 'large';
+    @Output() inEditStatus = new EventEmitter<void>();
     @Output() modalOK = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
     @Output() modalCancel = new EventEmitter<{ value: string, originalValue: string, changed: boolean }>();
 
@@ -85,6 +86,10 @@ export class EditableTagComponent implements OnInit, OnChanges {
             this.key = changes.key.currentValue;
             this.getFocus(this.tmpKey);
         }
+        if (changes.text && !changes.text.isFirstChange()) {
+            this.text = changes.text.currentValue;
+            this.inputValue = changes.text.currentValue;
+        }
     }
 
     showInput(doubleClick: boolean): void {
@@ -95,12 +100,14 @@ export class EditableTagComponent implements OnInit, OnChanges {
                 return
             }
             if (new Date().getTime() - this.doubleClickInfo.date < 200) {
+                this.inEditStatus.emit()
                 this.inputVisible = true;
                 setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
             }
             this.doubleClickInfo.date = new Date().getTime();
         } else {
             this.inputVisible = true;
+            this.inEditStatus.emit()
             setTimeout(() => this.inputElement?.nativeElement.focus(), 10);
         }
     }

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>

src/app/view/write/components/publish-form/publish-form.component.less

@@ -1,4 +1,3 @@
 .errTip {
   color: #f5222d;
-  line-height: 30px;
 }

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;

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 => {
+                error: err => {
-                    if (e.code === 3010) {
+                    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);
                     }
                 }
             });

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 {

src/environments/environment.ts

@@ -5,7 +5,7 @@
 export const environment = {
     production: false,
     logger: true,
-    host: 'http://127.0.0.1:8081'
+    host: 'http://celess.cn:8082/'
 };
 
 /*