fix: rule form

src/app/routes/record/form/form.component.ts

@@ -35,7 +35,7 @@ export class RecordFormComponent implements OnInit {
       this.form = this.record;
       this.form.date = toDate(this.record.date);
     }
-    this.changeCategroy(this.form.type, false);
+    this.changeCategroy(this.form.type);
   }
 
   save(value: any) {
@@ -53,7 +53,7 @@ export class RecordFormComponent implements OnInit {
     });
   }
 
-  changeCategroy(type: string, cleanCity = true) {
+  changeCategroy(type: string) {
     this.http.get('/api/categories', { transaction_type: type }).subscribe((res: any) => {
       if (res.code !== 0) {
         this.msgSrv.warning(res.message);

src/app/routes/settings/rules/form/form.component.ts

@@ -3,7 +3,8 @@ import { SFComponent, SFRadioWidgetSchema, SFSchema, SFSelectWidgetSchema, SFUIS
 import { _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalRef } from 'ng-zorro-antd/modal';
-import { map } from 'rxjs/operators';
+import { of, pipe } from 'rxjs';
+import { delay, map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-settings-rules-form',
@@ -12,6 +13,7 @@ import { map } from 'rxjs/operators';
 export class SettingsRulesFormComponent {
   @ViewChild('sf', { static: false }) private sf: SFComponent;
   record: any = {};
+  selectRawData: any = {};
   schema: SFSchema = {
     properties: {
       name: { type: 'string', title: '名称' },
@@ -27,15 +29,20 @@ export class SettingsRulesFormComponent {
       then_transaction_type: {
         type: 'string',
         title: '分配交易类型',
-        enum: [
-          { value: 'expense', label: '支出' },
-          { value: 'income', label: '收入' },
-          { value: 'transfer', label: '转账' },
-        ],
         ui: {
           widget: 'radio',
           styleType: 'button',
           buttonStyle: 'solid',
+          asyncData: () =>
+            of([
+              { value: 'expense', label: '支出' },
+              { value: 'income', label: '收入' },
+              { value: 'transfer', label: '转账' },
+            ]).pipe(
+              delay(100),
+              tap(() => this.updateCategories(this.record.then_transaction_type || 'expense', this.record.then_category_id)),
+            ),
+          change: (i) => this.updateCategories(i, ''),
         } as SFRadioWidgetSchema,
         default: 'expense',
       },
@@ -44,23 +51,24 @@ export class SettingsRulesFormComponent {
         title: '分配支付帐户',
         ui: {
           widget: 'select',
-          asyncData: () => this.loadItems('/api/accounts', 'then_from_account_id'),
+          visibleIf: { then_transaction_type: ['expense', 'transfer'] },
+          asyncData: () => of(this.selectRawData.account_id).pipe(delay(200)),
         } as SFSelectWidgetSchema,
       },
       then_to_account_id: {
         type: 'string',
         title: '分配收款帐户',
         ui: {
           widget: 'select',
-          asyncData: () => this.loadItems('/api/accounts', 'then_to_account_id'),
+          visibleIf: { then_transaction_type: ['income', 'transfer'] },
+          asyncData: () => of(this.selectRawData.account_id).pipe(delay(200)),
         } as SFSelectWidgetSchema,
       },
       then_category_id: {
         type: 'string',
         title: '分配类别',
         ui: {
           widget: 'select',
-          asyncData: () => this.loadItems('/api/categories', 'then_category_id'),
         } as SFSelectWidgetSchema,
       },
       then_tags: {
@@ -70,7 +78,8 @@ export class SettingsRulesFormComponent {
         ui: {
           widget: 'select',
           mode: 'tags',
-          asyncData: () => this.loadItems('/api/tags', 'then_tags'),
+          visibleIf: { then_transaction_type: ['income', 'expense'] },
+          asyncData: () => of(this.selectRawData.tags).pipe(delay(200)),
         } as SFSelectWidgetSchema,
       },
       sort: { type: 'number', title: '排序', minimum: 0, maximum: 99, default: 99 },
@@ -145,6 +154,13 @@ export class SettingsRulesFormComponent {
     );
   }
 
+  updateCategories(type: string, category_id: number): void {
+    const property = this.sf.getProperty('/then_category_id');
+    const items = this.selectRawData.category_id.filter((item: any) => item.transaction_type === type);
+    property.schema.enum = items;
+    property.widget.reset(category_id || items[0]);
+  }
+
   close() {
     this.modal.destroy();
   }

src/app/routes/settings/rules/rules.component.ts

@@ -13,6 +13,7 @@ export class SettingsRulesComponent implements OnInit {
   loading = true;
   pagination: {};
   list: any[] = [];
+  selectRawData: any = {};
   q = {
     page: 1,
     name: '',
@@ -76,6 +77,9 @@ export class SettingsRulesComponent implements OnInit {
 
   ngOnInit() {
     this.getData();
+    this.loadSelect('/api/accounts', 'account_id');
+    this.loadSelect('/api/categories', 'category_id');
+    this.loadSelect('/api/tags', 'tags');
   }
 
   getData(): void {
@@ -88,14 +92,8 @@ export class SettingsRulesComponent implements OnInit {
   }
 
   form(record: { id?: number } = {}): void {
-    this.modal.create(SettingsRulesFormComponent, { record }, { size: 'md' }).subscribe((res) => {
-      if (record.id) {
-        // record = res;
-        this.getData();
-      } else {
-        this.list.splice(0, 0, res);
-        this.list = [...this.list];
-      }
+    this.modal.create(SettingsRulesFormComponent, { record, selectRawData: this.selectRawData }, { size: 'md' }).subscribe((res) => {
+      this.getData();
     });
   }
 
@@ -133,6 +131,26 @@ export class SettingsRulesComponent implements OnInit {
     });
   }
 
+  loadSelect(url: string, key: string) {
+    this.http.get(url).subscribe((res: any) => {
+      if (res.data) {
+        if (key === 'tags') {
+          this.selectRawData[key] = res.data.items.map((item: any) => ({ value: item.name, label: item.name }));
+        } else if (key === 'transaction_type') {
+          this.selectRawData[key] = res.data.map((item: any) => ({ value: item.type, label: item.name }));
+        } else if (key === 'category_id') {
+          this.selectRawData[key] = res.data.items.map((item: any) => ({
+            value: item.id,
+            label: item.name,
+            transaction_type: item.transaction_type,
+          }));
+        } else {
+          this.selectRawData[key] = res.data.items.map((item: any) => ({ value: item.id, label: item.name }));
+        }
+      }
+    });
+  }
+
   submit(value: any): void {
     this.q.name = value.name;
     this.getData();

src/assets/alain-default.less

@@ -3361,35 +3361,6 @@ this.tinycolor = tinycolor;
 [data-theme='dark'] :host ::ng-deep .desc {
   color: rgba(255, 255, 255, 0.45);
 }
-:host ::ng-deep .icon-group i {
-  color: rgba(0, 0, 0, 0.45);
-}
-:host ::ng-deep .icon-group i:hover {
-  color: rgba(0, 0, 0, 0.65);
-}
-:host ::ng-deep .rank-list li .number {
-  background-color: #f5f5f5;
-  border-radius: 20px;
-}
-:host ::ng-deep .rank-list li .number.active {
-  color: #fff;
-  background-color: #314659;
-}
-:host ::ng-deep .sales-extra a:hover {
-  color: @primary-color;
-}
-:host ::ng-deep .sales-extra a.currentDate {
-  color: @primary-color;
-}
-:host ::ng-deep .offline-card .ant-tabs-bar {
-  border-bottom: none;
-}
-:host ::ng-deep .offline-card .ant-tabs-tab-active h4 {
-  color: @primary-color;
-}
-:host ::ng-deep .trend-text {
-  color: rgba(0, 0, 0, 0.85);
-}
 :host ::ng-deep .ant-tabs .ant-tabs-bar {
   border-bottom: 0;
 }