برنامه نویسی

توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی

در اینجا اجرای کامل صفحه ارسال شغل با استفاده از ARKTS برای برنامه های Harmonyos ارائه شده است. این صفحه به کاربران سازمانی اجازه می دهد تا موقعیت های شغلی جدیدی را منتشر کنند.

توضیح کد

1. ماژول ها را وارد کنید

import { CompanyDetailModel, CompanyDetailModelData } from '../model/CompanyDetailModel';
import Logger from '../Utils/Logger';
import { httpRequestGet, httpRequestPost } from '../Utils/HttpUtils';
import { router } from '@kit.ArkUI';
import prompt from '@ohos.promptAction';
import { AddpositionModel } from '../model/AddpositionModel';
import uri from '@ohos.uri';
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

ما چندین ماژول را برای جزئیات شرکت ، ورود به سیستم ، درخواست HTTP ، مسیریابی ، پیشبرد و مدل های موقعیت شغلی وارد کرده ایم.

2. الحاقات سبک را تعریف کنید

@Extend(TextInput) function inputStyle() {
  .placeholderColor("#99182431")
  .height(45)
  .fontSize(18)
  .backgroundColor("#F1F3F5")
  .width('100%')
  .padding({ left: 0 })
  .margin({ top: 12 })
}

@Extend(Line) function lineStyle() {
  .width('100%')
  .height(1)
  .backgroundColor("#FF131416")
}

@Extend(Text) function textStyle() {
  .fontColor("#FF0C0C0C")
  .fontSize(18)
  .fontWeight(FontWeight.Medium)
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

سه عملکرد پسوند سبک تعریف شده: inputStyle برای TextInputبا lineStyle برای Lineوت textStyle برای Text مؤلفه ها

3. مؤلفه ارسال شغل را تعریف کنید

@Entry
@Component
struct PostaPosition {
  @State name: string = "";
  @State cname: string = "";
  @State positionsize: string = "";
  @State salary: string = "";
  @State username: string = "";
  @State title: string = "";

  private addPosition: string = "********";

  async addposition() {
    if (this.name === '' || this.cname === '' || this.positionsize === '' || this.salary === '' || this.username === '' || this.title === '') {
      prompt.showToast({
        message: "Input cannot be empty"
      });
    } else {
      const neturl = new uri.URI(this.addPosition)
        .addQueryValue("name", this.name)
        .addQueryValue("cname", this.cname)
        .addQueryValue("size", this.positionsize)
        .addQueryValue("salary", this.salary)
        .addQueryValue("username", this.username)
        .addQueryValue("title", this.title)
        .toString();

      Logger.error("Request neturl - > " + neturl);

      await httpRequestGet(neturl).then((data) => {
        console.log("data ---> " + data);
        let addpositionModel: AddpositionModel = JSON.parse(data.toString());
        let msg = addpositionModel.msg;
        if (addpositionModel.code == 200) {
          prompt.showToast({
            message: msg
          });
          // router.pushUrl({
          //   url: "pages/Home"
          // });
        } else {
          prompt.showToast({
            message: msg
          });
        }
      });
    }
  }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

  • یک مؤلفه postaposition برای انتشار موقعیت های شغلی ایجاد کرد
  • استفاده از State برای تعریف متغیرهای حالت چندگانه برای ذخیره اطلاعات کار ورودی کاربر
  • افزودن تعریف شده برای نقطه پایانی API
  • در روش افزودنی ، بررسی کنید که آیا ورودی کاربر خالی است ، در صورت وجود پیام نمایش داده می شود. در غیر این صورت ، URL API به نام HTTPRequestget برای ارسال اطلاعات شغلی ساخته شده و بر اساس پاسخ ، کاربر را برانگیخت.

طرح صفحه 4

build() {
  Column() {
    RelativeContainer() {
      Image($r('app.media.bossback')).width(20).height(20)
        .onClick(() => {
          router.back();
        }).alignRules({
          'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
          'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
        }).margin({ left: 5, top: 7 });

      Text("Add Position Information")
        .fontSize(25)
        .fontWeight(FontWeight.Medium)
        .fontColor(Color.White)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    }.height(40)
    .width("100%")
    .backgroundColor(Color.Green);

    Row() {
      Row() {
        Text("Position Information").textStyle();
      }.width(100).height("100%")
      .justifyContent(FlexAlign.Center);

      TextInput({ placeholder: "Please enter position information" })
        .maxLength(20)
        .type(InputType.Normal)
        .inputStyle()
        .onChange((value: string) => {
          this.name = value;
        }).margin({ left: 20 });
    }.width("100%").height(50)
    .justifyContent(FlexAlign.Start)
    Line().lineStyle();

    // Other input fields and line styles are similar, omitted...

    Button("Submit")
      .width("90%")
      .height(40)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .backgroundColor("#007DFF")
      .margin({ top: 47, bottom: 12 })
      .onClick(() => {
        this.addposition();
      });
  }.backgroundColor("#F1F3F5")
  .height('100%')
  .width('100%');
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

  • ستون و NeativeContainer استفاده شده برای ساخت UI
  • یک هدر ایجاد کرد که “اضافه کردن اطلاعات موقعیت” را با یک دکمه عقب نشان داد
  • ردیف و متن مورد استفاده برای هر قسمت اطلاعات شغلی (به عنوان مثال ، اطلاعات موقعیت ، نام شرکت ، اندازه ، دامنه حقوق ، شخص تماس ، عنوان)
  • یک دکمه برای ارسال را اجرا کرد ، که هنگام کلیک روی روش افزودنی تماس می گیرد

5. PationListModel: نوع ایمنی و ساختار داده های ساختاری را فراهم می کند

export class PositionListModel {
  msg?: string = "";
  code?: number = 0;
  data: Array<PositionListModelData> = [];
}

export class PositionListModelData {
  id?: number = 0;
  name?: string = "";
  cname?: string = "";
  size?: string = "";
  salary?: string = "";
  username?: string = "";
  title?: string = "";
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

نمایش تصویر

شرح تصویر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا