2个页面

entry/src/main/ets/pages/metailmange/WzStatus.ets

+import { LeftDialog } from '../../view/LeftDialog/LeftDialog'
+import { TitleBar } from '../../view/title/TitleBar'
+
+@Extend(Button) function CommonButtonStyle() {
+  .borderWidth(2)
+  .borderColor('#0fa983')
+  .backgroundColor('#fff')
+  .fontColor('#0fa983')
+  .borderRadius(3)
+  .type(ButtonType.Normal)
+  .height(30)
+  .stateEffect(true)
+}
+
+@Entry
+@Component
+export struct WzStatus {
+  @State private finishNum: number = 0
+  @State private unFinishNum: number = 5
+  @State private numberPercentage: string = "0/500个"
+  @State show: boolean = false
+  @State private dataSource: any = [
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+    {mc: '冬季防寒靴100000',dm: 100000, pzsl: 0, rksl: 100, status: '未完成', hx: '180100002'},
+  ]
+  @Builder DetailBuilder() {
+    Column() {
+      List({ space: 2 }) {
+        ListItem() {
+            Row() {
+              Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
+                Text('号型:180100002').fontSize(12).fontColor('#3b4144')
+                Text('凭证数量:0').fontSize(12).fontColor('#3b4144')
+              }
+              .width('70%')
+
+              Blank()
+                .layoutWeight(1)
+
+              Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Start }) {
+                Text('未完成').fontSize(12).fontColor('#3b4144')
+                Text('入库数量:100').fontSize(12).fontColor('#3b4144')
+
+              }
+              .width('40%')
+
+            }
+            .width('100%')
+            .justifyContent(FlexAlign.SpaceBetween)
+            .padding({ left: 12, right: 18 })
+          }.height(90)
+        }.margin({top: 100})
+    }.width('100%')
+  }
+
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: LeftDialog({
+      cancel: this.onCancel,
+      confirm: this.onSubmit,
+      container: this.DetailBuilder,
+    }),
+    alignment: DialogAlignment.CenterEnd,
+    customStyle: true,
+  })
+
+  onCancel() {
+    console.info('------取消------')
+  }
+
+  onSubmit() {
+    console.info('------确认------')
+  }
+
+  existApp() {
+    console.info('Click the callback in the blank area')
+  }
+
+
+
+  build() {
+    Column() {
+      TitleBar({ title: "物资状态" })
+      Flex({ direction: FlexDirection.Column }) {
+        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+          Column() {
+            Text('完成:' + this.finishNum + '个' + ' 未完成:' + this.unFinishNum + '个').fontSize(13)
+          }
+          Column() {
+            Text('数量:'+  this.numberPercentage).fontSize(13)
+          }
+        }
+        .width('100%')
+        .backgroundColor('#fff')
+        .height(52)
+        .borderRadius(5)
+        .margin({ bottom: 10 })
+        .padding({ left: 10, right: 10 })
+
+        Row() {
+          List({ space: 2 }) {
+            ForEach(this.dataSource, (item: any) => {
+              ListItem() {
+                Row() {
+                  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
+                    Text('名称: ' + item.mc).fontSize(14).fontColor('#3b4144')
+                    Text('代码: ' + item.dm).fontSize(14).fontColor('#3b4144')
+                    Button('号型信息').CommonButtonStyle()
+                  }
+                  .width('70%')
+
+                  Blank()
+                    .layoutWeight(1)
+
+                  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Start }) {
+                    Text('凭证数量: ' + item.pzsl).fontSize(14).fontColor('#3b4144')
+                    Text('入库数量: ' + item.rksl).fontSize(14).fontColor('#3b4144')
+                    Text(item.status).fontSize(14).fontColor( item.status == '未完成' ? 'red': 'green')
+                  }
+                  .width('40%')
+
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.SpaceBetween)
+                .padding({ left: 12, right: 18 })
+              }
+              .height(90)
+              .onClick((item) => {
+                if (this.dialogController != undefined) {
+                  this.dialogController.open()
+                  this.DetailBuilder()
+                }
+              })
+            })
+          }
+          .width('100%')
+          .backgroundColor('#fff')
+          .divider({ strokeWidth: 1, color: 'rgb(242,242,242)' }) // 每行之间的分界线
+        }.margin({ bottom: 50 })
+
+
+
+      }.padding({ bottom: 20, left: 20, right: 20 })
+    }
+    .height('100%')
+    .linearGradient({
+      direction: GradientDirection.RightBottom,
+      repeating: true,
+      colors: [['#36a3c0', 0.0], ['#97c6a6', 1.0], ['#c7d799', 2.0]]
+    })
+  }
+
+}
\ No newline at end of file

entry/src/main/ets/view/LeftDialog/LeftDialog.ets

+@CustomDialog
+@Component
+export struct LeftDialog {
+  controller: CustomDialogController
+  cancel: () => void
+  confirm: () => void
+  @BuilderParam container: () => void
+
+  build() {
+    Column() {
+
+      this.container()
+
+    }
+    .width('60%')
+    .height('100%')
+    .backgroundColor('#fff')
+  }
+}
\ No newline at end of file