edit

src/app/routes/ticket-management/components/invoice-requested/update-address-modal/update-address-modal.component.html

@@ -0,0 +1 @@
+<sf #sf [schema]="schema" [ui]="{ '*': { spanLabelFixed: 110, span:24 } }" [compact]="true" [button]="'none'"></sf>

src/app/routes/ticket-management/components/invoice-requested/update-address-modal/update-address-modal.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { SFCascaderWidgetSchema, SFComponent, SFSchema } from '@delon/form';
+import { TicketService } from '../../../services/ticket.service';
+
+@Component({
+  selector: 'app-update-address-modal',
+  templateUrl: './update-address-modal.component.html',
+  styleUrls: ['./update-address-modal.component.less']
+})
+export class UpdateAddressModalComponent implements OnInit {
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  schema: SFSchema = this.initSF();
+
+  constructor(public service: TicketService) {}
+
+  ngOnInit(): void {}
+
+  private initSF(): SFSchema {
+    return {
+      properties: {
+        reciname: {
+          type: 'string',
+          title: '收件人姓名',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        recitel: {
+          type: 'string',
+          title: '联系电话',
+          format: 'mobile',
+          minLength: 1,
+          maxLength: 11,
+          ui: {
+            placeholder: '请输入',
+            errors: { required: '请输入注册电话', format: '手机号格式错误' }
+          }
+        },
+        provinceCode: { type: 'string', ui: { hidden: true } },
+        provinceName: { type: 'string', ui: { hidden: true } },
+        cityCode: { type: 'string', ui: { hidden: true } },
+        cityName: { type: 'string', ui: { hidden: true } },
+        areaCode: { type: 'string', ui: { hidden: true } },
+        areaName: { type: 'string', ui: { hidden: true } },
+        enterpriseAddressCode: {
+          type: 'number',
+          title: '收件人地区',
+          ui: {
+            grid: { xxl: 13, xl: 18, lg: 24, md: 24 },
+            widget: 'cascader',
+            valueProperty: 'regionCode',
+            placeholder: '请选择',
+            labelProperty: 'name',
+            asyncData: (node: any, index: any) => {
+              return new Promise(resolve => {
+                this.getRegionDetailByCode(node?.regionCode || '').subscribe(
+                  res => {
+                    node.children = res.map((item: any) => ({ ...item, isLeaf: index === 1 }));
+                  },
+                  _ => {},
+                  () => {
+                    resolve();
+                  }
+                );
+              });
+            },
+            selectionChange: (node: any[]) => {
+              console.log(node);
+              
+              if (node?.length > 0) {
+                this.sf.setValue('/provinceCode', node[0]?.regionCode);
+                this.sf.setValue('/provinceName', node[0]?.name);
+                this.sf.setValue('/cityCode', node[1]?.regionCode);
+                this.sf.setValue('/cityName', node[1]?.name);
+                this.sf.setValue('/areaCode', node[2]?.regionCode);
+                this.sf.setValue('/areaName', node[2]?.name);
+              }
+            }
+          } as SFCascaderWidgetSchema
+        },
+        reciaddr: {
+          type: 'string',
+          title: '详细地址',
+          ui: {
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        }
+      },
+      required: ['reciname', 'recitel', 'reciaddr', 'enterpriseAddressCode']
+    };
+  }
+
+  /*
+   * 根据地区code查询地区列表
+   */
+  getRegionDetailByCode(regionCode: any) {
+    return this.service.request(this.service.$api_get_region_by_code, { regionCode });
+  }
+}