Harmoney OS个人项目——简单记账APP（7）

南亭北巷.

已于 2024-06-27 09:38:40 修改

阅读量334

点赞数 3

文章标签： harmonyos

于 2024-06-22 21:39:33 首次发布

本文链接：https://blog.csdn.net/m0_74234922/article/details/139887942

版权

一、添加删除明细操作

本以为上一次为该项目最后一次发布博客，结果今天测试的时候总觉得少了些什么，然后想到了之前做的代办列表项目，其中有删除操作。考虑到该项目的明细页面需要实现，因为不能排除用户在进行记账的过程中添加错了类别或金额，所以为了达到该项目开发的可实施性和准确性，在明细页面中添加了删除功能。

其主要作用有：

（1）左划选择删除图标，明细页面中的该行数据将不会显示在页面中，同时删除数据库中该条信息。但是在之前的操作需求中，每一个属性都可能会有重复，所以没有设置主键，但是删除操作的话，需要根据一个属性进行查询，如果按照之前的类不变的话，会出现同时删除多条数据的清况。所以在类和sql语句中新增添了一个属性（id），设置为主键，用于查询删除操作。

（2）删除成功之后，需要更新账目信息中的支出或收入统计。

（3）删除成功之后，需要更新统计信息中的支出或收入统计。

（4）删除成功之后，需要更新总支出，总收入和结余。

import router from '@ohos.router'
import dailyModel from '../model/DailyModel';
import detailedModel from '../model/DetailedModel';
import incomeModel from '../model/IncomeModel';
import mineModel from '../model/mineModel';
import payoutModel from '../model/PayoutModel';
import detailedInfo from '../viewmodel/detailedInfo'

@Entry
@Component
struct Detailed {

  //明细
  @State details: detailedInfo[] = []

  //日期
  time: Date = new Date();
  date: string = this.time.getFullYear()+'/'+this.time.getMonth()+'/'+this.time.getDate()

  //生命周期函数
  aboutToAppear(){
    console.log('taskLog','初始化组件，查询明细列表');
    //获取明细列表信息
    detailedModel.getTaskList()
      .then(details => {
        this.details = details
      })
  }

  build() {
    Column(){
      //标题栏一行：包含返回按钮以及标题
      Row(){
        //返回图标图片
        Image($r('app.media.back'))
          .width(50)
          .borderRadius(50)
          .onClick(() => {
            router.replaceUrl(
              {
                url: 'pages/Index'
              },
              router.RouterMode.Single,
              err => {
                if(err){
                  console.log('路由失败')
                }
              }
            )
          })
        Text('今日账目明细')
          .fontSize(30)
      }
      .width('100%')
      .margin({bottom: 30})
      //显示日期：通过Date的函数获取日期，以年/月/日的形式展示
      Row(){
        Text(this.date)
          .fontSize(20)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .padding({left: 10, right: 10})
      .margin({bottom: 10})
      //明细列表
      Row(){
        List(){
          ForEach(
            this.details,
            (item: detailedInfo, index) => {
              ListItem(){
                if(item.date === this.date){
                  Row(){
                    Row(){
                      Image($rawfile(item.img))
                        .width(50)
                        .borderRadius(50)
                      Text(item.name)
                        .fontSize(25)
                        .margin({left: 10})
                    }
                    //显示金额，负数为支出，正数为收入
                    if(item.amount < 0){
                      Text('-￥' + (-item.amount).toFixed(2))
                        .fontSize(25)
                        .fontColor(Color.Red)
                    } else {
                      Text('￥' + item.amount.toFixed(2))
                        .fontSize(25)
                        .fontColor(Color.Red)
                    }
                  }
                  .width('100%')
                  .layoutWeight(1)
                  .padding({left: 10, right: 10})
                  .margin({top: 10})
                  .justifyContent(FlexAlign.SpaceBetween)
                }
              }
              //右滑删除操作
              .swipeAction({end: this.deleteButton(index,item)})
            }
          )
        }
      }
      .width('90%')
      .backgroundColor(Color.White)
      .borderRadius(20)
      .shadow({radius: 20,color: Color.Black,offsetX: 0,offsetY: 0})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffbfe8fd')
  }
  //创建删除按钮方法
  @Builder deleteButton(index: number, item: detailedInfo){
    Button(){
      Image($r('app.media.delete'))  //删除图标
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      detailedModel.deleteTask(item.id)
        .then(() => {
          //从列表中删除指定项
          this.details.splice(index,1)
          console.log('taskLog',`尝试删除任务，index: ${index}`)
        })
        .catch(err => console.log('taskLog','删除任务失败，id= ',item.id,JSON.stringify(err)))
      //更新收入相关数据
      if(item.amount > 0){
        incomeModel.updateTaskStatus(item.name, -item.amount)
          .then(() => {
            console.log('taskLog','删除明细，更新收入统计成功')
          })
        dailyModel.updateTaskStatus(item.date,-item.amount,0)
          .then(() => {
            console.log('taskLog','删除明细，更新收入账单成功')
          })
        mineModel.updateTaskStatus(-item.amount,3)
          .then(() => {
            console.log('taskLog','删除明细，更新总收入成功')
          })
      } else {  //更新支出相关数据
        payoutModel.updateTaskStatus(item.name, -item.amount)
          .then(() => {
            console.log('taskLog','删除明细，更新支出统计成功')
          })
        dailyModel.updateTaskStatus(item.date,item.amount,1)
          .then(() => {
            console.log('taskLog','删除明细，更新支出账单成功')
          })
        mineModel.updateTaskStatus(item.amount,2)
          .then(() => {
            console.log('taskLog','删除明细，更新总支出成功')
          })
      }
    })
  }
}