PersonDetail.ets 6.6 KB
import AreaPickerDialog from '../dialog/AreaPickerDialog'
import { personData, personTest } from '../api/userType'
import baseUrl from '../utils/baseUrl'
import { router } from '@kit.ArkUI';
import { AxiosResponse } from '@ohos/axios'
import NavHeader from '../components/NavHeader'
import { getPersonDetail } from '../api/user'
interface routerQuery {
  personId: number
}

let getTextInfo = (state: string | null) => {
  if(state == '0') {
    return '离职'
  } else if(state == '1') {
    return '待确定'
  } else if(state == '2') {
    return '在职'
  } else {
    return ''
  }
}

let routerParams = router.getParams() as routerQuery
let personId = routerParams.personId
@Entry
@Component
struct EditUser {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  @State isShowCode: boolean = false
  @State userInfo: personData = {
    createBy:    '',
    createTime:  '',
    updateBy:    '',
    updateTime:  '',
    remark:      '',
    personId:    0,
    personName:  '',
    email:       '',
    gender:      '',
    birthDate:   '',
    idNo:        '',
    phone:       '',
    personalImg: '',
    idImgFront:  '',
    idImgBack:   '',
    address:     '',
    userId:      0,
    username:    '',
    state:       '',
    companyId:   0,
  }
  @State pickerValue:string[] = ['广西壮族自治区','南宁市','青秀区']//省市区选中值
  areaController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({
      value:this.pickerValue,//首次默认选中值
      onChange: (value:string[]) => {//选择改变回调
        this.pickerValue = value
        this.userInfo.address = this.pickerValue.join(' ')
      }
    }),
    customStyle: true
  })

  async aboutToAppear(){
    let res: AxiosResponse<personTest> = await getPersonDetail(personId)
    this.userInfo = res.data.data
  }
  build() {
    Column(){
      NavHeader({title: '个人信息'})
      Column(){
        Column(){
          Row(){
            Row(){
              Text().width(3).height(16).backgroundColor('#1890ff').margin({right: 10})
              Text('基本信息').fontSize(12).fontColor('#999')
            }
          }.border({width: {bottom: 1}, color: '#eee'}).justifyContent(FlexAlign.Start).width('100%').padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Text('姓名').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.personName).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('员工状态').fontSize(14).fontColor('#999')
            }.width(90)
            Text(getTextInfo(this.userInfo.state || '2')).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('邮箱').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.email).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('性别').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.gender == '0' ? '男': '女').fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('出生日期').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.birthDate).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('身份证号').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.idNo).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('手机号').fontSize(14).fontColor('#999')
            }.width(90)
            Text(this.userInfo.phone).fontSize(12).fontColor('#999')
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Row(){
              Text('个人照片').fontSize(14).fontColor('#999')
            }.width(90)
            Row(){
              Image(baseUrl + this.userInfo.personalImg || $r('app.media.userAvatar')).width(60)
            }.margin({left: 20})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween).height(80)
          Row(){
            Row(){
              Text('证件正面').fontSize(14).fontColor('#999')
            }.width(90)
            Row(){
              Image(baseUrl + this.userInfo.idImgFront || $r('app.media.idCard')).width(60)
            }.margin({left: 20})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween).height(80)
          Row(){
            Row(){
              Text('证件反面').fontSize(14).fontColor('#999')
            }.width(90)
            Row(){
              Image(baseUrl + this.userInfo.idImgBack || $r('app.media.unIdCard')).width(60)
            }.margin({left: 20})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10}).width('100%')
          .justifyContent(FlexAlign.SpaceBetween).height(80)
          Row(){
            Row(){
              Text('地址').fontSize(14).fontColor('#999')
            }.width(70)
            Text(this.pickerValue.join(' ')).padding({top: 8, bottom: 8, left: 16, right: 16}).fontSize(12).fontColor('#999')
              .backgroundColor('#fff').fontColor('#999').textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(2)
          }.padding({top: 10, bottom: 10}).justifyContent(FlexAlign.SpaceBetween).width('100%')
        }.backgroundColor('#fff').width('100%').height('100%').padding({left: 10, right: 10}).borderRadius(10)
      }.padding(10).margin({bottom: 20, top: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}