FORM表单

common/oh-package.json5

@@ -8,5 +8,6 @@
   "version": "1.0.0",
   "dependencies": {
     "reflect-metadata": "^0.1.13",
+    "@ohos/axios": "^2.1.1"
   }
 }

entry/src/main/ets/pages/sub_systemMaintenance/General.ets

 import { generalInitList, scanInitList, systemList, UniListItem } from '@ohos/system/src/main/ets/model/UniInitList'
 import { TitleBar } from '../../view/title/TitleBar'
 import { BasicDialog } from '../../view/BasicDialog/BasicDialog'
+import promptAction from '@ohos.promptAction'
 
 @Extend(Button) function CommonButtonStyle() {
   .borderWidth(2)
@@ -12,10 +13,52 @@ import { BasicDialog } from '../../view/BasicDialog/BasicDialog'
   .stateEffect(true)
 }
 
+// 需要提交的表单
+interface FormData {
+  httpURL: string,
+  httpPORT: string,
+  scoketURL: string,
+  scoketPORT: string,
+  themeName: string,
+  themeColor: string,
+  reconnection_mode: boolean,
+  push_mode: boolean,
+  transmission_mode: string,
+  continue_scan_mode: boolean,
+  scan_read_mode: string,
+  scanning_mode: string,
+  broadcastKey: string,
+  power: string
+
+}
+
 @Entry
 @Component
 export struct General {
   @State systemTitle: Array<string> = ['直连配置','扫描配置','系统配置'];
+  @State clickItem: UniListItem = {
+    title: '',
+    showExtraIcon: true,
+    showArrow: true,
+    url: ''
+  };
+  @State formData: FormData = {
+    httpURL: '',
+    httpPORT: "",
+    scoketURL: "",
+    scoketPORT: "",
+    themeName: "",
+    themeColor: "",
+    reconnection_mode: true,
+    push_mode: true,
+    transmission_mode: "",
+    continue_scan_mode: false,
+    scan_read_mode: "",
+    scanning_mode: "",
+    broadcastKey: "",
+    power: ""
+  }
+
   getListInfo(index:number):UniListItem[]{
     switch (index){
       case 0:
@@ -29,19 +72,17 @@ export struct General {
         break;
     }
   }
-  scroller: Scroller = new Scroller()
+
   dialogController: CustomDialogController = new CustomDialogController({
     builder: BasicDialog({
       cancel: this.onCancel,
       confirm: this.onSubmit,
-      title: '2.0业务终端IP'
+      clickItem: $clickItem,
+      formData: $formData,
     }),
-    cancel: this.existApp,
     autoCancel: true,
-    alignment: DialogAlignment.Default,
-    offset: { dx: 0, dy: -20 },
-    gridCount: 4,
-    customStyle: false
+    alignment: DialogAlignment.Center,
+    customStyle: true
   })
 
   onCancel() {
@@ -92,7 +133,7 @@ export struct General {
 
                           Blank()
                             .layoutWeight(1)
-                          Text(item.targetValue)
+                          Text(this.formData[item?.key])
                             .fontSize(16)
                             .flexGrow(1)
                             .align(Alignment.End)
@@ -105,7 +146,10 @@ export struct General {
                       }
                       .height(71)
                       .onClick(() => {
-
+                        this.clickItem = item
+                        if (this.dialogController != undefined) {
+                          this.dialogController.open()
+                        }
                       })
                     })
                   }
@@ -122,7 +166,11 @@ export struct General {
         }.height('82%')
 
         Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
-          Button("保存").CommonButtonStyle()
+          Button("保存").CommonButtonStyle().onClick(() => {
+            promptAction.showToast({
+              message: JSON.stringify(this.formData)
+            })
+          })
           Button("重置").CommonButtonStyle()
         }
         .height(70)
@@ -137,4 +185,5 @@ export struct General {
     })
   }
 
+
 }

entry/src/main/ets/view/BasicDialog/BasicDialog.ets

+import { UniListItem } from '@ohos/system/src/main/ets/model/UniInitList';
 @Extend(Button) function CommonButtonStyle() {
   .borderWidth(2)
   .borderColor('#0fa983')
@@ -8,10 +9,32 @@
   .stateEffect(true)
 }
 
+// 需要提交的表单
+interface FormData {
+  httpURL: string,
+  httpPORT: string,
+  scoketURL: string,
+  scoketPORT: string,
+  themeName: string,
+  themeColor: string,
+  reconnection_mode: boolean,
+  push_mode: boolean,
+  transmission_mode: string,
+  continue_scan_mode: boolean,
+  scan_read_mode: string,
+  scanning_mode: string,
+  broadcastKey: string,
+  power: string
+
+}
+
 @CustomDialog
 @Component
 export struct BasicDialog {
   private title: string;
+  @Link formData: FormData;
+  @Link clickItem: UniListItem
+
   controller: CustomDialogController
   cancel: () => void
   confirm: () => void
@@ -28,16 +51,22 @@ export struct BasicDialog {
             .color('#19ac88')
             .opacity(0.6)
             .margin({ left: 8, right: 8 })
-          Text(this.title)
-            .fontSize(20)
-        }.padding({ top: 10, bottom: 10 })
+          Text(this.clickItem.title).fontSize(20)
+        }
+        .padding({ top: 10, bottom: 10 })
       }
 
-      this.container()
+     Column() {
+       TextInput({ placeholder: '', text: this.formData[this.clickItem?.key] }).height(40).width('90%').borderRadius(4)
+         .onChange((value: string) => {
+           this.formData[this.clickItem?.key] = value
+         })
+     }
 
       Flex({ justifyContent: FlexAlign.SpaceAround }) {
         Button('确认')
           .onClick(() => {
+            // this.httpURL = this.textValue
             this.controller.close()
             this.confirm()
           }).CommonButtonStyle()
@@ -46,7 +75,10 @@ export struct BasicDialog {
             this.controller.close()
             this.cancel()
           }).CommonButtonStyle()
-      }.margin({ bottom: 10 })
+      }.margin({ top: 10, bottom: 10 })
     }
+    .width('86%')
+    .borderRadius(5)
+    .backgroundColor('#fff')
   }
 }
\ No newline at end of file

entry/src/main/ets/view/GeneralDialog/GeneralDialog.ets

+import { UniListItem } from '@ohos/system/src/main/ets/model/UniInitList';
+@Extend(Button) function CommonButtonStyle() {
+  .borderWidth(2)
+  .borderColor('#0fa983')
+  .backgroundColor('#fff')
+  .fontColor('#0fa983')
+  .borderRadius(10)
+  .type(ButtonType.Normal)
+  .stateEffect(true)
+}
+
+@Observed
+class UniList {
+  title: string; // 标题
+  showExtraIcon: boolean; // 是否显示额外的图标
+  showArrow: boolean;  // 右边箭头
+  extraIcon?: Resource;  // 图标本体
+  url?: string; // 跳转的URL
+  targetValue?: string; // 右侧的值
+  description?: string; // 描述
+  constructor(title, showExtraIcon, showArrow, extraIcon, url, targetValue, description) {
+    this.title = title;
+    this.showExtraIcon = showExtraIcon;
+    this.showArrow = showArrow;
+    this.extraIcon = extraIcon;
+    this.url = url;
+    this.targetValue = targetValue;
+    this.description = description;
+  }
+}
+
+@CustomDialog
+@Component
+export struct GeneralDialog {
+
+  // @ObjectLink uniList: UniList
+
+  controller: CustomDialogController
+  cancel: () => void
+  confirm: () => void
+  @BuilderParam container: () => void
+
+  textController: TextInputController = new TextInputController()
+
+  build() {
+    Column() {
+      Flex({ alignItems: ItemAlign.Start }) {
+        Row() {
+          Divider()
+            .vertical(true)
+            .height(14)
+            .strokeWidth(3)
+            .color('#19ac88')
+            .opacity(0.6)
+            .margin({ left: 8, right: 8 })
+          Text('').fontSize(20)
+        }
+        .padding({ top: 10, bottom: 10 })
+      }
+
+      Column() {
+        TextInput({ text: '', controller: this.textController })
+          .borderRadius(4)
+          .height(35)
+          .onChange((value: string) => {
+
+          })
+      }
+      .padding({ left: 10, right: 10 })
+      .width('100%')
+      .height(35)
+
+
+
+      Flex({ justifyContent: FlexAlign.SpaceAround }) {
+        Button('确认')
+          .onClick(() => {
+            this.controller.close()
+            this.confirm()
+          }).CommonButtonStyle()
+        Button('取消')
+          .onClick(() => {
+            this.controller.close()
+            this.cancel()
+          }).CommonButtonStyle()
+      }.margin({ top: 10, bottom: 10 })
+    }
+    .width('86%')
+    .borderRadius(5)
+    .backgroundColor('#fff')
+  }
+}
\ No newline at end of file

features/SystemMaintenance/src/main/ets/model/UniInitList.ets

@@ -6,8 +6,11 @@ export interface UniListItem {
   url?: string; // 跳转的URL
   targetValue?: string; // 右侧的值
   description?: string; // 描述
+  key?: string; //对应的键值对
 }
 
+
+
 export const uniInitList: UniListItem[] = [
   {
     title: '数据同步',
@@ -132,6 +135,7 @@ export const maintenanceList: UniListItem[] = [
 export const generalInitList: UniListItem[] = [
   {
     title: '2.0业务数据服务IP',
+    key: 'httpURL',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',
@@ -140,6 +144,7 @@ export const generalInitList: UniListItem[] = [
   },
   {
     title: '2.0业务终端IP',
+    key: 'httpPORT',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',
@@ -148,6 +153,7 @@ export const generalInitList: UniListItem[] = [
   },
   {
     title: '2.0业务终端通讯端口',
+    key: 'scoketURL',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',
@@ -156,6 +162,7 @@ export const generalInitList: UniListItem[] = [
   },
   {
     title: '传输方式',
+    key: 'transmission_mode',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',
@@ -164,6 +171,7 @@ export const generalInitList: UniListItem[] = [
   },
   {
     title: '连接模式',
+    key: 'reconnection_mode',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',
@@ -172,6 +180,7 @@ export const generalInitList: UniListItem[] = [
   },
   {
     title: '推送模式',
+    key: 'push_mode',
     showExtraIcon: true,
     showArrow: true,
     //extraIcon: '',