[web-app] ng-alain模版工程初始化

web-app/src/app/shared/components/README.md

@@ -0,0 +1,2 @@
+### 公共通用小组件
+

web-app/src/app/shared/index.ts

@@ -0,0 +1,8 @@
+// Components
+
+// Utils
+export * from './utils/yuan';
+
+// Module
+export * from './shared.module';
+export * from './json-schema/json-schema.module';

web-app/src/app/shared/json-schema/README.md

@@ -0,0 +1,3 @@
+# 建议统一在 `widgets` 目录下自定义小部件
+
+> 注：@delon/form 本身提供 nz-zorro-antd 数据录入组件的全部实现，以及若干第三方组件的代码，可从[widgets-third](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third)中获取并放置 `widgets` 目录下注册即可。

web-app/src/app/shared/json-schema/json-schema.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+
+import { SharedModule } from '../shared.module';
+import { TestWidget } from './test/test.widget';
+
+export const SCHEMA_THIRDS_COMPONENTS = [TestWidget];
+
+@NgModule({
+  declarations: SCHEMA_THIRDS_COMPONENTS,
+  imports: [SharedModule, DelonFormModule.forRoot()],
+  exports: SCHEMA_THIRDS_COMPONENTS
+})
+export class JsonSchemaModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(TestWidget.KEY, TestWidget);
+  }
+}

web-app/src/app/shared/json-schema/test/test.widget.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ControlWidget } from '@delon/form';
+
+@Component({
+  selector: 'test',
+  template: `
+    <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
+      test widget
+    </sf-item-wrap>
+  `,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TestWidget extends ControlWidget implements OnInit {
+  static readonly KEY = 'test';
+
+  ngOnInit(): void {
+    console.warn('init test widget');
+  }
+}

web-app/src/app/shared/shared-delon.module.ts

@@ -0,0 +1,7 @@
+import { PageHeaderModule } from '@delon/abc/page-header';
+import { ResultModule } from '@delon/abc/result';
+import { SEModule } from '@delon/abc/se';
+import { STModule } from '@delon/abc/st';
+import { SVModule } from '@delon/abc/sv';
+
+export const SHARED_DELON_MODULES = [PageHeaderModule, STModule, SEModule, SVModule, ResultModule];

web-app/src/app/shared/shared-zorro.module.ts

@@ -0,0 +1,45 @@
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+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 { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+
+export const SHARED_ZORRO_MODULES = [
+  NzFormModule,
+  NzGridModule,
+  NzButtonModule,
+  NzInputModule,
+  NzInputNumberModule,
+  NzAlertModule,
+  NzProgressModule,
+  NzSelectModule,
+  NzAvatarModule,
+  NzCardModule,
+  NzDropDownModule,
+  NzPopconfirmModule,
+  NzTableModule,
+  NzPopoverModule,
+  NzDrawerModule,
+  NzModalModule,
+  NzTabsModule,
+  NzToolTipModule,
+  NzIconModule,
+  NzCheckboxModule,
+  NzSpinModule,
+];

web-app/src/app/shared/shared.module.ts

@@ -0,0 +1,61 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { AlainThemeModule } from '@delon/theme';
+import { DelonACLModule } from '@delon/acl';
+import { DelonFormModule } from '@delon/form';
+
+import { SHARED_DELON_MODULES } from './shared-delon.module';
+import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
+
+// #region third libs
+
+const THIRDMODULES: Array<Type<void>> = [];
+
+// #endregion
+
+// #region your components & directives
+
+const COMPONENTS: Array<Type<void>> = [];
+const DIRECTIVES: Array<Type<void>> = [];
+
+// #endregion
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    ReactiveFormsModule,
+    AlainThemeModule.forChild(),
+    DelonACLModule,
+    DelonFormModule,
+    ...SHARED_DELON_MODULES,
+    ...SHARED_ZORRO_MODULES,
+    // third libs
+    ...THIRDMODULES
+  ],
+  declarations: [
+    // your components
+    ...COMPONENTS,
+    ...DIRECTIVES
+  ],
+  exports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    AlainThemeModule,
+    DelonACLModule,
+    DelonFormModule,
+    ...SHARED_DELON_MODULES,
+    ...SHARED_ZORRO_MODULES,
+    // third libs
+    ...THIRDMODULES,
+    // your components
+    ...COMPONENTS,
+    ...DIRECTIVES
+  ]
+})
+export class SharedModule { }

web-app/src/app/shared/st-widget/st-widget.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+
+// import { STWidgetRegistry } from '@delon/abc/st';
+import { SharedModule } from '../shared.module';
+
+export const STWIDGET_COMPONENTS = [];
+
+@NgModule({
+  declarations: STWIDGET_COMPONENTS,
+  imports: [SharedModule],
+  exports: [...STWIDGET_COMPONENTS]
+})
+export class STWidgetModule {
+  // constructor(widgetRegistry: STWidgetRegistry) {
+  //   widgetRegistry.register(STImgWidget.KEY, STImgWidget);
+  // }
+}

web-app/src/app/shared/utils/yuan.ts

@@ -0,0 +1,11 @@
+/**
+ * 转化成RMB元字符串
+ *
+ * @param digits 当数字类型时，允许指定小数点后数字的个数，默认2位小数
+ */
+export function yuan(value: number | string, digits: number = 2): string {
+  if (typeof value === 'number') {
+    value = value.toFixed(digits);
+  }
+  return `&yen ${value}`;
+}