From d4bd35b9df8f5d45a9e9e1e0d130b1d3348c3182 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Sat, 27 Nov 2021 17:17:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0zorro,alain=E6=A0=B7=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _mock/_rule.ts | 31 +-- src/app/app.module.ts | 4 +- .../routes/dashboard/dashboard.component.html | 116 +--------- .../routes/dashboard/dashboard.component.ts | 176 ++++----------- .../alian-demo/alian-demo.component.html | 44 ++++ .../alian-demo/alian-demo.component.less | 5 + .../alian-demo/alian-demo.component.ts | 206 ++++++++++++++++++ .../zorro-demo/edit/edit.component.html | 10 + .../zorro-demo/edit/edit.component.spec.ts | 24 ++ .../zorro-demo/edit/edit.component.ts | 63 ++++++ .../zorro-demo/zorro-demo.component.html | 129 +++++++++++ .../zorro-demo/zorro-demo.component.less | 0 .../zorro-demo/zorro-demo.component.ts | 161 ++++++++++++++ src/app/routes/demo/demo-routing.module.ts | 15 ++ src/app/routes/demo/demo.module.ts | 15 ++ src/app/routes/demo/services/demo.service.ts | 11 + src/app/routes/routes-routing.module.ts | 16 +- src/app/routes/routes.module.ts | 8 +- .../services/business/sl-platform.service.ts | 7 +- .../shared/services/business/user.service.ts | 4 +- src/app/shared/services/core/cache.service.ts | 15 +- src/app/shared/services/core/event.service.ts | 2 - src/app/shared/shared-zorro.module.ts | 6 +- src/assets/mocks/menu-data.json | 26 ++- src/styles.less | 6 + 25 files changed, 803 insertions(+), 297 deletions(-) create mode 100644 src/app/routes/demo/components/alian-demo/alian-demo.component.html create mode 100644 src/app/routes/demo/components/alian-demo/alian-demo.component.less create mode 100644 src/app/routes/demo/components/alian-demo/alian-demo.component.ts create mode 100644 src/app/routes/demo/components/zorro-demo/edit/edit.component.html create mode 100644 src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts create mode 100644 src/app/routes/demo/components/zorro-demo/edit/edit.component.ts create mode 100644 src/app/routes/demo/components/zorro-demo/zorro-demo.component.html create mode 100644 src/app/routes/demo/components/zorro-demo/zorro-demo.component.less create mode 100644 src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts create mode 100644 src/app/routes/demo/demo-routing.module.ts create mode 100644 src/app/routes/demo/demo.module.ts create mode 100644 src/app/routes/demo/services/demo.service.ts diff --git a/_mock/_rule.ts b/_mock/_rule.ts index 64f40087..c1e91847 100644 --- a/_mock/_rule.ts +++ b/_mock/_rule.ts @@ -10,7 +10,7 @@ for (let i = 0; i < 46; i += 1) { href: 'https://ant.design', avatar: [ 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', - 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', + 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png' ][i % 2], no: `TradeCode ${i}`, title: `一个任务名称 ${i}`, @@ -20,11 +20,11 @@ for (let i = 0; i < 46; i += 1) { status: Math.floor(Math.random() * 10) % 4, updatedAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`), createdAt: new Date(`2017-07-${i < 18 ? '0' + (Math.floor(i / 2) + 1) : Math.floor(i / 2) + 1}`), - progress: Math.ceil(Math.random() * 100), + progress: Math.ceil(Math.random() * 100) }); } -function getRule(params: any): any[] { +function getRule(params: any): any { let ret = [...list]; if (params.sorter) { const s = params.sorter.split('_'); @@ -36,22 +36,23 @@ function getRule(params: any): any[] { }); } if (params.statusList && params.statusList.length > 0) { - ret = ret.filter((data) => params.statusList.indexOf(data.status) > -1); + ret = ret.filter(data => params.statusList.indexOf(data.status) > -1); } if (params.no) { - ret = ret.filter((data) => data.no.indexOf(params.no) > -1); + ret = ret.filter(data => data.no.indexOf(params.no) > -1); } - return ret; + return { data: ret, success: true }; } -function removeRule(nos: string): boolean { - nos.split(',').forEach((no) => { - const idx = list.findIndex((w) => w.no === no); +function removeRule(nos: string): any { + nos.split(',').forEach(no => { + const idx = list.findIndex(w => w.no === no); if (idx !== -1) { list.splice(idx, 1); } }); - return true; + + return { data: true, success: true }; } function saveRule(description: string): void { @@ -61,7 +62,7 @@ function saveRule(description: string): void { href: 'https://ant.design', avatar: [ 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', - 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', + 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png' ][i % 2], no: `TradeCode ${i}`, title: `一个任务名称 ${i}`, @@ -71,12 +72,12 @@ function saveRule(description: string): void { status: Math.floor(Math.random() * 10) % 2, updatedAt: new Date(), createdAt: new Date(), - progress: Math.ceil(Math.random() * 100), + progress: Math.ceil(Math.random() * 100) }); } export const RULES = { - '/rule': (req: MockRequest) => getRule(req.queryString), - 'DELETE /rule': (req: MockRequest) => removeRule(req.queryString.nos), - 'POST /rule': (req: MockRequest) => saveRule(req.body.description), + 'POST /rule': (req: MockRequest) => getRule(req.queryString), + 'POST /delete/rule': (req: MockRequest) => removeRule(req.body.nos), + // 'POST /rule': (req: MockRequest) => saveRule(req.body.description) }; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4fa434d8..9a6efff4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,7 +7,8 @@ import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { SimpleInterceptor } from '@delon/auth'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; - +import zh from '@angular/common/locales/zh'; +registerLocaleData(zh); // #region global third module import { BidiModule } from '@angular/cdk/bidi'; @@ -50,6 +51,7 @@ import { RoutesModule } from './routes/routes.module'; import { SharedModule } from './shared/shared.module'; import { STWidgetModule } from './shared/widget/st-widget.module'; import { Observable } from 'rxjs'; +import { registerLocaleData } from '@angular/common'; @NgModule({ declarations: [AppComponent], diff --git a/src/app/routes/dashboard/dashboard.component.html b/src/app/routes/dashboard/dashboard.component.html index b8904171..8303d109 100644 --- a/src/app/routes/dashboard/dashboard.component.html +++ b/src/app/routes/dashboard/dashboard.component.html @@ -1,109 +1,9 @@ - - -
-
-
- - 规则编号 - - - - -
-
- - 使用状态 - - - - - - -
-
- - 调用次数 - - - - -
-
- - 更新日期 - - - - -
-
- - 使用状态 - - - - - - -
-
- - 使用状态 - - - - - - -
-
- - - - {{ expandForm ? '收起' : '展开' }} - - -
-
-
- - - - - -
    -
  • 删除
    • -
  • 批量审批
    • -
- - -
- - - 已选择 - {{ selectedRows.length }} 项   服务调用总计 {{ totalCallNo - }} 万 - 清空 - - +
+
编辑 {{ record.id }} 信息
+
+ +
+ +
- - - - - - - - - 描述 - - - - - \ No newline at end of file + diff --git a/src/app/routes/dashboard/dashboard.component.ts b/src/app/routes/dashboard/dashboard.component.ts index 35a69bcf..a069694d 100644 --- a/src/app/routes/dashboard/dashboard.component.ts +++ b/src/app/routes/dashboard/dashboard.component.ts @@ -1,9 +1,10 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef, TemplateRef, ViewChild } from '@angular/core'; import { STComponent, STColumn, STData, STChange } from '@delon/abc/st'; +import { SFSchema, SFUISchema } from '@delon/form'; import { _HttpClient } from '@delon/theme'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzMessageService } from 'ng-zorro-antd/message'; -import { NzModalService } from 'ng-zorro-antd/modal'; +import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'; import { map, tap } from 'rxjs/operators'; @Component({ @@ -13,154 +14,53 @@ import { map, tap } from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush }) export class DashboardComponent { - q: { - pi: number; - ps: number; - no: string; - sorter: string; - status: number | null; - statusList: NzSafeAny[]; - } = { - pi: 1, - ps: 10, - no: '', - sorter: '', - status: null, - statusList: [] + @ViewChild('sf') + sf!: SFSchema; + record: any = {}; + i: any; + schema: any = { + properties: { + no: { type: 'string', title: '编号' }, + owner: { type: 'string', title: '姓名' }, + callNo: { type: 'number', title: '调用次数' }, + href: { type: 'string', title: '链接', format: 'uri', ui: { errors: { uri: '11' } } }, + description: { type: 'string', title: '描述' } + }, + required: ['owner', 'callNo', 'href', 'description'] }; - data: any[] = []; - loading = false; - status = [ - { index: 0, text: '关闭', value: false, type: 'default', checked: false }, - { - index: 1, - text: '运行中', - value: false, - type: 'processing', - checked: false + ui: SFUISchema = { + '*': { + spanLabelFixed: 100, + grid: { span: 12 } }, - { index: 2, text: '已上线', value: false, type: 'success', checked: false }, - { index: 3, text: '异常', value: false, type: 'error', checked: false } - ]; - @ViewChild('st', { static: true }) - st!: STComponent; - columns: STColumn[] = [ - { title: '', index: 'key', type: 'checkbox' }, - { title: '规则编号', index: 'no' }, - { title: '描述', index: 'description' }, - { - title: '服务调用次数', - index: 'callNo', - type: 'number', - format: item => `${item.callNo} 万`, - sort: { - compare: (a, b) => a.callNo - b.callNo - } + $no: { + widget: 'text' }, - { - title: '状态', - index: 'status', - render: 'status', - filter: { - menus: this.status, - fn: (filter, record) => record.status === filter.index - } + $href: { + widget: 'string' }, - { - title: '更新时间', - index: 'updatedAt', - type: 'date', - sort: { - compare: (a, b) => a.updatedAt - b.updatedAt - } - }, - { - title: '操作', - buttons: [ - { - text: '配置', - click: item => this.msg.success(`配置${item.no}`) - }, - { - text: '订阅警报', - click: item => this.msg.success(`订阅警报${item.no}`) - } - ] + $description: { + widget: 'textarea', + grid: { span: 24 } } - ]; - selectedRows: STData[] = []; - description = ''; - totalCallNo = 0; - expandForm = false; + }; - constructor(private http: _HttpClient, public msg: NzMessageService, private modalSrv: NzModalService, private cdr: ChangeDetectorRef) {} + constructor(private msgSrv: NzMessageService, public http: _HttpClient) {} ngOnInit(): void { - this.getData(); + // if (this.record.id > 0) this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res)); } - getData(): void { - this.loading = true; - this.q.statusList = this.status.filter(w => w.checked).map(item => item.index); - if (this.q.status !== null && this.q.status > -1) { - this.q.statusList.push(this.q.status); - } - this.http - .get('/rule?_allow_anonymous=true', this.q) - .pipe( - map((list: Array<{ status: number; statusText: string; statusType: string }>) => - list.map(i => { - const statusItem = this.status[i.status]; - i.statusText = statusItem.text; - i.statusType = statusItem.type; - return i; - }) - ), - tap(() => (this.loading = false)) - ) - .subscribe(res => { - this.data = res; - this.cdr.detectChanges(); - }); + save(value: any): void { + console.log(this.sf.value); + + // this.http.post(`/user/${this.record.id}`, value).subscribe(res => { + // this.msgSrv.success('保存成功'); + // // this.modal.close(true); + // }); } - stChange(e: STChange): void { - switch (e.type) { - case 'checkbox': - this.selectedRows = e.checkbox!; - this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0); - this.cdr.detectChanges(); - break; - case 'filter': - this.getData(); - break; - } - } - - remove(): void { - this.http.delete('/rule', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => { - this.getData(); - this.st.clearCheck(); - }); - } - - approval(): void { - this.msg.success(`审批了 ${this.selectedRows.length} 笔`); - } - - add(tpl: TemplateRef<{}>): void { - this.modalSrv.create({ - nzTitle: '新建规则', - nzContent: tpl, - nzOnOk: () => { - this.loading = true; - this.http.post('/rule', { description: this.description }).subscribe(() => this.getData()); - } - }); - } - - reset(): void { - // wait form reset updated finished - setTimeout(() => this.getData()); + close(): void { + // this.modal.destroy(); } } diff --git a/src/app/routes/demo/components/alian-demo/alian-demo.component.html b/src/app/routes/demo/components/alian-demo/alian-demo.component.html new file mode 100644 index 00000000..e2acb3be --- /dev/null +++ b/src/app/routes/demo/components/alian-demo/alian-demo.component.html @@ -0,0 +1,44 @@ + + + +
+
+ +
+
+ + + + +
+
+ + + + +
    +
  • 删除
    • +
  • 批量审批
    • +
+ + +
+ + + 已选择 + {{ selectedRows.length }} 项   服务调用总计 {{ + totalCallNo }} 万 + 清空 + + +
+ + + \ No newline at end of file diff --git a/src/app/routes/demo/components/alian-demo/alian-demo.component.less b/src/app/routes/demo/components/alian-demo/alian-demo.component.less new file mode 100644 index 00000000..73710dfa --- /dev/null +++ b/src/app/routes/demo/components/alian-demo/alian-demo.component.less @@ -0,0 +1,5 @@ +:host::ng-deep { + nz-range-picker { + width: 100%; + } +} \ No newline at end of file diff --git a/src/app/routes/demo/components/alian-demo/alian-demo.component.ts b/src/app/routes/demo/components/alian-demo/alian-demo.component.ts new file mode 100644 index 00000000..0dbbe39c --- /dev/null +++ b/src/app/routes/demo/components/alian-demo/alian-demo.component.ts @@ -0,0 +1,206 @@ +import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { STComponent, STColumn, STChange } from '@delon/abc/st'; +import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form'; +import { _HttpClient, ModalHelper } from '@delon/theme'; +import { NzMessageService } from 'ng-zorro-antd/message'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { DemoService } from '../../services/demo.service'; +import { DemoEditComponent } from '../zorro-demo/edit/edit.component'; + +@Component({ + selector: 'app-alian-demo', + templateUrl: './alian-demo.component.html', + styleUrls: ['./alian-demo.component.less'] +}) +export class AlianDemoComponent implements OnInit { + url = `/rule?_allow_anonymous=true`; + + status = [ + { index: 0, text: '关闭', value: false, type: 'default', checked: false }, + { + index: 1, + text: '运行中', + value: false, + type: 'processing', + checked: false + }, + { index: 2, text: '已上线', value: false, type: 'success', checked: false }, + { index: 3, text: '异常', value: false, type: 'error', checked: false } + ]; + @ViewChild('st', { static: true }) + st!: STComponent; + @ViewChild('sf', { static: false }) + sf!: SFComponent; + columns: STColumn[] = [ + { title: '', index: 'key', type: 'checkbox' }, + { title: '规则编号', index: 'no' }, + { title: '描述', index: 'description' }, + { + title: '服务调用次数', + index: 'callNo', + type: 'number', + format: item => `${item.callNo} 万`, + sort: { + compare: (a, b) => a.callNo - b.callNo + } + }, + { + title: '状态', + index: 'status', + render: 'status', + filter: { + menus: this.status, + fn: (filter, record) => record.status === filter.index + } + }, + { + title: '更新时间', + index: 'updatedAt', + type: 'date', + sort: { + compare: (a, b) => a.updatedAt - b.updatedAt + } + }, + { + title: '操作', + buttons: [ + { + text: '修改', + click: item => this.edit(item) + }, + { + text: '删除', + click: item => this.delete(item) + } + ] + } + ]; + searchSchema: SFSchema = { + properties: { + expand: { + type: 'boolean', + ui: { + hidden: true + } + }, + orderSn: { + type: 'string', + title: '订单号', + ui: { + autocomplete: 'off' + } + }, + receiveName: { + type: 'string', + title: '收件人' + }, + receiveMobile: { + type: 'string', + title: '收件人电话' + }, + tenantName: { + type: 'string', + title: '下单商家', + ui: { + visibleIf: { + expand: (value: boolean) => value + } + } + }, + createTime: { + title: '下单时间', + type: 'string', + ui: { + widget: 'date', + mode: 'range', + format: 'yyyy-MM-dd', + visibleIf: { + expand: (value: boolean) => value + } + } as SFDateWidgetSchema + } + } + }; + + ui: SFUISchema = { + '*': { + spanLabelFixed: 90, + grid: { span: 8, gutter: 4 } + }, + $orderSn: { + grid: { span: 8 } + }, + $receiveName: { + grid: { span: 8 } + }, + $createTime: { grid: { span: 8 } } + }; + _$expand = false; + + selectedRows: any[] = []; + totalCallNo = 0; + constructor(public service: DemoService, public msg: NzMessageService, private modal: ModalHelper) {} + + ngOnInit(): void {} + + stChange(e: STChange): void { + switch (e.type) { + case 'checkbox': + this.selectedRows = e.checkbox!; + this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0); + break; + case 'filter': + this.st.load(); + break; + } + } + + remove(): void { + this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map(i => i.no).join(',') }).subscribe(() => { + this.st.load(); + this.st.clearCheck(); + }); + } + + approval(): void { + this.msg.success(`审批了 ${this.selectedRows.length} 笔`); + } + + add(): void { + this.modal.createStatic(DemoEditComponent, { i: { id: 0 } }).subscribe(res => { + if (res) { + console.log(res); + } + }); + } + + edit(item: any) { + this.modal + .createStatic(DemoEditComponent, { i: { no: 1, owner: '22222', callNo: 111, status: 1, description: '222' } }) + .subscribe(res => { + if (res) { + this.st.setRow(item, res); + } + }); + } + + delete(item: any) { + this.st.removeRow(item); + } + + /** + * 重置表单 + */ + resetSF() { + this.sf.reset(); + this._$expand = false; + } + + /** + * 伸缩查询条件 + */ + expandToggle() { + this._$expand = !this._$expand; + this.sf?.setValue('/expand', this._$expand); + } +} diff --git a/src/app/routes/demo/components/zorro-demo/edit/edit.component.html b/src/app/routes/demo/components/zorro-demo/edit/edit.component.html new file mode 100644 index 00000000..97f50494 --- /dev/null +++ b/src/app/routes/demo/components/zorro-demo/edit/edit.component.html @@ -0,0 +1,10 @@ +
+
编辑 {{ record.id }} 信息
+
+ + +
+ + +
+ diff --git a/src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts b/src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts new file mode 100644 index 00000000..5fa67a8b --- /dev/null +++ b/src/app/routes/demo/components/zorro-demo/edit/edit.component.spec.ts @@ -0,0 +1,24 @@ +import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; +import { DemoEditComponent } from './edit.component'; + +describe('DemoEditComponent', () => { + let component: DemoEditComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DemoEditComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DemoEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/demo/components/zorro-demo/edit/edit.component.ts b/src/app/routes/demo/components/zorro-demo/edit/edit.component.ts new file mode 100644 index 00000000..989ed27f --- /dev/null +++ b/src/app/routes/demo/components/zorro-demo/edit/edit.component.ts @@ -0,0 +1,63 @@ +import { Component, OnInit } from '@angular/core'; +import { SFSchema, SFUISchema } from '@delon/form'; +import { _HttpClient } from '@delon/theme'; +import { NzMessageService } from 'ng-zorro-antd/message'; +import { NzModalRef } from 'ng-zorro-antd/modal'; + +@Component({ + selector: 'app-demo-edit', + templateUrl: './edit.component.html', +}) +export class DemoEditComponent implements OnInit { + record: any = {}; + i: any; + schema: SFSchema = { + properties: { + no: { type: 'string', title: '编号' }, + owner: { type: 'string', title: '姓名', maxLength: 15 }, + callNo: { type: 'number', title: '调用次数' }, + status: { type: 'number', title: '链接' }, + description: { type: 'string', title: '描述', maxLength: 140 }, + }, + required: ['owner', 'callNo', 'description'], + }; + ui: SFUISchema = { + '*': { + spanLabelFixed: 100, + grid: { span: 12 }, + }, + $no: { + widget: 'text' + }, + $href: { + widget: 'string', + }, + $description: { + widget: 'textarea', + grid: { span: 24 }, + }, + }; + + constructor( + private modal: NzModalRef, + private msgSrv: NzMessageService, + public http: _HttpClient, + ) {} + + ngOnInit(): void { + if (this.record.id > 0) + this.http.get(`/user/${this.record.id}`).subscribe(res => (this.i = res)); + } + + save(value: any): void { + this.modal.close(value); + // this.http.post(`/user/${this.record.id}`, value).subscribe(res => { + // this.msgSrv.success('保存成功'); + // this.modal.close(true); + // }); + } + + close(): void { + this.modal.destroy(); + } +} diff --git a/src/app/routes/demo/components/zorro-demo/zorro-demo.component.html b/src/app/routes/demo/components/zorro-demo/zorro-demo.component.html new file mode 100644 index 00000000..ec55f6ee --- /dev/null +++ b/src/app/routes/demo/components/zorro-demo/zorro-demo.component.html @@ -0,0 +1,129 @@ + + + + +
+
+
+ + 规则编号 + + + + +
+
+ + 使用状态 + + + + + + + +
+
+ + 调用次数 + + + + +
+
+ + 更新日期 + + + + +
+
+ + 使用状态 + + + + + + + +
+
+ + + + + {{ expandForm ? '收起' : '展开' }} + + +
+
+
+ + + + + +
    +
  • 删除
    • +
  • 批量审批
    • +
+ + +
+ + + 已选择 + {{ selectedRows.length }} 项   服务调用总计 {{ + totalCallNo }} 万 + 清空 + + +
+ + + + + + + No + Name + Description + Option + + + + + + + {{ data.no }} + {{ data.callNo }} + {{ data.description }} + + Edit + + Delete + + + + + + + + + + + 描述 + + + + + \ No newline at end of file diff --git a/src/app/routes/demo/components/zorro-demo/zorro-demo.component.less b/src/app/routes/demo/components/zorro-demo/zorro-demo.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts b/src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts new file mode 100644 index 00000000..cef1b137 --- /dev/null +++ b/src/app/routes/demo/components/zorro-demo/zorro-demo.component.ts @@ -0,0 +1,161 @@ +import { ChangeDetectorRef, Component, OnInit, TemplateRef } from '@angular/core'; +import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzMessageService } from 'ng-zorro-antd/message'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { map, tap } from 'rxjs/operators'; +import { DemoService } from '../../services/demo.service'; + +@Component({ + selector: 'app-zorro-demo', + templateUrl: './zorro-demo.component.html', + styleUrls: ['./zorro-demo.component.less'] +}) +export class ZorroDemoComponent implements OnInit { + data: any[] = []; + loading = false; + expandForm = false; + + q: { + pi: number; + ps: number; + no: string; + sorter: string; + status: number | null; + statusList: NzSafeAny[]; + } = { + pi: 1, + ps: 10, + no: '', + sorter: '', + status: null, + statusList: [] + }; + + status = [ + { index: 0, text: '关闭', value: false, type: 'default', checked: false }, + { + index: 1, + text: '运行中', + value: false, + type: 'processing', + checked: false + }, + { index: 2, text: '已上线', value: false, type: 'success', checked: false }, + { index: 3, text: '异常', value: false, type: 'error', checked: false } + ]; + + selectedRows: any[] = []; + totalCallNo = 0; + description: string = ''; + checkedAll = false; + indeterminate = false; + constructor( + private service: DemoService, + public msg: NzMessageService, + private modalSrv: NzModalService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit(): void { + this.getData(); + } + + getData(): void { + this.loading = true; + this.q.statusList = this.status.filter(w => w.checked).map(item => item.index); + if (this.q.status !== null && this.q.status > -1) { + this.q.statusList.push(this.q.status); + } + this.service + .request('/rule?_allow_anonymous=true', this.q) + .pipe( + map((list: Array<{ status: number; statusText: string; statusType: string }>) => + list.map(i => { + const statusItem = this.status[i.status]; + i.statusText = statusItem.text; + i.statusType = statusItem.type; + return i; + }) + ), + tap(() => (this.loading = false)) + ) + .subscribe(res => { + this.data = res; + }); + } + + action(tpl: TemplateRef<{}>, data?: any): void { + if (data) { + this.description = data.description; + } + this.modalSrv.create({ + nzTitle: '新建规则', + nzContent: tpl, + nzOnOk: () => { + this.loading = true; + + // this.http.post('/rule', { description: this.description }).subscribe(() => this.getData()); + if (data) { + Object.assign(data, { description: this.description }); + } else { + this.data.push({ + checked: false, + key: this.data.length, + callNo: 111, + description: this.description + }); + this.data = [...this.data]; + } + setTimeout(() => { + this.loading = false; + }, 1000); + } + }); + } + + remove(): void { + this.service.request('/delete/rule?_allow_anonymous=true', { nos: this.selectedRows.map((i: any) => i.no).join(',') }).subscribe(() => { + this.getData(); + this.clearCheck(); + }); + } + + deleteAction(item: any) { + this.data = this.data.filter(({ no }) => no !== item.no); + } + + approval(): void { + this.msg.success(`审批了 ${this.selectedRows.length} 笔`); + } + + onAllChecked(checked: boolean): void { + this.data.filter(({ disabled }) => !disabled).forEach(item => (item.checked = checked)); + this.selectedRows = this.data.filter(({ checked }) => checked); + } + + onItemChecked(checked: boolean, item: any): void { + if (checked) { + this.selectedRows.push(item); + } else { + this.selectedRows = this.selectedRows.filter(({ no }) => no !== item.no); + } + this.refreshCheckedStatus(); + } + + refreshCheckedStatus(): void { + this.checkedAll = this.data.every(item => item.checked); + this.indeterminate = this.data.some(item => item.checked) && !this.checkedAll; + } + + clearCheck() { + this.data.forEach(item => (item.checked = false)); + this.selectedRows = []; + this.checkedAll = false; + this.indeterminate = false; + } + + reset(): void { + // wait form reset updated finished + setTimeout(() => this.getData()); + } +} diff --git a/src/app/routes/demo/demo-routing.module.ts b/src/app/routes/demo/demo-routing.module.ts new file mode 100644 index 00000000..2f6625d7 --- /dev/null +++ b/src/app/routes/demo/demo-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AlianDemoComponent } from './components/alian-demo/alian-demo.component'; +import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component'; + +const routes: Routes = [ + { path: 'zorro', component: ZorroDemoComponent }, + { path: 'alain', component: AlianDemoComponent }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DemoRoutingModule { } diff --git a/src/app/routes/demo/demo.module.ts b/src/app/routes/demo/demo.module.ts new file mode 100644 index 00000000..b1828a1e --- /dev/null +++ b/src/app/routes/demo/demo.module.ts @@ -0,0 +1,15 @@ +import { NgModule, Type } from '@angular/core'; +import { SharedModule } from '@shared'; +import { AlianDemoComponent } from './components/alian-demo/alian-demo.component'; +import { DemoEditComponent } from './components/zorro-demo/edit/edit.component'; + +import { ZorroDemoComponent } from './components/zorro-demo/zorro-demo.component'; +import { DemoRoutingModule } from './demo-routing.module'; + +const COMPONENTS: Array> = [DemoEditComponent, ZorroDemoComponent, AlianDemoComponent]; + +@NgModule({ + imports: [SharedModule, DemoRoutingModule], + declarations: COMPONENTS +}) +export class DemoModule {} diff --git a/src/app/routes/demo/services/demo.service.ts b/src/app/routes/demo/services/demo.service.ts new file mode 100644 index 00000000..0bc392c4 --- /dev/null +++ b/src/app/routes/demo/services/demo.service.ts @@ -0,0 +1,11 @@ +import { Injectable, Injector } from '@angular/core'; +import { BaseService } from 'src/app/shared/services'; + +@Injectable({ + providedIn: 'root' +}) +export class DemoService extends BaseService { + constructor(public injector: Injector) { + super(injector); + } +} diff --git a/src/app/routes/routes-routing.module.ts b/src/app/routes/routes-routing.module.ts index 0f1254e9..b1e59f60 100644 --- a/src/app/routes/routes-routing.module.ts +++ b/src/app/routes/routes-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; // layout import { LayoutProComponent } from '@brand'; import { environment } from '@env/environment'; + // dashboard pages import { DashboardComponent } from './dashboard/dashboard.component'; @@ -13,13 +14,14 @@ const routes: Routes = [ children: [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, - ], + { path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule) } + ] }, // passport - { path: '', loadChildren: () => import('./passport/passport.module').then((m) => m.PassportModule) }, - { path: 'exception', loadChildren: () => import('./exception/exception.module').then((m) => m.ExceptionModule) }, + { path: '', loadChildren: () => import('./passport/passport.module').then(m => m.PassportModule) }, + { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) }, // 单页不包裹Layout - { path: '**', redirectTo: 'exception/404' }, + { path: '**', redirectTo: 'exception/404' } ]; @NgModule({ @@ -28,9 +30,9 @@ const routes: Routes = [ useHash: environment.useHash, // NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled` // Pls refer to https://ng-alain.com/components/reuse-tab - scrollPositionRestoration: 'top', - }), + scrollPositionRestoration: 'top' + }) ], - exports: [RouterModule], + exports: [RouterModule] }) export class RouteRoutingModule {} diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts index 4bb976fa..1651bc70 100644 --- a/src/app/routes/routes.module.ts +++ b/src/app/routes/routes.module.ts @@ -1,16 +1,16 @@ import { NgModule, Type } from '@angular/core'; - import { SharedModule } from '@shared'; + // dashboard pages import { DashboardComponent } from './dashboard/dashboard.component'; import { RouteRoutingModule } from './routes-routing.module'; -const COMPONENTS: Type[] = [DashboardComponent]; -const COMPONENTS_NOROUNT: Type[] = []; +const COMPONENTS = [DashboardComponent]; +const COMPONENTS_NOROUNT: Array> = []; @NgModule({ imports: [SharedModule, RouteRoutingModule], declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT], - entryComponents: COMPONENTS_NOROUNT, + entryComponents: COMPONENTS_NOROUNT }) export class RoutesModule {} diff --git a/src/app/shared/services/business/sl-platform.service.ts b/src/app/shared/services/business/sl-platform.service.ts index 10b74cd1..3ed710bd 100644 --- a/src/app/shared/services/business/sl-platform.service.ts +++ b/src/app/shared/services/business/sl-platform.service.ts @@ -9,7 +9,6 @@ import { Injectable, Injector } from '@angular/core'; import { Observable, zip } from 'rxjs'; import { catchError, switchMap } from 'rxjs/operators'; import { CoreService } from 'src/app/core/core.service'; -import { EAEncryptUtil } from '../../utils'; import { BaseService } from '../core/base.service'; @Injectable({ @@ -61,7 +60,7 @@ export class EAPlatformService extends BaseService { getPlatformStatus(): number { const encryptStatus = this.coreSrv.cacheSrv.getNone(this._cachePlatformStatusKey); try { - const status = EAEncryptUtil.deencryptByDeAES(encryptStatus); + // const status = EAEncryptUtil.deencryptByDeAES(encryptStatus); return +status; } catch (error) { return 0; @@ -118,8 +117,8 @@ export class EAPlatformService extends BaseService { } // 加密并保存平台状态 - const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString()); - this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext); + // const ciphertext = EAEncryptUtil.encryptByEnAES(status.toString()); + // this.coreSrv.cacheSrv.set(this._cachePlatformStatusKey, ciphertext); } /** diff --git a/src/app/shared/services/business/user.service.ts b/src/app/shared/services/business/user.service.ts index d6247d3a..49dff211 100644 --- a/src/app/shared/services/business/user.service.ts +++ b/src/app/shared/services/business/user.service.ts @@ -101,7 +101,7 @@ export class EAUserService extends BaseService { if (res?.token) { this.cacheSrv.set(cacheConf.token, res.token); this.doAfterLogin(); - this.eventSrv.event.emit(eventConf.reflesh_login_status); + // this.eventSrv.event.emit(eventConf.reflesh_login_status); this.router.navigate([this.ar.snapshot.queryParams.returnUrl || '/']); } }); @@ -117,7 +117,7 @@ export class EAUserService extends BaseService { if (res?.token) { this.tokenSrv.set({ token: res.token }); this.doAfterLogin(); - this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/'); + // this.eventSrv.event.emit(eventConf.reflesh_login_status, this.ar.snapshot.queryParams.returnUrl || '/'); } }); } diff --git a/src/app/shared/services/core/cache.service.ts b/src/app/shared/services/core/cache.service.ts index 996eed97..7d715525 100644 --- a/src/app/shared/services/core/cache.service.ts +++ b/src/app/shared/services/core/cache.service.ts @@ -11,19 +11,19 @@ import { cacheConf } from '@conf/cache.conf'; import { CacheService } from '@delon/cache'; import { BehaviorSubject } from 'rxjs'; import { distinctUntilChanged } from 'rxjs/operators'; + import { ICacheObj } from '../../interfaces/core/i-cache-obj'; import { EADateUtil } from '../../utils'; -import { EAEncryptUtil } from '../../utils/encrypt.util'; @Injectable({ - providedIn: 'root', + providedIn: 'root' }) export class EACacheService { // 监听最后操作时间值变化 private listen$ = new BehaviorSubject(0); private listen = this.listen$.asObservable(); constructor(private service: CacheService) { - this.listen.pipe(distinctUntilChanged()).subscribe((res) => { + this.listen.pipe(distinctUntilChanged()).subscribe(res => { this.set(cacheConf.last_operation_time, res); }); } @@ -44,11 +44,11 @@ export class EACacheService { pd: new Date().getTime(), data, vld, - encrypt, + encrypt }; if (encrypt) { // 加密 - cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data)); + // cahceObj.data = EAEncryptUtil.encryptByEnAES(JSON.stringify(data)); } this.service.set(key, cahceObj); // 更新系统最后操作时间 @@ -86,10 +86,11 @@ export class EACacheService { // 判断是否加密 if (cacheObj.encrypt) { - const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data); + // const encryptJson = EAEncryptUtil.deencryptByDeAES(cacheObj.data); // 更新系统最后操作时间 this.refleshLastOperationTime(); - return JSON.parse(encryptJson); + // return JSON.parse(encryptJson); + return; } // 更新系统最后操作时间 diff --git a/src/app/shared/services/core/event.service.ts b/src/app/shared/services/core/event.service.ts index a05a5b7e..91efba61 100644 --- a/src/app/shared/services/core/event.service.ts +++ b/src/app/shared/services/core/event.service.ts @@ -12,8 +12,6 @@ import * as EventEmitter from 'eventemitter3'; providedIn: 'root', }) export class EAEventService { - event: EventEmitter; constructor() { - this.event = new EventEmitter(); } } diff --git a/src/app/shared/shared-zorro.module.ts b/src/app/shared/shared-zorro.module.ts index a3bc7c29..794dc59c 100644 --- a/src/app/shared/shared-zorro.module.ts +++ b/src/app/shared/shared-zorro.module.ts @@ -3,12 +3,14 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; +import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzSelectModule } from 'ng-zorro-antd/select'; +import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzTableModule } from 'ng-zorro-antd/table'; export const SHARED_ZORRO_MODULES = [ @@ -23,5 +25,7 @@ export const SHARED_ZORRO_MODULES = [ NzSelectModule, NzDatePickerModule, NzCardModule, - NzIconModule + NzIconModule, + NzSpinModule, + NzDividerModule, ]; diff --git a/src/assets/mocks/menu-data.json b/src/assets/mocks/menu-data.json index dad1d744..7037444d 100644 --- a/src/assets/mocks/menu-data.json +++ b/src/assets/mocks/menu-data.json @@ -1,22 +1,32 @@ { "menu": [ { - "text": "主导航", - "group": true, + "text": "样例", "hideInBreadcrumb": true, "children": [ { - "text": "DEMO页面", + "text": "仪表盘", "icon": "anticon anticon-dashboard", "link": "/dashboard" }, { - "text": "快捷菜单", - "icon": "anticon anticon-rocket", - "shortcutRoot": true, - "children": [] + "text": "样例", + "icon": "anticon anticon-dashboard", + "group": true, + "children": [ + { + "text": "Zorro案例", + "icon": "anticon anticon-dashboard", + "link": "/demo/zorro" + }, + { + "text": "Alain案例", + "icon": "anticon anticon-dashboard", + "link": "/demo/alain" + } + ] } ] } ] -} +} \ No newline at end of file diff --git a/src/styles.less b/src/styles.less index b2f747e8..de0c513b 100644 --- a/src/styles.less +++ b/src/styles.less @@ -5,3 +5,9 @@ @import './styles/index'; @import './styles/theme'; + + +// .page-header { +// margin-left: -24px; +// margin-top : -24px; +// } \ No newline at end of file