详细地址增加科室地点列表

src/app/components/incidentManagement/incident-create/incident-create.component.html

@@ -2,7 +2,7 @@
  * @Author: seimin
  * @Date: 2024-10-24 13:47:40
  * @LastEditors: seimin
- * @LastEditTime: 2024-10-25 15:47:50
+ * @LastEditTime: 2024-12-04 15:22:09
  * @Description: 创建
 -->
 <!-- 新建工单 -->
@@ -92,7 +92,18 @@
                     </nz-select>
                   </div>
                   <div class="col flex7">
-                    <input nz-input placeholder="请填写详细地址" [(ngModel)]="incidentModel.houseNumber" />
+                    <input nz-input placeholder="请填写详细地址" [(ngModel)]="incidentModel.houseNumber" (focus)="focusAddress()" (blur)="blurAddress()" />
+                    <div class="addressList" *ngIf="isShowAddressList">
+                      <ng-container *ngIf="!addressLoading && addressList.length">
+                        <div class="addressItem ellipsis-oneline" *ngFor="let item of addressList" [title]="item.name" (click)="selectAddress(item.name)">{{item.name}}</div>
+                      </ng-container>
+                      <div *ngIf="!addressLoading && !addressList.length" class="w100 h100 display_flex justify-content_flex-center align-items_center">
+                        <nz-empty></nz-empty>
+                      </div>
+                      <div *ngIf="addressLoading" class="w100 h100 display_flex justify-content_flex-center align-items_center">
+                        <nz-spin nzSimple></nz-spin>
+                      </div>
+                    </div>
                   </div>
                 </div>
 

src/app/components/incidentManagement/incident-create/incident-create.component.less

@@ -2242,6 +2242,7 @@
                   display: flex;
                   align-items: center;
                   word-break: break-all;
+                  position: relative;
                   &.alignItemsStart{
                     align-items: flex-start;
                   }
@@ -2263,6 +2264,25 @@
                   &.flex7{
                     flex: 7;
                   }
+                  .addressList{
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    width: 100%;
+                    height: 256px;
+                    z-index: 2;
+                    background: #fff;
+                    border: 1px solid #d9d9d9;
+                    border-radius: 4px;
+                    overflow: hidden auto;
+                    .addressItem{
+                      padding: 5px 12px;
+                      cursor: pointer;
+                      &:hover{
+                        background-color: #e9f7e9;
+                      }
+                    }
+                  }
                   .ant-input-clear-icon{
                     align-self: center;
                     font-style: normal;

src/app/components/incidentManagement/incident-create/incident-create.component.ts

@@ -1456,4 +1456,49 @@ export class IncidentCreateComponent implements OnInit {
   newOrderCancel() {
     this.closeModelHs.emit(JSON.stringify({ show: false }));//emits(向上弹射)事件
   }
+
+  // 详细地址获取焦点
+  isShowAddressList:boolean = false;
+  focusAddress(){
+    this.isShowAddressList = true;
+    this.getAddressList();
+  }
+
+  // 详细地址失去焦点
+  blurAddress(){
+    setTimeout(() => {
+      this.isShowAddressList = false;
+    }, 100)
+  }
+
+  // 选择地址
+  selectAddress(name){
+    this.incidentModel.houseNumber = name;
+  }
+
+  // 获取科室地点列表
+  addressList:any[] = [];
+  addressLoading:boolean = false;
+  getAddressList() {
+    if(!this.incidentModel.hosId){
+      this.addressList = [];
+      return;
+    }
+    let postData = {
+      idx: 0,
+      sum: 99999,
+      qrCode: {
+        hosId: this.incidentModel.hosId,
+      }
+    };
+    this.addressLoading = true;
+    this.mainService.getFetchDataList("simple/data", "qrCode", postData).subscribe(result=>{
+      this.addressLoading = false;
+      if(result.status == 200){
+        this.addressList = result.list || [];
+      }else{
+        this.addressList = [];
+      }
+    });
+  }
 }

src/app/views/fuwutai/fuwutai.component.html

@@ -1485,7 +1485,18 @@
                       </nz-select>
                     </div>
                     <div class="col flex7">
-                      <input nz-input placeholder="请填写详细地址" [(ngModel)]="incidentModel.houseNumber" />
+                      <input nz-input placeholder="请填写详细地址" [(ngModel)]="incidentModel.houseNumber" (focus)="focusAddress()" (blur)="blurAddress()" />
+                      <div class="addressList" *ngIf="isShowAddressList">
+                        <ng-container *ngIf="!addressLoading && addressList.length">
+                          <div class="addressItem ellipsis-oneline" *ngFor="let item of addressList" [title]="item.name" (click)="selectAddress(item.name)">{{item.name}}</div>
+                        </ng-container>
+                        <div *ngIf="!addressLoading && !addressList.length" class="w100 h100 display_flex justify-content_flex-center align-items_center">
+                          <nz-empty></nz-empty>
+                        </div>
+                        <div *ngIf="addressLoading" class="w100 h100 display_flex justify-content_flex-center align-items_center">
+                          <nz-spin nzSimple></nz-spin>
+                        </div>
+                      </div>
                     </div>
                   </div>
 

src/app/views/fuwutai/fuwutai.component.less

@@ -2277,6 +2277,7 @@
                     display: flex;
                     align-items: center;
                     word-break: break-all;
+                    position: relative;
                     &.alignItemsStart{
                       align-items: flex-start;
                     }
@@ -2298,6 +2299,25 @@
                     &.flex7{
                       flex: 7;
                     }
+                    .addressList{
+                      position: absolute;
+                      top: 100%;
+                      left: 0;
+                      width: 100%;
+                      height: 256px;
+                      z-index: 2;
+                      background: #fff;
+                      border: 1px solid #d9d9d9;
+                      border-radius: 4px;
+                      overflow: hidden auto;
+                      .addressItem{
+                        padding: 5px 12px;
+                        cursor: pointer;
+                        &:hover{
+                          background-color: #e9f7e9;
+                        }
+                      }
+                    }
                     .ant-input-clear-icon{
                       align-self: center;
                       font-style: normal;

src/app/views/fuwutai/fuwutai.component.ts

@@ -5299,4 +5299,49 @@ export class FuwutaiComponent implements OnInit {
   closeCall(e) {
     this.callShow = e.show;
   }
+
+  // 详细地址获取焦点
+  isShowAddressList:boolean = false;
+  focusAddress(){
+    this.isShowAddressList = true;
+    this.getAddressList();
+  }
+
+  // 详细地址失去焦点
+  blurAddress(){
+    setTimeout(() => {
+      this.isShowAddressList = false;
+    }, 100)
+  }
+
+  // 选择地址
+  selectAddress(name){
+    this.incidentModel.houseNumber = name;
+  }
+
+  // 获取科室地点列表
+  addressList:any[] = [];
+  addressLoading:boolean = false;
+  getAddressList() {
+    if(!this.incidentModel.hosId){
+      this.addressList = [];
+      return;
+    }
+    let postData = {
+      idx: 0,
+      sum: 99999,
+      qrCode: {
+        hosId: this.incidentModel.hosId,
+      }
+    };
+    this.addressLoading = true;
+    this.mainService.getFetchDataList("simple/data", "qrCode", postData).subscribe(result=>{
+      this.addressLoading = false;
+      if(result.status == 200){
+        this.addressList = result.list || [];
+      }else{
+        this.addressList = [];
+      }
+    });
+  }
 }

src/common.less

@@ -34,6 +34,9 @@
 .w100 {
   width: 100% !important;
 }
+.h100 {
+  height: 100% !important;
+}
 .w135 {
   width: 135px !important;
 }