HarmonyOS Next 办公应用:业务页面核心功能实现(一)

HarmonyOS Next 办公应用:业务页面核心功能实现

概述

在 HarmonyOS Next 办公类应用开发中,业务页面的构建是关键环节,它需集成多种办公功能,为用户提供便捷的操作体验。下面将介绍如何构建一个包含日历、打卡、待办审批等功能的业务页面。

核心代码功能及对应代码段

1. 打卡功能

该功能用于记录用户的打卡时间,并在界面上显示首次和末次打卡时间。

typescript 复制代码
ClockIn(){
  setTimeout(()=>{
    this.getCurrentTime()
    promptAction.showToast({
      message:'打卡成功',
      duration:500
    })
  },500)
}

getCurrentTime(){
  let currentDateTime = new Date();
  let currentHour = currentDateTime.getHours();
  let currentMinute = currentDateTime.getMinutes();
  let currentSecond = currentDateTime.getSeconds();
  let currentTime = ``
  if(currentHour<=9){
    currentTime = `0${currentHour}`
  }else{
    currentTime = `${currentHour}`
  }
  if(currentMinute<=9){
    currentTime = `${currentTime}:0${currentMinute}`
  }else{
    currentTime = `${currentTime}:${currentMinute}`
  }
  if(currentSecond<=9){
    currentTime = `${currentTime}:0${currentSecond}`
  }else{
    currentTime = `${currentTime}:${currentSecond}`
  }
  let obj:ClockTimeInfo = new ClockTimeInfo(currentTime,currentHour,currentMinute,currentSecond)
  if(this.clockArr.length <=1){
    this.clockArr.push(obj)
  }else{
    this.clockArr[1] = obj
  }
}

在 ClockIn 方法中,通过 setTimeout 模拟打卡延迟,调用 getCurrentTime 方法获取当前时间并存储打卡记录,同时使用 promptAction.showToast 提示用户打卡成功。getCurrentTime 方法负责格式化当前时间,并将其存储在 clockArr 数组中。

2. 应用功能跳转

该功能实现了点击不同的应用模块,跳转到相应的页面。

typescript 复制代码
goToPage(type:number){
  let url = ''
  if(type===1){ //日历
    url = 'CalendarPage'
    this.pageInfos.pushPathByName(url,'')
    this.reminderService.addReminder({id: 1, hour: 10, minute: 30});
  }else if(type===2){ //手机打卡
    url = 'ClockInPage'
    let params = new NavInfo('手机打卡',JSON.stringify(this.clockArr))
    this.pageInfos.pushPathByName(url,params)
  }else if(type===3){ //待办审批
    url = 'ToDoPage'
    this.pageInfos.pushPathByName(url,'')
  }
}

goToPage 方法根据传入的 type 参数,判断用户点击的应用模块,然后使用 pageInfos.pushPathByName 方法跳转到相应的页面,并在跳转日历页面时添加提醒。

相关推荐
熊猫钓鱼>_>4 小时前
Kotlin Multiplatform for OpenHarmony 实战:为 KMPNotifier 实现 OpenHarmony 本地通知引擎
kotlin·ai编程·harmonyos·鸿蒙·openharmony·适配·kmp
特立独行的猫A8 小时前
cj-tauri开源项目介绍与imovie观影客户端项目实战
harmonyos
fellow9911 小时前
Electron + pnpm 在鸿蒙应用里跑起来
electron·harmonyos·openharmony·deepseek·deepseekharness
熊猫钓鱼>_>13 小时前
从闲置平板到家里的“控制大脑“:鸿蒙智慧中控面板完整实战
运维·人工智能·华为·自动化·电脑·ai编程·harmonyos
5008413 小时前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
熊猫钓鱼>_>16 小时前
从2D平铺到3D沉浸:我用HarmonyOS 7端侧AI做了一个全程数据不出设备的空间化私密相册
前端·人工智能·3d·华为·华为云·harmonyos·鸿蒙
m0_7381858216 小时前
Flutter 鸿蒙化实战:foundation_fluttify 适配 OpenHarmony,Fluttify 桥接层
flutter·华为·harmonyos·鸿蒙
m0_7381858217 小时前
Flutter 鸿蒙化实战:http_proxy 适配 OpenHarmony,HTTP 代理
flutter·http·华为·harmonyos·鸿蒙
m0_7381858217 小时前
Flutter 鸿蒙化实战:headset_connection_event 适配 OpenHarmony,耳机插拔监听
flutter·华为·harmonyos·鸿蒙
5008417 小时前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos