WonderfulDemo/entry/src/main/ets/pages/LoginPage.ets

import router from '@ohos.router'
import JGRequest from '../common/util/request/Request'
import {getToken} from '../common/util/request/RequestInstance'

@Entry
@Component
struct LoginPage {

  @State loginName: string = ''
  @State password: string = ''

  @State dept: DeptInfo = null
  @State workstation: WorkstationInfo = null

  // 部门选择弹框
  selectDeptController: CustomDialogController = new CustomDialogController({
    builder: SelectDeptDialog({
      dept: this.dept
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    // gridCount: 3,
    customStyle: true,
  })

  // 工位选择弹框
  selectWorkstationController: CustomDialogController = new CustomDialogController({
    builder: SelectWorkstationDialog({
      workstation: this.workstation
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    // gridCount: 3,
    customStyle: true,
  })

  build() {
    Column() {
      Column() {
        Row() {
          Image($r('app.media.login_title'))
            .width(216.8)
            .height(16)
        }
        .height('21%')
        .width('88.5%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Start)

        TextInput({placeholder: '账号', text: this.loginName })
          .placeholderColor($r('app.color.login_text_input_placeholder_color'))
          .placeholderFont({ size: $r('app.float.set_card_font_size'), weight: FontWeight.Medium})
          .fontColor($r('app.color.login_text_input_font_color'))
          .width('90.4%')
          .height('12%')
          .opacity($r('app.float.general_font_opacity'))
          .borderRadius($r('app.float.general_border_radius'))
          .backgroundColor('#BCC2C9')
          .onChange((value: string) => {
            this.loginName = value
          })

        Row() {}.height('4.5%')

        TextInput({placeholder: '密码', text: this.password })
          .placeholderColor($r('app.color.login_text_input_placeholder_color'))
          .placeholderFont({ size: $r('app.float.set_card_font_size'), weight: FontWeight.Medium})
          .fontColor($r('app.color.login_text_input_font_color'))
          .width('90.4%')
          .height('12%')
          .type(InputType.Password)
          .borderRadius($r('app.float.general_border_radius'))
          .backgroundColor('#BCC2C9')
          .onChange((value: string) => {
            this.password = value
          })

        Row() {}.height('3%')

        // 部门、工位选择
        Row() {
          Row() {
            Text('部门')
              .fontColor($r('app.color.general_font_white_color'))
              .fontSize($r('app.float.card_info_font_size'))
          }
          .width('47.8%')
          .height('100%')
          .alignItems(VerticalAlign.Top)
          Blank()
          Row() {
            Text('工位')
              .fontColor($r('app.color.general_font_white_color'))
              .fontSize($r('app.float.card_info_font_size'))
          }
          .alignItems(VerticalAlign.Top)
          .width('47.8%')
          .height('100%')
        }
        .height('5%')
        .width('90.4%')
        Row() {
          Row() {
            Text(this.dept ? this.dept.deptName : '')
              .fontWeight(FontWeight.Medium)
              .fontSize($r('app.float.process_card_middle_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .opacity($r('app.float.general_font_opacity'))
            Blank()
            Row() {
              Image($r('app.media.subscript_space'))
                .height($r('app.float.card_subscript_new_size'))
                .width($r('app.float.card_subscript_new_size'))
            }
            .alignItems(VerticalAlign.Bottom)
            .justifyContent(FlexAlign.End)
            .width('20%')
            .height('100%')
          }
          .width('47.8%')
          .height('100%')
          .padding({left: 10})
          .backgroundColor($r('app.color.general_card_background_color'))
          .borderRadius($r('app.float.general_border_radius'))
          .onClick(()=>{
            this.selectDeptController.open()
          })

          Blank()
          Row() {
            Text(this.workstation ? this.workstation.name : '')
              .fontWeight(FontWeight.Medium)
              .fontSize($r('app.float.process_card_middle_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .opacity($r('app.float.general_font_opacity'))
            Blank()
            Row() {
              Image($r('app.media.subscript_space'))
                .height($r('app.float.card_subscript_new_size'))
                .width($r('app.float.card_subscript_new_size'))
            }
            .alignItems(VerticalAlign.Bottom)
            .justifyContent(FlexAlign.End)
            .width('20%')
            .height('100%')
          }
          .width('47.8%')
          .height('100%')
          .padding({left: 10})
          .backgroundColor($r('app.color.general_card_background_color'))
          .borderRadius($r('app.float.general_border_radius'))
          .onClick(()=>{
            this.selectWorkstationController.open()
          })
        }
        .width('90.4%')
        .height('12%')

        Row() {
          Text('登录')
            .fontWeight(FontWeight.Medium)
            .fontSize($r('app.float.process_card_middle_font_size'))
            .fontColor($r('app.color.general_font_white_color'))
            .textAlign(TextAlign.Center)
            .width('100%')
            .height('38.6%')
            .backgroundColor($r('app.color.robot_set_card_blue'))
            .borderRadius($r('app.float.robot_set_radius'))
            .opacity(this.loginName && this.loginName.length > 0 && this.password && this.password.length > 0 ? 1 : $r('app.float.card_font_default_opacity'))
        }
        .onClick(()=>{
          if (this.loginName && this.loginName.length > 0 && this.password && this.password.length > 0) {
            getToken().then(token =>{
              if (token && token.length > 0) {
                router.pushUrl({
                  url:'pages/Index'
                })
              }
            })
          }
        })
        .width('90.4%')
        .height('30.5%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
      }
      .width('35%')
      .height('62%')
      .backgroundColor($r('app.color.login_background_color'))
      .borderRadius($r('app.float.general_border_radius'))
      .margin({right: '8.25%'})
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.login_background'))
    .backgroundImageSize({width: '100%', height: '100%'})
    .alignItems(HorizontalAlign.End)
    .justifyContent(FlexAlign.Center)
  }
}

// 部门选择弹框
@CustomDialog
struct SelectDeptDialog {
  @Link dept: DeptInfo

  @State deptArray: DeptInfo[] = []

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  async aboutToAppear() {
    this.deptArray = await JGRequest.get("/api/v1/sys/dept/orgList", {}) as DeptInfo[]
  }

  build() {
    Column() {
      Row() {
        Text('选择部门')
          .fontSize($r('app.float.process_card_large_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('20%')
      .justifyContent(FlexAlign.Center)

      Column() {
        List({space: 10}) {
          ForEach(this.deptArray, (item: DeptInfo)=>{
            ListItem() {
              Row() {
                Text(item.deptName)
                  .fontSize($r('app.float.process_card_small_font_size'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor(this.dept && this.dept.id === item.id ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                  .opacity($r('app.float.general_font_opacity'))
              }
              .height('15%')
              .width('80%')
              .backgroundColor(this.dept && this.dept === item.id ? $r('app.color.order_select_background') : $r('app.color.general_card_background_color'))
              .borderRadius($r('app.float.general_border_radius'))
              .padding({left: 10})
              .onClick(()=>{
                this.dept = item
                if (this.controller != undefined) {
                  this.controller.close()
                }
              })
            }
          })
        }
        .alignListItem(ListItemAlign.Center)
      }
      .height('70%')
      .width('80%')
      .justifyContent(FlexAlign.Start)
    }
    .width('48%')
    .height('63%')
    .backgroundColor($r('app.color.page_general_background'))
    .justifyContent(FlexAlign.Start)
    .borderRadius($r('app.float.general_border_radius'))
  }
}

// 工位选择弹框
@CustomDialog
struct SelectWorkstationDialog {
  @Link workstation: WorkstationInfo

  @State workstationArray: WorkstationInfo[] = []

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}


  async aboutToAppear() {
    this.workstationArray = await JGRequest.get("/api/v1/base/station/queryStationList", {}) as WorkstationInfo[]
  }

  build() {
    Column() {
      Row() {
        Text('选择工位')
          .fontSize($r('app.float.process_card_middle_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('20%')
      .justifyContent(FlexAlign.Center)

      Column() {
        List({space: 10}) {
          ForEach(this.workstationArray, (item: WorkstationInfo)=>{
            ListItem() {
              Row() {
                Text(item.name)
                  .fontSize($r('app.float.process_card_small_font_size'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.general_font_opacity'))
              }
              .height('15%')
              .width('80%')
              .backgroundColor($r('app.color.general_card_background_color'))
              .borderRadius($r('app.float.general_border_radius'))
              .padding({left: 10})
              .onClick(()=>{
                this.workstation = item
                if (this.controller != undefined) {
                  this.controller.close()
                }
              })
            }
          })
        }
        .alignListItem(ListItemAlign.Center)
      }
      .height('70%')
      .width('80%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .width('48%')
    .height('63%')
    .backgroundColor($r('app.color.page_general_background'))
    .justifyContent(FlexAlign.Start)
    .borderRadius($r('app.float.general_border_radius'))
  }
}

class DeptInfo {
  id?: number
  // 部门名称
  deptName?: string
  // 组织id
  orgId?: number
}

class WorkstationInfo {
  id?: number
  // 工位名称
  name?: string
}