CertificateInfo.ets 7.2 KB
import preferencesUtil from '../utils/preferences'
import { personCertificateTest, personCertificateRow, CertificateTest, CertificateRow } from '../api/userType'
import baseUrl from '../utils/baseUrl'
import { getPersonalCertificate, getCertificateList, updatePersonalCertificate, addPersonalCertificate } from '../api/user'
import { AxiosResponse } from '@ohos/axios'
import CertificateDialog from '../dialog/CertificateDialog'
import PhotoBrowser from '../dialog/PhotoBrowserDialog'
import { uploadFile, uploadResult } from '../utils/uploadFile'
import { request } from '@kit.BasicServicesKit'
import { promptAction } from '@kit.ArkUI';
import NavHeader from '../components/NavHeader'
let personId = preferencesUtil.get('XF_PERSON_ID', 0) as number
@Entry
@Component
struct EditUser {
  private selectedDate: Date = new Date()
  @State personCertificateInfo: personCertificateRow = {
    certificateName: '',
    certificateLevel: '',
    certificateNo: '',
    certificateId: 1,
    certificateImg: '',
    issueDate: '选择日期',
    memo: '无',
    personId
  }
  @State selectValue: string = '请选择证书类型'
  @State certificateData: CertificateRow[] = []
  @State certificateList: string[] = []
  @State isEdit: boolean = false
  async aboutToAppear() {
    console.log(JSON.stringify(personId))
    const result: AxiosResponse<personCertificateTest> = await getPersonalCertificate({pageNum: 1, pageSize: 10, personId: Number(personId)})
    const res: AxiosResponse<CertificateTest> =  await getCertificateList({pageNum: 1, pageSize: 10})
    this.isEdit = result.data.rows.length > 0
    if(result.data.rows.length > 0 ) {
      this.personCertificateInfo = result.data.rows[0]
      this.selectValue = this.personCertificateInfo?.certificateLevel + this.personCertificateInfo?.certificateName
    }
    this.certificateData = res.data.rows
    this.certificateList = res.data.rows.map((item: CertificateRow) => item.certificateLevel + item.certificateName)
    this.personCertificateInfo.certificateId = this.certificateData[0].certificateId
  }
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CertificateDialog({
      certificateList: this.certificateList,
      selectValue: this.selectValue,
      certificateData: this.certificateData,
      personCertificateInfo: this.personCertificateInfo
    })
  })
  photoBrowserController: CustomDialogController = new CustomDialogController({
    builder: PhotoBrowser({ imagesList: [baseUrl + this.personCertificateInfo.certificateImg]}),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top,
  })
  build() {
    Column(){
      NavHeader({ title: '证书信息'})
      Column(){
        Column(){
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('证书类型')
            }.width(90)
            Text(this.selectValue == '' ? '选择证书类型' : this.selectValue).layoutWeight(1).padding({left: 8,right: 8, top: 16, bottom: 16})
              .onClick(() => {
              this.dialogController.open()
            })
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('证书编号')
            }.width(90)
            TextInput({placeholder: '请输入证书编号', text: $$this.personCertificateInfo.certificateNo})
              .backgroundColor('#fff').layoutWeight(1).type(InputType.Email)
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('颁发日期')
            }.width(90)
            Text(this.personCertificateInfo.issueDate).padding({top: 8, bottom: 8, left: 16, right: 16})
              .backgroundColor('#fff').layoutWeight(1).fontColor('#000').onClick(() => {
              CalendarPickerDialog.show({
                selected: this.selectedDate,
                onAccept: (value) => {
                  this.personCertificateInfo.issueDate = JSON.stringify(value).slice(1, 11)
                }
              })
            })
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('证书扫描件')
            }.width(90)
            Row({space: 20}){
              Image(this.personCertificateInfo.certificateImg !== '' ? baseUrl + this.personCertificateInfo.certificateImg : $r('app.media.certificateCard')).width(120).height(120)
                .onClick(async () => {
                  let that = this
                  let uploader = await uploadFile() as request.UploadTask
                  // 3. 监控上传错误
                  uploader.on('fail', (err) => {
                    console.log('上传错误--->', JSON.stringify(err))
                  })
                  //   4. 获取服务器返回来的数据
                  uploader.on('headerReceive',(res)=>{
                    let uploadInfo = JSON.parse(res['body']) as uploadResult
                    that.personCertificateInfo.certificateImg = uploadInfo.fileName
                  })
                })
            }.layoutWeight(1).margin({left: 20})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('备注')
            }.width(100)
            TextArea({
              text: $$this.personCertificateInfo.memo,
              placeholder: '请输入内容'
            }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
              .border({width: 1, color: "#eee"})
          }.padding({top: 10, bottom: 10})
        }.backgroundColor('#fff').width('100%').padding({left: 5, right: 5}).borderRadius(10)
      }.padding(10).margin({bottom: 20, top: 10}).layoutWeight(1)
      Row({ space: 10 }){
        Text('提交').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => {
            let valueArr = Object.values(this.personCertificateInfo) as (string | number)[]
            if(!valueArr.every(item => item !== '')) return promptAction.showToast({message: '请填写完整信息'})
            if(this.isEdit) {
              await updatePersonalCertificate(this.personCertificateInfo)
              promptAction.showToast({
                message: '更新成功,点击刷新查看数据'
              })
            } else {
              await addPersonalCertificate(this.personCertificateInfo)
              promptAction.showToast({
                message: '添加成功,点击刷新查看新数据'
              })
            }
        })
        Text('图片预览').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(() => {
            this.photoBrowserController.open()
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}