封装table

entry/src/main/ets/index.ets

-@Entry
-@Component
-export struct PageManagement {
-
-  @State fontColor: string = '#182431'
-  @State selectedFontColor: string = '#007DFF'
-  @State currentIndex: number = 0
-  private controller: TabsController = new TabsController()
-
-  @Builder TabBuilder(index: number, name: string) {
-    Column() {
-      Text(name)
-        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
-        .fontSize(16)
-        .fontWeight(this.currentIndex === index ? 500 : 400)
-        .lineHeight(22)
-        .margin({ top: 17, bottom: 7 })
-      Divider()
-        .strokeWidth(2)
-        .color('#0fa983')
-        .opacity(this.currentIndex === index ? 1 : 0)
-    }.width('100%')
-  }
-
-  build() {
-    Column() {
-      Column(){
-        TextInput({ placeholder: '请输入订单号查询' })
-          .backgroundColor("#fff").width('80%')
-      }.backgroundColor("#0fa983").width('100%').height(70)
-      Image($rawfile("parcelManagement/banner-.png")).width('100%')
-
-     Row(){
-       Flex({justifyContent:FlexAlign.SpaceEvenly}){
-         Row(){
-           Column(){
-             Image($rawfile("parcelManagement/qj.png")).width(30).margin({top:15})
-             Text("取件").margin({top:15}).fontWeight(600).fontSize(18)
-             Text("仓库取件").margin({bottom:15,top:15}).fontSize(13)
-           }
-         }.width("45%").backgroundColor('#f8fdfc').justifyContent(FlexAlign.Center)
-
-         Row(){
-           Column(){
-             Image($rawfile("parcelManagement/cx.png")).width(42).margin({top:15})
-             Text("取件").margin({top:15}).fontWeight(600).fontSize(18)
-             Text("仓库取件").margin({bottom:15,top:15}).fontSize(13)
-           }
-         }.width("45%").backgroundColor('#f8fdfc').justifyContent(FlexAlign.Center)
-       }
-     }.margin({top: 20})
-
-      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
-        TabContent() {
-          Column().width('100%').height('100%').backgroundColor('#00CB87')
-        }.tabBar(this.TabBuilder(0, '最新上架'))
-
-        TabContent() {
-          Column().width('100%').height('100%').backgroundColor('#007DFF')
-        }.tabBar(this.TabBuilder(1, '取件记录'))
-      }
-      .height(250)
-      .onChange((index: number) => {
-        this.currentIndex = index
-      })
-
-      Row() {
-        Row() {
-          Column(){
-            Row(){
-              Text("0")
-              Text("条")
-            }
-            Text("订单数量")
-          }
-        }.width('50%').justifyContent(FlexAlign.Center)
-        Row() {
-          Column(){
-              Text("待上架0条")
-              Text("未领取0条")
-              Text("已领取0条")
-          }
-        }.width('50%').justifyContent(FlexAlign.Center)
-      }
-    }
-    .width('100%')
-  }
-}
\ No newline at end of file

entry/src/main/ets/pages/package/Pick.ets

+import { BasicTable } from '../../view/BasicTable/BasicTable'
+import { TitleBar } from '../../view/title/TitleBar'
+@Entry
+@Component
+export struct Pick {
+
+
+  build(){
+    Column(){
+      Flex({direction:FlexDirection.Column}){
+        TitleBar({ title:"取件" })
+        TextInput({placeholder:"请输入取件码或者手机后四位查询"}).width('80%').padding({top:10,bottom:10})
+        Column(){
+          BasicTable({dataSource:[]})
+        }.flexGrow(1)
+        Row(){
+          Flex({justifyContent:FlexAlign.SpaceAround}){
+            Button("打印面单").width("15%")
+            Button("扫码取件").width("15%")
+            Button("手动取件").width("15%")
+          }
+        }.height(80)
+      }
+    }
+  }
+}
\ No newline at end of file

entry/src/main/ets/view/BasicTable/BasicTable.ets

+import { BasicColumn } from './table.type'
+
+@Component
+export struct BasicTable {
+  private columns: BasicColumn[];
+  private dataSource: any[];
+
+  @Builder renderList() {
+    Column() {
+      Row() {
+        ForEach(this.columns, item => {
+          Text(item.title)
+            .width(item.width)
+            .textAlign(TextAlign.Center)
+            .backgroundColor("#ffebcd")
+            .padding({ top: 10, bottom: 10 })
+        }, item => item.dataIndex)
+      }
+
+      List() {
+        ForEach(this.dataSource, (item, index) => {
+          ListItem() {
+            Row() {
+              ForEach(this.columns, (column) => {
+                Text(item[column.dataIndex])
+                  .width(column.width)
+                  .textAlign(TextAlign.Center)
+                  .padding({ top: 10, bottom: 10 })
+              }, item => item.dataIndex)
+            }
+          }
+        }, item => item)
+      }
+      .edgeEffect(EdgeEffect.Spring)
+    }
+  }
+
+  @Builder renderEmpty() {
+    Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}) {
+      Column() {
+        Image($r("app.media.empty")).width("30%")
+        Text("暂无数据").fontSize(22)
+      }
+    }.height('100%')
+  }
+
+
+  build() {
+    if(this.dataSource.length == 0) {
+      this.renderEmpty()
+    } else {
+      this.renderList()
+    }
+  }
+}
\ No newline at end of file

entry/src/main/ets/view/BasicTable/table.type.ts

+export interface BasicColumn {
+  title: string;
+  dataIndex: string;
+  width: string;
+}
\ No newline at end of file

entry/src/main/ets/view/title/TitleBar.ets

 import router from '@ohos.router';
+@Entry
 @Component
 export struct TitleBar {
   // 左边图标是否显示

entry/src/main/resources/base/profile/main_pages.json

 {
   "src": [
     "pages/SplashPage",
-    "pages/MainPage"
+    "pages/MainPage",
+    "pages/package/Pick"
   ]
 }

features/MaterialManagement/src/main/ets/components/MaterialManagement.ets

 import router from '@ohos.router';
 import ItemData from '../viewmodel/ItemData';
 import  gridWordModel  from '../viewmodel/GridWordViewModel';
-import {
-  BreakpointSystem,
-  Logger,
-  StyleConstants,
-  BreakpointConstants
-} from '@ohos/common';
 @Entry
 @Component
 export struct MaterialManagement {

features/PageManagement/index.ets

-export { PageManagement } from './src/main/ets/components/PageManagement'
+export { PageManagement } from './src/main/ets/pages/PageManagement'

features/PageManagement/src/main/ets/components/PageManagement.ets → features/PageManagement/src/main/ets/pages/PageManagement.ets

+import router from '@ohos.router'
 @Component
 export struct PageManagement {
 
@@ -37,7 +38,9 @@ export struct PageManagement {
               Text("取件").margin({top:15}).fontWeight(600).fontSize(18)
               Text("仓库取件").margin({bottom:15,top:15}).fontSize(13)
             }
-          }.width("45%").backgroundColor('#f8fdfc').justifyContent(FlexAlign.Center)
+          }.width("45%").backgroundColor('#f8fdfc').justifyContent(FlexAlign.Center).onClick(() => {
+            router.pushUrl({url:"pages/package/Pick"})
+          })
 
           Row(){
             Column(){

features/PageManagement/src/main/module.json5

@@ -3,7 +3,7 @@
     "name": "PageManagement",
     "type": "har",
     "deviceTypes": [
-      "default",
+      "phone",
       "tablet"
     ]
   }