This commit is contained in:
扈兆增 2026-04-27 11:58:53 +08:00
commit e9318c6466
4 changed files with 356 additions and 15 deletions

View File

@ -173,6 +173,15 @@
> >
忘记密码 忘记密码
</a-button> --> </a-button> -->
<a-button
type="link"
size="mini"
block
@click="goRegister"
:style="{ marginTop: '10px', border: 'none' }"
>
注册
</a-button>
<!-- 忘记密码 --> <!-- 忘记密码 -->
</a-form> </a-form>
@ -373,6 +382,7 @@ function onFinish() {
setPath("/login-sjtb"); setPath("/login-sjtb");
router.push({ path: "/" }); router.push({ path: "/" });
state.loading = false; state.loading = false;
message.success("登录成功");
}) })
.catch(() => { .catch(() => {
getCode(); getCode();
@ -443,7 +453,10 @@ const startCountdown = () => {
// const showForgotPasswordPage = () => { // const showForgotPasswordPage = () => {
// showForgotPassword.value = true; // showForgotPassword.value = true;
// }; // };
//
const goRegister = () => {
router.push({ path: "/register" });
};
// //
const backToLogin = () => { const backToLogin = () => {
showForgotPassword.value = false; showForgotPassword.value = false;
@ -631,7 +644,7 @@ onMounted(() => {
position: absolute; position: absolute;
top: 20%; top: 20%;
left: 18%; left: 18%;
width: 490px; width: 700px;
height: 112px; height: 112px;
color: #040504; color: #040504;
font-size: 40px; font-size: 40px;

View File

@ -0,0 +1,324 @@
<template>
<div class="register-container">
<div class="register-wrapper">
<!-- 左侧背景图区域 -->
<div class="left-section">
<div class="slogan">
<p>{{ $t("login.titleSjtb") }}</p>
</div>
</div>
<!-- 右侧注册表单区域 -->
<div class="right-section">
<a-tabs v-model:activeKey="activeTab" class="register-tabs">
<a-tab-pane key="register" tab="用户注册">
<a-form
:model="registerData"
:rules="registerRules"
layout="vertical"
class="form-container"
@finish="onRegister"
>
<!-- 登录账号 -->
<a-form-item name="username" label="登录账号">
<a-input
v-model:value="registerData.username"
placeholder="请输入登录账号4-20个字符"
:prefix="h(UserOutlined)"
/>
</a-form-item>
<!-- 真实姓名 -->
<a-form-item name="realName" label="真实姓名">
<a-input
v-model:value="registerData.realName"
placeholder="请输入真实姓名"
/>
</a-form-item>
<!-- 手机号 -->
<a-form-item name="phone" label="手机号">
<a-input
v-model:value="registerData.phone"
placeholder="请输入11位手机号"
:prefix="h(MobileOutlined)"
/>
</a-form-item>
<!-- 密码 -->
<a-form-item name="password" label="密码">
<a-input-password
v-model:value="registerData.password"
placeholder="请设置密码6-20个字符"
:prefix="h(LockOutlined)"
/>
</a-form-item>
<!-- 确认密码 -->
<a-form-item name="confirmPassword" label="确认密码">
<a-input-password
v-model:value="registerData.confirmPassword"
placeholder="请再次输入密码"
:prefix="h(LockOutlined)"
/>
</a-form-item>
<!-- 验证码 -->
<a-form-item name="code" label="验证码">
<a-row :gutter="8">
<a-col :span="16">
<a-input
v-model:value="registerData.code"
placeholder="请输入验证码"
/>
</a-col>
<a-col :span="8">
<img
v-if="captchaImg"
:src="captchaImg"
@click="refreshCaptcha"
style="cursor: pointer; width: 100%; height: 36px;"
/>
</a-col>
</a-row>
</a-form-item>
<!-- 注册按钮 -->
<a-button
type="primary"
size="large"
block
htmlType="submit"
:loading="loading"
>
<span>立即注册</span>
</a-button>
<!-- 返回登录 -->
<a-button
type="link"
size="small"
block
@click="backToLogin"
:style="{ marginTop: '10px' }"
>
已有账号返回登录
</a-button>
</a-form>
</a-tab-pane>
</a-tabs>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, h } from "vue";
import { UserOutlined, LockOutlined, MobileOutlined } from "@ant-design/icons-vue";
import { getCaptcha, registerUser } from "@/api/auth";
import { message } from "ant-design-vue";
import router from "@/router";
import { encrypt } from "@/utils/rsaEncrypt";
//
const registerData = reactive({
//
username: "",
realName: "",
phone: "",
password: "",
confirmPassword: "",
code: "",
uuid: "",
//
userType: 1,
status: 1,
regStatus: 0
});
//
const registerRules = {
//
username: [
{ required: true, message: "请输入登录账号", trigger: "blur" },
{ min: 4, max: 20, message: "账号长度4-20个字符", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_]+$/, message: "只能包含字母、数字和下划线", trigger: "blur" }
],
//
realName: [
{ required: true, message: "请输入真实姓名", trigger: "blur" },
{ min: 2, max: 20, message: "姓名长度2-20个字符", trigger: "blur" }
],
//
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号", trigger: "blur" }
],
//
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 20, message: "密码长度6-20个字符", trigger: "blur" }
],
//
confirmPassword: [
{ required: true, message: "请再次输入密码", trigger: "blur" },
{
validator: (rule: any, value: string) => {
if (value && value !== registerData.password) {
return Promise.reject("两次输入的密码不一致");
}
return Promise.resolve();
},
trigger: "blur"
}
],
//
code: [
{ required: true, message: "请输入验证码", trigger: "blur" }
]
};
const loading = ref(false);
const captchaImg = ref("");
const activeTab = ref("register");
//
const refreshCaptcha = async () => {
try {
const res = await getCaptcha();
registerData.uuid = res.data.verifyCodeKey;
captchaImg.value = res.data.verifyCodeImg; // base64
} catch (error) {
message.error("获取验证码失败");
}
};
//
const onRegister = async () => {
loading.value = true;
try {
//
const encryptedPassword = encrypt(registerData.password);
//
const registerParams = {
username: registerData.username,
realName: registerData.realName,
phone: registerData.phone,
password: encryptedPassword,
//
userType: 1,
status: 1,
regStatus: 0,
//
code: registerData.code,
uuid: registerData.uuid
};
//
await registerUser(registerParams);
message.success("注册成功,等待管理员审核");
//
setTimeout(() => {
router.push({ path: "/login" });
}, 1500);
} catch (error: any) {
message.error(error.message || "注册失败,请重试");
//
refreshCaptcha();
} finally {
loading.value = false;
}
};
//
const backToLogin = () => {
router.push({ path: "/login" });
};
//
onMounted(() => {
refreshCaptcha();
});
</script>
<style scoped lang="scss">
.register-container {
margin: 0 auto;
position: relative;
width: 100%;
height: 100%;
min-width: 1500px;
background-color: #fff;
.register-wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 600px;
background: url("@/assets/images/bg_sjtb.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
//
.left-section {
.slogan {
position: absolute;
top: 20%;
left: 18%;
width: 700px;
height: 112px;
color: #040504;
font-size: 40px;
}
}
//
.right-section {
position: absolute;
left: 70%;
top: 15%;
width: 25%;
// max-height: 650px;
// max-width: 400px;
min-height: 650px;
border-radius: 3px;
padding: 20px 24px 24px;
background-color: #fff;
overflow-y: auto;
:deep(.ant-form-item) {
margin-bottom: 14px;
}
:deep(.ant-form-item-label > label) {
font-size: 13px;
}
:deep(.ant-input-prefix) {
display: flex;
width: 26px;
svg {
width: 18px;
height: 18px;
margin-right: 4px;
}
}
}
}
</style>

View File

@ -117,8 +117,8 @@ let columns = ref([
}, },
{ {
title: '提交人', title: '提交人',
dataIndex: 'applyUserId', dataIndex: 'applyUserName',
key: 'applyUserId', key: 'applyUserName',
width: 120, width: 120,
align: 'center' align: 'center'
}, },
@ -140,15 +140,17 @@ let columns = ref([
}, },
{ {
title: '审批人', title: '审批人',
dataIndex: 'approverId', dataIndex: 'approverName',
key: 'approverId', key: 'approverName',
width: 120 width: 120,
align: 'center'
}, },
{ {
title: '审批时间', title: '审批时间',
dataIndex: 'approveTime', dataIndex: 'approveTime',
key: 'approveTime', key: 'approveTime',
width: 160, width: 160,
align: 'center'
}, },
{ {
@ -209,9 +211,10 @@ const approvalLogColumns = ref([
}, },
{ {
title: '操作人', title: '操作人',
dataIndex: 'operatorId', dataIndex: 'operatorName',
key: 'operatorId', key: 'operatorName',
width: 150 width: 150,
align: 'center'
}, },
{ {
title: '操作时间', title: '操作时间',
@ -255,9 +258,10 @@ const changeLogColumns = ref([
}, },
{ {
title: '操作人', title: '操作人',
dataIndex: 'operatorId', dataIndex: 'operatorName',
key: 'operatorId', key: 'operatorName',
width: 150 width: 150,
align: 'center'
}, },
{ {
title: '操作时间', title: '操作时间',

View File

@ -68,7 +68,7 @@ const input = ref("");
const title = ref(""); const title = ref("");
const info: any = ref({ const info: any = ref({
rolename: "", rolename: "",
level: "系统管理员", level: "2",
description: "", description: "",
}); });
const faultList: any = [ const faultList: any = [
@ -90,7 +90,7 @@ function addClick() {
title.value = "新增角色"; title.value = "新增角色";
info.value = { info.value = {
rolename: "", rolename: "",
level: "系统管理员", level: "2",
description: "", description: "",
}; };
dialogVisible.value = true; dialogVisible.value = true;