Uncaught (in promise) TypeError: formRef.validate is not a function

根据提供的代码片段和报错信息 `Uncaught (in promise) TypeError: formRef.validate is not a function`，可以推测以下几点：

1. **缺少对 `formRef` 的定义**：在代码中没有看到对 `formRef` 的定义。通常情况下，`formRef` 是一个引用对象，用于访问表单实例的方法（如 `validate`）。

2. **需要引入 `ref` 和 `onMounted`**：确保已经正确引入了 `ref` 和 `onMounted` 并且在组件中进行了定义。

3. **绑定 `formRef` 到表单**：需要在模板中将 `formRef` 绑定到表单元素上。

以下是修正后的代码示例：

### 修改后的代码

#### 模板部分

<template>
  <div class="all">
    <div class="left-column">
      <h2>欢迎使用智慧社区商城后台管理系统</h2>
      <img style="width: 300px; height: 300px;" src="../assets/logo1.jpg" alt="Logo" />
      <p>万里学院大数据与软件工程学院提供技术支持</p>
      <p>基于Vue+springBoot技术实现</p>
    </div>
    <a-divider class="divider" type="vertical"></a-divider>
    <div class="right-column">
      <a-form ref="formRef" :model="loginObject" style="margin-top: 35px;">
        <!-- 表单项 -->
        <a-form-item style="margin-left: 180px;" prop="companyCode">
          <svg class="login-icon" ...></svg>
          <a-select v-model="loginObject.companyCode" ...>
            <a-select-option v-for="item in companiesInfo" ...>{{ item.text }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="username">
          <svg class="login-icon2" ...></svg>
          <a-input class="ant-select-selection" size="large" v-model="loginObject.username" ... />
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="password" has-feedback>
          <svg class="login-icon3" ...></svg>
          <a-input-password class="ant-select-selection" type="password" size="large" v-model="loginObject.password" ... />
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="hallCode">
          <svg class="login-icon4" ...></svg>
          <a-select v-model="loginObject.hallCode" ...>
            <a-select-option v-for="item in hallCodeDataList" ...>{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="code">
          <svg class="login-icon5" ...></svg>
          <a-input class="ant-select-selection" size="large" v-model="loginObject.code" ... />
          <a-col :span="8" style="text-align: right;">
            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />
          </a-col>
        </a-form-item>
        <a-form-item style="margin-left: 180px;" prop="rememberMe">
          <a-checkbox v-model="loginObject.rememberMe">自动登录</a-checkbox>
          <a class="login-form-forgot" href="">忘记密码</a>
        </a-form-item>
        <a-form-item style="margin-left: 180px;">
          <a-button class="ant-select-selection" size="large" type="primary" html-type="submit" :loading="loginBtn" @click.prevent="handleSubmit" :disabled="loginBtn">
            确定
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

#### 脚本部分

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { login, getImage, getHallcode, getReadcard, gethallCode, getCompanies } from '../utils/api';
import md5 from 'md5';
import { encryption } from '../utils/encrption/aesEncrypt';

const router = useRouter();
const route = useRoute();
const loginBtn = ref(false);
const formRef = ref(null); // 定义 formRef
const loginObject = reactive({
  companyCode: '',
  username: '',
  password: '',
  hallCode: '',
  code: '',
  rememberMe: false,
});
// 其他变量定义...

const handleSubmit = async () => {
  const valid = await formRef.value.validate(); // 使用 formRef.value
  if (valid) {
    const loginParams = {
      companyCode: loginObject.companyCode,
      username: loginObject.username,
      password: encryption(new Date().getTime() + md5(loginObject.password), encryptedString.key, encryptedString.iv),
      hallCode: loginObject.hallCode,
      remember_me: loginObject.rememberMe,
      timestamp: new Date().getTime(),
      captcha: loginObject.code,
      checkKey: currdatetime,
    };
    loginBtn.value = true;
    try {
      const response = await login(loginParams);
      if (response.code === 200) {
        message.success('欢迎回来', 1);
        router.push("/photo");
      } else {
        console.error('登录失败', response.message);
      }
    } catch (error) {
      console.error('请求错误', error);
    } finally {
      loginBtn.value = false;
    }
  } else {
    loginBtn.value = false;
  }
};

// 其他方法...
</script>

### 关键点总结
1. **定义 `formRef`**：在 `<script setup>` 中使用 `ref` 定义 `formRef`。
2. **绑定 `formRef`**：在模板中的 `<a-form>` 标签上添加 `ref="formRef"`。
3. **使用 `formRef.value`**：在调用 `validate` 方法时，使用 `formRef.value.validate()`。

这样可以确保 `formRef` 正确地引用到表单实例，并且可以调用其方法。