标签管理

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

@@ -2,96 +2,43 @@
     <nz-card nzTitle="" nzSize="small">
         <nz-tabset [nzTabBarExtraContent]="reload">
             <nz-tab nzTitle="分类管理" (nzClick)="tabChanged('tag')">
-                <div style="margin-bottom: 15px;">
-                    <nz-input-group *ngIf="editInfo.editFocus&&editInfo.isAdd" [nzPrefix]="tagIcon"
-                                    style="width: 200px">
-                        <input type="text" nz-input [(ngModel)]="editInfo.name" (keyup.enter)="addCategory()"
-                               [autofocus]="editInfo.editFocus"
-                               (blur)="editInfo.editFocus=false">
-                    </nz-input-group>
-                    <button nz-button (click)="addCategory()">新增分类</button>
-                    <button nz-button (click)="editInfo.editFocus=false" *ngIf="editInfo.editFocus&&editInfo.isAdd">取消
-                    </button>
+                <div style="margin-bottom: 15px;width: 150px">
+                    <editable-tag [showBorder]="false"
+                                  [showEditIcon]="false"
+                                  [doubleClick]="false"
+                                  size="default"
+                                  [autoClear]="true"
+                                  (valueChange)="addCategory($event)"
+                    >
+                        <button nz-button>新增</button>
+                    </editable-tag>
                 </div>
-                <nz-table #table [nzData]="categoryList" [nzTotal]="categoryList.length"
-                          (nzPageIndexChange)="getCategory()" [nzScroll]="{x:'800px'}"
-                          nzFrontPagination="false" [nzLoading]="loading">
-                    <thead>
-                    <th>分类名</th>
-                    <th>分类文章数量</th>
-                    <th>操作</th>
-                    </thead>
-                    <tbody>
-                    <tr *ngFor="let data of table.data">
-                        <td>
-                            <span *ngIf="!editInfo.editFocus||data.id!==editInfo.id">{{data.name}}</span>
-                            <nz-input-group *ngIf="!editInfo.isAdd&&editInfo.editFocus&&data.id===editInfo.id"
-                                            [nzPrefix]="tagIcon" style="width: 300px">
-                                <input type="text" nz-input [(ngModel)]="editInfo.name" nzSize="small"
-                                       [autofocus]="editInfo.editFocus&&data.id===editInfo.id"
-                                       (keyup.enter)="edit('category')" (blur)="editInfo.editFocus=false">
-                                <button nz-button (click)="edit('category')" nzSize="small">更新</button>
-                                <button nz-button (click)="editInfo.editFocus=false" nzSize="small">取消</button>
-                            </nz-input-group>
-                        </td>
-                        <td>
-                            <nz-tag [nzColor]="'purple'">{{data.articles ? data.articles.length : 0}}</nz-tag>
-                        </td>
-                        <td>
-                            <a (click)="editFocus(data)" class="edit-opr">编辑</a>
-                            <nz-divider nzType="vertical"></nz-divider>
-                            <a [routerLink]="'/categories/'+data.name" class="show-opr">查看</a>
-                            <nz-divider nzType="vertical"></nz-divider>
-                            <a nz-popconfirm nzPopconfirmTitle="确定要删除这个分类吗?" nzOkText="删除" nzCancelText="点错了"
-                               (nzOnConfirm)="delete(data.id,'category')" class="del-opr">删除</a>
-                        </td>
-                    </tr>
-                    </tbody>
-                </nz-table>
+                <common-table #categoryCTComponent
+                              [headData]="categoryCTData.headData"
+                              [request]="categoryCTData.request"
+                              [template]="{name:{temp:nameTemplate}}">
+                </common-table>
             </nz-tab>
             <nz-tab nzTitle="标签管理" (nzClick)="tabChanged('category')">
-                <nz-table #tagTable [nzData]="tagPageList.list" [nzTotal]="tagPageList.total"
-                          [(nzPageIndex)]="pageIndex" [nzScroll]="{x:'800px'}"
-                          [nzPageSize]="pageSize" (nzPageIndexChange)="getTag()" nzFrontPagination="false">
-                    <thead>
-                    <th>标签名</th>
-                    <th>分类文章数量</th>
-                    <th>操作</th>
-                    </thead>
-                    <tbody>
-                    <tr *ngFor="let data of tagTable.data">
-                        <td>
-                            <span *ngIf="!editInfo.editFocus||data.id!==editInfo.id">{{data.name}}</span>
-                            <nz-input-group *ngIf="!editInfo.isAdd&&editInfo.editFocus&&data.id===editInfo.id"
-                                            [nzPrefix]="tagIcon" style="width: 300px">
-                                <input type="text" nz-input [(ngModel)]="editInfo.name" nzSize="small"
-                                       [autofocus]="editInfo.editFocus&&data.id===editInfo.id"
-                                       (keyup.enter)="edit('tag')" (blur)="editInfo.editFocus=false">
-                                <button nz-button (click)="edit('tag')" nzSize="small">更新</button>
-                                <button nz-button (click)="editInfo.editFocus=false" nzSize="small">取消</button>
-                            </nz-input-group>
-                        </td>
-                        <td>
-                            <nz-tag [nzColor]="'purple'">{{data.articles ? data.articles.length : 0}}</nz-tag>
-                        </td>
-                        <td>
-                            <a (click)="editFocus(data)" class="edit-opr">编辑</a>
-                            <nz-divider nzType="vertical"></nz-divider>
-                            <a [routerLink]="'/tags/'+data.name" class="show-opr">查看</a>
-                            <nz-divider nzType="vertical"></nz-divider>
-                            <a nz-popconfirm nzPopconfirmTitle="确定要删除这个标签吗?" nzOkText="删除" nzCancelText="点错了"
-                               (nzOnConfirm)="delete(data.id,'tag')" class="del-opr">删除</a>
-                        </td>
-                    </tr>
-                    </tbody>
-                </nz-table>
+                <common-table #tagCTComponent
+                              [headData]="tagCTData.headData"
+                              [request]="tagCTData.request"
+                              [template]="{name:{temp:nameTemplate}}">
+                </common-table>
             </nz-tab>
         </nz-tabset>
     </nz-card>
 </div>
-<ng-template #tagIcon><i nz-icon nzType="tag" nzTheme="outline"></i></ng-template>
 <ng-template #reload>
     <a (click)="getData()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
 </ng-template>
 
-
+<ng-template #nameTemplate let-value="value" let-data="data">
+    <editable-tag #editableTagComponent
+                  [key]="data.id"
+                  [showBorder]="false"
+                  [text]="value"
+                  [showConfirmModal]="true"
+                  (modalOK)="textChange($event,data)">
+    </editable-tag>
+</ng-template>

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

@@ -1,151 +1,151 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
 import {Category, Tag} from '../../../class/Tag';
 import {ApiService} from '../../../api/api.service';
-import {PageList} from '../../../class/HttpReqAndResp';
+import {PageList, RequestObj} from '../../../class/HttpReqAndResp';
 import {Title} from '@angular/platform-browser';
+import {Data} from '../components/common-table/data';
+import {CommonTableComponent} from '../components/common-table/common-table.component';
+import {Router} from '@angular/router';
+import {EditableTagComponent} from '../components/editable-tag/editable-tag.component';
 
 @Component({
     selector: 'app-admin-tag',
-    templateUrl: './admin-tag.component.html',
-    styleUrls: ['./admin-tag.component.less']
+    templateUrl: './admin-tag.component.html'
 })
 export class AdminTagComponent implements OnInit {
 
-    constructor(private apiService: ApiService, private nzMessageService: NzMessageService, private title: Title) {
+    constructor(private apiService: ApiService, private nzMessageService: NzMessageService, private title: Title, private router: Router) {
     }
 
-    loading: boolean = true;
-
-    categoryList: Category[] = [];
-    editInfo = {
-        id: null,
-        name: null,
-        editFocus: false,
-        isAdd: false
+    categoryCTData: { headData: Data<Category>[], commonTable: CommonTableComponent<Category>, request: RequestObj } = {
+        headData: null,
+        commonTable: null,
+        request: null
     }
-    tagPageList: PageList<Tag> = new PageList<Tag>();
-
-    pageIndex: number = 1;
-    pageSize: number = 10;
-
+    tagCTData: { headData: Data<Category>[], commonTable: CommonTableComponent<Tag>, request: RequestObj } = {
+        headData: null,
+        commonTable: null,
+        request: null
+    }
+    @ViewChild('categoryCTComponent', {static: true}) categoryCTComponent: CommonTableComponent<Category>
+    @ViewChild('tagCTComponent', {static: true}) tagCTComponent: CommonTableComponent<Tag>
+    @ViewChild('editableTagComponent') editableTagComponent: EditableTagComponent
+    private updateData: any;
     getData: any;
 
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 标签分类管理')
-        this.getCategory();
-        this.getTag();
-        this.getData = this.getTag;
+        this.categoryCTData = {
+            commonTable: this.categoryCTComponent,
+            headData: [
+                {fieldValue: 'id', title: '主键', show: false, primaryKey: true},
+                {fieldValue: 'name', title: '分类名', show: true},
+                {fieldValue: 'articles.length', title: '文章数量', show: true},
+                {
+                    fieldValue: '', title: '操作', isActionColumns: true, show: true,
+                    action: [
+                        {name: '查看', click: (data) => this.router.navigateByUrl(`/categories/${data.name}`)},
+                        {name: '编辑', color: 'blue', click: (data) => this.editableTagComponent.getFocus(data.id)},
+                        {
+                            name: '删除',
+                            color: 'red',
+                            needConfirm: true,
+                            click: (data) => this.delete(data.id, 'category')
+                        },
+                    ]
+                },
+            ],
+            request: {
+                path: '/categories',
+                method: 'GET',
+                queryParam: {
+                    page: 1,
+                    count: 1000
+                }
+            }
+        }
+        this.tagCTData = {
+            commonTable: this.tagCTComponent,
+            headData: [
+                {fieldValue: 'id', primaryKey: true, show: false, title: '主键'},
+                {fieldValue: 'name', show: true, title: '标签名'},
+                {
+                    fieldValue: '', show: true, title: '操作', isActionColumns: true, action: [
+                        {name: '查看', click: data => this.router.navigateByUrl(`/tags/${data.name}`)},
+                        {name: '编辑', color: 'blue', click: data => this.editableTagComponent.getFocus(data.id)},
+                        {name: '删除', color: 'red', needConfirm: true, click: data => this.delete(data.id, 'tag')},
+                    ]
+                },
+
+            ],
+            request: {
+                path: '/tags',
+                method: 'GET',
+                queryParam: {
+                    page: 1,
+                    count: 10
+                }
+            }
+        }
+        this.getData = this.categoryCTComponent.getData;
     }
 
-    getCategory = () => this.apiService.categories().subscribe({
-        next: data => this.categoryList = data.result.list,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
-
-    getTag = () => this.apiService.tags(this.pageIndex, this.pageSize).subscribe({
-        next: data => this.tagPageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
 
     delete(id, mode: 'tag' | 'category') {
-        this.loading = true;
         if (mode === 'tag') {
             this.apiService.deleteTag(id).subscribe({
                 next: data => {
                     this.nzMessageService.success('删除成功')
-                    this.getTag();
+                    this.tagCTComponent.getData();
                 },
-                complete: () => this.loading = false,
-                error: err => {
-                    this.nzMessageService.error(err.msg)
-                    this.loading = false
-                }
+                complete: () => null,
+                error: err => this.nzMessageService.error(err.msg)
             })
         } else if (mode === 'category') {
             this.apiService.deleteCategory(id).subscribe({
                 next: data => {
                     this.nzMessageService.success('删除成功')
-                    this.getCategory();
+                    this.categoryCTComponent.getData();
                 },
-                complete: () => this.loading = false,
-                error: err => {
-                    this.nzMessageService.error(err.msg)
-                    this.loading = false
-                }
+                complete: () => null,
+                error: err => this.nzMessageService.error(err.msg)
             })
         }
     }
 
-    editFocus(data: Category) {
-        this.editInfo.isAdd = false;
-        this.editInfo.id = data.id;
-        this.editInfo.name = data.name;
-        this.editInfo.editFocus = true;
-    }
-
-    edit(mode: 'tag' | 'category') {
-        this.loading = true;
-        if (mode === 'tag') {
-            this.apiService.updateTag(this.editInfo.id, this.editInfo.name).subscribe({
-                next: data => {
-                    this.nzMessageService.success('更新成功')
-                    this.getTag();
-                },
-                complete: () => this.loading = false,
-                error: err => {
-                    this.nzMessageService.error(err.msg)
-                    this.loading = false
-                }
-            })
-        } else if (mode === 'category') {
-            this.apiService.updateCategory(this.editInfo.id, this.editInfo.name).subscribe({
-                next: data => {
-                    this.nzMessageService.success('更新成功')
-                    this.getCategory();
-                },
-                complete: () => this.loading = false,
-                error: err => {
-                    this.nzMessageService.error(err.msg)
-                    this.loading = false
-                }
-            })
-        }
-        this.editInfo.editFocus = false
-        this.editInfo.name = null
-    }
-
-    addCategory() {
-        this.editInfo.isAdd = true
-        if (!this.editInfo.editFocus && this.editInfo.isAdd) {
-            this.editInfo.name = null;
-            this.editInfo.id = null;
-            this.editInfo.editFocus = true;
-            return
-        }
-        this.apiService.createCategory(this.editInfo.name).subscribe({
+    addCategory($event: { value: string; originalValue: string; changed: boolean }) {
+        if (!$event.value || !$event.changed) return
+        this.apiService.createCategory($event.value).subscribe({
             next: data => {
                 this.nzMessageService.success('新增成功')
-                this.getCategory();
+                this.getData = this.categoryCTComponent.getData();
             },
-            complete: () => this.loading = false,
-            error: err => {
-                this.nzMessageService.error(err.msg)
-                this.loading = false
-            }
+            complete: () => null,
+            error: err => this.nzMessageService.error(err.msg)
         });
-        this.editInfo.editFocus = false
-        this.editInfo.isAdd = false
-        this.editInfo.name = null
+
     }
 
     tabChanged(mode: 'tag' | 'category') {
-        this.editInfo.editFocus = false
-        if (mode === 'tag')
-            this.getData = this.getTag;
-        else
-            this.getData = this.getCategory;
+        if (mode === 'tag') {
+            this.getData = this.categoryCTComponent.getData;
+            this.updateData = this.apiService.updateTag;
+        } else {
+            this.getData = this.tagCTComponent.getData;
+            this.updateData = this.apiService.updateCategory
+        }
+    }
+
+    textChange(value: { value: string; originalValue: string; changed: boolean }, textData: Category | Tag) {
+        this.updateData(textData.id, value.value).subscribe({
+            next: data => {
+                this.nzMessageService.success('更新成功')
+                this.tagCTComponent.getData();
+                this.categoryCTComponent.getData();
+            },
+            complete: () => null,
+            error: err => this.nzMessageService.error(err.msg)
+        });
     }
 }

src/app/view/admin/admin-tag/admin-tag.module.ts

@@ -2,14 +2,10 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminTagComponent} from './admin-tag.component';
-import {
-    NzButtonModule,
-    NzCardModule,
-    NzDividerModule, NzIconModule,
-    NzInputModule, NzPopconfirmModule,
-    NzTableModule, NzTabsModule, NzTagModule,
-} from 'ng-zorro-antd';
 import {FormsModule} from '@angular/forms';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {EditableTagModule} from '../components/editable-tag/editable-tag.module';
+import {NzButtonModule, NzCardModule, NzIconModule, NzTabsModule} from "ng-zorro-antd";
 
 
 @NgModule({
@@ -19,16 +15,13 @@ import {FormsModule} from '@angular/forms';
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminTagComponent}]),
-        NzCardModule,
-        NzTableModule,
-        NzDividerModule,
-        NzInputModule,
         FormsModule,
+        CommonTableModule,
+        EditableTagModule,
+        NzCardModule,
         NzTabsModule,
-        NzPopconfirmModule,
-        NzButtonModule,
         NzIconModule,
-        NzTagModule,
+        NzButtonModule,
     ]
 })
 export class AdminTagModule {