<script setup lang="ts">
|
import { reactive, ref, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { formValidate } from '@jnpf/utils';
|
|
import { Button } from 'ant-design-vue';
|
|
import { applySaasApi, getTenantMobileCode } from '#/api/core/auth';
|
import { $t } from '#/locales';
|
|
import { useFormValid } from './useLogin';
|
|
interface State {
|
formData: any;
|
formRules: any;
|
loading: boolean;
|
codeDisabled: boolean;
|
codeText: string;
|
codeTimer: any;
|
}
|
|
const state = reactive<State>({
|
formData: {
|
companyName: '',
|
userName: '',
|
mobile: '',
|
mobileCode: '',
|
},
|
formRules: {
|
companyName: [
|
{ required: true, message: '请输入企业名称' },
|
{ validator: formValidate('fullName'), trigger: 'blur' },
|
],
|
userName: [
|
{ required: true, message: '请输入联系人' },
|
{ validator: formValidate('fullName'), trigger: 'blur' },
|
],
|
mobile: [
|
{ required: true, message: '请输入手机号' },
|
{ validator: formValidate('iphone'), trigger: 'blur' },
|
],
|
mobileCode: [{ required: true, message: '请输入验证码' }],
|
},
|
loading: false,
|
codeDisabled: false,
|
codeText: $t('sys.login.getCode'),
|
codeTimer: null,
|
});
|
|
const { formData, formRules, loading, codeDisabled, codeText } = toRefs(state);
|
const { createMessage } = useMessage();
|
const formRef = ref();
|
const { validForm } = useFormValid(formRef);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
|
function init() {
|
state.loading = false;
|
state.formData.companyName = '';
|
state.formData.userName = '';
|
state.formData.mobile = '';
|
state.formData.mobileCode = '';
|
initCodeState();
|
}
|
async function getSmsCode() {
|
if (state.codeDisabled) return;
|
const values = await formRef.value?.validate(['mobile']);
|
if (!values) return;
|
state.codeDisabled = true;
|
const query = { mobile: state.formData.mobile };
|
getTenantMobileCode(query)
|
.then(() => {
|
createMessage.success('发送成功');
|
state.codeDisabled = true;
|
let second = 60;
|
state.codeText = `${$t('sys.login.reSend')}(${second})`;
|
state.codeTimer = setInterval(execute, 1000);
|
function execute() {
|
second--;
|
if (second) {
|
state.codeText = `${$t('sys.login.reSend')}(${second})`;
|
} else {
|
initCodeState();
|
}
|
}
|
})
|
.catch(() => {
|
state.codeDisabled = false;
|
});
|
}
|
function initCodeState() {
|
state.codeDisabled = false;
|
state.codeText = $t('sys.login.getCode');
|
clearInterval(state.codeTimer);
|
}
|
async function handleSubmit() {
|
if (state.loading) return;
|
const data = await validForm();
|
if (!data) return;
|
state.loading = true;
|
applySaasApi(data)
|
.then((res) => {
|
createMessage.success(res.msg);
|
state.loading = false;
|
closeModal();
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="企业申请" :footer="null" destroy-on-close>
|
<a-form :colon="false" :label-col="{ style: { width: '80px' } }" layout="vertical" :model="formData" :rules="formRules" ref="formRef">
|
<a-form-item label="企业名称" name="companyName">
|
<jnpf-input v-model:value="formData.companyName" :maxlength="50" placeholder="请输入企业名称" />
|
</a-form-item>
|
<a-form-item label="联系人" name="userName">
|
<jnpf-input v-model:value="formData.userName" :maxlength="15" placeholder="请输入姓名" />
|
</a-form-item>
|
<a-form-item label="联系电话" name="mobile">
|
<jnpf-input v-model:value="formData.mobile" placeholder="请输入手机号" />
|
</a-form-item>
|
<a-form-item label="" name="mobileCode">
|
<a-row type="flex" justify="space-between">
|
<a-col :span="16">
|
<a-input v-model:value="formData.mobileCode" :placeholder="$t('sys.login.codeTip')" size="large" />
|
</a-col>
|
<a-col :span="7">
|
<Button type="primary" size="large" block @click="getSmsCode" :disabled="codeDisabled">
|
{{ codeText }}
|
</Button>
|
</a-col>
|
</a-row>
|
</a-form-item>
|
<a-form-item label="" class="py-[20px]">
|
<Button type="primary" size="large" block :loading="loading" @click="handleSubmit">提交申请</Button>
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
