【原】vue3+TS人资实战学习技巧笔记

一、项目模板地址

https:///risingsunblog/hrsass-v3.git

master：开发模板（方便学习编写代码）

complete：完整代码

二、阅读代码

1、表单验证

校验规则，示例代码

//校验规则
const rules = {
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 32, message: '密码必须是6-32位', trigger: 'blur' }
  ]
}

绑定vue表单

<el-form ref="login" class="login-form" auto-complete="on" label-position="left" :model="loginForm" :rules="rules">
      <!-- 放置标题图片 @是设置的别名-->
      <div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="">
        </h3>
      </div>

      <el-form-item prop="mobile">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input ref="username" v-model="loginForm.mobile" placeholder="请输入您的手机号" name="username" type="text"
          tabindex="1" auto-complete="on" />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input ref="password" :type="passwordType === 'password' ? 'password' : 'text'" v-model="loginForm.password"
          placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <el-button type="primary" style="width: 100%; margin-bottom: 30px" class="loginBtn"
        @click="handleLogin" :loading="loading">登录</el-button>

handleLogin事件方法

//登录
const login = ref<FormInstance>()
const handleLogin = () => {
  // 1.校验表单
  login?.value?.validate(async (valid) => {
    if (!valid) return
     //验证通过执行逻辑
  })
}

2、多实体属性，结果合并

以前，一般通过object.assign()的方法进行拷贝，这里通过 & 符号。示例代码

export type UserProfile = {
  userId: string,
  mobile: string,
  username: string,
  roles: roles,
  companyId: string,
  company: string
}

export type UserInfo = {
  staffPhoto: string,
  id: string,
  mobile: string,
  username: string,
  password: string,
  timeOfEntry: string,
  workNumber: string,
  correctionTime: string,
  departmentName: string,
  roleIds: string[],
  companyId: string,
  companyName: string
}

合并属性

type UserFullInfo = UserProfile & UserInfo
const userInfo = ref<UserFullInfo>()

查询结果赋值

  const res = await getUserProfileApi()//用户形象信息
    const res2 = await getUserInfoApi(res.data.userId)//用户信息
    userInfo.value = { ...res.data, ...res2.data }