# odinVueUtil

**Repository Path**: odinsam/odinVueUtil

## Basic Information

- **Project Name**: odinVueUtil
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# odinVueUtil

#### vue3 表单操作

##### 1. 构建表单数据

```typescript
import { userLogin } from "@/api/axiosApi";
import type { LoginModel } from "./models/loginModel";
import { FormUtils, useForm } from "odinvueutil";
import { StringUtil, type ApiResult } from "odin-node-util";

export function useAuth() {
  // 初始化登录表单数据
  const loginForm = FormUtils.InitFormData<LoginModel>({
    loginName: "",
    loginPwd: "",
  });

  // 初始化登录表单验证规则
  const loginRules = FormUtils.InitFormRules<LoginModel>({
    loginName: [
      { required: true, message: "请填写登录名", trigger: "blur" },
      { min: 6, max: 12, message: "登录名长度 6-12 位", trigger: "blur" },
    ],
    loginPwd: [
      { required: true, message: "请填写登录密码", trigger: "blur" },
      { min: 6, max: 12, message: "登录密码长度 6-12 位", trigger: "blur" },
    ],
  });

  // 提交前的处理：将密码加密
  const beforeSubmit = (formData: LoginModel) => {
    formData.loginPwd = StringUtil.toMd5(formData.loginPwd).toUpperCase();
  };

  // 提交成功后的处理
  const onSubmitSuccess = (result: ApiResult<LoginModel>) => {
    console.log("登录成功", result);
    // 例如：跳转到首页
    // router.push("/home");
  };

  // 提交失败后的处理
  const onSubmitError = (error: any) => {
    console.error("登录失败", error);
  };

  const onError = (error: any) => {
    console.error("接口访问失败", error);
  };

  // 使用 useForm Hook
  const { formRef, submitForm } = useForm(
    loginForm,
    loginRules,
    userLogin,
    beforeSubmit,
    onSubmitSuccess,
    onSubmitError,
    onError
  );

  return {
    formRef,
    loginForm,
    loginRules,
    submitForm,
  };
}
```

##### 2. vue 页面使用

```vue
<template>
  <div class="auth-cover-sidebar-inner">
    <div class="auth-cover-card-wrapper">
      <el-form
        ref="formRef"
        :model="loginForm"
        class="w-100 mt-4 pt-2"
        :rules="loginRules"
      >
        <div class="mb-4">
          <el-form-item prop="loginName">
            <el-input
              v-model="loginForm.loginName"
              type="text"
              placeholder="登录名"
            />
          </el-form-item>
        </div>
        <div class="mb-3">
          <el-form-item prop="loginPwd">
            <el-input
              v-model="loginForm.loginPwd"
              type="password"
              placeholder="密码"
            />
          </el-form-item>
        </div>
        <div class="mt-4">
          <el-button
            type="primary"
            class="w-100 btn-lg p-4 btn-r"
            @click="submitForm"
          >
            Login
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuth } from "@/hooks/useAuth";

const { formRef, loginForm, loginRules, submitForm } = useAuth();
</script>

<style scoped>
@import "@/styles/page/login.scss";
</style>
```