marking-cet-web/src/modules/bootstrap/init-name/index.vue

<template>
  <div class="grid full init-name-view">
    <div class="init-name-modal">
      <div class="p-l-large modal-header">首次登录，请填写姓名</div>
      <div class="login-modal-content">
        <base-form ref="formRef" :model="model" :items="items" size="large"></base-form>
        <div class="m-t-super-large">
          <confirm-button ok-text="确定" cancel-text="退出" :loading="loading" @confirm="onSubmit" @cancel="logout">
          </confirm-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="InitUserName">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import BaseForm from '@/components/element/BaseForm.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import useFetch from '@/hooks/useFetch'
import useForm from '@/hooks/useForm'
import useMainStore from '@/store/main'
import { logout } from '@/utils/shared'

import type { EpFormItem } from 'global-type'

const { replace } = useRouter()

const mainStore = useMainStore()

const model = reactive<{ name: string }>({ name: '' })

const { formRef, elFormRef } = useForm()

const items: EpFormItem[] = [
  {
    prop: 'name',
    slotType: 'input',
    slot: {
      placeholder: '请输入你的姓名',
    },
  },
]

const { loading, fetch } = useFetch('updateUserName')

async function onSubmit() {
  if (!elFormRef) {
    return
  }
  try {
    await elFormRef.value?.validate()
    await fetch({ name: model.name })
    mainStore.getMyUserInfo()
    replace({ name: mainStore.loginInfo?.role === 'MARKER' ? 'MarkingMark' : 'AnalysisMonitoring' })
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped lang="scss">
.init-name-view {
  place-items: center;
  .init-name-modal {
    width: 640px;
    background: $LoginModalBg;
    border-radius: $LoginModalRadius;
    overflow: hidden;
    .modal-header {
      height: $LoginModalHeaderHeight;
      line-height: $LoginModalHeaderHeight;
      background: $LoginModalHeaderBg;
      font-size: $LoginModalHeaderFontSize;
      font-weight: normal;
      color: $LoginModalHeaderFontColor;
    }
    .login-modal-content {
      padding: 52px 80px;
    }
    :deep(button.el-button) {
      width: 120px;
      height: 48px;
    }
  }
}
</style>