上传文件UI

src/app/pages/plan/plan.component.html

@@ -22,7 +22,7 @@
   <!-- 左侧建筑 -->
 
   <!-- 新增/编辑左侧建筑弹窗 -->
-  <nz-modal [(nzVisible)]="isShowBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="isShowBuildingPop = false" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid'>
+  <nz-modal [(nzVisible)]="isShowBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="isShowBuildingPop = false" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid||modelType.invalid||upload.invalid'>
     <form nz-form #form='ngForm'>
       <nz-form-item>
         <nz-form-label [nzSpan]="6">名称</nz-form-label>
@@ -32,13 +32,20 @@
       </nz-form-item>
       <nz-form-item>
         <nz-form-label [nzSpan]="6">请选择模型类型</nz-form-label>
-        <nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项" style="background-color: none;">
+        <nz-form-control [nzSpan]="18" nzErrorTip="请选择必填项">
           <nz-select #modelType='ngModel' ngModel name="modelType" required>
             <nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
             <nz-option nzValue="environment" nzLabel="场景"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="6">上传文件</nz-form-label>
+        <nz-form-control [nzSpan]="18" nzErrorTip="请上传文件">
+          <a href="javascript:;" class="uploadBackGround"><input type="file" (change)='selectFile($event)' multiple #upload='ngModel' ngModel name="upload" required>上传文件<i nz-icon nzType="cloud-upload" nzTheme="outline"></i></a>
+          <p *ngIf="uploadList.length" style="font-size: 14px; text-align: left; max-height: 500px; overflow: hidden;">选择文件: <label *ngFor="let item of uploadList">{{item.name}}, </label></p>
+        </nz-form-control>
+      </nz-form-item>
     </form>
   </nz-modal>
   <!-- 新增/编辑左侧建筑弹窗 -->

src/app/pages/plan/plan.component.ts

@@ -75,6 +75,15 @@ export class PlanComponent implements OnInit {
   isShowBuildingPop: boolean = false; //显隐 新增/编辑左侧建筑弹窗
   isShowLeftBuilding: boolean = true; //显隐 建筑list
   toggleLeftBuilding(e) { this.isShowLeftBuilding = e }; //显隐 建筑list
+  
+  uploadList: File[] = []; //多选上传文件
+  //选择文件
+  selectFile(e) {
+    if (e.target.files.length) {
+      this.uploadList = [] //多选上传
+      Object.keys(e.target.files).forEach(item => { this.uploadList.push(e.target.files[item]) })
+    }
+  }
 
   //选择建筑
   selectLeftBuilding(e) {

src/app/pages/plan/publicPop.scss

@@ -1,30 +1,24 @@
-.keyMargin {
+//上传CAD弹窗 inputfile
+.uploadBackGround {
+  width: 125px;
+  padding: 0 25px;
+  height: 30px;
+  line-height: 30px;
+  position: relative;
+  cursor: pointer;
+  color: #0275e7;
+  font-size: 14px;
+  background: #fafafa;
+  border: 1px solid #0275e7;
+  border-radius: 5px;
+  overflow: hidden;
+  display: inline-block;
+}
+.uploadBackGround input {
+  position: absolute;
   width: 100%;
-  margin-bottom: 10px;
-  text-align: center;
-  .mat-form-field { width: 100%; }
-  //上传CAD弹窗 inputfile
-  .uploadBackGround {
-    width: 125px;
-    padding: 0 25px;
-    height: 30px;
-    line-height: 30px;
-    position: relative;
-    cursor: pointer;
-    color: #0275e7;
-    font-size: 14px;
-    background: #fafafa;
-    border: 1px solid #0275e7;
-    border-radius: 5px;
-    overflow: hidden;
-    display: inline-block;
-  }
-  .uploadBackGround input {
-    position: absolute;
-    width: 100%;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    cursor: pointer
-  }
+  right: 0;
+  top: 0;
+  opacity: 0;
+  cursor: pointer
 }

src/theme.less

@@ -6,7 +6,7 @@
 
 @border-color-base: #8aacce;
 
-@select-background: #002552;
+@select-background: transparent;
 
 .ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
 .ant-picker,