主界面代码

主界面代码

import { getTaskList, MemoParams, Task } from "../model/TaskModel"
import { addMemo, delMemo, getallmemos, toggleMemo, updateMemo } from '../utils/HttpUtils';
import axios,{  AxiosResponse} from "@ohos/axios"
import { ToolBar } from "@ohos.arkui.advanced.ToolBar";
import { CustomContentDialog } from "@ohos.arkui.advanced.Dialog";
import { promptAction } from "@kit.ArkUI";


@Preview
@Component
export struct TaskListView{
@State taskList:Array<Task>|undefined=[]
@State selectIndex:number=0
  addAddupdate:boolean=true
  taskTitle:string=""
  taskDes:string=""
  taskId:string=""
  @Builder
  buildContent():void{
  Column(){
    Row(){
      Text("任务主题")
      TextInput({placeholder:"请输入主题",text:this.taskTitle})
        .onChange((value)=>{
          console.log("Text:",value)
          this.taskTitle=value
        })
    }
    Text("任务描述")
    TextArea({ placeholder:"请输入任务",text:this.taskDes })
      .onChange((value:string)=>{
        this.taskDes=value
        console.log(value)
      })
      .width("93%")
      .height('60%')
      .margin({left:10})
  }

  }
  dialogController:CustomDialogController=new CustomDialogController({
    builder:CustomContentDialog({
      primaryTitle:this.addAddupdate?"添加新任务":"更新任务",
      contentBuilder:()=>{
        this.buildContent()
      },
      buttons:[
        {
          value: '取消',
          buttonStyle: ButtonStyleMode.TEXTUAL,
          action: () => {
            console.info('Callback when the button is clicked')
          }
        },
        {
          value: this.addAddupdate?'确定':"更新",
          buttonStyle: ButtonStyleMode.TEXTUAL,
          role: ButtonRole.ERROR,
          action:()=>{
            let tempTask:Task={
              title:this.taskTitle,
              description:this.taskDes,
              isCompleted:false,
              createdAt:new Date().getTime(),
              updatedAt:0

            }
            this.taskList?.push(tempTask)
            if(this.addAddupdate){
              addMemo(tempTask).then(()=>{
                this.getUIContext().getPromptAction().showToast({
                  message:"任务创建成功",
                  duration:2000,
                  showMode:promptAction.ToastShowMode.DEFAULT,
                  bottom:50
                })
                getallmemos().then((res:AxiosResponse)=>{
                  this.taskList=res.data.data
                })
              })
            }
           else{
              updateMemo(this.taskId,{title:this.taskTitle,description:this.taskDes}).then((res:AxiosResponse)=>{
                console.log(JSON.stringify(res.status))
                this.getUIContext().getPromptAction().showToast({
                  message:"更新成功",
                  duration:2000,
                  showMode:promptAction.ToastShowMode.DEFAULT,
                  bottom:50
                })
                getallmemos().then((res:AxiosResponse)=>{
                  this.taskList=res.data.data
                })

              })
           }


          }
        }

      ]
    })
  })


  aboutToAppear(): void {
    getallmemos().then((res:AxiosResponse)=>{
      this.taskList=res.data.data
    })
  }

  filterTaskList():Array<Task>|undefined{
  if (this.selectIndex===0){
    return this.taskList
  }
  else if (this.selectIndex===1){
    let tempList = this.taskList?.filter((item:Task)=>{
        return !item.isCompleted
    })
    return tempList
  }
   else if (this.selectIndex===2){
    return this.taskList?.filter((item:Task)=>{
      return item.isCompleted
    })
  }
  else {
    return undefined
  }
  }

  @Builder tabBuilder(index:number,name:string){
    Column(){
      Text(name)
      Divider()
        .strokeWidth(2)
        .color(this.selectIndex===index?Color.Red:Color.Gray)
        .width(50)
    }.width('100%')
  }


  @Builder taskView(){
    Column(){
      List(){
        ForEach(this.filterTaskList(),(item:Task,index:number)=>{
          ListItem(){
            Column(){
              Row({}){
                Toggle({ type: ToggleType.Checkbox, isOn: item.isCompleted })
                  .onChange(()=>{
                    toggleMemo({task_id:item._id}).then(()=>{
                      if (this.taskList) {
                        this.taskList[index].isCompleted=!this.taskList[index].isCompleted
                      }
                      console.log(index.toString())
                    })
                  })
                Text(item.title)
                  .width('50%')
                  .fontColor('white')
                  .decoration({type:item.isCompleted?TextDecorationType.LineThrough:TextDecorationType.None,style:TextDecorationStyle.SOLID,color:Color.Yellow})
                Button('编辑')
                  .onClick(()=>{
                    this.addAddupdate=false
                    this.dialogController.open()
                    this.taskTitle=item.title
                    if (item._id){
                      this.taskId=item._id
                    }

                    if (item.description){this.taskDes=item.description}

                  })
                Button('删除')
                  .margin({right:5})
                  .backgroundColor('red')
                  .onClick(()=>{
                    if (item._id) {
                      this.getUIContext().showAlertDialog(
                        {
                          title: '确定删除',
                          message: item.title,
                          autoCancel: true,
                          alignment: DialogAlignment.Center,
                          offset: { dx: 0, dy: -20 },
                          gridCount: 3,
                          // transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY
                          //   .animation({ duration: 3000, curve: Curve.Sharp })
                          //   .combine(TransitionEffect.scale({ x: 1.5, y: 1.5 }).animation({ duration: 3000, curve: Curve.Sharp })),
                          //   TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
                          //     .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 })
                          //       .animation({ duration: 100, curve: Curve.Smooth }))),
                          buttons: [{
                            value: '取消',
                            action: () => {
                              console.info('Callback when the first button is clicked');
                            }
                          },
                            {
                              enabled: true,
                              defaultFocus: true,
                              style: DialogButtonStyle.HIGHLIGHT,
                              value: '确定',
                              action: () => {
                                this.taskList?.splice(index,1)
                                console.info('Callback when the second button is clicked');
                              }
                            }],
                        }
                      );

                      // delMemo({task_id:item._id}).then(()=>{
                      //   console.log(item._id)
                      // })
                    }
                  })
              }.width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              .onClick(()=>{
                this.getUIContext().showAlertDialog({
                  title:"任务详情",
                  message:item.description,
                  autoCancel:true
                })
              })

            }
            .backgroundColor(Color.Gray)
            .height(30)
            .width('100%')
            .margin({bottom:5})
          }

        })

      }.scrollBar(BarState.Auto)
    }
  }

  build() {
  Column({space:10}){
    Tabs(){
      TabContent(){
        this.taskView()
      }.tabBar(this.tabBuilder(0,"全部"))
      .align(Alignment.Top)
      TabContent(){
        this.taskView()
      }.tabBar(this.tabBuilder(1,"未办"))
      .align(Alignment.Top)
      TabContent(){
        this.taskView()
      }.tabBar(this.tabBuilder(2,"已办"))
      .align(Alignment.Top)
    }
    .onChange((index:number)=>{
      this.selectIndex=index
    }).height("90%")
    Column(){
      Button("添加任务")
        .width(100)
        .height(50)
        .border({radius:30})
        .onClick(()=>{
          this.addAddupdate=true
            this.dialogController.open()
        })
        .alignSelf(ItemAlign.Center)
    }.height("100%")
    .width("100%")


  }.height("100%")



  }
}