<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { AesEncryption, encryptByMd5 } from '@jnpf/utils';
|
|
import { preferences } from '@vben/preferences';
|
|
import { joinSaas } from '#/api/permission/userSetting';
|
|
defineOptions({ name: 'Join' });
|
|
const router = useRouter();
|
const route = useRoute();
|
const aesEncryption = new AesEncryption();
|
const { createMessage } = useMessage();
|
const btnLoading = ref<boolean>(false);
|
|
const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
|
baseColProps: { span: 24 },
|
layout: 'vertical',
|
schemas: [
|
{
|
field: 'tenantId',
|
label: '租户号',
|
component: 'Input',
|
componentProps: { placeholder: '打开链接时带入', disabled: true },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
{
|
field: 'companyName',
|
label: '企业名称',
|
component: 'Input',
|
componentProps: { placeholder: '打开链接时带入', disabled: true },
|
},
|
{
|
field: 'appId',
|
label: '应用编码',
|
component: 'Input',
|
componentProps: { placeholder: '打开链接时带入', disabled: true },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
{
|
field: 'appName',
|
label: '应用名称',
|
component: 'Input',
|
componentProps: { placeholder: '打开链接时带入', disabled: true },
|
},
|
{
|
field: 'account',
|
label: '您在该应用下的账号及密码',
|
component: 'Input',
|
componentProps: { placeholder: '请输入账号' },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
{
|
field: 'password',
|
label: '',
|
component: 'InputPassword',
|
componentProps: { placeholder: '请输入密码' },
|
rules: [{ required: true, trigger: 'blur', message: '必填' }],
|
},
|
],
|
});
|
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
btnLoading.value = true;
|
const password = encryptByMd5(values.password);
|
const encryptPassword = aesEncryption.encryptByAES(password);
|
const query = { ...values, password: encryptPassword };
|
joinSaas(query)
|
.then((res) => {
|
createMessage.success(res.msg).then(() => {
|
router.push(preferences.app.defaultHomePath);
|
btnLoading.value = false;
|
});
|
})
|
.catch(() => {
|
btnLoading.value = false;
|
});
|
}
|
function init() {
|
if (!route.query.encryption) return;
|
const encryption = route.query.encryption as string;
|
const configStr = aesEncryption.decryptByAES(encryption);
|
if (!configStr) return;
|
const config = JSON.parse(configStr);
|
resetFields();
|
setFieldsValue(config);
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
|
<template>
|
<div class="join-container">
|
<div class="join-container-main">
|
<div class="join-banner"></div>
|
<div class="join-form">
|
<div class="join-form-cap">加入企业</div>
|
<BasicForm @register="registerForm" />
|
<a-button type="primary" class="w-[150px]" @click="handleSubmit" :loading="btnLoading">确定</a-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.join-container {
|
height: 100%;
|
padding: 30px 0;
|
overflow: auto;
|
background: no-repeat top center;
|
background-color: #ecedf7;
|
background-image: url('@/assets/images/join/join-bg.png');
|
background-size: contain;
|
|
.join-container-main {
|
width: 1310px;
|
margin: 0 auto;
|
}
|
|
.join-banner {
|
height: 251px;
|
background-image: url('@/assets/images/join/join-head.png');
|
background-size: contain;
|
}
|
|
.join-form {
|
padding: 30px 100px;
|
background: var(--component-background);
|
border-radius: 0 0 8px 8px;
|
|
.join-form-cap {
|
position: relative;
|
padding-left: 10px;
|
margin-bottom: 20px;
|
font-size: 24px;
|
font-weight: 500;
|
line-height: 32px;
|
|
&::before {
|
position: absolute;
|
top: 5px;
|
left: 0;
|
display: block;
|
width: 6px;
|
height: 24px;
|
overflow: hidden;
|
content: '';
|
background-color: var(--primary-color);
|
border-radius: 4px 0 0 4px;
|
}
|
}
|
}
|
}
|
|
.dark,
|
.dark[data-theme='custom'],
|
.dark[data-theme='default'] {
|
.join-container {
|
background-color: #333;
|
background-image: none;
|
}
|
}
|
</style>
|
