src/app/view/admin/admin-comment/admin-comment.component.html

@@ -1,55 +1,3 @@
-<!--
-<div class="inner-content">
-    <nz-card nzTitle="评论管理" nzSize="small" [nzExtra]="reload">
-        <nz-table #table [nzData]="pageList.list"
-                  [nzTotal]="pageList.total"
-                  [(nzPageIndex)]="pageIndex"
-                  [nzPageSize]="pageSize"
-                  [nzLoading]="loading"
-                  [nzScroll]="{x:'800px'}"
-                  (nzPageIndexChange)="getComment()"
-                  nzFrontPagination="false"
-                  nzTableLayout="fixed">
-            <thead>
-            <th nzAlign="center">评论页面</th>
-            <th nzAlign="center">评论内容</th>
-            <th nzAlign="center">评论日期</th>
-            <th nzAlign="center">操作</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td nzAlign="center"><a [href]="data.pagePath">{{data.pagePath}}</a></td>
-                <td nzAlign="center" nzEllipsis="true" [nzTooltipTitle]="data.content"
-                    nzTooltipPlacement="right"
-                    nz-tooltip style="min-width: 100px;max-width: 400px">
-                    <span *ngIf="!editInfo.editFocus||data.id!==editInfo.id">{{data.content}}</span>
-                    <nz-input-group *ngIf="editInfo.editFocus&&data.id===editInfo.id"
-                                    [nzPrefix]="tagIcon" style="width: 50%" (blur)="editInfo.editFocus=false">
-                        <input type="text" nz-input [(ngModel)]="editInfo.content.content" nzSize="small"
-                               [autofocus]="editInfo.editFocus&&data.id===editInfo.id"
-                               (keyup.enter)="edit()">
-                        <button nz-button (click)="edit()" nzSize="small">更新</button>
-                        <button nz-button (click)="editInfo.editFocus=false" nzSize="small">取消</button>
-                    </nz-input-group>
-                </td>
-                <td nzAlign="center">{{data.date}}</td>
-                <td nzAlign="center">
-                    <a (click)="editFocus(data)" class="edit-opr">编辑</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这篇文章吗?" nzOkText="删除" nzCancelText="点错了"
-                       (nzOnConfirm)="deleteComment(data.id)" class="del-opr">删除</a>
-                </td>
-            </tr>
-            </tbody>
-        </nz-table>
-    </nz-card>
-</div>
-<ng-template #tagIcon><i nz-icon nzType="message" nzTheme="outline"></i></ng-template>
-<ng-template #reload>
-    <a (click)="getComment()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
-</ng-template>
--->
-
 <common-table [request]="request" [headData]="headData" cardTitle="评论管理"
               [template]="{status:{temp:status,param:{'0':' 正常 ','3':'已删除'}},content:{temp:content}}">
 </common-table>
@@ -59,6 +7,6 @@
     <nz-tag nzColor="#f50" *ngIf="originValue==3">{{value}}</nz-tag>
 </ng-template>
 
-<ng-template #content let-value="value">
-    <editable-tag [showBorder]="false" [text]="value" (valueChange)="textChange($event)"></editable-tag>
+<ng-template #content let-value="value" let-data="data">
+    <editable-tag #editableTagComponent [key]="data.id" [showBorder]="false" [text]="value" (valueChange)="textChange($event,data)"></editable-tag>
 </ng-template>

src/app/view/admin/admin-comment/admin-comment.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
 import {ApiService} from '../../../api/api.service';
 import {RequestObj} from '../../../class/HttpReqAndResp';
@@ -6,6 +6,7 @@ import {Comment, CommentReq} from '../../../class/Comment';
 import {GlobalUserService} from '../../../services/global-user.service';
 import {Title} from '@angular/platform-browser';
 import {Data} from '../components/common-table/data';
+import {EditableTagComponent} from '../components/editable-tag/editable-tag.component';
 
 @Component({
     selector: 'app-admin-comment',
@@ -16,23 +17,23 @@ export class AdminCommentComponent implements OnInit {
     constructor(private apiService: ApiService, private  messageService: NzMessageService, private userService: GlobalUserService,
                 private title: Title) {
         this.title.setTitle('小海博客 | 评论管理')
+        this.userService.watchUserInfo({
+            next: data => {
+                let pathStr;
+                if (data.result) {
+                    if (data.result.role === 'admin') {
+                        pathStr = '/admin/comment/pagePath/*'
+                    } else {
+                        pathStr = '/user/comment/pagePath/*'
+                    }
                     this.request = {
-            // path: `/admin/comment/pagePath/${pagePath}`,
-            path: null,
+                        path: pathStr,
                         method: 'GET',
                         queryParam: {
                             page: 1,
                             count: 10
                         }
                     }
-        this.userService.watchUserInfo({
-            next: data => {
-                if (data.result) {
-                    if (data.result.role === 'admin') {
-                        this.request.path = '/admin/comment/pagePath/*'
-                    } else {
-                        this.request.path = '/user/comment/pagePath/*'
-                    }
                 }
             },
             error: () => null,
@@ -44,9 +45,9 @@ export class AdminCommentComponent implements OnInit {
     editInfo = {
         id: null,
         content: new CommentReq(null),
-        editFocus: false,
     }
     headData: Data<Comment>[];
+    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent;
 
     ngOnInit(): void {
         this.headData = [
@@ -66,38 +67,20 @@ export class AdminCommentComponent implements OnInit {
                 action: [
                     {name: '查看', click: data => console.log(data)},
                     {name: '删除', color: 'red', click: data => this.deleteComment(data), needConfirm: true},
-                    {name: '编辑', color: '#2db7f5', click: data => this.edit(data)},
+                    {name: '编辑', color: '#2db7f5', click: data => this.editableTagComponent.getFocus(data.id)},
                 ]
             }
         ];
     }
 
-
-    // // TODO:: pagePath
-    // getCommentForAdmin = () => this.apiService.getCommentByTypeForAdmin('*', this.pageIndex, this.pageSize).subscribe({
-    //     next: data => this.pageList = data.result,
-    //     complete: () => this.loading = false,
-    //     error: err => this.loading = false
-    // })
-
-    // getCommentForUser = () => this.apiService.getCommentByTypeForUser('*', this.pageIndex, this.pageSize).subscribe({
-    //     next: data => this.pageList = data.result,
-    //     complete: () => this.loading = false,
-    //     error: err => this.loading = false
-    // })
-
     deleteComment(data: Comment) {
         this.apiService.deleteComment(data.id).subscribe({
-            next: () => {
-                this.messageService.success('删除评论成功');
-            },
-            error: err => {
-                this.messageService.error(err.msg);
-            }
+            next: () => this.messageService.success('删除评论成功'),
+            error: err => this.messageService.error(err.msg)
         })
     }
 
-    edit(comment: Comment) {
+    edit() {
         this.apiService.updateComment(this.editInfo.content).subscribe({
             next: data => {
                 this.messageService.success('更新评论成功');
@@ -109,17 +92,13 @@ export class AdminCommentComponent implements OnInit {
         })
     }
 
-    editFocus(data: Comment) {
+    textChange(value: { value: string; originalValue: string; changed: boolean }, data: Comment) {
+        if (value.changed) {
             this.editInfo.id = data.id;
-        this.editInfo.content.content = data.content;
-        this.editInfo.content.id = data.id;
-        // this.editInfo.content.articleID = data.articleID;
             this.editInfo.content.pid = data.pid;
-        // this.editInfo.content.responseId = data.responseId;
-        this.editInfo.editFocus = true;
-    }
-
-    textChange(value: { value: string; originalValue: string; changed: boolean }) {
-        console.log(value)
+            this.editInfo.content.id = data.id;
+            this.editInfo.content.content = value.value;
+            this.edit()
+        }
     }
 }

src/app/view/admin/test-common-table/test-common-table.component.ts

@@ -28,21 +28,21 @@ updateDateFormat: "2020-05-27 00:55:05"*/
 
     constructor() {
         this.data = [
-            {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},
-            {fieldName: '标题', fieldValue: 'title', show: true},
-            {fieldName: '发布日期', fieldValue: 'publishDateFormat', show: true},
-            {fieldName: '更新日期', fieldValue: 'updateDateFormat', show: true},
-            {fieldName: '文章类型', fieldValue: 'original', show: true},
-            {fieldName: '阅读量', fieldValue: 'readingNumber', show: true},
-            {fieldName: '分类', fieldValue: 'category', show: true},
-            {fieldName: '👎数', fieldValue: 'dislikeCount', show: true},
-            {fieldName: '👍数', fieldValue: 'likeCount', show: true},
-            {fieldName: '状态', fieldValue: 'open', show: true},
-            {fieldName: '简介', fieldValue: 'summary', show: false},
-            {fieldName: '作者', fieldValue: 'author.displayName', show: true},
-            {fieldName: '标签数', fieldValue: 'tags.length', show: true},
+            {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
+            {title: '标题', fieldValue: 'title', show: true},
+            {title: '发布日期', fieldValue: 'publishDateFormat', show: true},
+            {title: '更新日期', fieldValue: 'updateDateFormat', show: true},
+            {title: '文章类型', fieldValue: 'original', show: true},
+            {title: '阅读量', fieldValue: 'readingNumber', show: true},
+            {title: '分类', fieldValue: 'category', show: true},
+            {title: '👎数', fieldValue: 'dislikeCount', show: true},
+            {title: '👍数', fieldValue: 'likeCount', show: true},
+            {title: '状态', fieldValue: 'open', show: true},
+            {title: '简介', fieldValue: 'summary', show: false},
+            {title: '作者', fieldValue: 'author.displayName', show: true},
+            {title: '标签数', fieldValue: 'tags.length', show: true},
             {
-                fieldName: '操作', fieldValue: '', show: true, isActionColumns: true,
+                title: '操作', fieldValue: '', show: true, isActionColumns: true,
                 action: [
                     {
                         name: '新增',