标签分类管理页面

index/src/app/api/api.service.ts

@@ -142,7 +142,7 @@ export class ApiService extends HttpService {
     }
 
     tags(pageNumber: number = 1, pageSize: number = 10) {
-        return super.Service<Tag[]>({
+        return super.Service<PageList<Tag>>({
             path: '/tags',
             method: 'GET',
             queryParam: {

index/src/app/view/admin/admin-article/admin-article.component.html

@@ -1,7 +1,7 @@
 <div class="inner-content">
     <nz-card nzTitle="文章管理" nzSize="small">
         <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="page"
-                  [nzPageSize]="pageSize"
+                  [nzPageSize]="pageSize" [nzLoading]="loading"
                   (nzPageIndexChange)="getArticle()" nzFrontPagination="false">
             <thead>
             <th>标题</th>

index/src/app/view/admin/admin-article/admin-article.component.ts

@@ -36,9 +36,9 @@ export class AdminArticleComponent implements OnInit {
         this.apiService.deleteArticle(id).subscribe({
             next: data => {
                 this.nzMessage.success('删除成功')
+                this.loading = false;
                 this.getArticle();
             },
-            complete: () => this.loading = false,
             error: err => {
                 this.nzMessage.error(err.msg)
                 this.loading = false

index/src/app/view/admin/admin-routing.module.ts

@@ -20,11 +20,11 @@ const routes: Routes = [
                 loadChildren: () => import('./admin-comment/admin-comment.module').then(mod => mod.AdminCommentModule),
                 canActivate: [AuthGuard]
             },
-            {
+            // {
-                path: 'category',
+            //     path: 'category',
-                loadChildren: () => import('./admin-category/admin-category.module').then(mod => mod.AdminCategoryModule),
+            //     loadChildren: () => import('./admin-category/admin-category.module').then(mod => mod.AdminCategoryModule),
-                canActivate: [AuthGuard]
+            //     canActivate: [AuthGuard]
-            },
+            // },
             {
                 path: 'link',
                 loadChildren: () => import('./admin-link/admin-link.module').then(mod => mod.AdminLinkModule),

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

@@ -1 +1,88 @@
-<p>admin-tag works!</p>
+<div class="inner-content">
+    <nz-card nzTitle="" nzSize="small">
+        <nz-tabset>
+            <nz-tab nzTitle="分类管理" (nzClick)="editInfo.editFocus=false">
+                <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>
+                <nz-table #table [nzData]="categoryList" [nzTotal]="categoryList.length"
+                          (nzPageIndexChange)="getCategory()"
+                          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>{{data.articles ? data.articles.length : 0}}</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>
+            </nz-tab>
+            <nz-tab nzTitle="标签管理" (nzClick)="editInfo.editFocus=false">
+                <nz-table #tagTable [nzData]="tagPageList.list" [nzTotal]="tagPageList.total"
+                          [(nzPageIndex)]="pageIndex"
+                          [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>{{data.articles ? data.articles.length : 0}}</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>
+            </nz-tab>
+        </nz-tabset>
+    </nz-card>
+</div>
+<ng-template #tagIcon><i nz-icon nzType="tag" nzTheme="outline"></i></ng-template>

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

@@ -1,15 +1,139 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} 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';
 
 @Component({
-  selector: 'app-admin-tag',
+    selector: 'app-admin-tag',
-  templateUrl: './admin-tag.component.html',
+    templateUrl: './admin-tag.component.html',
-  styleUrls: ['./admin-tag.component.less']
+    styleUrls: ['./admin-tag.component.less']
 })
 export class AdminTagComponent implements OnInit {
 
-  constructor() { }
+    constructor(private apiService: ApiService, private nzMessageService: NzMessageService) {
+    }
 
-  ngOnInit(): void {
+    loading: boolean = true;
-  }
 
+    categoryList: Category[] = [];
+    editInfo = {
+        id: null,
+        name: null,
+        editFocus: false,
+        isAdd: false
+    }
+    tagPageList: PageList<Tag> = new PageList<Tag>();
+
+    pageIndex: number = 1;
+    pageSize: number = 10;
+
+
+    ngOnInit(): void {
+        this.getCategory();
+        this.getTag();
+    }
+
+    getCategory = () => this.apiService.categories().subscribe({
+        next: data => this.categoryList = data.result,
+        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();
+                },
+                complete: () => this.loading = false,
+                error: err => {
+                    this.nzMessageService.error(err.msg)
+                    this.loading = false
+                }
+            })
+        } else if (mode === 'category') {
+            this.apiService.deleteCategory(id).subscribe({
+                next: data => {
+                    this.nzMessageService.success('删除成功')
+                    this.getCategory();
+                },
+                complete: () => this.loading = false,
+                error: err => {
+                    this.nzMessageService.error(err.msg)
+                    this.loading = false
+                }
+            })
+        }
+    }
+
+    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({
+            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.isAdd = false
+        this.editInfo.name = null
+    }
 }

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

@@ -2,6 +2,14 @@ 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,
+} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -10,7 +18,16 @@ import {AdminTagComponent} from './admin-tag.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminTagComponent}])
+        RouterModule.forChild([{path: '', component: AdminTagComponent}]),
+        NzCardModule,
+        NzTableModule,
+        NzDividerModule,
+        NzInputModule,
+        FormsModule,
+        NzTabsModule,
+        NzPopconfirmModule,
+        NzButtonModule,
+        NzIconModule,
     ]
 })
 export class AdminTagModule {

index/src/app/view/admin/admin.component.html

@@ -35,13 +35,13 @@
 
             <li nz-menu-item routerLink="/admin/tag" *ngIf="user.role=='admin'">
                 <i nz-icon nzType="tags" nzTheme="outline"></i>
-                <span>标签管理</span>
+                <span>分类标签管理</span>
             </li>
 
-            <li nz-menu-item routerLink="/admin/category" *ngIf="user.role=='admin'">
+<!--            <li nz-menu-item routerLink="/admin/category" *ngIf="user.role=='admin'">-->
-                <i nz-icon nzType="appstore" nzTheme="outline"></i>
+<!--                <i nz-icon nzType="appstore" nzTheme="outline"></i>-->
-                <span>分类管理</span>
+<!--                <span>分类管理</span>-->
-            </li>
+<!--            </li>-->
 
             <li nz-menu-item routerLink="/admin/userInfo">
                 <i nz-icon nzType="idcard" nzTheme="outline"></i>