kely
2 years ago
commit
a3d0b27f55
220 changed files with 23306 additions and 0 deletions
@ -0,0 +1,106 @@ |
|||||
|
# Logs |
||||
|
logs |
||||
|
*.log |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
lerna-debug.log* |
||||
|
|
||||
|
# Diagnostic reports (https://nodejs.org/api/report.html) |
||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json |
||||
|
|
||||
|
# Runtime data |
||||
|
pids |
||||
|
*.pid |
||||
|
*.seed |
||||
|
*.pid.lock |
||||
|
.angular |
||||
|
|
||||
|
# Directory for instrumented libs generated by jscoverage/JSCover |
||||
|
lib-cov |
||||
|
|
||||
|
# Coverage directory used by tools like istanbul |
||||
|
coverage |
||||
|
*.lcov |
||||
|
|
||||
|
# nyc test coverage |
||||
|
.nyc_output |
||||
|
|
||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) |
||||
|
.grunt |
||||
|
|
||||
|
# Bower dependency directory (https://bower.io/) |
||||
|
bower_components |
||||
|
|
||||
|
# node-waf configuration |
||||
|
.lock-wscript |
||||
|
|
||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html) |
||||
|
build/Release |
||||
|
|
||||
|
# Dependency directories |
||||
|
node_modules/ |
||||
|
jspm_packages/ |
||||
|
|
||||
|
# TypeScript v1 declaration files |
||||
|
typings/ |
||||
|
src/*.js |
||||
|
|
||||
|
# TypeScript cache |
||||
|
*.tsbuildinfo |
||||
|
|
||||
|
# Optional npm cache directory |
||||
|
.npm |
||||
|
|
||||
|
# Optional eslint cache |
||||
|
.eslintcache |
||||
|
|
||||
|
# Microbundle cache |
||||
|
.rpt2_cache/ |
||||
|
.rts2_cache_cjs/ |
||||
|
.rts2_cache_es/ |
||||
|
.rts2_cache_umd/ |
||||
|
|
||||
|
# Optional REPL history |
||||
|
.node_repl_history |
||||
|
|
||||
|
# Output of 'npm pack' |
||||
|
*.tgz |
||||
|
|
||||
|
# Yarn Integrity file |
||||
|
.yarn-integrity |
||||
|
|
||||
|
# dotenv environment variables file |
||||
|
.env |
||||
|
.env.test |
||||
|
|
||||
|
# parcel-bundler cache (https://parceljs.org/) |
||||
|
.cache |
||||
|
.angular |
||||
|
# Next.js build output |
||||
|
.next |
||||
|
|
||||
|
# Nuxt.js build / generate output |
||||
|
.nuxt |
||||
|
/dist |
||||
|
|
||||
|
# Gatsby files |
||||
|
.cache/ |
||||
|
# Comment in the public line in if your project uses Gatsby and *not* Next.js |
||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support |
||||
|
# public |
||||
|
|
||||
|
# vuepress build output |
||||
|
.vuepress/dist |
||||
|
|
||||
|
# Serverless directories |
||||
|
.serverless/ |
||||
|
|
||||
|
# FuseBox cache |
||||
|
.fusebox/ |
||||
|
|
||||
|
# DynamoDB Local files |
||||
|
.dynamodb/ |
||||
|
|
||||
|
# TernJS port file |
||||
|
.tern-port |
||||
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"singleQuote": true, |
||||
|
"trailingComma": "all", |
||||
|
"useTabs": true, |
||||
|
"tabWidth": 4, |
||||
|
"semi": false, |
||||
|
"printWidth": 120 |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
# LicenseWebApp |
||||
|
|
||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.3. |
||||
|
|
||||
|
## Development server |
||||
|
|
||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. |
||||
|
|
||||
|
## Code scaffolding |
||||
|
|
||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
||||
|
|
||||
|
## Build |
||||
|
|
||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
||||
|
|
||||
|
## Running unit tests |
||||
|
|
||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
||||
|
|
||||
|
## Running end-to-end tests |
||||
|
|
||||
|
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. |
||||
|
|
||||
|
## Further help |
||||
|
|
||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
||||
@ -0,0 +1,120 @@ |
|||||
|
{ |
||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", |
||||
|
"version": 1, |
||||
|
"newProjectRoot": "projects", |
||||
|
"projects": { |
||||
|
"license-web-app": { |
||||
|
"projectType": "application", |
||||
|
"schematics": { |
||||
|
"@schematics/angular:component": { |
||||
|
"style": "less" |
||||
|
} |
||||
|
}, |
||||
|
"root": "", |
||||
|
"sourceRoot": "src", |
||||
|
"prefix": "app", |
||||
|
"architect": { |
||||
|
"build": { |
||||
|
"builder": "@angular-devkit/build-angular:application", |
||||
|
"options": { |
||||
|
"outputPath": "dist/license-web-app", |
||||
|
"index": "src/index.html", |
||||
|
"browser": "src/main.ts", |
||||
|
"polyfills": [ |
||||
|
"zone.js" |
||||
|
], |
||||
|
"tsConfig": "tsconfig.app.json", |
||||
|
"inlineStyleLanguage": "less", |
||||
|
"assets": [ |
||||
|
"src/favicon.ico", |
||||
|
"src/assets", |
||||
|
{ |
||||
|
"glob": "**/*", |
||||
|
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", |
||||
|
"output": "/assets/" |
||||
|
}, |
||||
|
{ |
||||
|
"glob": "**/*", |
||||
|
"input": "node_modules/tinymce", |
||||
|
"output": "/assets/tinymce/" |
||||
|
} |
||||
|
], |
||||
|
"styles": [ |
||||
|
"src/styles.less" |
||||
|
], |
||||
|
"scripts": [ |
||||
|
"node_modules/tinymce/tinymce.min.js" |
||||
|
] |
||||
|
}, |
||||
|
"configurations": { |
||||
|
"production": { |
||||
|
"budgets": [ |
||||
|
{ |
||||
|
"type": "initial", |
||||
|
"maximumWarning": "10mb", |
||||
|
"maximumError": "10mb" |
||||
|
}, |
||||
|
{ |
||||
|
"type": "anyComponentStyle", |
||||
|
"maximumWarning": "10mb", |
||||
|
"maximumError": "10mb" |
||||
|
} |
||||
|
], |
||||
|
"outputHashing": "all" |
||||
|
}, |
||||
|
"development": { |
||||
|
"optimization": false, |
||||
|
"extractLicenses": false, |
||||
|
"sourceMap": true |
||||
|
} |
||||
|
}, |
||||
|
"defaultConfiguration": "production" |
||||
|
}, |
||||
|
"serve": { |
||||
|
"builder": "@angular-devkit/build-angular:dev-server", |
||||
|
"configurations": { |
||||
|
"production": { |
||||
|
"buildTarget": "license-web-app:build:production" |
||||
|
}, |
||||
|
"development": { |
||||
|
"buildTarget": "license-web-app:build:development" |
||||
|
} |
||||
|
}, |
||||
|
"defaultConfiguration": "development", |
||||
|
"options": { |
||||
|
"port": 6001, |
||||
|
"host": "0.0.0.0" |
||||
|
} |
||||
|
}, |
||||
|
"extract-i18n": { |
||||
|
"builder": "@angular-devkit/build-angular:extract-i18n", |
||||
|
"options": { |
||||
|
"buildTarget": "license-web-app:build" |
||||
|
} |
||||
|
}, |
||||
|
"test": { |
||||
|
"builder": "@angular-devkit/build-angular:karma", |
||||
|
"options": { |
||||
|
"polyfills": [ |
||||
|
"zone.js", |
||||
|
"zone.js/testing" |
||||
|
], |
||||
|
"tsConfig": "tsconfig.spec.json", |
||||
|
"inlineStyleLanguage": "less", |
||||
|
"assets": [ |
||||
|
"src/favicon.ico", |
||||
|
"src/assets" |
||||
|
], |
||||
|
"styles": [ |
||||
|
"src/styles.less" |
||||
|
], |
||||
|
"scripts": [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"cli": { |
||||
|
"analytics": false |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,47 @@ |
|||||
|
{ |
||||
|
"name": "admin-web-app", |
||||
|
"version": "0.0.0", |
||||
|
"scripts": { |
||||
|
"ng": "ng", |
||||
|
"start": "ng serve --proxy-config proxy/proxy.conf.js", |
||||
|
"start:remote": "ng serve --proxy-config proxy/proxy.conf.remote.js", |
||||
|
"build": "ng build", |
||||
|
"watch": "ng build --watch --configuration development", |
||||
|
"test": "ng test" |
||||
|
}, |
||||
|
"private": true, |
||||
|
"dependencies": { |
||||
|
"@angular/animations": "^17.0.0", |
||||
|
"@angular/common": "^17.0.0", |
||||
|
"@angular/compiler": "^17.0.0", |
||||
|
"@angular/core": "^17.0.0", |
||||
|
"@angular/forms": "^17.0.0", |
||||
|
"@angular/platform-browser": "^17.0.0", |
||||
|
"@angular/platform-browser-dynamic": "^17.0.0", |
||||
|
"@angular/router": "^17.0.0", |
||||
|
"@tinymce/tinymce-angular": "^7.0.0", |
||||
|
"echarts": "^5.4.3", |
||||
|
"ng-zorro-antd": "^17.0.1", |
||||
|
"rxjs": "~7.8.0", |
||||
|
"tinymce": "^7.0.0", |
||||
|
"tslib": "^2.3.0", |
||||
|
"zone.js": "~0.14.2" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@angular-devkit/build-angular": "^17.0.3", |
||||
|
"@angular/cli": "^17.0.3", |
||||
|
"@angular/compiler-cli": "^17.0.0", |
||||
|
"@types/jasmine": "~5.1.0", |
||||
|
"autoprefixer": "^10.4.16", |
||||
|
"jasmine-core": "~5.1.0", |
||||
|
"karma": "~6.4.0", |
||||
|
"karma-chrome-launcher": "~3.2.0", |
||||
|
"karma-coverage": "~2.2.0", |
||||
|
"karma-jasmine": "~5.1.0", |
||||
|
"karma-jasmine-html-reporter": "~2.1.0", |
||||
|
"postcss": "^8.4.31", |
||||
|
"prettier": "3.1", |
||||
|
"tailwindcss": "^3.3.5", |
||||
|
"typescript": "~5.2.2" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
// const remoteTarget = "http://10.168.1.60:8300";
|
||||
|
const remoteTarget = 'http://47.109.27.8:8280/' |
||||
|
const localTarget = 'http://localhost:8300' |
||||
|
|
||||
|
const devProxy = (remote) => { |
||||
|
let config = {} |
||||
|
const target = remote ? remoteTarget : localTarget |
||||
|
|
||||
|
return { |
||||
|
'/api': { |
||||
|
target, |
||||
|
secure: false, |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
module.exports = devProxy |
||||
@ -0,0 +1,2 @@ |
|||||
|
const devProxy = require('./devserver') |
||||
|
module.exports = devProxy() |
||||
@ -0,0 +1,2 @@ |
|||||
|
const devProxy = require("./devserver"); |
||||
|
module.exports = devProxy(true); |
||||
@ -0,0 +1 @@ |
|||||
|
<router-outlet></router-outlet> |
||||
@ -0,0 +1,4 @@ |
|||||
|
:host { |
||||
|
display: block; |
||||
|
height: 100%; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
import { SharedModule } from './shared/shared.module' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-root', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './app.component.html', |
||||
|
styleUrl: './app.component.less', |
||||
|
}) |
||||
|
export class AppComponent {} |
||||
@ -0,0 +1,68 @@ |
|||||
|
import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core' |
||||
|
import { provideRouter } from '@angular/router' |
||||
|
|
||||
|
import { registerLocaleData } from '@angular/common' |
||||
|
import zh from '@angular/common/locales/zh' |
||||
|
import { FormsModule } from '@angular/forms' |
||||
|
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http' |
||||
|
import { provideAnimations } from '@angular/platform-browser/animations' |
||||
|
import { zh_CN, provideNzI18n } from 'ng-zorro-antd/i18n' |
||||
|
import { routes } from './app.routes' |
||||
|
import { ServerPaginatedTableService } from './components/server-paginated-table' |
||||
|
import { LocalHttpInterceptorService } from './services' |
||||
|
import { PermissionModule } from './shared/permission/permission.module' |
||||
|
import { TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular' |
||||
|
|
||||
|
registerLocaleData(zh) |
||||
|
|
||||
|
export const APPOINTMENT_FROM = [ |
||||
|
{ value: 1, label: '美团' }, |
||||
|
{ value: 2, label: '大众点评' }, |
||||
|
{ value: 3, label: '小红书' }, |
||||
|
{ value: 4, label: '抖音' }, |
||||
|
] |
||||
|
|
||||
|
export function initializeApp(configService: ServerPaginatedTableService) { |
||||
|
return () => { |
||||
|
configService.initial() |
||||
|
configService.setConfig({ |
||||
|
formatPaginationData(v) { |
||||
|
return { |
||||
|
current: v.pageIndex, |
||||
|
pageSize: v.pageSize, |
||||
|
} |
||||
|
}, |
||||
|
formatServiceData(v) { |
||||
|
console.log('v', v) |
||||
|
return { |
||||
|
total: v.data.total, |
||||
|
totalPages: Math.ceil(v.data.records / 5), |
||||
|
data: v.data.records, |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const appConfig: ApplicationConfig = { |
||||
|
providers: [ |
||||
|
provideRouter(routes), |
||||
|
provideNzI18n(zh_CN), |
||||
|
importProvidersFrom(FormsModule), |
||||
|
importProvidersFrom(HttpClientModule), |
||||
|
importProvidersFrom(PermissionModule.forRoot()), |
||||
|
provideAnimations(), |
||||
|
{ |
||||
|
provide: HTTP_INTERCEPTORS, |
||||
|
useClass: LocalHttpInterceptorService, |
||||
|
multi: true, |
||||
|
}, |
||||
|
{ |
||||
|
provide: APP_INITIALIZER, |
||||
|
useFactory: initializeApp, |
||||
|
deps: [ServerPaginatedTableService], |
||||
|
multi: true, |
||||
|
}, |
||||
|
{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }, |
||||
|
], |
||||
|
} |
||||
@ -0,0 +1,245 @@ |
|||||
|
import { Routes } from '@angular/router' |
||||
|
import { DashboardComponent } from './pages/dashboard/dashboard.component' |
||||
|
import { LayoutComponent } from './components/layout/layout.component' |
||||
|
import { ProfileComponent } from './pages/profile/profile.component' |
||||
|
import { ProfileBasicComponent } from './pages/profile-basic/profile-basic.component' |
||||
|
import { ProfileAccountComponent } from './pages/profile-account/profile-account.component' |
||||
|
import { LoginComponent } from './pages/login/login.component' |
||||
|
import { authGuard } from './guards' |
||||
|
import { permissionGuard } from './shared/permission/permission.guard' |
||||
|
import { ForbiddenComponent } from './pages/forbidden/forbidden.component' |
||||
|
import { NotfoundComponent } from './pages/notfound/notfound.component' |
||||
|
import { SystemComponent } from './pages/system/system.component' |
||||
|
import { OrgComponent } from './pages/org/org.component' |
||||
|
import { OrgEmployeeComponent } from './pages/org-employee/org-employee.component' |
||||
|
import { OrgSettingComponent } from './pages/org-setting/org-setting.component' |
||||
|
import { FixedAssetComponent } from './pages/fixed-asset/fixed-asset.component' |
||||
|
import { FixedAssetBelongComponent } from './pages/fixed-asset/ledger/fixed-asset-belong/fixed-asset-belong.component' |
||||
|
import { FixedAssetEmployeeComponent } from './pages/fixed-asset/ledger/fixed-asset-employee/fixed-asset-employee.component' |
||||
|
import { FixedAssetOrgComponent } from './pages/fixed-asset/ledger/fixed-asset-org/fixed-asset-org.component' |
||||
|
import { FixedAssetCategoryComponent } from './pages/fixed-asset/ledger/fixed-asset-category/fixed-asset-category.component' |
||||
|
import { FixedAssetPositionComponent } from './pages/fixed-asset/ledger/fixed-asset-position/fixed-asset-position.component' |
||||
|
import { FixedAssetMyownComponent } from './pages/fixed-asset/ledger/fixed-asset-myown/fixed-asset-myown.component' |
||||
|
import { FixedAssetLedgerComponent } from './pages/fixed-asset/ledger/fixed-asset-ledger/fixed-asset-ledger.component' |
||||
|
import { FixedAssetSearchComponent } from './pages/fixed-asset/ledger/fixed-asset-search/fixed-asset-search.component' |
||||
|
import { FixedAssetManageComponent } from './pages/fixed-asset/manage/fixed-asset-manage/fixed-asset-manage.component' |
||||
|
import { FixedAssetManageEntryComponent } from './pages/fixed-asset/manage/fixed-asset-manage-entry/fixed-asset-manage-entry.component' |
||||
|
import { FixedAssetManageDistributionComponent } from './pages/fixed-asset/manage/fixed-asset-manage-distribution/fixed-asset-manage-distribution.component' |
||||
|
import { FixedAssetManageReturnComponent } from './pages/fixed-asset/manage/fixed-asset-manage-return/fixed-asset-manage-return.component' |
||||
|
import { FixedAssetManageBorrowComponent } from './pages/fixed-asset/manage/fixed-asset-manage-borrow/fixed-asset-manage-borrow.component' |
||||
|
import { FixedAssetManageRevertComponent } from './pages/fixed-asset/manage/fixed-asset-manage-revert/fixed-asset-manage-revert.component' |
||||
|
import { FixedAssetManageAllotComponent } from './pages/fixed-asset/manage/fixed-asset-manage-allot/fixed-asset-manage-allot.component' |
||||
|
import { FixedAssetManageTransferComponent } from './pages/fixed-asset/manage/fixed-asset-manage-transfer/fixed-asset-manage-transfer.component' |
||||
|
import { FixedAssetManageScrapComponent } from './pages/fixed-asset/manage/fixed-asset-manage-scrap/fixed-asset-manage-scrap.component' |
||||
|
|
||||
|
export const routes: Routes = [ |
||||
|
{ |
||||
|
path: 'login', |
||||
|
component: LoginComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'forbidden', |
||||
|
component: ForbiddenComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: '', |
||||
|
component: LayoutComponent, |
||||
|
canActivate: [authGuard], |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'dashboard', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'dashboard', |
||||
|
component: DashboardComponent, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
path: 'profile', |
||||
|
component: ProfileComponent, |
||||
|
|
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'basic', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'basic', |
||||
|
component: ProfileBasicComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'account', |
||||
|
component: ProfileAccountComponent, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'system', |
||||
|
component: SystemComponent, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'user', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'user', |
||||
|
component: SystemComponent, |
||||
|
canActivate: [permissionGuard], |
||||
|
data: { |
||||
|
permission: 'user', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'org', |
||||
|
component: OrgComponent, |
||||
|
title: '人事管理', |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'setting', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'setting', |
||||
|
component: OrgSettingComponent, |
||||
|
title: '组织架构', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'employee', |
||||
|
component: OrgEmployeeComponent, |
||||
|
title: '员工管理', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'fixed-asset', |
||||
|
title: '固资管理', |
||||
|
component: FixedAssetComponent, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'ledger', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'ledger', |
||||
|
title: '资产台账', |
||||
|
component: FixedAssetLedgerComponent, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
pathMatch: 'full', |
||||
|
redirectTo: 'asset-search', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-search', |
||||
|
title: '资产公共台账', |
||||
|
component: FixedAssetSearchComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-belong', |
||||
|
title: '归属组织台账', |
||||
|
component: FixedAssetBelongComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-org', |
||||
|
title: '使用组织台账', |
||||
|
component: FixedAssetOrgComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-position', |
||||
|
title: '存放位置台账', |
||||
|
component: FixedAssetPositionComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-employee', |
||||
|
title: '员工查询台账', |
||||
|
component: FixedAssetEmployeeComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-category', |
||||
|
title: '分类查询台账', |
||||
|
component: FixedAssetCategoryComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: 'asset-my-own', |
||||
|
title: '所管资产台账', |
||||
|
component: FixedAssetMyownComponent, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'manage', |
||||
|
// title: '固资管理',
|
||||
|
children: [ |
||||
|
{ |
||||
|
path: '', |
||||
|
redirectTo: 'list', |
||||
|
pathMatch: 'full', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'list', |
||||
|
component: FixedAssetManageComponent, |
||||
|
title: '资产管理', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'entry', |
||||
|
component: FixedAssetManageEntryComponent, |
||||
|
title: '资产入库', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'distribution', |
||||
|
component: FixedAssetManageDistributionComponent, |
||||
|
title: '资产派发', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'return', |
||||
|
component: FixedAssetManageReturnComponent, |
||||
|
title: '资产退还', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'borrow', |
||||
|
component: FixedAssetManageBorrowComponent, |
||||
|
title: '资产借用', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'revert', |
||||
|
component: FixedAssetManageRevertComponent, |
||||
|
title: '资产归还', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'allot', |
||||
|
component: FixedAssetManageAllotComponent, |
||||
|
title: '资产调拨', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'transfer', |
||||
|
component: FixedAssetManageTransferComponent, |
||||
|
title: '资产转换', |
||||
|
}, |
||||
|
{ |
||||
|
path: 'scrap', |
||||
|
component: FixedAssetManageScrapComponent, |
||||
|
title: '资产报废', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: 'not-found', |
||||
|
component: NotfoundComponent, |
||||
|
}, |
||||
|
{ |
||||
|
path: '**', |
||||
|
redirectTo: 'not-found', |
||||
|
}, |
||||
|
] |
||||
@ -0,0 +1,32 @@ |
|||||
|
<div class="page-header"> |
||||
|
<div class="flex items-center mb-3 px-4 py-2 shadow bg-white rounded-sm"> |
||||
|
<div class="flex-1"> |
||||
|
<nz-breadcrumb> |
||||
|
<nz-breadcrumb-item> |
||||
|
<a href="/">首页</a> |
||||
|
</nz-breadcrumb-item> |
||||
|
@for (b of breadcrumbs; track $index; let last = $last) { |
||||
|
@if (last) { |
||||
|
<nz-breadcrumb-item>{{ b.label }}</nz-breadcrumb-item> |
||||
|
} @else { |
||||
|
<nz-breadcrumb-item> |
||||
|
<a [routerLink]="b.url">{{ b.label }}</a> |
||||
|
</nz-breadcrumb-item> |
||||
|
} |
||||
|
} |
||||
|
</nz-breadcrumb> |
||||
|
</div> |
||||
|
@if (actions) { |
||||
|
<div class="flex-1 flex justify-end items-center"> |
||||
|
<ng-container |
||||
|
[ngTemplateOutlet]="actions" |
||||
|
[ngTemplateOutletContext]="{ |
||||
|
$implicit: 12 |
||||
|
}" |
||||
|
/> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
<div></div> |
||||
|
</div> |
||||
|
<ng-content></ng-content> |
||||
@ -0,0 +1,6 @@ |
|||||
|
:host { |
||||
|
@apply p-3; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
@ -0,0 +1,68 @@ |
|||||
|
import { Component, Input, OnDestroy, TemplateRef } from '@angular/core' |
||||
|
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router' |
||||
|
import { BreadcrumbInterface, BreadcrumbService } from 'app/services/breadcrumb.service' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { Subscription, filter } from 'rxjs' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-page', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './app-page.component.html', |
||||
|
styleUrl: './app-page.component.less', |
||||
|
}) |
||||
|
export class AppPageComponent implements OnDestroy { |
||||
|
constructor( |
||||
|
private route: ActivatedRoute, |
||||
|
private router: Router, |
||||
|
) { |
||||
|
this.subscriptions.add( |
||||
|
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { |
||||
|
this.getBreadcrumb() |
||||
|
}), |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
private readonly subscriptions = new Subscription() |
||||
|
|
||||
|
@Input() actions?: TemplateRef<{}> |
||||
|
|
||||
|
breadcrumbs: BreadcrumbInterface[] = [] |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.getBreadcrumb() |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.subscriptions.unsubscribe() |
||||
|
} |
||||
|
|
||||
|
getBreadcrumb() { |
||||
|
this.breadcrumbs = this.buildBreadcrumb(this.route.root) |
||||
|
} |
||||
|
|
||||
|
private buildBreadcrumb( |
||||
|
route: ActivatedRoute, |
||||
|
url: string = '', |
||||
|
breadcrumbs: BreadcrumbInterface[] = [], |
||||
|
): BreadcrumbInterface[] { |
||||
|
const routeConfig = route.routeConfig |
||||
|
const label = routeConfig ? routeConfig.title : '' |
||||
|
const path = routeConfig ? routeConfig.path : '' |
||||
|
|
||||
|
const nextUrl = url !== '/' ? `${url}/${path}` : '' |
||||
|
|
||||
|
const breadcrumb = { |
||||
|
label: label as string, |
||||
|
url: nextUrl, |
||||
|
} |
||||
|
|
||||
|
const newBreadcrumbs = breadcrumb.label ? [...breadcrumbs, breadcrumb] : [...breadcrumbs] |
||||
|
|
||||
|
if (route.firstChild) { |
||||
|
return this.buildBreadcrumb(route.firstChild, nextUrl, newBreadcrumbs) |
||||
|
} |
||||
|
|
||||
|
return newBreadcrumbs |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<ng-container *ngFor="let item of control.errors | keyvalue"> |
||||
|
<ng-container *ngIf="item.value?.message;else defaultTipsTpl"> |
||||
|
{{item.value.message}} |
||||
|
</ng-container> |
||||
|
<ng-template #defaultTipsTpl> |
||||
|
<ng-container [ngSwitch]="item.key"> |
||||
|
<div *ngSwitchCase="'required'"> |
||||
|
不能为空 |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'inputTrim'"> |
||||
|
首末字符不能为空格 |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'email'"> |
||||
|
请输入正确的邮箱地址 |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'maxlength'"> |
||||
|
最多输入{{item.value.requiredLength}}位字符 |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'minlength'"> |
||||
|
最少输入{{item.value.requiredLength}}位字符 |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'min'"> |
||||
|
不能小于{{item.value.min}} |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'max'"> |
||||
|
不能大于{{item.value.max}} |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'pattern'"> |
||||
|
请输入正确的内容 |
||||
|
</div> |
||||
|
<div *ngSwitchDefault> |
||||
|
字段验证失败 |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
</ng-container> |
||||
@ -0,0 +1,28 @@ |
|||||
|
import { CommonModule } from "@angular/common"; |
||||
|
import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core"; |
||||
|
import { FormControl, FormGroup } from "@angular/forms"; |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: "form-error-tips", |
||||
|
templateUrl: "./form-error-tips.component.html", |
||||
|
styleUrls: ["./form-error-tips.component.less"], |
||||
|
imports: [CommonModule], |
||||
|
}) |
||||
|
export class FormErrorTipsComponent implements OnInit, OnChanges { |
||||
|
constructor() {} |
||||
|
|
||||
|
@Input() control!: FormControl; |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
// console.log("FormErrorTipsComponent changes", changes["control"]?.currentValue);
|
||||
|
// const formControl: FormControl = changes["control"].currentValue;
|
||||
|
// const root = formControl.root as FormGroup;
|
||||
|
// console.log("formControl.root", formControl);
|
||||
|
// if (formControl && !this.label) {
|
||||
|
// if(initLabelFormControlNameMaps.has(formControl))
|
||||
|
// }
|
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void {} |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
<header class="fixed z-20 left-0 top-0 right-0 shadow-md header"> |
||||
|
<div class="flex h-full px-4 app-width mx-auto"> |
||||
|
<a class="logo flex items-center"> |
||||
|
<!-- <img src="/assets/images/logo.png" class="w-8" /> --> |
||||
|
<span class="ml-2 text-2xl font-bold text-white">固资系统</span> |
||||
|
</a> |
||||
|
|
||||
|
<ul class="ml-8 nav flex"> |
||||
|
<li class="nav-item"> |
||||
|
<a routerLink="/dashboard" routerLinkActive="active">首页</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a routerLink="/fixed-asset" routerLinkActive="active">固资管理</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a routerLink="/org" routerLinkActive="active">人事管理</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a routerLink="/system" routerLinkActive="active">系统管理</a> |
||||
|
</li> |
||||
|
|
||||
|
<!-- <li |
||||
|
class="nav-item" |
||||
|
*appPermission="['jwClient:model', 'jwClient:list', 'jwClient:add', 'jwClient:edit', 'jwClient:delete']" |
||||
|
> |
||||
|
<a routerLink="/entity" routerLinkActive="active">授权实体</a> |
||||
|
</li> |
||||
|
<li |
||||
|
class="nav-item" |
||||
|
*appPermission="[ |
||||
|
'jwProduct:model', |
||||
|
'jwProduct:list', |
||||
|
'jwProduct:add', |
||||
|
'jwProduct:edit', |
||||
|
'jwProduct:delete' |
||||
|
]" |
||||
|
> |
||||
|
<a routerLink="/product" routerLinkActive="active">产品管理</a> |
||||
|
</li> |
||||
|
|
||||
|
<li |
||||
|
class="nav-item" |
||||
|
*appPermission="[ |
||||
|
'userGroup:model', |
||||
|
'sysUser:model', |
||||
|
'sysUser:list', |
||||
|
'sysUser:add', |
||||
|
'sysUser:edit', |
||||
|
'sysUser:delete' |
||||
|
]" |
||||
|
> |
||||
|
<a routerLink="/contacts" routerLinkActive="active">用户管理</a> |
||||
|
</li> |
||||
|
<li |
||||
|
class="nav-item" |
||||
|
*appPermission="['sysRole:model', 'sysRole:list', 'sysRole:add', 'sysRole:edit', 'sysRole:delete']" |
||||
|
> |
||||
|
<a routerLink="/role" routerLinkActive="active">角色管理</a> |
||||
|
</li> |
||||
|
<li class="nav-item" *appPermission="['sysLog:model']"> |
||||
|
<a routerLink="/log" routerLinkActive="active">操作记录</a> |
||||
|
</li> --> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="ml-auto flex items-center"> |
||||
|
<a nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menu"> |
||||
|
<nz-avatar nzSrc="/assets/images/avatar4.png" /> |
||||
|
<span class="ml-2"> |
||||
|
{{ api.authInfo.name || 'admin' }} |
||||
|
</span> |
||||
|
<span nz-icon nzType="down"></span> |
||||
|
</a> |
||||
|
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
|
<ul nz-menu nzSelectable> |
||||
|
<li nz-menu-item routerLink="/profile">个人中心</li> |
||||
|
<li nz-menu-item (click)="logout()">退出登录</li> |
||||
|
</ul> |
||||
|
</nz-dropdown-menu> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<div class="h-12"></div> |
||||
@ -0,0 +1,32 @@ |
|||||
|
.header { |
||||
|
background-color: var(--primary); |
||||
|
color: #fff; |
||||
|
|
||||
|
a { |
||||
|
color: rgba(255, 255, 255, .8); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav { |
||||
|
&-item { |
||||
|
|
||||
|
|
||||
|
a { |
||||
|
@apply h-12 px-5 overflow-hidden text-center flex items-center; |
||||
|
font-size: 15px; |
||||
|
|
||||
|
&.active { |
||||
|
background-color: rgba(255, 255, 255, .4); |
||||
|
color: #fff; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
a { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
import { Component, OnInit, inject } from '@angular/core' |
||||
|
import { SharedModule } from '../../shared/shared.module' |
||||
|
import { ApiService, LocalHttpInterceptorService } from 'app/services' |
||||
|
import { Router } from '@angular/router' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { PermissionService } from 'app/shared/permission/permission.service' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: 'app-header', |
||||
|
templateUrl: './header.component.html', |
||||
|
styleUrls: ['./header.component.less'], |
||||
|
imports: [SharedModule], |
||||
|
}) |
||||
|
export class HeaderComponent implements OnInit { |
||||
|
constructor( |
||||
|
private local: LocalHttpInterceptorService, |
||||
|
private router: Router, |
||||
|
private msg: NzMessageService, |
||||
|
private modal: NzModalService, |
||||
|
public api: ApiService, |
||||
|
) {} |
||||
|
|
||||
|
ngOnInit(): void {} |
||||
|
|
||||
|
permission = inject(PermissionService) |
||||
|
|
||||
|
logout() { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '退出登录', |
||||
|
nzContent: '确认要退出当前账户吗？', |
||||
|
nzOnOk: () => { |
||||
|
this.permission.reset() |
||||
|
this.local.removeAccess() |
||||
|
this.router.navigate(['/login']) |
||||
|
this.msg.success('退出成功') |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
// export * from "./form-error-tips/form-error-tips.component";
|
||||
|
// export * from "./server-paginated-table";
|
||||
|
|
||||
|
export * from './header/header.component' |
||||
|
export * from './layout/layout.component' |
||||
@ -0,0 +1,4 @@ |
|||||
|
<app-header></app-header> |
||||
|
<main class="app-width mx-auto"> |
||||
|
<router-outlet></router-outlet> |
||||
|
</main> |
||||
@ -0,0 +1,15 @@ |
|||||
|
:host { |
||||
|
display: block; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.app-width { |
||||
|
::ng-deep { |
||||
|
router-outlet+* { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
// overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { Component } from '@angular/core'; |
||||
|
import { HeaderComponent } from "../header/header.component"; |
||||
|
import { SharedModule } from "../../shared/shared.module"; |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: 'app-layout', |
||||
|
templateUrl: './layout.component.html', |
||||
|
styleUrls: ['./layout.component.less'], |
||||
|
imports: [SharedModule, HeaderComponent] |
||||
|
}) |
||||
|
export class LayoutComponent { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
<div class="flex items-center"> |
||||
|
<div class="flex-1"> |
||||
|
<nz-date-picker |
||||
|
class="w-full" |
||||
|
[nzShowTime]="showTime" |
||||
|
nzShowTime |
||||
|
[nzFormat]="_format" |
||||
|
[(ngModel)]="startValue" |
||||
|
(ngModelChange)="onStartValueChange($event)" |
||||
|
nzPlaceHolder="开始时间" |
||||
|
(nzOnOpenChange)="handleStartOpenChange($event)" |
||||
|
> |
||||
|
</nz-date-picker> |
||||
|
</div> |
||||
|
<div class="px-1">~</div> |
||||
|
<div class="flex-1"> |
||||
|
<nz-date-picker |
||||
|
class="w-full" |
||||
|
#endDatePicker |
||||
|
[nzShowTime]="showTime" |
||||
|
[(ngModel)]="endValue" |
||||
|
(ngModelChange)="onEndValueChange($event)" |
||||
|
nzPlaceHolder="结束时间" |
||||
|
[nzFormat]="_format" |
||||
|
(nzOnOpenChange)="handleEndOpenChange($event)" |
||||
|
> |
||||
|
</nz-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,96 @@ |
|||||
|
import { CommonModule } from '@angular/common' |
||||
|
import { Component, Input, ViewChild, forwardRef } from '@angular/core' |
||||
|
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { NzDatePickerComponent, NzDatePickerModule } from 'ng-zorro-antd/date-picker' |
||||
|
import { NzSpaceModule } from 'ng-zorro-antd/space' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-range-picker', |
||||
|
standalone: true, |
||||
|
imports: [CommonModule, FormsModule, ReactiveFormsModule, NzDatePickerModule, NzSpaceModule], |
||||
|
templateUrl: './range-picker.component.html', |
||||
|
styleUrl: './range-picker.component.less', |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
multi: true, |
||||
|
useExisting: forwardRef(() => RangePickerComponent), |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
export class RangePickerComponent implements ControlValueAccessor { |
||||
|
constructor() {} |
||||
|
|
||||
|
@Input() showTime = false |
||||
|
|
||||
|
@Input() format?: string |
||||
|
|
||||
|
get _format() { |
||||
|
if (this.format) { |
||||
|
return this.format |
||||
|
} |
||||
|
return this.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' |
||||
|
} |
||||
|
|
||||
|
startValue: Date | null = null |
||||
|
|
||||
|
endValue: Date | null = null |
||||
|
|
||||
|
@ViewChild('endDatePicker') endDatePicker!: NzDatePickerComponent |
||||
|
|
||||
|
disabledStartDate = (startValue: Date): boolean => { |
||||
|
if (!startValue || !this.endValue) { |
||||
|
return false |
||||
|
} |
||||
|
return startValue.getTime() > this.endValue.getTime() |
||||
|
} |
||||
|
|
||||
|
disabledEndDate = (endValue: Date): boolean => { |
||||
|
if (!endValue || !this.startValue) { |
||||
|
return false |
||||
|
} |
||||
|
return endValue.getTime() <= this.startValue.getTime() |
||||
|
} |
||||
|
|
||||
|
handleStartOpenChange(open: boolean): void { |
||||
|
if (!open) { |
||||
|
this.endDatePicker.open() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleEndOpenChange(open: boolean): void {} |
||||
|
|
||||
|
onTouched = () => {} |
||||
|
|
||||
|
onChange(v: (Date | null)[]) { |
||||
|
console.log('v', v) |
||||
|
} |
||||
|
|
||||
|
onStartValueChange(value: Date | null): void { |
||||
|
this.startValue = value |
||||
|
this.onChange([this.startValue, this.endValue]) |
||||
|
this.onTouched() |
||||
|
} |
||||
|
|
||||
|
onEndValueChange(value: Date | null): void { |
||||
|
this.endValue = value |
||||
|
this.onChange([this.startValue, this.endValue]) |
||||
|
this.onTouched() |
||||
|
} |
||||
|
|
||||
|
writeValue(v: any): void { |
||||
|
this.startValue = v?.[0] ? new Date(v[0]) : null |
||||
|
this.endValue = v?.[1] ? new Date(v[1]) : null |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.onChange = fn |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
this.onTouched = fn |
||||
|
} |
||||
|
|
||||
|
setDisabledState?(isDisabled: boolean): void {} |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<button |
||||
|
nz-button |
||||
|
nzType="text" |
||||
|
nz-popover |
||||
|
nzPopoverTrigger="click" |
||||
|
[nzPopoverContent]="innerDatePickerTpl" |
||||
|
nzPopoverOverlayClassName="inner-date-picker" |
||||
|
> |
||||
|
<span> |
||||
|
{{ date | date: 'yyyy-MM-dd' }} |
||||
|
</span> |
||||
|
<span nz-icon nzType="calendar" nzTheme="outline"></span> |
||||
|
</button> |
||||
|
|
||||
|
<ng-template #innerDatePickerTpl> |
||||
|
<nz-date-picker nzInline [(ngModel)]="date" /> |
||||
|
</ng-template> |
||||
@ -0,0 +1,12 @@ |
|||||
|
::ng-deep { |
||||
|
.inner-date-picker { |
||||
|
|
||||
|
.ant-popover-inner-content { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.ant-picker-dropdown { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-date-query', |
||||
|
|
||||
|
templateUrl: './date-query.component.html', |
||||
|
styleUrl: './date-query.component.less', |
||||
|
}) |
||||
|
export class DateQueryComponent { |
||||
|
constructor() {} |
||||
|
|
||||
|
date?: Date |
||||
|
range: Array<Date | null> = [] |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
export * from './server-paginated-table.component' |
||||
|
export * from './server-paginated-table.module' |
||||
|
export * from './server-paginated-table.service' |
||||
|
export * from './table-action.directive' |
||||
|
export * from './table-form.directive' |
||||
|
export * from './query-item/query-item.component' |
||||
@ -0,0 +1,8 @@ |
|||||
|
<nz-form-item> |
||||
|
@if (label) { |
||||
|
<nz-form-label>{{ label }}</nz-form-label> |
||||
|
} |
||||
|
<nz-form-control class="query-control"> |
||||
|
<ng-content></ng-content> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
@ -0,0 +1,7 @@ |
|||||
|
.query-control { |
||||
|
::ng-deep { |
||||
|
input { |
||||
|
width: 100px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { Component, Input } from '@angular/core' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-query-item', |
||||
|
templateUrl: './query-item.component.html', |
||||
|
styleUrl: './query-item.component.less', |
||||
|
}) |
||||
|
export class QueryItemComponent { |
||||
|
@Input() label?: string |
||||
|
} |
||||
@ -0,0 +1,164 @@ |
|||||
|
<div> |
||||
|
@if (formGroup) { |
||||
|
<form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)"> |
||||
|
<ng-template [ngTemplateOutlet]="topTpl"></ng-template> |
||||
|
</form> |
||||
|
} @else { |
||||
|
<form (ngSubmit)="onSubmit($event)"> |
||||
|
<ng-template [ngTemplateOutlet]="topTpl"></ng-template> |
||||
|
</form> |
||||
|
} |
||||
|
</div> |
||||
|
<ng-template #topTpl> |
||||
|
@if (formContentChild) { |
||||
|
<div class="formgroup-container"> |
||||
|
<div class="form-items"> |
||||
|
<div class="inline-flex flex-wrap query-wrapper"> |
||||
|
<ng-template [ngTemplateOutlet]="formContentChild"></ng-template> |
||||
|
<nz-space class="inline-flex"> |
||||
|
<button *nzSpaceItem nz-button nzType="primary">查询</button> |
||||
|
<button *nzSpaceItem nz-button type="button" (click)="reset()">重置</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<!-- @if (actionContentChild) { |
||||
|
<div class="action-container pb-3"> |
||||
|
<ng-template [ngTemplateOutlet]="actionContentChild"> </ng-template> |
||||
|
</div> |
||||
|
} --> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #columnsSettingTpl> |
||||
|
<ul> |
||||
|
@for (c of options.columns; track $index) { |
||||
|
<li> |
||||
|
<label nz-checkbox [(nzChecked)]="c.visible" (nzCheckedChange)="onColumnsChange()"> |
||||
|
{{ c.title }} |
||||
|
</label> |
||||
|
</li> |
||||
|
} |
||||
|
</ul> |
||||
|
</ng-template> |
||||
|
|
||||
|
<nz-card [nzBordered]="false" [nzSize]="'small'" class="shadow"> |
||||
|
<nz-table |
||||
|
#tableRef |
||||
|
class="server-paginated-table" |
||||
|
nzShowSizeChanger |
||||
|
[nzShowTotal]="totalTpl" |
||||
|
[nzData]="pagination.data" |
||||
|
[nzFrontPagination]="options.config.frontPagination" |
||||
|
[nzLoading]="pagination.loading" |
||||
|
[nzTotal]="pagination.total" |
||||
|
[(nzPageSize)]="pagination.pageSize" |
||||
|
[(nzPageIndex)]="pagination.pageIndex" |
||||
|
(nzPageIndexChange)="onPageChange()" |
||||
|
(nzPageSizeChange)="onPageChange()" |
||||
|
> |
||||
|
@if (actionContentChild && selected.size > 0) { |
||||
|
<div class="table-selected-action flex items-center"> |
||||
|
<span>已选择 ({{ selected.size }}) 项目</span> |
||||
|
<ng-template [ngTemplateOutlet]="actionContentChild"></ng-template> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<thead> |
||||
|
<tr> |
||||
|
@if (options.config.selectable) { |
||||
|
<th |
||||
|
nzWidth="60px" |
||||
|
nzLabel="Select all" |
||||
|
[nzChecked]="selected.size > 0 && tableRef.data.length > 0" |
||||
|
[nzIndeterminate]="indeterminate" |
||||
|
(nzCheckedChange)="onAllChecked($event)" |
||||
|
></th> |
||||
|
} |
||||
|
@for (th of options.columns; track th.key) { |
||||
|
@if (th.visible) { |
||||
|
<th [nzColumnKey]="th.key" [nzWidth]="th.width ?? null">{{ th.title }}</th> |
||||
|
} |
||||
|
} |
||||
|
@if (options.operate.length > 0) { |
||||
|
<th nzWidth="100px">操作</th> |
||||
|
} |
||||
|
<th nzWidth="60px"> |
||||
|
<div |
||||
|
class="columns-setting w-full cursor-pointer" |
||||
|
(click)="handleColumnsSetting(columnsSettingTpl)" |
||||
|
> |
||||
|
<i nz-icon nzType="setting" class=""></i> |
||||
|
</div> |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
@for (data of tableRef.data; track $index) { |
||||
|
<tr> |
||||
|
@if (options.config.selectable) { |
||||
|
<td |
||||
|
[nzChecked]="selected.has(String(data[options.config.rowKey!]))" |
||||
|
(nzCheckedChange)="onRowSelected($event, data)" |
||||
|
></td> |
||||
|
} |
||||
|
@for (td of options.columns; track td.key) { |
||||
|
<ng-container> |
||||
|
@if (td.visible) { |
||||
|
<td nzEllipsis [attr.title]="renderTitle(data[td.key])"> |
||||
|
<ng-container [ngSwitch]="td.key"> |
||||
|
<ng-container *ngSwitchDefault> |
||||
|
@if (renderColumn) { |
||||
|
<ng-container |
||||
|
[ngTemplateOutlet]="renderColumn" |
||||
|
[ngTemplateOutletContext]="{ |
||||
|
$implicit: data[td.key], |
||||
|
key: td.key, |
||||
|
row: data, |
||||
|
column: td |
||||
|
}" |
||||
|
> |
||||
|
</ng-container> |
||||
|
} @else { |
||||
|
{{ data[td.key] }} |
||||
|
} |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</td> |
||||
|
} @else {} |
||||
|
</ng-container> |
||||
|
} |
||||
|
|
||||
|
@if (options.operate.length > 0) { |
||||
|
<td> |
||||
|
<button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menu"> |
||||
|
<span nz-icon nzType="more" nzTheme="outline" class="more-icon"></span> |
||||
|
</button> |
||||
|
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
|
<ul nz-menu class="operate-list"> |
||||
|
@for (operate of options.operate; track operate.title) { |
||||
|
@if (operate?.visible(data)) { |
||||
|
<li |
||||
|
nz-menu-item |
||||
|
(click)="onOperateClick(operate, data)" |
||||
|
[routerLink]="operate.link" |
||||
|
[nzDanger]="operate.danger" |
||||
|
[nzDisabled]="operate.disabled" |
||||
|
> |
||||
|
{{ operate.title }} |
||||
|
</li> |
||||
|
} |
||||
|
} |
||||
|
</ul> |
||||
|
</nz-dropdown-menu> |
||||
|
</td> |
||||
|
} |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
} |
||||
|
</tbody> |
||||
|
</nz-table> |
||||
|
</nz-card> |
||||
|
|
||||
|
<ng-template #totalTpl let-total> 共{{ total }}条 </ng-template> |
||||
@ -0,0 +1,90 @@ |
|||||
|
.form-items { |
||||
|
|
||||
|
|
||||
|
::ng-deep { |
||||
|
.ant-form-item { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.ant-form-item-label { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.ant-divider-horizontal { |
||||
|
margin: 12px 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.columns-setting { |
||||
|
background-color: #f2f3f5; |
||||
|
} |
||||
|
|
||||
|
.query-wrapper { |
||||
|
::ng-deep { |
||||
|
&>* { |
||||
|
@apply mr-3 mb-3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.formgroup-container { |
||||
|
::ng-deep { |
||||
|
nz-form-item { |
||||
|
padding-left: 10px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
input { |
||||
|
border-color: transparent !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.server-paginated-table { |
||||
|
|
||||
|
.table-selected-action { |
||||
|
height: 41px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 60px; |
||||
|
right: 0; |
||||
|
background-color: #f2f3f5; |
||||
|
} |
||||
|
|
||||
|
::ng-deep { |
||||
|
|
||||
|
table { |
||||
|
table-layout: fixed !important; |
||||
|
} |
||||
|
|
||||
|
.ant-table-thead>tr>th { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.ant-table-thead>tr>th, |
||||
|
.ant-table-tbody>tr>td, |
||||
|
.ant-table tfoot>tr>th, |
||||
|
.ant-table tfoot>tr>td { |
||||
|
padding: 9px 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.operate-list { |
||||
|
::ng-deep { |
||||
|
&>li { |
||||
|
min-width: 150px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more-icon { |
||||
|
::ng-deep { |
||||
|
svg { |
||||
|
transform: scale(1.3); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,359 @@ |
|||||
|
import { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ContentChild, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
SimpleChanges, |
||||
|
TemplateRef, |
||||
|
} from '@angular/core' |
||||
|
import { |
||||
|
AnyObject, |
||||
|
CacheStateInterface, |
||||
|
FetchDataInterface, |
||||
|
PaginationInterface, |
||||
|
ServerPaginatedTableService, |
||||
|
TableColumnsInterface, |
||||
|
persistKey, |
||||
|
} from './server-paginated-table.service' |
||||
|
import { finalize, map } from 'rxjs' |
||||
|
import { FormGroup } from '@angular/forms' |
||||
|
import { TableFormDirective } from './table-form.directive' |
||||
|
import { Router } from '@angular/router' |
||||
|
import { TableActionDirective } from './table-action.directive' |
||||
|
import { NzDrawerService } from 'ng-zorro-antd/drawer' |
||||
|
|
||||
|
export interface TableOperationInterface { |
||||
|
title: string |
||||
|
link?: string[] |
||||
|
premissions?: string[] |
||||
|
danger?: boolean |
||||
|
disabled?: boolean |
||||
|
onClick?: (v: any) => void |
||||
|
visible?: (v: any) => boolean |
||||
|
} |
||||
|
|
||||
|
export interface TableOptionConfigInterface { |
||||
|
rowKey?: string |
||||
|
cacheUrls: string[] |
||||
|
cacheKey?: string |
||||
|
manual?: boolean |
||||
|
frontPagination?: boolean |
||||
|
selectable?: boolean |
||||
|
} |
||||
|
|
||||
|
export class TableOption { |
||||
|
constructor(fetchData: FetchDataInterface) |
||||
|
constructor( |
||||
|
fetchData: FetchDataInterface, |
||||
|
columns?: TableColumnsInterface[], |
||||
|
operate?: TableOperationInterface[], |
||||
|
config?: Partial<TableOptionConfigInterface>, |
||||
|
) |
||||
|
constructor(fetchData: FetchDataInterface, config: Partial<TableOptionConfigInterface>) |
||||
|
constructor( |
||||
|
fetchData: FetchDataInterface, |
||||
|
configOrColumns?: Partial<TableOptionConfigInterface> | TableColumnsInterface[], |
||||
|
operate?: TableOperationInterface[], |
||||
|
config?: Partial<TableOptionConfigInterface>, |
||||
|
) { |
||||
|
this.fetchData = fetchData |
||||
|
let _config = config |
||||
|
if (Array.isArray(configOrColumns)) { |
||||
|
this.setColumn(configOrColumns) |
||||
|
} else if (configOrColumns) { |
||||
|
_config = configOrColumns |
||||
|
} |
||||
|
if (operate) { |
||||
|
this.setRowOperate(operate) |
||||
|
} |
||||
|
if (_config) { |
||||
|
this.setConfig(_config) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
config: TableOptionConfigInterface = { |
||||
|
cacheKey: persistKey + location.pathname, |
||||
|
cacheUrls: [], |
||||
|
} |
||||
|
|
||||
|
fetchData: FetchDataInterface |
||||
|
|
||||
|
columns: TableColumnsInterface[] = [] |
||||
|
|
||||
|
operate: TableOperationInterface[] = [] |
||||
|
|
||||
|
ref!: ServerPaginatedTableComponent |
||||
|
|
||||
|
columnsCacheKey = 'SERVER_PAGINATED_V1' |
||||
|
|
||||
|
setCommponentRef(ref: ServerPaginatedTableComponent) { |
||||
|
this.ref = ref |
||||
|
} |
||||
|
|
||||
|
setConfig(config: Partial<TableOptionConfigInterface>): TableOption { |
||||
|
this.config = { |
||||
|
...this.config, |
||||
|
rowKey: this.config.rowKey ?? config.rowKey ?? 'id', |
||||
|
...(config ?? {}), |
||||
|
} |
||||
|
return this |
||||
|
} |
||||
|
|
||||
|
setColumn(columns: TableColumnsInterface[]): TableOption { |
||||
|
const cachedColumns = this.getCachedColumns() |
||||
|
const cacheKey = this.config.cacheKey! |
||||
|
const currentTableColumns = cachedColumns[cacheKey] ?? [] |
||||
|
console.log('currentTableColumns', cachedColumns, cacheKey, currentTableColumns) |
||||
|
this.columns = columns.map((i) => { |
||||
|
const cachedItem = currentTableColumns.find((c) => c.key === i.key) |
||||
|
const visible = cachedItem?.visible ?? i.visible |
||||
|
return { |
||||
|
...i, |
||||
|
...cachedItem, |
||||
|
visible: typeof visible !== 'boolean' ? true : visible, |
||||
|
} |
||||
|
}) |
||||
|
return this |
||||
|
} |
||||
|
|
||||
|
setRowOperate(operate: TableOperationInterface[]): TableOption { |
||||
|
this.operate = operate.map((i) => { |
||||
|
return { |
||||
|
...i, |
||||
|
visible: i.visible ?? (() => true), |
||||
|
} |
||||
|
}) |
||||
|
return this |
||||
|
} |
||||
|
|
||||
|
getCachedColumns() { |
||||
|
let cachedColumns: null | Record<string, TableColumnsInterface[]> = null |
||||
|
try { |
||||
|
const str = localStorage.getItem(this.columnsCacheKey) |
||||
|
if (str) { |
||||
|
cachedColumns = JSON.parse(str) as Record<string, TableColumnsInterface[]> |
||||
|
} |
||||
|
} catch (error) {} |
||||
|
return cachedColumns ?? {} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-server-paginated-table', |
||||
|
templateUrl: './server-paginated-table.component.html', |
||||
|
styleUrls: ['./server-paginated-table.component.less'], |
||||
|
}) |
||||
|
export class ServerPaginatedTableComponent implements OnInit, OnChanges { |
||||
|
constructor( |
||||
|
private cdr: ChangeDetectorRef, |
||||
|
private pageTable: ServerPaginatedTableService, |
||||
|
private router: Router, |
||||
|
private drawer: NzDrawerService, |
||||
|
) {} |
||||
|
|
||||
|
@Input() options!: TableOption |
||||
|
|
||||
|
/** |
||||
|
* 查询表单 |
||||
|
* https://github.com/angular/angular/issues/13761
|
||||
|
*/ |
||||
|
@Input() formGroup?: FormGroup |
||||
|
|
||||
|
@Input() simpleSearch = false |
||||
|
|
||||
|
@Input() initValue: AnyObject = {} |
||||
|
|
||||
|
/** |
||||
|
* 在表格模式下渲染具体每一个列的模板。 |
||||
|
* $implicit:dataItem[col.key] `具体的值`、 |
||||
|
* key:col.key `字段名`、 |
||||
|
* row:dataItem `当前行数据`、 |
||||
|
* column:col `当前列`、 |
||||
|
*/ |
||||
|
@Input() renderColumn?: TemplateRef<{}> |
||||
|
|
||||
|
/** |
||||
|
* 不使用表格模式，自定义渲染 |
||||
|
*/ |
||||
|
@Input() renderItem?: TemplateRef<{}> |
||||
|
|
||||
|
@ContentChild(TableFormDirective, { static: true, read: TemplateRef }) |
||||
|
formContentChild!: TemplateRef<any> |
||||
|
|
||||
|
@ContentChild(TableActionDirective, { static: true, read: TemplateRef }) |
||||
|
actionContentChild!: TemplateRef<{ $implicit: number }> |
||||
|
|
||||
|
pagination: PaginationInterface = { |
||||
|
loading: false, |
||||
|
data: [], |
||||
|
total: 0, |
||||
|
totalPages: 0, |
||||
|
pageSize: 10, |
||||
|
pageIndex: 1, |
||||
|
} |
||||
|
|
||||
|
String = String |
||||
|
|
||||
|
selected = new Set<string>() |
||||
|
|
||||
|
indeterminate = false |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void {} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
if (!this.options) { |
||||
|
throw new Error('请设置正确的options') |
||||
|
} |
||||
|
this.options.setCommponentRef(this) |
||||
|
// this.options.config.cacheKey = this.cacheKeyCreator()
|
||||
|
this.setCachedDataToState() |
||||
|
if (!this.options.config.manual) { |
||||
|
this.run() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private setCachedDataToState() { |
||||
|
const cachedState = this.pageTable.getCachedState() |
||||
|
if (cachedState) { |
||||
|
const cacheKey = this.options.config.cacheKey! |
||||
|
const currentPath = cachedState.paths[cacheKey] |
||||
|
const currentState = cachedState.state[cacheKey] |
||||
|
if (currentState && Array.isArray(currentPath) && currentPath.includes(this.router.url)) { |
||||
|
const { page, query } = currentState |
||||
|
this.pagination.pageIndex = page.pageIndex |
||||
|
this.pagination.pageSize = page.pageSize |
||||
|
this.formGroup?.patchValue(query) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderTitle(d: any) { |
||||
|
return typeof d === 'number' || typeof d === 'string' ? d : '' |
||||
|
} |
||||
|
|
||||
|
private saveCacheState() { |
||||
|
const cachedState = this.pageTable.getCachedState() |
||||
|
|
||||
|
const { pageIndex, pageSize } = this.pagination |
||||
|
const query = this.formGroup?.value ?? {} |
||||
|
const cacheKey = this.options.config.cacheKey! |
||||
|
|
||||
|
const state: CacheStateInterface = { |
||||
|
paths: { |
||||
|
...cachedState?.paths, |
||||
|
[cacheKey]: this.options.config.cacheUrls.concat(this.router.url), |
||||
|
}, |
||||
|
state: { |
||||
|
...cachedState?.state, |
||||
|
[cacheKey]: { |
||||
|
page: { pageIndex, pageSize }, |
||||
|
query, |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
sessionStorage.setItem(persistKey, JSON.stringify(state)) |
||||
|
} |
||||
|
|
||||
|
private cacheKeyCreator() { |
||||
|
if (this.options.config.cacheKey) { |
||||
|
return this.options.config.cacheKey |
||||
|
} |
||||
|
|
||||
|
return persistKey + this.router.url.replaceAll('/', '_') |
||||
|
} |
||||
|
|
||||
|
private run() { |
||||
|
const { pageIndex, pageSize } = this.pagination |
||||
|
const page = this.pageTable.globalConfig.formatPaginationData({ pageIndex, pageSize }) |
||||
|
const query = this.formGroup?.value ?? {} |
||||
|
|
||||
|
this.pagination.loading = true |
||||
|
this.options |
||||
|
.fetchData(page, query) |
||||
|
.pipe( |
||||
|
map(this.pageTable.globalConfig.formatServiceData), |
||||
|
finalize(() => { |
||||
|
this.saveCacheState() |
||||
|
this.pagination.loading = false |
||||
|
}), |
||||
|
) |
||||
|
.subscribe((res) => { |
||||
|
this.pagination = { |
||||
|
...this.pagination, |
||||
|
...res, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
reload() { |
||||
|
this.run() |
||||
|
} |
||||
|
|
||||
|
search() { |
||||
|
this.pagination.pageIndex = 1 |
||||
|
this.reload() |
||||
|
} |
||||
|
|
||||
|
reset() { |
||||
|
this.formGroup?.reset(this.initValue) |
||||
|
this.search() |
||||
|
} |
||||
|
|
||||
|
onPageChange() { |
||||
|
if (!this.options.config.frontPagination) { |
||||
|
this.reload() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onOperateClick(item: TableOperationInterface, data: any) { |
||||
|
if (item.onClick) { |
||||
|
item?.onClick(data) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onSubmit(e: Event) { |
||||
|
this.search() |
||||
|
} |
||||
|
|
||||
|
handleColumnsSetting(nzContent: TemplateRef<any>) { |
||||
|
this.drawer.create({ |
||||
|
nzTitle: '表头设置', |
||||
|
nzContent, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onColumnsChange() { |
||||
|
const cacheKey = this.options.config.cacheKey! |
||||
|
const cachedColumns = this.options.getCachedColumns() |
||||
|
const newCachedColumns = { |
||||
|
...cachedColumns, |
||||
|
[cacheKey]: this.options.columns, |
||||
|
} |
||||
|
localStorage.setItem(this.options.columnsCacheKey, JSON.stringify(newCachedColumns)) |
||||
|
} |
||||
|
|
||||
|
onAllChecked(checked: boolean) { |
||||
|
if (checked) { |
||||
|
const rowKey = this.options.config.rowKey! |
||||
|
this.pagination.data.forEach((item: any) => { |
||||
|
this.selected.add(String(item[rowKey])) |
||||
|
}) |
||||
|
} else { |
||||
|
this.selected.clear() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onRowSelected(selected: boolean, row: any) { |
||||
|
const id = String(row[this.options.config.rowKey!]) |
||||
|
console.log('selected', selected, id) |
||||
|
if (selected) { |
||||
|
this.selected.add(id) |
||||
|
} else { |
||||
|
this.selected.delete(id) |
||||
|
} |
||||
|
console.log('this.selected', this.selected) |
||||
|
this.indeterminate = this.selected.size > 0 && this.selected.size < this.pagination.data.length |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
import { NgModule } from '@angular/core' |
||||
|
import { CommonModule } from '@angular/common' |
||||
|
import { NzTableModule } from 'ng-zorro-antd/table' |
||||
|
import { NzSpaceModule } from 'ng-zorro-antd/space' |
||||
|
import { NzButtonModule } from 'ng-zorro-antd/button' |
||||
|
import { NzDividerModule } from 'ng-zorro-antd/divider' |
||||
|
import { NzIconModule } from 'ng-zorro-antd/icon' |
||||
|
import { NzCardModule } from 'ng-zorro-antd/card' |
||||
|
import { NzFormModule } from 'ng-zorro-antd/form' |
||||
|
import { NzPopoverModule } from 'ng-zorro-antd/popover' |
||||
|
import { NzDropDownModule } from 'ng-zorro-antd/dropdown' |
||||
|
import { NzDrawerModule } from 'ng-zorro-antd/drawer' |
||||
|
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox' |
||||
|
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker' |
||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms' |
||||
|
import { ServerPaginatedTableComponent } from './server-paginated-table.component' |
||||
|
import { QueryItemComponent } from './query-item/query-item.component' |
||||
|
import { DateQueryComponent } from './date-query/date-query.component' |
||||
|
import { TableFormDirective } from './table-form.directive' |
||||
|
import { TableActionDirective } from './table-action.directive' |
||||
|
import { RouterModule } from '@angular/router' |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
ServerPaginatedTableComponent, |
||||
|
QueryItemComponent, |
||||
|
DateQueryComponent, |
||||
|
TableFormDirective, |
||||
|
TableActionDirective, |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
RouterModule, |
||||
|
FormsModule, |
||||
|
ReactiveFormsModule, |
||||
|
NzTableModule, |
||||
|
NzSpaceModule, |
||||
|
NzButtonModule, |
||||
|
NzDividerModule, |
||||
|
NzIconModule, |
||||
|
NzDropDownModule, |
||||
|
NzCardModule, |
||||
|
NzFormModule, |
||||
|
NzPopoverModule, |
||||
|
NzDatePickerModule, |
||||
|
NzDrawerModule, |
||||
|
NzCheckboxModule, |
||||
|
], |
||||
|
exports: [ |
||||
|
ServerPaginatedTableComponent, |
||||
|
QueryItemComponent, |
||||
|
DateQueryComponent, |
||||
|
TableFormDirective, |
||||
|
TableActionDirective, |
||||
|
], |
||||
|
}) |
||||
|
export class ServerPaginatedTableModule {} |
||||
@ -0,0 +1,95 @@ |
|||||
|
import { Injectable } from '@angular/core' |
||||
|
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router' |
||||
|
import { Observable, filter } from 'rxjs' |
||||
|
|
||||
|
export type AnyObject = Record<string, any> |
||||
|
|
||||
|
export interface ServerPaginatedTableConfigInterface { |
||||
|
formatServiceData: (v: any) => TableRequiredDataInterface |
||||
|
formatPaginationData: (v: PageSizeAndIndexInterface) => any |
||||
|
} |
||||
|
|
||||
|
export interface TableRequiredDataInterface<T = any> { |
||||
|
total: number |
||||
|
totalPages: number |
||||
|
data: T |
||||
|
} |
||||
|
|
||||
|
export type FetchDataInterface = (pagination: PageSizeAndIndexInterface, query: Record<string, any>) => Observable<any> |
||||
|
|
||||
|
export type PageSizeAndIndexInterface = { |
||||
|
pageSize: number |
||||
|
pageIndex: number |
||||
|
} |
||||
|
|
||||
|
export interface PaginationInterface extends TableRequiredDataInterface, PageSizeAndIndexInterface { |
||||
|
loading: boolean |
||||
|
} |
||||
|
|
||||
|
export interface TableColumnsInterface { |
||||
|
key: string |
||||
|
title: string |
||||
|
visible?: boolean |
||||
|
width?: string |
||||
|
sort?: boolean |
||||
|
order?: number |
||||
|
disabled?: boolean |
||||
|
coverStorage?: boolean |
||||
|
} |
||||
|
|
||||
|
export interface CacheStateInterface { |
||||
|
paths: Record<string, string[]> |
||||
|
state: Record< |
||||
|
string, |
||||
|
{ |
||||
|
query: AnyObject |
||||
|
page: PageSizeAndIndexInterface |
||||
|
} |
||||
|
> |
||||
|
} |
||||
|
|
||||
|
export const persistKey = 'SERVER_PAGINATED_TABLE_V1' |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root', |
||||
|
}) |
||||
|
export class ServerPaginatedTableService { |
||||
|
constructor(private router: Router) {} |
||||
|
|
||||
|
globalConfig: ServerPaginatedTableConfigInterface = { |
||||
|
formatServiceData: (v: any) => v, |
||||
|
formatPaginationData: (v: any) => v, |
||||
|
} |
||||
|
|
||||
|
initial() { |
||||
|
this.router.events.pipe(filter((f): f is NavigationEnd => f instanceof NavigationEnd)).subscribe((e) => { |
||||
|
const cachedState = this.getCachedState() |
||||
|
if (cachedState) { |
||||
|
Object.entries(cachedState.paths).forEach(([cacheKey, persistPaths]) => { |
||||
|
if (!persistPaths.includes(e.url)) { |
||||
|
Reflect.deleteProperty(cachedState.state, cacheKey) |
||||
|
sessionStorage.setItem(persistKey, JSON.stringify(cachedState)) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
return this |
||||
|
} |
||||
|
|
||||
|
getCachedState(): CacheStateInterface | null { |
||||
|
let cachedState: null | CacheStateInterface = null |
||||
|
try { |
||||
|
const str = sessionStorage.getItem(persistKey) |
||||
|
if (str) { |
||||
|
cachedState = JSON.parse(str) as CacheStateInterface |
||||
|
} |
||||
|
} catch (error) {} |
||||
|
|
||||
|
return cachedState |
||||
|
} |
||||
|
|
||||
|
setConfig(config: Partial<ServerPaginatedTableConfigInterface>) { |
||||
|
this.globalConfig = { ...this.globalConfig, ...config } |
||||
|
return this |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
import { Directive, TemplateRef } from "@angular/core"; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: "[appTableAction]", |
||||
|
exportAs: "appTableAction", |
||||
|
}) |
||||
|
export class TableActionDirective { |
||||
|
constructor(public templateRef: TemplateRef<{}>) {} |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
import { Directive, TemplateRef } from "@angular/core"; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: "[appTableForm]", |
||||
|
exportAs: "appTableForm", |
||||
|
}) |
||||
|
export class TableFormDirective { |
||||
|
constructor(public templateRef: TemplateRef<{}>) {} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
<form nz-form [formGroup]="formGroup"> |
||||
|
@if (!data.value) { |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired>用户名</nz-form-label> |
||||
|
<nz-form-control nzSpan="16" [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入用户名" formControlName="username" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired>密码</nz-form-label> |
||||
|
<nz-form-control nzSpan="16" [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input type="password" placeholder="请输入密码" formControlName="password" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
} |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired>姓名</nz-form-label> |
||||
|
<nz-form-control nzSpan="16" [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入姓名" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired>角色</nz-form-label> |
||||
|
<nz-form-control nzSpan="16" [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<nz-select nzPlaceHolder="请选择角色" formControlName="roleId"> |
||||
|
@for (item of data.roleList; track item.id) { |
||||
|
<nz-option [nzValue]="item.id" [nzLabel]="item.roleName"></nz-option> |
||||
|
} |
||||
|
</nz-select> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4">备注</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<textarea nz-input placeholder="请输入备注" formControlName="remark"></textarea> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<!-- <nz-form-item> |
||||
|
<nz-form-label nzSpan="4">登录限制</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<nz-switch></nz-switch> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4">限制规则</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<div> |
||||
|
<nz-input-group nzAddOnBefore="登录失败达到" nzAddOnAfter="次"> |
||||
|
<input type="number" nz-input /> |
||||
|
</nz-input-group> |
||||
|
</div> |
||||
|
<div class="mt-2"> |
||||
|
<ng-template #nzAddOnAfterTpl> |
||||
|
<nz-select class="!w-20"> |
||||
|
<nz-option nzValue="m" nzLabel="分钟"></nz-option> |
||||
|
<nz-option nzValue="h" nzLabel="小时"></nz-option> |
||||
|
<nz-option nzValue="d" nzLabel="天"></nz-option> |
||||
|
</nz-select> |
||||
|
</ng-template> |
||||
|
<nz-input-group nzAddOnBefore="锁定账号" [nzAddOnAfter]="nzAddOnAfterTpl"> |
||||
|
<input type="number" nz-input /> |
||||
|
</nz-input-group> |
||||
|
</div> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> --> |
||||
|
<!-- <nz-form-item> |
||||
|
<nz-form-control nzOffset="4"> |
||||
|
<button nz-button nzType="primary">保存</button> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> --> |
||||
|
</form> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
@ -0,0 +1,46 @@ |
|||||
|
import { Component, OnInit, inject } from '@angular/core' |
||||
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms' |
||||
|
import { RoleListDTO } from 'app/services/api.dto' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { NZ_MODAL_DATA } from 'ng-zorro-antd/modal' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-user-form', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './user-form.component.html', |
||||
|
styleUrl: './user-form.component.less', |
||||
|
}) |
||||
|
export class UserFormComponent implements OnInit { |
||||
|
constructor(private fb: FormBuilder) {} |
||||
|
|
||||
|
data = inject<{ roleList: RoleListDTO[]; value: {} }>(NZ_MODAL_DATA) |
||||
|
|
||||
|
formGroup!: FormGroup |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.formGroup = this.fb.group({ |
||||
|
name: new FormControl('', [FormValidators.required('请输入姓名'), FormValidators.maxLength(30)]), |
||||
|
roleId: new FormControl('', [FormValidators.required('请选择角色')]), |
||||
|
remark: new FormControl(''), |
||||
|
}) |
||||
|
if (this.data.value) { |
||||
|
this.formGroup.patchValue(this.data.value) |
||||
|
} else { |
||||
|
this.formGroup.addControl( |
||||
|
'username', |
||||
|
new FormControl('', [FormValidators.required('请输入用户名'), FormValidators.maxLength(30)]), |
||||
|
) |
||||
|
this.formGroup.addControl('password', new FormControl('', [FormValidators.required('请输入密码')])) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getValues() { |
||||
|
let values = null |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
values = this.formGroup.value |
||||
|
} |
||||
|
return values |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
import { inject } from '@angular/core' |
||||
|
import { CanActivateFn, Router, UrlTree } from '@angular/router' |
||||
|
import { ApiService, LocalHttpInterceptorService } from 'app/services' |
||||
|
import { map } from 'rxjs' |
||||
|
|
||||
|
export const authGuard: CanActivateFn = (route, state) => { |
||||
|
const local = inject(LocalHttpInterceptorService) |
||||
|
const accessData = local.getAccess() |
||||
|
let token = accessData?.access_token |
||||
|
if (token) { |
||||
|
return true |
||||
|
} |
||||
|
const router = inject(Router) |
||||
|
return router.createUrlTree(['/login']) |
||||
|
// const api = inject(ApiService)
|
||||
|
// if (!localStorage.getItem('sc')) {
|
||||
|
// return router.createUrlTree(['/login'])
|
||||
|
// }
|
||||
|
// return api.getAuthInfo(true).pipe(map((r) => !!r))
|
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
export * from "./auth.guard"; |
||||
@ -0,0 +1,12 @@ |
|||||
|
<form nz-form [formGroup]="formGroup"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label> 部门名称 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入部门名称" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
@ -0,0 +1,38 @@ |
|||||
|
import { Component, OnInit, inject } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { NZ_MODAL_DATA } from 'ng-zorro-antd/modal' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-contact-group-form', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './contact-group-form.component.html', |
||||
|
styleUrl: './contact-group-form.component.less', |
||||
|
}) |
||||
|
export class ContactGroupFormComponent implements OnInit { |
||||
|
constructor() {} |
||||
|
|
||||
|
data = inject(NZ_MODAL_DATA) |
||||
|
|
||||
|
formGroup = new FormGroup({ |
||||
|
id: new FormControl(), |
||||
|
name: new FormControl('', [FormValidators.required('请输入部门名称'), FormValidators.maxLength(30)]), |
||||
|
parentId: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
if (this.data) { |
||||
|
this.formGroup.patchValue(this.data) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getValues() { |
||||
|
let values = null |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
values = this.formGroup.value |
||||
|
} |
||||
|
return values |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
<div class="data-tree"> |
||||
|
<nz-tree |
||||
|
nzBlockNode |
||||
|
[nzSelectedKeys]="contact.selecedKeys" |
||||
|
[nzExpandedKeys]="contact.expandedKeys" |
||||
|
[nzData]="nodes" |
||||
|
(nzClick)="activeNode($event)" |
||||
|
(nzExpandChange)="handleExpandedKeysChange($event)" |
||||
|
[nzTreeTemplate]="nzTreeTemplate" |
||||
|
> |
||||
|
</nz-tree> |
||||
|
</div> |
||||
|
|
||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
|
<div class="flex items-center justify-between overflow-hidden"> |
||||
|
<span class="flex-1 overflow-hidden text-ellipsis">{{ node.title }}</span> |
||||
|
|
||||
|
@if (origin.id !== '1') { |
||||
|
<button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menu" (click)="$event.stopPropagation()"> |
||||
|
<i nz-icon nzType="more"></i> |
||||
|
</button> |
||||
|
} |
||||
|
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
|
<ul nz-menu> |
||||
|
<!-- <li nz-menu-item (click)="createGroup(node)">新增下级部门</li> --> |
||||
|
<li nz-menu-item (click)="editGroup(node)">编辑</li> |
||||
|
<li nz-menu-item (click)="deleteGroup(node)">删除</li> |
||||
|
</ul> |
||||
|
</nz-dropdown-menu> |
||||
|
</div> |
||||
|
</ng-template> |
||||
@ -0,0 +1,83 @@ |
|||||
|
import { Component, EventEmitter, Input, Output, OnChanges, OnInit, SimpleChanges } from '@angular/core' |
||||
|
|
||||
|
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown' |
||||
|
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { Persist } from 'app/utils' |
||||
|
import { ContactService } from '../contact.service' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-contact-group', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
providers: [ContactService], |
||||
|
templateUrl: './contact-group.component.html', |
||||
|
styleUrl: './contact-group.component.less', |
||||
|
}) |
||||
|
export class ContactGroupComponent implements OnInit, OnChanges { |
||||
|
constructor( |
||||
|
private nzContextMenuService: NzContextMenuService, |
||||
|
public contact: ContactService, |
||||
|
) {} |
||||
|
|
||||
|
@Input() nodes: NzTreeNodeOptions[] = [] |
||||
|
|
||||
|
@Input() active!: Persist |
||||
|
|
||||
|
@Output() onSelect = new EventEmitter() |
||||
|
|
||||
|
@Output() onCreate = new EventEmitter() |
||||
|
|
||||
|
@Output() onEdit = new EventEmitter() |
||||
|
|
||||
|
@Output() onDelete = new EventEmitter() |
||||
|
|
||||
|
ngOnInit(): void {} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges) {} |
||||
|
|
||||
|
openFolder(data: NzTreeNode | NzFormatEmitEvent): void { |
||||
|
if (data instanceof NzTreeNode) { |
||||
|
data.isExpanded = !data.isExpanded |
||||
|
} else { |
||||
|
const node = data.node |
||||
|
if (node) { |
||||
|
node.isExpanded = !node.isExpanded |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
activeNode(data: NzFormatEmitEvent): void { |
||||
|
this.contact.contactGroup.update((state) => { |
||||
|
return { |
||||
|
...state, |
||||
|
selecedKeys: [data.node!.key], |
||||
|
} |
||||
|
}) |
||||
|
this.onSelect.emit() |
||||
|
} |
||||
|
|
||||
|
handleExpandedKeysChange(expanded: NzFormatEmitEvent) { |
||||
|
this.contact.contactGroup.update((state) => { |
||||
|
return { |
||||
|
...state, |
||||
|
expandedKeys: expanded?.keys ?? [], |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void { |
||||
|
this.nzContextMenuService.create($event, menu) |
||||
|
} |
||||
|
|
||||
|
createGroup(node: NzTreeNode): void { |
||||
|
this.onCreate.emit(node.origin) |
||||
|
} |
||||
|
|
||||
|
editGroup(node: NzTreeNode): void { |
||||
|
this.onEdit.emit(node.origin) |
||||
|
} |
||||
|
deleteGroup(node: NzTreeNode): void { |
||||
|
this.onDelete.emit(node.origin.key) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,97 @@ |
|||||
|
<nz-card [nzBordered]="false" [nzBodyStyle]="{ padding: 0, height }"> |
||||
|
<div class="flex contacts h-full"> |
||||
|
<div class="group w-56 h-full flex flex-col"> |
||||
|
<div> |
||||
|
<h3 class="px-4 pt-4 flex items-center justify-between"> |
||||
|
<span>部门</span> |
||||
|
<button nz-button nzType="text" (click)="showGroupForm()"> |
||||
|
<i nz-icon nzType="plus"></i> |
||||
|
</button> |
||||
|
</h3> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-1 overflow-y-auto"> |
||||
|
<app-contact-group |
||||
|
[nodes]="groups" |
||||
|
(onSelect)="handleGroupSelect()" |
||||
|
(onCreate)="showGroupForm($event)" |
||||
|
(onEdit)="showGroupForm($event, true)" |
||||
|
(onDelete)="deleteUserGroup($event)" |
||||
|
> |
||||
|
</app-contact-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex-1 p-4 overflow-auto"> |
||||
|
<app-server-paginated-table |
||||
|
[formGroup]="queryForm" |
||||
|
[renderColumn]="renderColumnTpl" |
||||
|
[options]="tableOption" |
||||
|
> |
||||
|
<div *appTableForm nz-row [nzGutter]="[24, 24]"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">用户名</nz-form-label> |
||||
|
<nz-form-control nzFlex="1"> |
||||
|
<input nz-input placeholder="请输入用户名" formControlName="userName" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">姓名</nz-form-label> |
||||
|
<nz-form-control nzFlex="1"> |
||||
|
<input nz-input placeholder="请输入姓名" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">状态</nz-form-label> |
||||
|
<nz-form-control nzFlex="1"> |
||||
|
<nz-select nzPlaceHolder="请选择状态" formControlName="enable" nzAllowClear> |
||||
|
<nz-option [nzValue]="true" nzLabel="启用"></nz-option> |
||||
|
<nz-option [nzValue]="false" nzLabel="禁用"></nz-option> |
||||
|
</nz-select> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">创建时间</nz-form-label> |
||||
|
<nz-form-control nzFlex="1"> |
||||
|
<!-- <nz-range-picker formControlName="createTime"></nz-range-picker> --> |
||||
|
<app-range-picker [showTime]="true" formControlName="createTime"></app-range-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *appTableAction> |
||||
|
<nz-space> |
||||
|
<button nz-button nzType="primary" (click)="handleCreateUser()">添加用户</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
<ng-template #renderColumnTpl let-data let-key="key"> |
||||
|
@switch (key) { |
||||
|
@case ('enable') { |
||||
|
@if (data) { |
||||
|
<nz-badge nzStatus="success" nzText="启用"></nz-badge> |
||||
|
} @else { |
||||
|
<nz-badge nzStatus="error" nzText="禁用"></nz-badge> |
||||
|
} |
||||
|
} |
||||
|
@case ('roleName') { |
||||
|
@if (data) { |
||||
|
<nz-tag>{{ data }}</nz-tag> |
||||
|
} @else { |
||||
|
- |
||||
|
} |
||||
|
} |
||||
|
@default { |
||||
|
{{ data }} |
||||
|
} |
||||
|
} |
||||
|
</ng-template> |
||||
|
</app-server-paginated-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nz-card> |
||||
@ -0,0 +1,3 @@ |
|||||
|
.group { |
||||
|
border-right: 1px solid var(--border-color); |
||||
|
} |
||||
@ -0,0 +1,223 @@ |
|||||
|
import { Component, HostListener, OnInit, OnDestroy } from '@angular/core' |
||||
|
import { lastValueFrom } from 'rxjs' |
||||
|
import { NzTreeNodeOptions } from 'ng-zorro-antd/tree' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { format } from 'date-fns' |
||||
|
import { ApiService, UserGroupTreeItem } from 'app/services' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { ContactGroupComponent } from '../contact-group/contact-group.component' |
||||
|
import { ContactGroupFormComponent } from '../contact-group-form/contact-group-form.component' |
||||
|
import { AnyObject, TableOption } from 'app/components/server-paginated-table' |
||||
|
import { UserFormComponent } from 'app/components/user-form/user-form.component' |
||||
|
import { RoleListDTO, UserDTO } from 'app/services/api.dto' |
||||
|
import { ContactService } from '../contact.service' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-contact-list', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule, ContactGroupComponent, ContactGroupFormComponent], |
||||
|
templateUrl: './contact-list.component.html', |
||||
|
styleUrl: './contact-list.component.less', |
||||
|
providers: [ContactService], |
||||
|
}) |
||||
|
export class ContactListComponent implements OnInit, OnDestroy { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private modal: NzModalService, |
||||
|
private msg: NzMessageService, |
||||
|
private contact: ContactService, |
||||
|
) {} |
||||
|
|
||||
|
height = 'auto' |
||||
|
|
||||
|
groups: NzTreeNodeOptions[] = [] |
||||
|
|
||||
|
tableOption = new TableOption(this.fetchData.bind(this), { |
||||
|
manual: true, |
||||
|
}) |
||||
|
|
||||
|
queryForm = new FormGroup({ |
||||
|
userName: new FormControl(), |
||||
|
enable: new FormControl(), |
||||
|
name: new FormControl(), |
||||
|
createTime: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
roleList: RoleListDTO[] = [] |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.initTableOption() |
||||
|
this.onResize() |
||||
|
this.getUserGroupTree() |
||||
|
this.getRoleList() |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void {} |
||||
|
|
||||
|
initTableOption() { |
||||
|
this.tableOption |
||||
|
.setColumn([ |
||||
|
{ key: 'username', title: '用户名' }, |
||||
|
{ key: 'name', title: '姓名' }, |
||||
|
{ key: 'enable', title: '状态' }, |
||||
|
{ key: 'roleName', title: '角色' }, |
||||
|
{ key: 'remark', title: '说明' }, |
||||
|
{ key: 'createTime', title: '创建时间' }, |
||||
|
]) |
||||
|
.setRowOperate([ |
||||
|
{ title: '启用', onClick: this.updateStatus.bind(this), visible: (v) => v.id !== '1' && !v.enable }, |
||||
|
{ title: '禁用', onClick: this.updateStatus.bind(this), visible: (v) => v.id !== '1' && v.enable }, |
||||
|
{ |
||||
|
title: '重置密码', |
||||
|
onClick: this.resetPassword.bind(this), |
||||
|
premissions: [], |
||||
|
visible: (v) => v.id !== '1', |
||||
|
}, |
||||
|
{ |
||||
|
title: '编辑', |
||||
|
onClick: this.handleCreateUser.bind(this), |
||||
|
premissions: [], |
||||
|
visible: (v) => v.id !== '1', |
||||
|
}, |
||||
|
{ |
||||
|
title: '删除', |
||||
|
onClick: this.deleteUser.bind(this), |
||||
|
premissions: [], |
||||
|
visible: (v) => v.id !== '1', |
||||
|
}, |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
@HostListener('window:resize') |
||||
|
onResize() { |
||||
|
this.height = innerHeight - 100 + 'px' |
||||
|
} |
||||
|
|
||||
|
fetchData(p: {}, q: AnyObject) { |
||||
|
let query = Object.create(null) |
||||
|
const activeGroup = this.contact.contactGroup.value |
||||
|
if (Array.isArray(q['createTime'])) { |
||||
|
const createTimeStart = q['createTime']?.[0] |
||||
|
const createTimeEnd = q['createTime']?.[1] |
||||
|
|
||||
|
q['createTimeStart'] = createTimeStart ? format(new Date(createTimeStart), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
q['createTimeEnd'] = createTimeEnd ? format(new Date(createTimeEnd), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
} |
||||
|
query = { ...q, groupId: activeGroup?.selecedKeys[0] } |
||||
|
return this.api.getUserPage(p, query) |
||||
|
} |
||||
|
|
||||
|
handleGroupSelect() { |
||||
|
this.tableOption.ref?.search() |
||||
|
} |
||||
|
|
||||
|
updateStatus(v: UserDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: `是否要${v.enable ? '禁用' : '启用'}该用户？`, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.updateUserStatus(v.id)) |
||||
|
this.msg.success('操作成功') |
||||
|
this.tableOption.ref.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getUserGroupTree() { |
||||
|
this.api.getUserGroupTree().subscribe((res) => { |
||||
|
this.groups = res |
||||
|
this.contact.initState(res) |
||||
|
if (res.length > 0) { |
||||
|
this.tableOption.ref?.reload() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getRoleList() { |
||||
|
this.api.getAllRole().subscribe((res) => { |
||||
|
this.roleList = res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
showGroupForm(group?: UserGroupTreeItem, edit = false) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: edit ? '编辑部门' : '新增部门', |
||||
|
nzContent: ContactGroupFormComponent, |
||||
|
nzData: edit ? group : { parentId: group?.id }, |
||||
|
nzOnOk: async (e) => { |
||||
|
const vals = e.getValues() |
||||
|
if (vals) { |
||||
|
await lastValueFrom(this.api.saveUserGroup(vals as UserGroupTreeItem)) |
||||
|
this.msg.success('保存成功') |
||||
|
this.getUserGroupTree() |
||||
|
return true |
||||
|
} |
||||
|
return false |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteUserGroup(id: string) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该分组？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteUserGroup(id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.getUserGroupTree() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteUser(v: UserDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该用户？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteUser(v.id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.getUserGroupTree() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
resetPassword(v: UserDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要将该用户的密码重置为jwkj？', |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.changeUserPassword(v.id, 'jwkj')) |
||||
|
this.msg.success('重置成功') |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
handleCreateUser(user?: UserDTO) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: user ? '编辑用户' : '添加用户', |
||||
|
nzContent: UserFormComponent, |
||||
|
nzWidth: 720, |
||||
|
nzData: { |
||||
|
roleList: this.roleList, |
||||
|
value: user, |
||||
|
}, |
||||
|
nzOnOk: async (e) => { |
||||
|
const vals = e.getValues() |
||||
|
if (vals) { |
||||
|
const activeGroup = this.contact.contactGroup.value |
||||
|
await lastValueFrom( |
||||
|
this.api.saveUser({ ...(user ?? {}), ...vals, groupId: activeGroup.selecedKeys[0] }), |
||||
|
) |
||||
|
this.tableOption.ref?.reload() |
||||
|
this.msg.success('保存成功') |
||||
|
return true |
||||
|
} |
||||
|
return false |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
import { Injectable, OnDestroy } from '@angular/core' |
||||
|
import { Persist, Utils } from 'app/utils' |
||||
|
import { NzTreeNodeOptions } from 'ng-zorro-antd/tree' |
||||
|
|
||||
|
@Injectable() |
||||
|
export class ContactService implements OnDestroy { |
||||
|
constructor() {} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.contactGroup.clear() |
||||
|
} |
||||
|
|
||||
|
contactGroup = new Persist<{ selecedKeys: string[]; expandedKeys: string[] }>(sessionStorage, 'contactGroup', { |
||||
|
selecedKeys: [], |
||||
|
expandedKeys: [], |
||||
|
}) |
||||
|
|
||||
|
public get selecedKeys(): string[] { |
||||
|
return this.contactGroup.value.selecedKeys |
||||
|
} |
||||
|
|
||||
|
public get expandedKeys(): string[] { |
||||
|
return this.contactGroup.value.expandedKeys |
||||
|
} |
||||
|
|
||||
|
initState(treeData: NzTreeNodeOptions[]) { |
||||
|
if (treeData.length === 0) { |
||||
|
return |
||||
|
} |
||||
|
let selecedKeys = this.selecedKeys |
||||
|
let expandedKeys = this.expandedKeys |
||||
|
const flatData: NzTreeNodeOptions[] = Utils.treeToFlatList(treeData) |
||||
|
if (!flatData.some((s) => selecedKeys.includes(s.key))) { |
||||
|
selecedKeys = [] |
||||
|
} |
||||
|
if (selecedKeys.length === 0) { |
||||
|
selecedKeys = [treeData[0].key] as string[] |
||||
|
} else { |
||||
|
expandedKeys = this.setExpandedKeysBySelecedKeys(treeData, selecedKeys) |
||||
|
} |
||||
|
this.contactGroup.update(() => { |
||||
|
return { |
||||
|
expandedKeys: [...new Set(expandedKeys)], |
||||
|
selecedKeys, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
setExpandedKeysBySelecedKeys(flatData: NzTreeNodeOptions[], selecedKeys: string[]) { |
||||
|
const res: string[] = [] |
||||
|
|
||||
|
let parentId = flatData.find((f) => selecedKeys.includes(f.key))?.['parentId'] |
||||
|
while (parentId) { |
||||
|
res.push(parentId) |
||||
|
parentId = flatData.find((f) => f.key === parentId)?.['parentId'] |
||||
|
} |
||||
|
return this.expandedKeys.concat(res) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,83 @@ |
|||||
|
<nz-card [nzBordered]="false"> |
||||
|
<form nz-form class="w-[800px]" [formGroup]="formGroup" (ngSubmit)="onSubmit()"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired nzSpan="4"> 角色名称 </nz-form-label> |
||||
|
<nz-form-control> |
||||
|
<input nz-input placeholder="请输入角色名称" formControlName="roleName" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired nzSpan="4"> 权限 </nz-form-label> |
||||
|
<nz-form-control> |
||||
|
<nz-spin [nzSpinning]="permissionsLoading"> |
||||
|
<div class="bordered min-h-[20px]"> |
||||
|
<ul class="permissions"> |
||||
|
@for (p of permissions; track $index) { |
||||
|
<li> |
||||
|
<div |
||||
|
nz-checkbox |
||||
|
[nzChecked]="checked.has(p.id)" |
||||
|
(nzCheckedChange)="onPermissionChange($event, p.id)" |
||||
|
[nzValue]="p.id" |
||||
|
> |
||||
|
{{ p.name }} |
||||
|
</div> |
||||
|
</li> |
||||
|
} |
||||
|
</ul> |
||||
|
<!-- <nz-collapse nzGhost> |
||||
|
@for (item of permissions; track $index) { |
||||
|
<nz-collapse-panel [nzHeader]="item.name" [nzExtra]="nzExtraTpl"> |
||||
|
<ng-template #nzExtraTpl> |
||||
|
<label |
||||
|
nz-checkbox |
||||
|
[nzIndeterminate]="checkedAll.get(item.id)?.nzIndeterminate" |
||||
|
[nzChecked]="checkedAll.get(item.id)?.nzChecked" |
||||
|
(click)="$event.stopPropagation()" |
||||
|
(nzCheckedChange)="checkAllChange($event, item)" |
||||
|
> |
||||
|
全选 |
||||
|
</label> |
||||
|
</ng-template> |
||||
|
<div nz-row [nzGutter]="[12, 12]"> |
||||
|
@for (p of item.children; track $index) { |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<label |
||||
|
nz-checkbox |
||||
|
[nzChecked]="checked.has(p.id)" |
||||
|
[nzValue]="p.id" |
||||
|
(nzCheckedChange)="onPermissionChange($event, p.id, item)" |
||||
|
> |
||||
|
{{ p.name }} |
||||
|
</label> |
||||
|
</div> |
||||
|
} @empty { |
||||
|
<div nz-col nzSpan="24"> |
||||
|
<nz-empty></nz-empty> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
</nz-collapse-panel> |
||||
|
} |
||||
|
</nz-collapse> --> |
||||
|
</div> |
||||
|
</nz-spin> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4"> 说明 </nz-form-label> |
||||
|
<nz-form-control> |
||||
|
<textarea nz-input formControlName="remark" placeholder="请输入说明"></textarea> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control nzOffset="4"> |
||||
|
<nz-space> |
||||
|
<button nz-button nzType="primary" *nzSpaceItem>保存</button> |
||||
|
<button nz-button *nzSpaceItem [routerLink]="['/', 'role']">取消</button> |
||||
|
</nz-space> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</nz-card> |
||||
@ -0,0 +1,11 @@ |
|||||
|
.permissions { |
||||
|
li { |
||||
|
display: flex; |
||||
|
padding: 8px 24px; |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
|
||||
|
border-bottom: 1px solid var(--border-color); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,146 @@ |
|||||
|
import { finalize } from 'rxjs' |
||||
|
import { Component, OnInit } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { ActivatedRoute, Router } from '@angular/router' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { PermissionDTO } from 'app/services/api.dto' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-role-form', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './role-form.component.html', |
||||
|
styleUrl: './role-form.component.less', |
||||
|
}) |
||||
|
export class RoleFormComponent implements OnInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private msg: NzMessageService, |
||||
|
private route: ActivatedRoute, |
||||
|
private router: Router, |
||||
|
// private modal: NzModalService,
|
||||
|
) {} |
||||
|
|
||||
|
id: string | null = null |
||||
|
|
||||
|
permissions: PermissionDTO[] = [] |
||||
|
|
||||
|
formGroup = new FormGroup({ |
||||
|
roleName: new FormControl('', [FormValidators.required('请输入角色名称'), FormValidators.maxLength(30)]), |
||||
|
remark: new FormControl('', [FormValidators.maxLength(30)]), |
||||
|
}) |
||||
|
|
||||
|
checkedAll = new Map<string, { nzIndeterminate: boolean; nzChecked: boolean }>() |
||||
|
|
||||
|
checked = new Set<string>() |
||||
|
|
||||
|
permissionsLoading = false |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.getPermissions() |
||||
|
const id = this.route.snapshot.paramMap.get('id') |
||||
|
if (id && id !== 'create') { |
||||
|
this.id = id |
||||
|
this.getRoleInfo() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getPermissions() { |
||||
|
this.permissionsLoading = true |
||||
|
this.api |
||||
|
.getAllPermission() |
||||
|
.pipe( |
||||
|
finalize(() => { |
||||
|
this.permissionsLoading = false |
||||
|
}), |
||||
|
) |
||||
|
.subscribe((res) => { |
||||
|
this.permissions = res.data |
||||
|
this.updateCheckedAll() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getRoleInfo() { |
||||
|
this.api.getRoleById(this.id!).subscribe((res) => { |
||||
|
this.formGroup.patchValue(res.data) |
||||
|
this.checked = new Set(res.data.authorityId) |
||||
|
this.updateCheckedAll() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 权限之间的联动 |
||||
|
*/ |
||||
|
roleLinkage = new Map<string, string[]>([ |
||||
|
// ['2', ['2', '9', '15']],
|
||||
|
// ['9', ['2', '9', '15']],
|
||||
|
// ['15', ['2', '9', '15']],
|
||||
|
// ['20', ['20', '25']],
|
||||
|
// ['25', ['20', '25']],
|
||||
|
]) |
||||
|
|
||||
|
onPermissionChange(checked: boolean, id: string) { |
||||
|
const checkedIds = this.roleLinkage.get(id) ?? [id] |
||||
|
checkedIds.forEach((i) => { |
||||
|
if (checked) { |
||||
|
this.checked.add(i) |
||||
|
} else { |
||||
|
this.checked.delete(i) |
||||
|
} |
||||
|
}) |
||||
|
this.updateCheckedAll() |
||||
|
} |
||||
|
|
||||
|
checkAllChange(checked: boolean, p: PermissionDTO) { |
||||
|
p.children?.forEach((permission) => { |
||||
|
if (checked) { |
||||
|
this.checked.add(permission.id) |
||||
|
} else { |
||||
|
this.checked.delete(permission.id) |
||||
|
} |
||||
|
}) |
||||
|
this.updateCheckedAll() |
||||
|
} |
||||
|
|
||||
|
updateCheckedAll() { |
||||
|
this.permissions.forEach((g) => { |
||||
|
let nzChecked = true |
||||
|
let nzIndeterminate = false |
||||
|
g.children?.forEach((permission) => { |
||||
|
if (this.checked.has(permission.id)) { |
||||
|
nzIndeterminate = true |
||||
|
} else { |
||||
|
nzChecked = false |
||||
|
} |
||||
|
}) |
||||
|
this.checkedAll.set(g.id, { |
||||
|
nzChecked, |
||||
|
nzIndeterminate: nzChecked ? false : nzIndeterminate, |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onSubmit() { |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
if (this.checked.size === 0) { |
||||
|
this.msg.error('请选择权限') |
||||
|
return |
||||
|
} |
||||
|
const { value } = this.formGroup |
||||
|
this.api |
||||
|
.saveRole({ |
||||
|
id: this.id, |
||||
|
roleName: value.roleName!, |
||||
|
remark: value.remark as string, |
||||
|
authorityId: Array.from(this.checked), |
||||
|
}) |
||||
|
.subscribe(() => { |
||||
|
this.msg.success('保存成功') |
||||
|
this.router.navigate(['/role/list']) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
<nz-card [nzBordered]="false"> |
||||
|
<app-server-paginated-table [options]="tableOption" [formGroup]="queryForm"> |
||||
|
<div *appTableAction class="flex items-center justify-between"> |
||||
|
<div class="flex-1"> |
||||
|
<nz-space> |
||||
|
<button |
||||
|
nz-button |
||||
|
nzType="primary" |
||||
|
type="button" |
||||
|
[routerLink]="['/', 'role', 'form', 'create']" |
||||
|
*nzSpaceItem |
||||
|
> |
||||
|
添加角色 |
||||
|
</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
<!-- <div> |
||||
|
<nz-input-group nzSearch [nzSuffix]="suffixIconSearch"> |
||||
|
<input type="text" nz-input placeholder="请输入角色名称" formControlName="roleName" /> |
||||
|
</nz-input-group> |
||||
|
<ng-template #suffixIconSearch> |
||||
|
<span nz-icon nzType="search"></span> |
||||
|
</ng-template> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</app-server-paginated-table> |
||||
|
</nz-card> |
||||
@ -0,0 +1,72 @@ |
|||||
|
import { lastValueFrom } from 'rxjs' |
||||
|
import { Component, OnInit } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { Router } from '@angular/router' |
||||
|
import { TableOption } from 'app/components/server-paginated-table' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { RoleListDTO } from 'app/services/api.dto' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-role-list', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './role-list.component.html', |
||||
|
styleUrl: './role-list.component.less', |
||||
|
}) |
||||
|
export class RoleListComponent implements OnInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private modal: NzModalService, |
||||
|
private router: Router, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
tableOption = new TableOption(this.fetchData.bind(this)) |
||||
|
|
||||
|
queryForm = new FormGroup({ |
||||
|
roleName: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
permissions = [] |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.initTable() |
||||
|
} |
||||
|
|
||||
|
initTable() { |
||||
|
this.tableOption |
||||
|
.setColumn([ |
||||
|
{ key: 'roleName', title: '角色名称' }, |
||||
|
{ key: 'remark', title: '说明' }, |
||||
|
{ key: 'createTime', title: '创建时间' }, |
||||
|
]) |
||||
|
.setRowOperate([ |
||||
|
{ title: '编辑', onClick: this.edit.bind(this), visible: (v) => v.id !== '1' }, |
||||
|
{ title: '删除', onClick: this.deleteItem.bind(this), visible: (v) => v.id !== '1' }, |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
fetchData(p: {}, q: {}) { |
||||
|
return this.api.getRolePage(p, q) |
||||
|
} |
||||
|
|
||||
|
edit(role: RoleListDTO) { |
||||
|
this.router.navigate(['/', 'role', 'form', role.id]) |
||||
|
} |
||||
|
|
||||
|
deleteItem(role: RoleListDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该角色？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteRole(role.id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.tableOption.ref?.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
<div nz-row nzGutter="12"> |
||||
|
<div nz-col nzSpan="6"> |
||||
|
<nz-card [nzBordered]="false"> |
||||
|
<div> |
||||
|
<nz-statistic [nzValue]="counter.totalClient" [nzTitle]="'今日预约'"></nz-statistic> |
||||
|
</div> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="18"> |
||||
|
<nz-card [nzBordered]="false"> |
||||
|
<div nz-row nzGutter="24"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-statistic [nzValue]="counter.totalClient" [nzTitle]="'会员'"></nz-statistic> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-statistic [nzValue]="counter.totalProduct" [nzTitle]="'会员卡'"></nz-statistic> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-statistic [nzValue]="counter.totalLicense" [nzTitle]="'教练'"></nz-statistic> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-4"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="近30天办卡"> |
||||
|
<div class="h-80" #chart1Tpl></div> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-4 mb-4"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="近30天到期会员"> |
||||
|
<nz-table nzTemplateMode nzSize="small" [nzBordered]="true"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>实体</th> |
||||
|
<th>产品</th> |
||||
|
<!-- <th>版本</th> --> |
||||
|
<th>到期时间</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
@for (p of expiringSoon; track $index) { |
||||
|
<tr> |
||||
|
<td>{{ p.clientName }}</td> |
||||
|
<td>{{ p.productName }}</td> |
||||
|
<!-- <td></td> --> |
||||
|
<td> |
||||
|
{{ p.endTime * 1000 | date: 'yyyy-MM-dd HH:mm:ss' }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
} @empty { |
||||
|
<tr> |
||||
|
<td [colSpan]="4"> |
||||
|
<nz-empty nzNotFoundContent="没有近30天到期的授权"></nz-empty> |
||||
|
</td> |
||||
|
</tr> |
||||
|
} |
||||
|
</tbody> |
||||
|
</nz-table> |
||||
|
</nz-card> |
||||
|
</div> |
||||
@ -0,0 +1,195 @@ |
|||||
|
import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' |
||||
|
import { init, EChartsType } from 'echarts' |
||||
|
import { SharedModule } from '../../shared/shared.module' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { ConsoleClientTopDTO, ConsoleCountDTO, ConsoleExpireDTO } from 'app/services/api.dto' |
||||
|
|
||||
|
const antvColor = [ |
||||
|
'#5B8FF9', |
||||
|
'#61DDAA', |
||||
|
'#65789B', |
||||
|
'#F6BD16', |
||||
|
'#7262FD', |
||||
|
'#78D3F8', |
||||
|
'#9661BC', |
||||
|
'#F6903D', |
||||
|
'#008685', |
||||
|
'#F08BB4', |
||||
|
] |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
selector: 'app-dashboard', |
||||
|
templateUrl: './dashboard.component.html', |
||||
|
styleUrls: ['./dashboard.component.less'], |
||||
|
}) |
||||
|
export class DashboardComponent implements OnInit, AfterViewInit { |
||||
|
constructor(private api: ApiService) {} |
||||
|
|
||||
|
@ViewChild('chart1Tpl') chart1!: ElementRef<HTMLDivElement> |
||||
|
|
||||
|
@ViewChild('chart2Tpl') chart2!: ElementRef<HTMLDivElement> |
||||
|
|
||||
|
echartRef1?: EChartsType |
||||
|
|
||||
|
echartRef2?: EChartsType |
||||
|
|
||||
|
counter: ConsoleCountDTO = { totalClient: 0, totalLicense: 0, totalProduct: 0 } |
||||
|
|
||||
|
expiringSoon: ConsoleExpireDTO[] = [] |
||||
|
|
||||
|
clientTopTen: ConsoleClientTopDTO[] = [] |
||||
|
|
||||
|
@HostListener('window:resize') |
||||
|
onResize() { |
||||
|
// this.echartRef1?.resize();
|
||||
|
this.echartRef2?.resize() |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
// this.api.getDashboardCounter().subscribe((res) => {
|
||||
|
// this.counter = res.data
|
||||
|
// })
|
||||
|
// this.api.getDashboardExpire().subscribe((res) => {
|
||||
|
// this.expiringSoon = res.data
|
||||
|
// })
|
||||
|
// this.api.getDashboardClientTop().subscribe((res) => {
|
||||
|
// this.clientTopTen = res.data
|
||||
|
// this.initChart2()
|
||||
|
// })
|
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
// this.initChart1();
|
||||
|
} |
||||
|
|
||||
|
initChart1() { |
||||
|
const el = this.chart1.nativeElement |
||||
|
if (el) { |
||||
|
this.echartRef1 = init(el) |
||||
|
this.echartRef1.setOption({ |
||||
|
color: antvColor, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#6a7985', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['晶未智慧安全平台', 'NG-WAF', 'DLP', 'API'], |
||||
|
}, |
||||
|
|
||||
|
grid: { |
||||
|
left: '10px', |
||||
|
right: '10px', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '晶未智慧安全平台', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
opacity: 0.2, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series', |
||||
|
}, |
||||
|
data: [620, 332, 401, 534, 190, 330, 410], |
||||
|
}, |
||||
|
{ |
||||
|
name: 'NG-WAF', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
opacity: 0.2, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series', |
||||
|
}, |
||||
|
data: [220, 182, 191, 234, 290, 330, 310], |
||||
|
}, |
||||
|
{ |
||||
|
name: 'API', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
opacity: 0.2, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series', |
||||
|
}, |
||||
|
data: [55, 612, 491, 34, 90, 200, 411], |
||||
|
}, |
||||
|
{ |
||||
|
name: 'DLP', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
opacity: 0.2, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'series', |
||||
|
}, |
||||
|
data: [20, 162, 291, 134, 390, 300, 10], |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
initChart2() { |
||||
|
const el = this.chart2.nativeElement |
||||
|
if (el) { |
||||
|
this.echartRef2 = init(el) |
||||
|
this.echartRef2.setOption({ |
||||
|
color: antvColor, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#6a7985', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
grid: { |
||||
|
left: '10px', |
||||
|
right: '10px', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: this.clientTopTen.map((i) => i.clientName), |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: this.clientTopTen.map((i) => i.count), |
||||
|
type: 'bar', |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,101 @@ |
|||||
|
@if (entity) { |
||||
|
<div class="mb-4"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="实体详情" [nzExtra]="nzExtraTpl"> |
||||
|
<ng-template #nzExtraTpl> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button [routerLink]="['/', 'entity']">返回</button> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
|
||||
|
<nz-descriptions [nzColumn]="3" class="ml-16"> |
||||
|
<nz-descriptions-item nzTitle="实体名称"> |
||||
|
{{ entity.name }} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="联系方式"> |
||||
|
{{ entity.contact ?? '-' }} |
||||
|
</nz-descriptions-item> |
||||
|
<!-- <nz-descriptions-item nzTitle="地址"> |
||||
|
{{ entity.address ?? '-' }} |
||||
|
</nz-descriptions-item> --> |
||||
|
<nz-descriptions-item nzTitle="说明">{{ entity.remark || '-' }}</nz-descriptions-item> |
||||
|
</nz-descriptions> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<div class="mb-4"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="授权记录" [nzExtra]="licenseExtraTpl"> |
||||
|
<ng-template #licenseExtraTpl> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button nzType="primary" (click)="authorize()">新增授权</button> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
<div> |
||||
|
<div class="mb-3"> |
||||
|
<nz-space nzAlign="center"> |
||||
|
<div *nzSpaceItem>状态：</div> |
||||
|
<div *nzSpaceItem> |
||||
|
<nz-select |
||||
|
nzPlaceHolder="请选择状态" |
||||
|
class="w-64" |
||||
|
[(ngModel)]="status" |
||||
|
(ngModelChange)="onStatusChange()" |
||||
|
> |
||||
|
<nz-option [nzValue]="-1" nzLabel="全部"></nz-option> |
||||
|
<nz-option [nzValue]="0" nzLabel="无效"></nz-option> |
||||
|
<nz-option [nzValue]="1" nzLabel="生效中"></nz-option> |
||||
|
</nz-select> |
||||
|
</div> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
<nz-table #table [nzData]="visibleList" [nzShowPagination]="false"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>授权产品</th> |
||||
|
<th>操作人</th> |
||||
|
<th>生效时间</th> |
||||
|
<th>失效时间</th> |
||||
|
<th>状态</th> |
||||
|
<th>创建时间</th> |
||||
|
<th>操作</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
@for (item of table.data; track $index) { |
||||
|
<tr> |
||||
|
<td> |
||||
|
{{ item.productName }} |
||||
|
</td> |
||||
|
<td> |
||||
|
{{ item.username }} |
||||
|
</td> |
||||
|
<td> |
||||
|
{{ item.startTime * 1000 | date: 'yyyy-MM-dd HH:mm:ss' }} |
||||
|
</td> |
||||
|
<td> |
||||
|
{{ item.endTime ? (item.endTime * 1000 | date: 'yyyy-MM-dd HH:mm:ss') : '永久' }} |
||||
|
</td> |
||||
|
<td> |
||||
|
@if (item.status) { |
||||
|
<nz-badge nzStatus="processing" nzText="生效中"> </nz-badge> |
||||
|
} @else { |
||||
|
<nz-badge nzStatus="default" nzText="无效"></nz-badge> |
||||
|
} |
||||
|
</td> |
||||
|
<td> |
||||
|
{{ item.createTime }} |
||||
|
</td> |
||||
|
<td> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button nzType="link" (click)="copy(item.license)"> |
||||
|
复制授权码 |
||||
|
</button> |
||||
|
</nz-space> |
||||
|
</td> |
||||
|
</tr> |
||||
|
} |
||||
|
</tbody> |
||||
|
</nz-table> |
||||
|
</div> |
||||
|
</nz-card> |
||||
|
</div> |
||||
@ -0,0 +1,105 @@ |
|||||
|
import { Component, OnInit } from '@angular/core' |
||||
|
import { ActivatedRoute } from '@angular/router' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { AuthorizeItemDTO, EntityDTO, EntityDetailDTO } from 'app/services/api.dto' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { Clipboard } from '@angular/cdk/clipboard' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { AuthorizeComponent } from 'app/components/authorize/authorize.component' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-entity-detail', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './entity-detail.component.html', |
||||
|
styleUrl: './entity-detail.component.less', |
||||
|
}) |
||||
|
export class EntityDetailComponent implements OnInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private route: ActivatedRoute, |
||||
|
private clipboard: Clipboard, |
||||
|
private msg: NzMessageService, |
||||
|
private modal: NzModalService, |
||||
|
) {} |
||||
|
|
||||
|
entity?: EntityDetailDTO |
||||
|
|
||||
|
authorizeData: AuthorizeItemDTO[] = [] |
||||
|
|
||||
|
visibleList: AuthorizeItemDTO[] = [] |
||||
|
|
||||
|
product: { id: string; name: string }[] = [] |
||||
|
|
||||
|
id: string = '' |
||||
|
|
||||
|
status = -1 |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
const id = this.route.snapshot.paramMap.get('id') |
||||
|
if (id) { |
||||
|
this.id = id |
||||
|
this.api.getEntityDetail(id).subscribe((res) => { |
||||
|
this.entity = res.data |
||||
|
}) |
||||
|
this.getEntityAuthorizeList() |
||||
|
} |
||||
|
this.api.getAllProduct().subscribe((res) => { |
||||
|
this.product = res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getEntityAuthorizeList() { |
||||
|
this.api.getEntityAuthorizeList(this.id).subscribe((res) => { |
||||
|
this.authorizeData = res.data.map((i) => ({ |
||||
|
...i, |
||||
|
status: this.between(i.startTime, i.endTime) ? 1 : 0, |
||||
|
})) |
||||
|
this.onStatusChange() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onStatusChange() { |
||||
|
this.visibleList = this.authorizeData.filter((f) => (this.status === -1 ? true : f.status === this.status)) |
||||
|
} |
||||
|
|
||||
|
copy(license: string) { |
||||
|
const pending = this.clipboard.beginCopy(license) |
||||
|
let remainingAttempts = 3 |
||||
|
const attempt = () => { |
||||
|
const result = pending.copy() |
||||
|
if (!result && --remainingAttempts) { |
||||
|
setTimeout(attempt) |
||||
|
} else { |
||||
|
this.msg.success('复制成功') |
||||
|
pending.destroy() |
||||
|
} |
||||
|
} |
||||
|
attempt() |
||||
|
} |
||||
|
|
||||
|
between(start: number, end: number): boolean { |
||||
|
if (end === 0) { |
||||
|
return true |
||||
|
} |
||||
|
const now = Date.now() |
||||
|
return start * 1000 <= now && now <= end * 1000 |
||||
|
} |
||||
|
|
||||
|
authorize() { |
||||
|
const ref = this.modal.create({ |
||||
|
nzTitle: '添加授权', |
||||
|
nzContent: AuthorizeComponent, |
||||
|
nzWidth: 800, |
||||
|
nzData: { |
||||
|
product: this.product, |
||||
|
entity: this.entity, |
||||
|
}, |
||||
|
nzFooter: null, |
||||
|
}) |
||||
|
ref.afterClose.subscribe(() => { |
||||
|
this.getEntityAuthorizeList() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,83 @@ |
|||||
|
<nz-card [nzBordered]="false"> |
||||
|
<app-server-paginated-table |
||||
|
#tableTpl |
||||
|
[renderColumn]="renderColumnsTpl" |
||||
|
[formGroup]="queryForm" |
||||
|
[simpleSearch]="true" |
||||
|
[options]="table" |
||||
|
> |
||||
|
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
||||
|
@switch (key) { |
||||
|
@case ('name') { |
||||
|
<a [routerLink]="['/', 'entity', row.id, 'detail']">{{ data }}</a> |
||||
|
} |
||||
|
@default { |
||||
|
{{ data }} |
||||
|
} |
||||
|
} |
||||
|
</ng-template> |
||||
|
|
||||
|
<div *appTableForm nz-row [nzGutter]="[24, 24]"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px"> 实体名称 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<input nz-input placeholder="请输入实体名称" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="12"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px"> 创建时间 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<!-- <nz-range-picker nzShowTime formControlName="createTime"></nz-range-picker> --> |
||||
|
<app-range-picker [showTime]="true" formControlName="createTime"></app-range-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *appTableAction class="flex"> |
||||
|
<div> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nzType="primary" nz-button (click)="create()">添加实体</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div action>Custom Modal action</div> --> |
||||
|
</app-server-paginated-table> |
||||
|
</nz-card> |
||||
|
|
||||
|
<ng-template #entityFormTpl> |
||||
|
<form [formGroup]="createForm" nz-form [nzLayout]="'vertical'"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired> 实体名称 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入实体名称" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label> 联系方式 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入联系方式" formControlName="contact" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<!-- <nz-form-item> |
||||
|
<nz-form-label> 地址 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入地址" formControlName="address" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> --> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label> 说明 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<textarea nz-input placeholder="请输入说明" formControlName="remark"></textarea> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
@ -0,0 +1,132 @@ |
|||||
|
import { Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { AnyObject, ServerPaginatedTableComponent, TableOption } from 'app/components/server-paginated-table' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { lastValueFrom } from 'rxjs' |
||||
|
import { EntityDTO, ProductDTO } from 'app/services/api.dto' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { format } from 'date-fns' |
||||
|
import { AuthorizeComponent } from 'app/components/authorize/authorize.component' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
selector: 'app-entity-list', |
||||
|
templateUrl: './entity-list.component.html', |
||||
|
styleUrls: ['./entity-list.component.less'], |
||||
|
}) |
||||
|
export class EntityListComponent implements OnInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private modal: NzModalService, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
@ViewChild('entityFormTpl') entityFormTpl!: TemplateRef<{}> |
||||
|
|
||||
|
table = new TableOption(this.fetchData.bind(this), [{ key: 'name', title: '实体名称' }], [], { |
||||
|
cacheUrls: ['/dashboard'], |
||||
|
}) |
||||
|
|
||||
|
queryForm = new FormGroup({ |
||||
|
name: new FormControl(''), |
||||
|
createTime: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
createForm = new FormGroup({ |
||||
|
name: new FormControl('', [FormValidators.required('请输入实体名称'), FormValidators.maxLength(30)]), |
||||
|
// secretKey: new FormControl('', [FormValidators.required('请输入序列号')]),
|
||||
|
contact: new FormControl('', FormValidators.maxLength(30)), |
||||
|
// address: new FormControl('', FormValidators.maxLength(200)),
|
||||
|
remark: new FormControl('', FormValidators.maxLength(200)), |
||||
|
}) |
||||
|
|
||||
|
product: { id: string; name: string }[] = [] |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.table |
||||
|
.setColumn([ |
||||
|
{ key: 'name', title: '实体名称' }, |
||||
|
{ key: 'contact', title: '联系方式' }, |
||||
|
// { key: 'address', title: '地址' },
|
||||
|
{ key: 'remark', title: '说明' }, |
||||
|
{ key: 'createTime', title: '创建时间' }, |
||||
|
]) |
||||
|
.setRowOperate([ |
||||
|
{ title: '添加授权', premissions: [], onClick: this.authorize.bind(this) }, |
||||
|
{ title: '编辑', onClick: this.create.bind(this) }, |
||||
|
{ title: '删除', onClick: this.deleteItem.bind(this) }, |
||||
|
]) |
||||
|
this.api.getAllProduct().subscribe((res) => { |
||||
|
this.product = res.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
fetchData(p: {}, q: AnyObject) { |
||||
|
if (Array.isArray(q['createTime'])) { |
||||
|
const createTimeStart = q['createTime']?.[0] |
||||
|
const createTimeEnd = q['createTime']?.[1] |
||||
|
|
||||
|
q['createTimeStart'] = createTimeStart ? format(new Date(createTimeStart), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
q['createTimeEnd'] = createTimeEnd ? format(new Date(createTimeEnd), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
} |
||||
|
return this.api.getEntityPage(p, q) |
||||
|
} |
||||
|
|
||||
|
onSearch() {} |
||||
|
|
||||
|
authorize(v: EntityDTO) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: '添加授权', |
||||
|
nzContent: AuthorizeComponent, |
||||
|
nzWidth: 800, |
||||
|
nzData: { |
||||
|
product: this.product, |
||||
|
entity: v, |
||||
|
}, |
||||
|
nzFooter: null, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
create(entity?: EntityDTO) { |
||||
|
if (entity) { |
||||
|
this.createForm.patchValue(entity) |
||||
|
this.createForm.get('secretKey')?.disable() |
||||
|
} else { |
||||
|
this.createForm.get('secretKey')?.enable() |
||||
|
} |
||||
|
this.modal.create({ |
||||
|
nzTitle: entity ? '编辑实体' : '添加实体', |
||||
|
nzContent: this.entityFormTpl, |
||||
|
nzOnOk: async () => { |
||||
|
if (FormValidators.validateFormGroup(this.createForm)) { |
||||
|
await lastValueFrom(this.api.saveEntity({ ...(entity ?? {}), ...this.createForm.value })) |
||||
|
this.msg.success('保存成功') |
||||
|
this.table.ref?.reload() |
||||
|
this.createForm.reset() |
||||
|
return true |
||||
|
} |
||||
|
return false |
||||
|
}, |
||||
|
nzOnCancel: () => { |
||||
|
this.createForm.reset() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteItem(entity: EntityDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该实体？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteEntity(entity.id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.table.ref?.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
<nz-card [nzBordered]="false" class="h-screen"> |
||||
|
<div class="flex items-center justify-center"> |
||||
|
<nz-result nzStatus="403"></nz-result> |
||||
|
</div> |
||||
|
</nz-card> |
||||
@ -0,0 +1,11 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-forbidden', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './forbidden.component.html', |
||||
|
styleUrl: './forbidden.component.less', |
||||
|
}) |
||||
|
export class ForbiddenComponent {} |
||||
@ -0,0 +1,82 @@ |
|||||
|
<nz-card [nzBordered]="false"> |
||||
|
<app-server-paginated-table |
||||
|
#tableTpl |
||||
|
[options]="tableOption" |
||||
|
[formGroup]="queryForm" |
||||
|
[simpleSearch]="false" |
||||
|
[renderColumn]="renderColumnsTpl" |
||||
|
> |
||||
|
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
||||
|
@switch (key) { |
||||
|
@case ('content') { |
||||
|
<span> |
||||
|
@switch (row.operation) { |
||||
|
@case ('insert') { |
||||
|
<nz-tag nzColor="success">新增</nz-tag> |
||||
|
} |
||||
|
@case ('update') { |
||||
|
<nz-tag nzColor="blue">编辑</nz-tag> |
||||
|
} |
||||
|
@case ('delete') { |
||||
|
<nz-tag nzColor="error">删除</nz-tag> |
||||
|
} |
||||
|
@case ('login') { |
||||
|
<nz-tag nzColor="gold">登录</nz-tag> |
||||
|
} |
||||
|
} |
||||
|
</span> |
||||
|
<span> {{ data }} </span> |
||||
|
} |
||||
|
|
||||
|
@default { |
||||
|
{{ data }} |
||||
|
} |
||||
|
} |
||||
|
</ng-template> |
||||
|
<div *appTableForm nz-row [nzGutter]="[24, 24]"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="6"> 操作人 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<input nz-input placeholder="请输入操作人" formControlName="username" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
|
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="6"> 操作类型 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<nz-select nzPlaceHolder="请选择操作类型" formControlName="operation" nzAllowClear> |
||||
|
<nz-option [nzValue]="'insert'" [nzLabel]="'新增'"></nz-option> |
||||
|
<nz-option [nzValue]="'update'" [nzLabel]="'编辑'"></nz-option> |
||||
|
<nz-option [nzValue]="'delete'" [nzLabel]="'删除'"></nz-option> |
||||
|
<nz-option [nzValue]="'login'" [nzLabel]="'登录'"></nz-option> |
||||
|
</nz-select> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
|
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="6"> 操作内容 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<input nz-input placeholder="请输入操作内容" formControlName="content" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
|
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="6"> 创建时间 </nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<!-- <nz-range-picker class="w-full" formControlName="createTime"></nz-range-picker> --> |
||||
|
<app-range-picker [showTime]="true" formControlName="createTime"></app-range-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</app-server-paginated-table> |
||||
|
</nz-card> |
||||
|
|
||||
|
<ng-template #createTpl> </ng-template> |
||||
@ -0,0 +1,87 @@ |
|||||
|
import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { ApiService } from 'app/services/api.service' |
||||
|
import { |
||||
|
AnyObject, |
||||
|
ServerPaginatedTableComponent, |
||||
|
ServerPaginatedTableService, |
||||
|
TableOption, |
||||
|
} from 'app/components/server-paginated-table' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { format } from 'date-fns' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
selector: 'app-log', |
||||
|
templateUrl: './log.component.html', |
||||
|
styleUrls: ['./log.component.less'], |
||||
|
}) |
||||
|
export class LogComponent implements OnInit, AfterViewInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private modal: NzModalService, |
||||
|
private table: ServerPaginatedTableService, |
||||
|
) {} |
||||
|
|
||||
|
@ViewChild('shadowLineTpl') shadowLineRef!: ElementRef<HTMLCanvasElement> |
||||
|
|
||||
|
tableOption = new TableOption(this.fetchData.bind(this)) |
||||
|
|
||||
|
queryForm = new FormGroup({ |
||||
|
operation: new FormControl(), |
||||
|
username: new FormControl(), |
||||
|
content: new FormControl(), |
||||
|
|
||||
|
createTime: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
// this.table.run();
|
||||
|
this.tableOption.setConfig({ |
||||
|
cacheUrls: ['/dashboard'], |
||||
|
}) |
||||
|
this.tableOption.setColumn([ |
||||
|
{ |
||||
|
key: 'username', |
||||
|
title: '操作人', |
||||
|
}, |
||||
|
{ |
||||
|
key: 'content', |
||||
|
title: '操作内容', |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
key: 'createTime', |
||||
|
title: '创建时间', |
||||
|
}, |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void {} |
||||
|
|
||||
|
fetchData(p: {}, q: AnyObject) { |
||||
|
if (Array.isArray(q['createTime'])) { |
||||
|
const createTimeStart = q['createTime']?.[0] |
||||
|
const createTimeEnd = q['createTime']?.[1] |
||||
|
|
||||
|
q['createTimeStart'] = createTimeStart ? format(new Date(createTimeStart), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
q['createTimeEnd'] = createTimeEnd ? format(new Date(createTimeEnd), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
} |
||||
|
return this.api.getSysLog(p, q) |
||||
|
} |
||||
|
|
||||
|
create(nzContent: TemplateRef<{}>) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: '添加授权', |
||||
|
nzContent, |
||||
|
nzWidth: 720, |
||||
|
nzOnOk: async () => { |
||||
|
this.tableOption.ref?.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onSearch() {} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
<div class="flex items-center justify-center fixed inset-0 z-10 login-page"> |
||||
|
<div class="bg fixed inset-0"></div> |
||||
|
<div class="w-[450px] relative z-10 login-form p-8 bg-white rounded-md shadow-2xl"> |
||||
|
<div class="px-4"> |
||||
|
<div class="text-center"> |
||||
|
<h1>Back to sea</h1> |
||||
|
<p class="text-lg mb-6">登录</p> |
||||
|
</div> |
||||
|
<form nz-form [formGroup]="loginForm" class="mt-12"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<nz-input-group [nzPrefix]="prefixTemplateUser" nzSize="large"> |
||||
|
<input nz-input nzSize="large" placeholder="用户名" formControlName="username" /> |
||||
|
</nz-input-group> |
||||
|
<ng-template #prefixTemplateUser> |
||||
|
<span nz-icon nzType="user"></span> |
||||
|
<nz-divider nzType="vertical"></nz-divider> |
||||
|
</ng-template> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<nz-input-group [nzPrefix]="prefixTemplatePassword" nzSize="large"> |
||||
|
<input nz-input type="password" placeholder="密码" formControlName="password" /> |
||||
|
</nz-input-group> |
||||
|
<ng-template #prefixTemplatePassword> |
||||
|
<span nz-icon nzType="lock"></span> |
||||
|
<nz-divider nzType="vertical"></nz-divider> |
||||
|
</ng-template> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control> |
||||
|
<button |
||||
|
nz-button |
||||
|
nzType="primary" |
||||
|
nzBlock |
||||
|
class="btn" |
||||
|
nzSize="large" |
||||
|
(click)="onLogin()" |
||||
|
[nzLoading]="loading" |
||||
|
> |
||||
|
登录 |
||||
|
</button> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
@ -0,0 +1,20 @@ |
|||||
|
.login-page { |
||||
|
|
||||
|
|
||||
|
.bg { |
||||
|
background-image: url(/assets/images/login-bg.jpg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
filter: blur(1px); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.login-form { |
||||
|
|
||||
|
background-color: #fff; |
||||
|
background-color: rgba(255, 255, 255, .7); |
||||
|
-webkit-backdrop-filter: blur(10px); |
||||
|
backdrop-filter: blur(10px); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { SharedModule } from '../../shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { ApiService, LocalHttpInterceptorService } from 'app/services' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { Router } from '@angular/router' |
||||
|
import { finalize } from 'rxjs' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
selector: 'app-login', |
||||
|
templateUrl: './login.component.html', |
||||
|
styleUrls: ['./login.component.less'], |
||||
|
}) |
||||
|
export class LoginComponent { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private msg: NzMessageService, |
||||
|
private local: LocalHttpInterceptorService, |
||||
|
private router: Router, |
||||
|
) {} |
||||
|
|
||||
|
loading = false |
||||
|
|
||||
|
loginForm = new FormGroup({ |
||||
|
username: new FormControl('', [FormValidators.required('请输入用户名')]), |
||||
|
password: new FormControl('', [FormValidators.required('请输入密码')]), |
||||
|
}) |
||||
|
|
||||
|
onLogin() { |
||||
|
if (FormValidators.validateFormGroup(this.loginForm)) { |
||||
|
this.loading = true |
||||
|
this.router.navigate(['/']) |
||||
|
return |
||||
|
this.api |
||||
|
.login(this.loginForm.value) |
||||
|
.pipe( |
||||
|
finalize(() => { |
||||
|
this.loading = false |
||||
|
}), |
||||
|
) |
||||
|
.subscribe((res) => { |
||||
|
this.msg.success('登录成功') |
||||
|
this.local.setAccess({ |
||||
|
access_token: res.data, |
||||
|
}) |
||||
|
localStorage.setItem('add', res.data) |
||||
|
this.router.navigate(['/']) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
<nz-card [nzBordered]="false" class="h-screen"> |
||||
|
<div class="flex items-center justify-center"> |
||||
|
<nz-result nzStatus="404" nzTitle="此页面未找到。"></nz-result> |
||||
|
</div> |
||||
|
</nz-card> |
||||
@ -0,0 +1,11 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-notfound', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './notfound.component.html', |
||||
|
styleUrl: './notfound.component.less', |
||||
|
}) |
||||
|
export class NotfoundComponent {} |
||||
@ -0,0 +1,43 @@ |
|||||
|
<div> |
||||
|
<nz-card [nzBordered]="false" nzTitle="产品详情" [nzExtra]="nzExtraTpl"> |
||||
|
<ng-template #nzExtraTpl> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button [routerLink]="['/', 'product']">返回</button> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
|
||||
|
@if (detail(); as info) { |
||||
|
<nz-descriptions [nzColumn]="2" class="ml-16"> |
||||
|
<nz-descriptions-item nzTitle="产品ID"> |
||||
|
{{ info.productId }} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="产品名称"> |
||||
|
{{ info.name }} |
||||
|
</nz-descriptions-item> |
||||
|
|
||||
|
<nz-descriptions-item nzTitle="说明">{{ info.remark || '-' }}</nz-descriptions-item> |
||||
|
</nz-descriptions> |
||||
|
} |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
<!-- <div class="mt-4"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="版本管理" [nzExtra]="versionExtraTpl"> |
||||
|
<ng-template #versionExtraTpl> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button nzType="primary" (click)="createVersion()">添加</button> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
<app-server-paginated-table [options]="tableOption"></app-server-paginated-table> |
||||
|
</nz-card> |
||||
|
</div> --> |
||||
|
|
||||
|
<ng-template #versionFormTpl> |
||||
|
<form nz-form [formGroup]="formGroup"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired>版本号</nz-form-label> |
||||
|
<nz-form-control> |
||||
|
<input nz-input formControlName="name" placeholder="请输入版本号" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</ng-template> |
||||
@ -0,0 +1,84 @@ |
|||||
|
import { TemplateRef } from '@angular/core' |
||||
|
import { ViewChild } from '@angular/core' |
||||
|
import { Component, OnInit, signal, computed, effect } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { ActivatedRoute, Router } from '@angular/router' |
||||
|
import { TableOption } from 'app/components/server-paginated-table' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { VersionDTO } from 'app/services/api.dto' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { lastValueFrom } from 'rxjs' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-product-detail', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './product-detail.component.html', |
||||
|
styleUrl: './product-detail.component.less', |
||||
|
}) |
||||
|
export class ProductDetailComponent implements OnInit { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private router: Router, |
||||
|
private route: ActivatedRoute, |
||||
|
private modal: NzModalService, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
@ViewChild('versionFormTpl') versionFormTpl!: TemplateRef<{}> |
||||
|
|
||||
|
tableOption = new TableOption(this.fetchData.bind(this)) |
||||
|
|
||||
|
formGroup = new FormGroup({ |
||||
|
name: new FormControl('', [FormValidators.required('请输入产品版本号')]), |
||||
|
}) |
||||
|
|
||||
|
detail = signal({ |
||||
|
productId: '', |
||||
|
name: '', |
||||
|
remark: '', |
||||
|
}) |
||||
|
|
||||
|
id!: string |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.id = this.route.snapshot.paramMap.get('id')! |
||||
|
this.api.getProductDetail(this.id).subscribe((res) => { |
||||
|
this.detail.set(res.data) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
fetchData(p: {}, q: {}) { |
||||
|
return this.api.getProductVersionPage(p, { ...q, productId: this.id }) |
||||
|
} |
||||
|
|
||||
|
createVersion(version?: VersionDTO) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: '添加版本', |
||||
|
nzContent: this.versionFormTpl, |
||||
|
nzOnOk: async () => { |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
await lastValueFrom(this.api.saveVersion({ ...(version ?? {}), ...this.formGroup.value })) |
||||
|
this.msg.success('保存成功') |
||||
|
this.tableOption.ref?.reload() |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteItem(v: VersionDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该版本？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteVersion(v.id, this.id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.tableOption.ref?.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
<nz-card [nzBordered]="false"> |
||||
|
<app-server-paginated-table |
||||
|
#tableTpl |
||||
|
[renderColumn]="renderColumnsTpl" |
||||
|
[formGroup]="queryForm" |
||||
|
[simpleSearch]="true" |
||||
|
[options]="table" |
||||
|
> |
||||
|
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
||||
|
@switch (key) { |
||||
|
@case ('name') { |
||||
|
<a [routerLink]="['/', 'product', row.id, 'detail']"> |
||||
|
{{ data }} |
||||
|
</a> |
||||
|
} |
||||
|
@default { |
||||
|
{{ data }} |
||||
|
} |
||||
|
} |
||||
|
</ng-template> |
||||
|
|
||||
|
<div *appTableForm nz-row [nzGutter]="[24, 24]"> |
||||
|
<div nz-col nzSpan="8"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">产品名称</nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<input nz-input placeholder="请输入产品名称" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
<div nz-col nzSpan="12"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzFlex="80px">创建时间</nz-form-label> |
||||
|
<nz-form-control nzSpan="18"> |
||||
|
<!-- <nz-range-picker nzShowTime formControlName="createTime"></nz-range-picker> --> |
||||
|
<app-range-picker [showTime]="true" formControlName="createTime"></app-range-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *appTableAction class="flex"> |
||||
|
<div> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nzType="primary" nz-button (click)="create()">添加产品</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div action>Custom Modal action</div> --> |
||||
|
</app-server-paginated-table> |
||||
|
</nz-card> |
||||
|
|
||||
|
<ng-template #productFormTpl> |
||||
|
<form [formGroup]="createForm" nz-form [nzLayout]="'vertical'"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired> 产品名称 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入产品名称" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzRequired> 产品ID </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入产品ID" formControlName="productId" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label> 产品说明 </nz-form-label> |
||||
|
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<textarea nz-input placeholder="请输入产品说明" formControlName="remark"></textarea> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
@ -0,0 +1,104 @@ |
|||||
|
import { Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { AnyObject, ServerPaginatedTableComponent, TableOption } from 'app/components/server-paginated-table' |
||||
|
import { SharedModule } from 'app/shared/shared.module' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { lastValueFrom } from 'rxjs' |
||||
|
import { ProductDTO } from 'app/services/api.dto' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { format } from 'date-fns' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-product-list', |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
templateUrl: './product-list.component.html', |
||||
|
styleUrl: './product-list.component.less', |
||||
|
}) |
||||
|
export class ProductListComponent { |
||||
|
constructor( |
||||
|
private api: ApiService, |
||||
|
private modal: NzModalService, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
@ViewChild('productFormTpl') productFormTpl!: TemplateRef<{}> |
||||
|
|
||||
|
table = new TableOption( |
||||
|
this.fetchData.bind(this), |
||||
|
[ |
||||
|
{ key: 'name', title: '产品名称' }, |
||||
|
{ key: 'productId', title: '产品ID' }, |
||||
|
{ key: 'remark', title: '产品说明', width: '500px' }, |
||||
|
{ key: 'createTime', title: '创建时间' }, |
||||
|
], |
||||
|
[], |
||||
|
) |
||||
|
|
||||
|
queryForm = new FormGroup({ |
||||
|
name: new FormControl(''), |
||||
|
createTime: new FormControl(), |
||||
|
}) |
||||
|
|
||||
|
createForm = new FormGroup({ |
||||
|
name: new FormControl('', [FormValidators.required('请输入产品名称'), FormValidators.maxLength(30)]), |
||||
|
productId: new FormControl('', [FormValidators.required('请输入产品ID'), FormValidators.maxLength(30)]), |
||||
|
remark: new FormControl('', [FormValidators.maxLength(200)]), |
||||
|
}) |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.table.setRowOperate([ |
||||
|
{ title: '编辑', onClick: this.create.bind(this) }, |
||||
|
{ title: '删除', onClick: this.deleteItem.bind(this) }, |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
fetchData(p: {}, q: AnyObject) { |
||||
|
if (Array.isArray(q['createTime'])) { |
||||
|
const createTimeStart = q['createTime']?.[0] |
||||
|
const createTimeEnd = q['createTime']?.[1] |
||||
|
|
||||
|
q['createTimeStart'] = createTimeStart ? format(new Date(createTimeStart), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
q['createTimeEnd'] = createTimeEnd ? format(new Date(createTimeEnd), 'yyyy-MM-dd HH:mm:ss') : '' |
||||
|
} |
||||
|
return this.api.getProductPage(p, q) |
||||
|
} |
||||
|
|
||||
|
onSearch() {} |
||||
|
|
||||
|
create(product?: ProductDTO) { |
||||
|
if (product) { |
||||
|
this.createForm.patchValue(product) |
||||
|
} |
||||
|
this.modal.create({ |
||||
|
nzTitle: product ? '编辑产品' : '添加产品', |
||||
|
nzContent: this.productFormTpl, |
||||
|
nzOnOk: async () => { |
||||
|
if (FormValidators.validateFormGroup(this.createForm)) { |
||||
|
await lastValueFrom(this.api.saveProduct({ ...(product ?? {}), ...this.createForm.value })) |
||||
|
this.msg.success('保存成功') |
||||
|
this.table.ref?.reload() |
||||
|
this.createForm.reset() |
||||
|
} |
||||
|
}, |
||||
|
nzOnCancel: () => { |
||||
|
this.createForm.reset() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteItem(product: ProductDTO) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: '是否要删除该产品？', |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
await lastValueFrom(this.api.deleteProduct(product.id)) |
||||
|
this.msg.success('删除成功') |
||||
|
this.table.ref?.reload() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
<div class="w-[600px] pt-6"> |
||||
|
<form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit()"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired> 用户名 </nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<input nz-input placeholder="请输入用户名" formControlName="username" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired> 新密码 </nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<input nz-input type="password" placeholder="请输入新密码" formControlName="password" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired> 确认密码 </nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<input nz-input type="password" placeholder="请再次输入密码" formControlName="confirmPassword" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-control nzOffset="4"> |
||||
|
<button nz-button nzType="primary">保存</button> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</div> |
||||
@ -0,0 +1,46 @@ |
|||||
|
import { Component } from '@angular/core' |
||||
|
import { SharedModule } from '../../shared/shared.module' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { ApiService, LocalHttpInterceptorService } from 'app/services' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule], |
||||
|
selector: 'app-profile-account', |
||||
|
templateUrl: './profile-account.component.html', |
||||
|
styleUrls: ['./profile-account.component.less'], |
||||
|
}) |
||||
|
export class ProfileAccountComponent { |
||||
|
constructor( |
||||
|
private local: LocalHttpInterceptorService, |
||||
|
private api: ApiService, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
formGroup = new FormGroup({ |
||||
|
id: new FormControl(this.api.authInfo.id), |
||||
|
username: new FormControl({ value: this.api.authInfo.username, disabled: true }, [ |
||||
|
FormValidators.required('请输入用户名'), |
||||
|
]), |
||||
|
password: new FormControl('', [FormValidators.required('请输入密码')]), |
||||
|
confirmPassword: new FormControl('', [FormValidators.required('请再次输入密码')]), |
||||
|
}) |
||||
|
|
||||
|
onSubmit() { |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
if (this.formGroup.value.confirmPassword !== this.formGroup.value.password) { |
||||
|
this.msg.error('两次输入密码不一致') |
||||
|
return |
||||
|
} |
||||
|
const v = this.formGroup.getRawValue() |
||||
|
this.api.changePassword(v).subscribe(() => { |
||||
|
this.msg.success('修改成功，请重新登录').onClose.subscribe(() => { |
||||
|
this.local.removeAccess() |
||||
|
window.location.href = '/login' |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
<div class="w-[600px] pt-6"> |
||||
|
<form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit()"> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4" nzRequired>姓名</nz-form-label> |
||||
|
<nz-form-control nzSpan="16" [nzErrorTip]="formErrorTipsTpl"> |
||||
|
<input nz-input placeholder="请输入姓名" formControlName="name" /> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
|
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4">备注</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<textarea nz-input placeholder="请输入备注" formControlName="remark"></textarea> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<!-- <nz-form-item> |
||||
|
<nz-form-label nzSpan="4">登录限制</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<nz-switch></nz-switch> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item> |
||||
|
<nz-form-label nzSpan="4">限制规则</nz-form-label> |
||||
|
<nz-form-control nzSpan="16"> |
||||
|
<div> |
||||
|
<nz-input-group nzAddOnBefore="登录失败达到" nzAddOnAfter="次"> |
||||
|
<input type="number" nz-input /> |
||||
|
</nz-input-group> |
||||
|
</div> |
||||
|
<div class="mt-2"> |
||||
|
<ng-template #nzAddOnAfterTpl> |
||||
|
<nz-select class="!w-20"> |
||||
|
<nz-option nzValue="m" nzLabel="分钟"></nz-option> |
||||
|
<nz-option nzValue="h" nzLabel="小时"></nz-option> |
||||
|
<nz-option nzValue="d" nzLabel="天"></nz-option> |
||||
|
</nz-select> |
||||
|
</ng-template> |
||||
|
<nz-input-group nzAddOnBefore="锁定账号" [nzAddOnAfter]="nzAddOnAfterTpl"> |
||||
|
<input type="number" nz-input /> |
||||
|
</nz-input-group> |
||||
|
</div> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> --> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control nzOffset="4"> |
||||
|
<button nz-button nzType="primary">保存</button> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
|
||||
|
<ng-template #formErrorTipsTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
|
</div> |
||||
@ -0,0 +1,52 @@ |
|||||
|
import { Component, OnDestroy, OnInit } from '@angular/core' |
||||
|
import { SharedModule } from '../../shared/shared.module' |
||||
|
import { ApiService } from 'app/services' |
||||
|
import { UserFormComponent } from 'app/components/user-form/user-form.component' |
||||
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms' |
||||
|
import { FormValidators } from 'app/utils' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { Subscription } from 'rxjs' |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
imports: [SharedModule, UserFormComponent], |
||||
|
selector: 'app-profile-basic', |
||||
|
templateUrl: './profile-basic.component.html', |
||||
|
styleUrls: ['./profile-basic.component.less'], |
||||
|
}) |
||||
|
export class ProfileBasicComponent implements OnInit, OnDestroy { |
||||
|
constructor( |
||||
|
public api: ApiService, |
||||
|
private fb: FormBuilder, |
||||
|
private msg: NzMessageService, |
||||
|
) {} |
||||
|
|
||||
|
formGroup!: FormGroup |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.formGroup = this.fb.group({ |
||||
|
name: new FormControl(this.api.authInfo.name, [FormValidators.required('请输入姓名')]), |
||||
|
remark: new FormControl(this.api.authInfo.remark), |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void {} |
||||
|
|
||||
|
public getValues() { |
||||
|
let values = null |
||||
|
if (FormValidators.validateFormGroup(this.formGroup)) { |
||||
|
values = this.formGroup.value |
||||
|
} |
||||
|
return values |
||||
|
} |
||||
|
|
||||
|
onSubmit() { |
||||
|
const vals = this.getValues() |
||||
|
if (vals) { |
||||
|
this.api.saveUser({ ...this.api.authInfo, ...vals }).subscribe(() => { |
||||
|
this.msg.success('保存成功') |
||||
|
this.api.getAuthInfo(true).subscribe(() => {}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<div> |
||||
|
<nz-card [nzBordered]="false"> |
||||
|
<nz-descriptions [nzColumn]="2" class="ml-16"> |
||||
|
<nz-descriptions-item nzTitle="用户名"> |
||||
|
{{ api.authInfo.username }} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="姓名"> |
||||
|
{{ api.authInfo.name }} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="角色"> |
||||
|
{{ api.authInfo.roleName }} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="状态"> |
||||
|
@if (api.authInfo.enable) { |
||||
|
<nz-badge nzStatus="success" nzText="启用"></nz-badge> |
||||
|
} @else { |
||||
|
<nz-badge nzStatus="errot" nzText="禁用"></nz-badge> |
||||
|
} |
||||
|
</nz-descriptions-item> |
||||
|
<nz-descriptions-item nzTitle="备注">{{ api.authInfo.remark || '-' }}</nz-descriptions-item> |
||||
|
</nz-descriptions> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
<div class="mt-4"> |
||||
|
<nz-card [nzBordered]="false"> |
||||
|
<div class="nav-bar"> |
||||
|
<ul> |
||||
|
<li class="cursor-pointer" [routerLink]="['/profile/basic']" routerLinkActive="active">基础信息</li> |
||||
|
<li class="cursor-pointer" [routerLink]="['/profile/account']" routerLinkActive="active">账号密码</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="py-4"> |
||||
|
<router-outlet></router-outlet> |
||||
|
</div> |
||||
|
</nz-card> |
||||
|
</div> |
||||
@ -0,0 +1,18 @@ |
|||||
|
.nav-bar { |
||||
|
ul { |
||||
|
display: flex; |
||||
|
|
||||
|
li { |
||||
|
padding: 6px 24px; |
||||
|
margin-right: 12px; |
||||
|
font-size: 14px; |
||||
|
border-radius: 20px; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
&.active { |
||||
|
background-color: #f2f3f5; |
||||
|
color: var(--primary); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue