CSS

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { PageOrdersComponent } from './pages/page-home/page-orders/page-orders.c
 import { PageSupplierComponent } from './pages/page-home/page-supplier/page-supplier.component';
 import { PageShipperComponent } from './pages/page-home/page-shipper/page-shipper.component';
 import { ShipperEditerComponent } from './_hookid/shipper-editer/shipper-editer.component';
+import { PageItemComponent } from './pages/page-home/page-item/page-item.component';
 
 
 const routes: Routes = [
@@ -19,6 +20,7 @@ const routes: Routes = [
     path: '', component: PageHomeComponent, children: [
       { path: 'dashboard', component: PageDashboardComponent },
       { path: 'orders', component: PageOrdersComponent },
+      { path: 'items', component: PageItemComponent },
       {
         path: 'supplier', component: PageSupplierComponent, children: [
           {path:':id',component:NoneComponent}

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { ShipperComponent } from './_component/shipper/shipper.component';
 import { ModalOrderEditerComponent } from './_component/modal-order-editer/modal-order-editer.component';
 import { NoneComponent } from './_component/none/none.component';
 import { FormateOrderDataListComponent } from './_component/modal-order-editer/formate-order-data-list/formate-order-data-list.component';
+import { PageItemComponent } from './pages/page-home/page-item/page-item.component';
 registerLocaleData(zh);
 
 
@@ -69,6 +70,7 @@ registerLocaleData(zh);
     ModalOrderEditerComponent,
     NoneComponent,
     FormateOrderDataListComponent,
+    PageItemComponent,
 
 
   ],

src/app/pages/page-home/page-home.component.html

-<nz-layout style="min-width: 1024px;">
+<nz-layout style="min-width: 1024px;height: 100%;">
 
-    <nz-header>
-      <div class="logo"></div>
-      <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
-        <li nz-menu-item nzSelected>nav 1</li>
-        <li nz-menu-item>nav 2</li>
-        <li nz-menu-item>nav 3</li>
-      </ul>
-    </nz-header>
+  <nz-header>
+    <div class="logo"></div>
+    <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
+      <li nz-menu-item nzSelected>nav 1</li>
+      <li nz-menu-item>nav 2</li>
+      <li nz-menu-item>nav 3</li>
+    </ul>
+  </nz-header>
 
-    <nz-layout>
-      <nz-sider nzWidth="200px" nzTheme="light">
-        <ul nz-menu nzMode="inline" class="sider-menu">
+  <nz-layout>
+    <nz-sider nzWidth="200px" nzTheme="light">
+      <ul nz-menu nzMode="inline" class="sider-menu">
 
 
-            <li nz-menu-item>
-                <a routerLink='/dashboard'>
-                    <i nz-icon nzType="dashboard"></i>
-                    <span>Dashboard</span>
-                </a>
-            </li>
+        <li nz-menu-item>
+          <a routerLink='/dashboard'>
+            <i nz-icon nzType="dashboard"></i>
+            <span>Dashboard</span>
+          </a>
+        </li>
 
-            <li nz-submenu nzIcon="user" nzTitle="订单">
-              <ul>
-                <a routerLink='/orders'><li nz-menu-item >列表</li></a>
-                <a routerLink='/supplier'><li nz-menu-item >供应商</li></a>
-                <a routerLink='/shipper'><li nz-menu-item >物流公司</li></a>
-              </ul>
-            </li>
-          <li nz-submenu nzTitle="销售" nzIcon="laptop">
-            <ul>
+        <li nz-menu-item>
+          <a routerLink='/items'>
+            <i nz-icon nzType="dashboard"></i>
+            <span>商品</span>
+          </a>
+        </li>
+        <li nz-submenu nzIcon="user" nzTitle="订单">
+          <ul>
+            <a routerLink='/orders'>
               <li nz-menu-item>列表</li>
-              <li nz-menu-item>客户</li>
-            </ul>
-          </li>
-          <li nz-submenu nzTitle="财务" nzIcon="notification">
-            <ul>
-              <li nz-menu-item>总览</li>
-              <li nz-menu-item>收入</li>
-              <li nz-menu-item>支出</li>
-            </ul>
-          </li>
-          <li nz-submenu nzTitle="设置" nzIcon="notification">
-            <ul>
-              <li nz-menu-item>账户</li>
-              <li nz-menu-item>本地</li>
-            </ul>
-          </li>
-        </ul>
-      </nz-sider>
+            </a>
+            <a routerLink='/supplier'>
+              <li nz-menu-item>供应商</li>
+            </a>
+            <a routerLink='/shipper'>
+              <li nz-menu-item>物流公司</li>
+            </a>
+          </ul>
+        </li>
+        <li nz-submenu nzTitle="销售" nzIcon="laptop">
+          <ul>
+            <li nz-menu-item>列表</li>
+            <li nz-menu-item>客户</li>
+          </ul>
+        </li>
+        <li nz-submenu nzTitle="财务" nzIcon="notification">
+          <ul>
+            <li nz-menu-item>总览</li>
+            <li nz-menu-item>收入</li>
+            <li nz-menu-item>支出</li>
+          </ul>
+        </li>
+        <li nz-submenu nzTitle="设置" nzIcon="notification">
+          <ul>
+            <li nz-menu-item>账户</li>
+            <li nz-menu-item>本地</li>
+          </ul>
+        </li>
+      </ul>
+    </nz-sider>
 
-      <nz-layout class="inner-layout">
-        <nz-breadcrumb>
-          <nz-breadcrumb-item>Home</nz-breadcrumb-item>
-          <nz-breadcrumb-item>List</nz-breadcrumb-item>
-          <nz-breadcrumb-item>App</nz-breadcrumb-item>
-        </nz-breadcrumb>
-        <nz-content>
-            <router-outlet></router-outlet>
-        </nz-content>
-      </nz-layout>
+    <nz-layout class="inner-layout">
+      <nz-breadcrumb>
+        <nz-breadcrumb-item>Home</nz-breadcrumb-item>
+        <nz-breadcrumb-item>List</nz-breadcrumb-item>
+        <nz-breadcrumb-item>App</nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <nz-content style="height: 100%;">
+        <router-outlet></router-outlet>
+      </nz-content>
     </nz-layout>
   </nz-layout>
+</nz-layout>

src/app/pages/page-home/page-item/page-item.component.html

+<div style="display: flex;background-color: burlywood;height: 100%;">
+  <div style="flex:0 0 140px;">
+    filter
+  </div>
+
+  <div style="flex: 1 0 0;height:100%;background-color: blue;">
+    <div>
+      search
+    </div>
+    <div>
+      list
+    </div>
+  </div>
+
+</div>

src/app/pages/page-home/page-item/page-item.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageItemComponent } from './page-item.component';
+
+describe('PageItemComponent', () => {
+  let component: PageItemComponent;
+  let fixture: ComponentFixture<PageItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/page-home/page-item/page-item.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './page-item.component.html',
+  styleUrls: ['./page-item.component.css']
+})
+export class PageItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/page-home/page-orders/page-orders.component.html

@@ -81,6 +81,7 @@
 <nz-table nzSize="small" [nzData]="listdata" #borderedTable nzBordered style="overflow: hidden;">
   <thead>
     <tr>
+      <th>标志</th>
       <th>
         <div style="display: flex;">Date
         <button nzSize="small" style="margin-left: auto" nz-button (click)="sortFn()">
@@ -107,7 +108,8 @@
       <td>{{listdata|objectArrayCalc:'[box]'}}</td>
       <td>{{listdata|objectArrayCalc:'[shipping_cost]'}}</td>
       <td>
-        <span class="total">{{listdata|objectArrayCalc:'[total]'}}</span> / <span class="payment">{{listdata|objectArrayCalc:'[payment]'}}</span>
+        <span class="total">{{listdata|objectArrayCalc:'[total]'}}</span>
+         <!-- / <span class="payment">{{listdata|objectArrayCalc:'[payment]'}}</span> -->
   <!--      <span class="payment"> {{listdata|objectArrayCalc:'[payment]'}}</span> / <span class="total">{{listdata|objectArrayCalc:'[total]'}}</span></td>-->
       <td>{{listdata|objectArrayCalc:'[balance]'}}</td>
       <td> </td>
@@ -116,14 +118,17 @@
     </tr>
 
     <tr nz-typography [ngStyle]="{'color': i.state==1?'#eee':''}" *ngFor="let i of listdata|sort:[sortWay?'-create_date':'create_date']"  [ngClass]="{'isnew': i.isnew}">
+      <td>=</td>
       <td>{{i.create_date|date:"yyyy-MM-dd"}}</td>
       <td>{{i.supplier|supplier|async}}</td>
       <td>{{i.shipper|shipper|async}}</td>
       <td>{{i.box}}</td>
       <td>{{i.shipping_cost}}</td>
-      <td><span class="total bold">{{i.total?i.total:0}}</span>/<span class="payment">{{i.payment}}</span> </td>
+      <td><span class="total bold">{{i.total?i.total:0}}</span>
+        <!-- /<span class="payment">{{i.payment}}</span>  -->
+      </td>
       <td><i style="color:#f50" *ngIf="i.balance<0" nz-icon nzType="warning" nzTheme="outline"></i><span [ngStyle]="{'color': i.balance<0?'#f50':''}"><i nz-icon *ngIf="i.balance==0" [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>{{i.balance!=0?i.balance:''}}</span></td>
-      <td>{{i.state}}</td>
+      <td>{{i.state===1?"移除":'正常'}}</td>
       <td>{{i.mark}}</td>
       <td width=1 >
         <button nz-button nzType="primary"  nzShape="round" [routerLink]="['.']" [queryParams]="{'oid':i._id}" [queryParamsHandling]="'merge'" routerLinkActive="router-link-active" ><i nz-icon nzType="fullscreen" nzTheme="outline"></i></button>