请教表单自定义图形验证码输入组件如何绑定两个字段：verifyCodeId, verifyCode 到 formData 中？

[shilohooo]

需求

自定义图形验证码输入框组件，如何把组件内部获取到的验证码唯一标识以及用户输入的验证码，绑定到 formData 到字段中，字段通过 filedName 指定，如：

{
  component: markRaw(CaptchaInput),
  fieldName: '[verifyCodeId,verifyCode]',
  // rules:
},

示例代码

登陆页

<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import { computed } from 'vue';

import { AuthenticationLogin, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useAuthStore } from '#/store';
import CaptchaInput from '#/views/_core/authentication/captcha/index.vue';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(CaptchaInput),
      fieldName: '[verifyCodeId,verifyCode]',
      // rules:
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    @submit="authStore.authLogin"
  />
</template>

图形验证码输入框

<!--
  * 组件 - 图形验证码输入框
  * @author shiloh
-->
<script setup lang="ts">
import { AuthApi, getCaptcha } from '#/api';

defineOptions({ name: 'CaptchaInput' });

const modelValue = defineModel<[string, string | undefined]>({
  default: ['', undefined],
});
const inputCaptcha = ref<string | undefined>(undefined);

const captcha = ref<AuthApi.CaptchaResp>({
  codeId: '',
  codeImage: '',
});

async function getCaptchaImg() {
  captcha.value = await getCaptcha();
  inputCaptcha.value = undefined;
  modelValue.value = [captcha.value.codeId, ''];
}

function handleInputCaptchaChange() {
  modelValue.value = [captcha.value.codeId, inputCaptcha.value];
}

onMounted(async () => {
  await getCaptchaImg();
});
</script>

<template>
  <el-input
    v-model="inputCaptcha"
    placeholder="请输入验证码"
    class="h-10"
    @change="handleInputCaptchaChange"
  >
    <template #suffix>
      <el-image
        :src="captcha.codeImage"
        @click="getCaptchaImg"
        class="hover:cursor-pointer"
      />
    </template>
  </el-input>
</template>

<style scoped />

目前获取到的数据格式为如下所示：

{
  "username": "shiloh",
  "password": "123456",
  "verifyCodeId,verifyCode": [
    "a7b3f4f73c6c4304969ccb25b73b1d95",
    "86qmz"
  ]
}

期望的数据格式：

{
  "username": "shiloh",
  "password": "123456",
  "verifyCodeId": "a7b3f4f73c6c4304969ccb25b73b1d95",
  "verifyCode": "86qmz"
}

[shilohooo]

目前我的解决办法是在图形验证码输入框组件内容提交一个事件，将验证码唯一标识传出去：

验证码输入框：

<!--
  * 组件 - 图形验证码输入框
  * @author shiloh
-->
<script setup lang="ts">
import { AuthApi, getCaptcha } from '#/api';

defineOptions({ name: 'CaptchaInput' });

// ===========> 新的改动
const emits =
  defineEmits<(e: 'verifyCodeIdChange', verifyCodeId: string) => void>();

const modelValue = defineModel<string | undefined>({
  default: undefined,
});

const captcha = ref<AuthApi.CaptchaResp>({
  codeId: '',
  codeImage: '',
});

async function getCaptchaImg() {
  captcha.value = await getCaptcha();
  modelValue.value = undefined;
  // ===========> 新的改动
  emits('verifyCodeIdChange', captcha.value.codeId);
}

onMounted(async () => {
  await getCaptchaImg();
});
</script>

<template>
  <div class="flex w-full items-center gap-x-2">
    <el-input
      v-model.trim="modelValue"
      placeholder="请输入验证码"
      class="h-10 w-full"
      :maxlength="5"
    />
    <div
      class="flex items-center justify-center overflow-hidden rounded-md bg-gray-300 p-2 hover:cursor-pointer"
      @click="getCaptchaImg"
    >
      <el-image :src="captcha.codeImage" alt="Captcha" fit="cover" />
    </div>
  </div>
</template>

<style scoped />

然后登陆页面在表单组件的 componentProps 定义中处理回调：

<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
import type { Recordable } from '@vben/types';

import { computed } from 'vue';

import { AuthenticationLogin, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { AuthApi } from '#/api';
import { useAuthStore } from '#/store';
import CaptchaInput from '#/views/_core/authentication/captcha/index.vue';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

// ===========> 新的改动
const verifyCodeId = ref<string | undefined>(undefined);

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(CaptchaInput),
      // ===========> 新的改动
      componentProps: {
        onVerifyCodeIdChange(codeId: string) {
          console.log('codeId', codeId);
          verifyCodeId.value = codeId;
        },
      },
      fieldName: 'verifyCode',
      label: $t('authentication.captcha'),
      rules: z.string().min(1, { message: $t('authentication.captchaTip') }),
    },
  ];
});

/**
 * 用户登陆
 * @param formData 登录表单数据
 * @author shiloh
 */
async function handleLogin(formData: Recordable<any>) {
  const loginReq = {
    ...formData,
    // ===========> 新的改动
    verifyCodeId: verifyCodeId.value,
  } as AuthApi.LoginParams;
  await authStore.authLogin(loginReq);
}
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    @submit="handleLogin"
  />
</template>