labsop_h5/src/view/user/edit.vue

<template>
  <div class="app-container">
    <header>
      <img :src="userInfos.avatar" alt="" />
      <div class="content">
        <p class="bold">
          <van-text-ellipsis :content="`${userInfos.nickName}-${userInfos.userRoleNames}`" />
        </p>
        <p>
          <van-text-ellipsis :content="userInfos.pgName" />
        </p>
        <p>
          <van-text-ellipsis :content="userInfos.deptName" />
        </p>
      </div>
    </header>
    <van-form ref="formRef" @submit="onSubmit" class="mt10" required="auto">
      <van-cell-group>
        <van-field v-model="state.form.nickName" label="用户昵称" placeholder="用户昵称" :rules="[{ required: true, message: '请输入用户昵称' }]" />
        <van-field v-model="state.form.phone" label="手机号" placeholder="手机号"> </van-field>
        <van-field v-model="state.form.email" label="电子邮箱" placeholder="电子邮箱" />
        <van-field v-model="state.form.sex" label="性别" placeholder="性别">
          <template #input>
            <van-radio-group v-model="state.form.sex" direction="horizontal">
              <van-radio v-for="item in userSexList" :key="item.id" :name="item.dictValue">{{ item.dictLabel }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="state.form.pgName" label="课题组" placeholder="课题组" readonly></van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 保存 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
  import { storeToRefs } from 'pinia'
  import { useUserInfo } from '/@/stores/userInfo'
  import { Local } from '/@/utils/storage'
  import { showConfirmDialog, showNotify } from 'vant'
  import { useRouter } from 'vue-router'
  import { onMounted, reactive, ref } from 'vue'
  import { useUserApi } from '/@/api/system/user'
  import to from 'await-to-js'
  import { useDictApi } from '/@/api/system/dict'

  const router = useRouter()
  const storesUseUserInfo = useUserInfo()
  const { userInfos } = storeToRefs(storesUseUserInfo)
  const userApi = useUserApi()
  const formRef = ref()
  const dictApi = useDictApi()
  const userSexList = ref(<RowDicDataType[]>[])
  const state = reactive({
    form: {
      id: 0,
      userId: 0, // 用户账号
      nickName: '', // 用户昵称
      phone: '', // 手机号
      email: '', // 电子邮件
      sex: '', // 性别
      avatar: '', // 头像图片地址
      pgName: ''
    },
    dialog: {
      isShowDialog: false,
      type: '',
      title: '',
      submitTxt: ''
    }
  })
  const getDicts = () => {
    Promise.all([dictApi.getDictDataByType('sys_com_sex')]).then(([sex]) => {
      userSexList.value = sex.data.values || []
    })
  }
  const onClickRight = () => {
    router.go(-1)
  }
  const initForm = async () => {
    const [err, res]: ToResponse = await to(userApi.getProfile())
    if (err) return
    state.form = res?.data
  }
  const onSubmit = async () => {
    const [errValid] = await to(formRef.value.validate())
    if (errValid) return
    state.form.userId = state.form.id
    const params = JSON.parse(JSON.stringify(state.form))
    const [err]: ToResponse = await to(userApi.updateProfile(params))
    if (err) return
    showNotify({
      type: 'success',
      message: '修改成功'
    })
    storesUseUserInfo.setUserInfos()
    router.push('/user')
  }
  onMounted(() => {
    getDicts()
    initForm()
  })
</script>

<style lang="scss" scoped>
  .app-container {
    header {
      background-color: #1c9bfd;
      color: #fff;
      padding: 10px;
      border-radius: 8px;
      margin-top: 10px;
      display: flex;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        .bold {
          display: flex;
          align-items: center;
          font-weight: bold;
          // flex-wrap: nowrap;
          white-space: nowrap;
          .van-text-ellipsis {
            flex: 1;
          }
        }
      }
    }
  }
</style>