九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

一、項(xiàng)目模板地址

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

master：開發(fā)模板（方便學(xué)習(xí)編寫代碼）

complete：完整代碼

二、閱讀代碼

1、表單驗(yàn)證

校驗(yàn)規(guī)則，示例代碼

//校驗(yàn)規(guī)則
const rules = {
  mobile: [
    { required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '請(qǐng)輸入密碼', 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">
      <!-- 放置標(biāo)題圖片 @是設(shè)置的別名-->
      <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="請(qǐng)輸入您的手機(jī)號(hào)" 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="請(qǐng)輸入密碼" 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.校驗(yàn)表單
  login?.value?.validate(async (valid) => {
    if (!valid) return
     //驗(yàn)證通過執(zhí)行邏輯
  })
}

2、多實(shí)體屬性，結(jié)果合并

以前，一般通過object.assign()的方法進(jìn)行拷貝，這里通過 & 符號(hào)。示例代碼

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>()

查詢結(jié)果賦值

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