基本信息

src/app/home/basic-info/unit/unit.component.html

@@ -1,2 +1,68 @@
-<button (click)="next()">下一页</button>
-<input placeholder="label" value="value">
+<div class="orbox" id="orbox">
+    <div class="topbox">
+        <!-- <div class="lefttop">
+          <span>菜单列表</span>
+          
+        </div> -->
+        <div class="righttop">
+            <!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+            <nz-form-item>
+              <nz-form-control>
+                <nz-input-group nzPrefixIcon="search">
+                  <input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/>
+                </nz-input-group>
+              </nz-form-control>
+              <button style="display: none;" type="submit"></button>
+            </nz-form-item>
+          </form> -->
+            <nz-input-group nzPrefixIcon="search">
+                <input type="text" nz-input placeholder="请输入单位" />
+            </nz-input-group>
+            <nz-input-group nzPrefixIcon="search">
+                <input type="text" nz-input placeholder="请输入单位" />
+            </nz-input-group>
+            <nz-input-group nzPrefixIcon="search">
+                <input type="text" nz-input placeholder="请输入单位" />
+            </nz-input-group>
+        </div>
+        <div>
+            <button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>查询</button>
+            <button nz-button nzType="primary"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>重置</button>
+        </div>
+        <div>
+
+        </div>
+    </div>
+    <nz-table #basicTable [nzData]="listOfData">
+        <thead>
+          <tr>
+            <th>单位名称</th>
+            <th>信息完整度</th>
+            <th>所属机构</th>
+            <th>单位级别</th>
+            <th>使用性质</th>
+            <th>修改时间</th>
+            <th>单位地址</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of basicTable.data">
+            <td>{{ data.name }}</td>
+            <td>{{ data.integrity }}</td>
+            <td>{{ data.organization }}</td>
+            <td>{{ data.nature }}</td>
+            <td>{{ data.time }}</td>
+            <td>{{ data.addr }}</td>
+            <td>{{ data.state }}</td>
+            <td>
+              <a>Action 一 {{ data.name }}</a>
+              
+            </td>
+          </tr>
+        </tbody>
+      </nz-table>
+    <!-- <button (click)="next()">下一页</button>
+<input placeholder="label" value="value"> -->
+</div>

src/app/home/basic-info/unit/unit.component.scss

@@ -1,6 +1,80 @@
-p{
-    color: black;
-}
-input{
-    color: red;
-}
+.orbox {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 20px;
+    font-size: 15px;
+  }
+  
+  .topbox {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    .lefttop {
+      span:nth-child(1) {
+        color: #000D21;
+        margin-right: 16px;
+      }
+  
+      span:nth-child(2) {
+        color: rgba(36, 36, 36, 0.24);
+      }
+    }
+  
+    .righttop {
+      height: 36px;
+      display: flex;
+  
+      button {
+        margin-left: 16px;
+      }
+  
+      nz-input-group {
+        height: 32px;
+      }
+    }
+  }
+  
+  .treeTitle {
+    width: 700px;
+    height: 36px;
+    line-height: 36px;
+    display: flex;
+    justify-content: space-between;
+    color: #000D21;
+    box-sizing: border-box;
+    padding-left: 30px;
+    padding-right: 180px;
+    background: rgba(145, 204, 255, 0.2);
+    margin: 12px 0;
+  }
+  
+  .nodebox {
+    font-size: 15px;
+  
+  }
+  
+  .operation {
+    position: absolute;
+    right: 0;
+  
+    span {
+      margin-left: 40px;
+    }
+  
+    span:nth-child(1),
+    span:nth-child(2),
+    span:nth-child(3) {
+      color: #2399FF;
+    }
+  
+    .grey{
+      color: rgba(0, 13, 33, 0.48)!important;
+    }
+  }
+  

src/app/home/basic-info/unit/unit.component.ts

@@ -1,17 +1,52 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-
+interface Person {
+  id: string;
+  name: string;
+  integrity: number;
+  organization: string;
+  level: string;
+  nature:string;
+  time:string;
+  addr:string;
+  state:string
+}
 @Component({
   selector: 'app-unit',
   templateUrl: './unit.component.html',
   styleUrls: ['./unit.component.scss']
 })
 export class UnitComponent implements OnInit {
-
+  listOfData: Person[] = [
+    {
+      id: '1',
+      name: 'John Brown',
+      integrity: 32,
+      organization: 'New York No. 1 Lake Park',
+      level:'重点单位',
+      nature:'会议中心',
+      time:'time',
+      addr:'单位地址',
+      state:''
+    }
+    // {
+    //   id: '2',
+    //   name: 'Jim Green',
+    //   integrity: 42,
+    //   organization: 'London No. 1 Lake Park'
+    // },
+    // {
+    //   id: '3',
+    //   name: 'Joe Black',
+    //   integrity: 32,
+    //   organization: 'Sidney No. 1 Lake Park'
+    // }
+  ];
   constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
+  searchValue = '';
   next() {
     this.router.navigate(['/basicInfo/unit/details']);
   }

src/app/home/home.module.ts

@@ -13,7 +13,9 @@ import { RoleComponent } from './system-management/role/role.component';
 import { OrComponent } from './system-management/or/or.component';
 import { UnitComponent } from './basic-info/unit/unit.component';
 import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component';
-
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzTableModule } from 'ng-zorro-antd/table';
 @NgModule({
   declarations: [
     NavComponent,
@@ -30,7 +32,10 @@ import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.com
   imports: [
     CommonModule,
     HomeRoutingModule,
-    NzLayoutModule
+    NzLayoutModule,
+    NzDropDownModule,
+    NzInputModule,
+    NzTableModule
   ]
 })
 export class HomeModule { }