doc

README.md

@@ -2,4 +2,5 @@
 
 - 前端 frontend
 - 后端 banckend
+- 文档 doc
   北京海事双共双跨系统项目

frontend/src/views/login.vue

@@ -1,75 +1,114 @@
 <template>
-    <div class="login">
-        <!--  -->
-        <el-form v-if="isFlag" ref="loginFirstRef" :model="loginForm" :rules="loginRules" class="login-form">
-            <h3 class="title">东航费用台账</h3>
-            <!-- 步骤一 -->
-            <el-form-item prop="username">
-                <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
-                    <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-                </el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-                <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
-                    @keyup.enter="handleAllLogin">
-                    <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-                </el-input>
-            </el-form-item>
-            <el-form-item prop="code" v-if="captchaEnabled">
-                <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
-                    @keyup.enter="handleAllLogin">
-                    <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-                </el-input>
-                <div class="login-code">
-                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                </div>
-            </el-form-item>
-            <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
-            <el-form-item style="width: 100%">
-                <el-button :loading="loading" size="large" type="primary" style="width: 100%"
-                    @click.prevent="handleAllLogin">
-                    登 录
-                </el-button>
-                <div style="float: right" v-if="register">
-                    <router-link class="link-type" :to="'/register'">立即注册</router-link>
-                </div>
-            </el-form-item>
-        </el-form>
-        <!-- 步骤二 -->
-        <el-form v-else ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-            <h3 class="title">东航费用台账</h3>
-            <el-form-item prop="phone">
-                <el-input v-model="loginForm.phone" type="text" size="large" auto-complete="off" placeholder="手机号"
-                    :disabled="true">
-                    <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-                </el-input>
-            </el-form-item>
-            <el-form-item style="width: 100%">
-                <div class="flex">
-                    <el-input v-model="loginForm.code" class="mr10" type="text" size="large" auto-complete="off"
-                        placeholder="请输入验证码">
-                        <template #prefix><svg-icon icon-class="validCode"
-                                class="el-input__icon input-icon" /></template>
-                    </el-input>
-                    <el-button size="large" type="primary" style="width: 30%" @click.prevent="getVerificationCode">
-                        {{ countdownText }}
-                    </el-button>
-                </div>
-            </el-form-item>
-            <el-form-item style="width: 100%">
-                <el-button :loading="loading" size="large" type="primary" style="width: 100%"
-                    @click.prevent="handleEndLogin">
-                    <span v-if="!loading">登 录</span>
-                    <span v-else>登 录 中...</span>
-                </el-button>
-            </el-form-item>
-        </el-form>
+	<div class="login">
+		<!--  -->
+		<el-form v-if="isFlag" ref="loginFirstRef" :model="loginForm" :rules="loginRules" class="login-form">
+			<h3 class="title">东航费用台账</h3>
+			<!-- 步骤一 -->
+			<el-form-item prop="username">
+				<el-input
+					v-model="loginForm.username"
+					type="text"
+					size="large"
+					auto-complete="off"
+					placeholder="账号"
+				>
+					<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+				</el-input>
+			</el-form-item>
+			<el-form-item prop="password">
+				<el-input
+					v-model="loginForm.password"
+					type="password"
+					size="large"
+					auto-complete="off"
+					placeholder="密码"
+					@keyup.enter="handleAllLogin"
+				>
+					<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+				</el-input>
+			</el-form-item>
+			<el-form-item prop="code" v-if="captchaEnabled">
+				<el-input
+					v-model="loginForm.code"
+					size="large"
+					auto-complete="off"
+					placeholder="验证码"
+					style="width: 63%"
+					@keyup.enter="handleAllLogin"
+				>
+					<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+				</el-input>
+				<div class="login-code">
+					<img :src="codeUrl" @click="getCode" class="login-code-img" />
+				</div>
+			</el-form-item>
+			<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
+			<el-form-item style="width: 100%">
+				<el-button
+					:loading="loading"
+					size="large"
+					type="primary"
+					style="width: 100%"
+					@click.prevent="handleAllLogin"
+				>
+					登 录
+				</el-button>
+				<div style="float: right" v-if="register">
+					<router-link class="link-type" :to="'/register'">立即注册</router-link>
+				</div>
+			</el-form-item>
+		</el-form>
+		<!-- 步骤二 -->
+		<el-form v-else ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+			<h3 class="title">东航费用台账</h3>
+			<el-form-item prop="phone">
+				<el-input
+					v-model="loginForm.phone"
+					type="text"
+					size="large"
+					auto-complete="off"
+					placeholder="手机号"
+					:disabled="true"
+				>
+					<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+				</el-input>
+			</el-form-item>
+			<el-form-item style="width: 100%">
+				<div class="flex">
+					<el-input
+						v-model="loginForm.code"
+						class="mr10"
+						type="text"
+						size="large"
+						auto-complete="off"
+						placeholder="请输入验证码"
+					>
+						<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+					</el-input>
+					<el-button size="large" type="primary" style="width: 30%" @click.prevent="getVerificationCode">
+						{{ countdownText }}
+					</el-button>
+				</div>
+			</el-form-item>
+			<el-form-item style="width: 100%">
+				<el-button
+					:loading="loading"
+					size="large"
+					type="primary"
+					style="width: 100%"
+					@click.prevent="handleEndLogin"
+				>
+					<span v-if="!loading">登 录</span>
+					<span v-else>登 录 中...</span>
+				</el-button>
+			</el-form-item>
+		</el-form>
 
-        <!--  底部  -->
-        <!-- <div class="el-login-footer">
+		<!--  底部  -->
+		<!-- <div class="el-login-footer">
             <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
         </div> -->
-    </div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -84,18 +123,18 @@ import { ref } from 'vue';
 const userStore = useUserStore();
 const router = useRouter();
 const loginForm = ref<any>({
-    username: 'admin',
-    password: 'admin123',
-    rememberMe: false,
-    code: '',
-    uuid: '',
-    phone: '',
+	username: 'admin',
+	password: 'admin123',
+	rememberMe: false,
+	code: '',
+	uuid: '',
+	phone: '',
 });
 
 const loginRules = {
-    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
-    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
-    code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
+	username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
+	password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
+	code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
 };
 
 const codeUrl = ref('');
@@ -114,173 +153,173 @@ const isFlag = ref(true);
 let countdown = ref(60);
 const isCountingDown = ref(false);
 const countdownText = computed(() => {
-    return isCountingDown.value ? `${countdown.value}s 后重新获取` : '获取验证码';
+	return isCountingDown.value ? `${countdown.value}s 后重新获取` : '获取验证码';
 });
 const getVerificationCode = async () => {
-    if (!isCountingDown.value) {
-        await getPhoneCode({ uuid: loginForm.value.uuid }).then((res: any) => {
-            console.log(res);
-            if (res.code === 200) {
-                ElMessage.success('验证码发送成功');
-            } else {
-                ElMessage.error('验证码发送失败,请稍后重试');
-            }
-        });
-        isCountingDown.value = true;
-        countdown.value = 60;
-        const intervalId = setInterval(() => {
-            countdown.value--;
-            if (countdown.value <= 0) {
-                isCountingDown.value = false;
-                clearInterval(intervalId);
-            }
-        }, 1000);
-    }
+	if (!isCountingDown.value) {
+		await getPhoneCode({ uuid: loginForm.value.uuid }).then((res: any) => {
+			console.log(res);
+			if (res.code === 200) {
+				ElMessage.success('验证码发送成功');
+			} else {
+				ElMessage.error('验证码发送失败,请稍后重试');
+			}
+		});
+		isCountingDown.value = true;
+		countdown.value = 60;
+		const intervalId = setInterval(() => {
+			countdown.value--;
+			if (countdown.value <= 0) {
+				isCountingDown.value = false;
+				clearInterval(intervalId);
+			}
+		}, 1000);
+	}
 };
 
 const publicKey =
-    'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
-    'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==';
+	'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
+	'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==';
 const privateKey =
-    'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
-    '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
-    'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
-    'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
-    'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
-    'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
-    'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
-    'UP8iWi1Qw0Y=';
+	'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
+	'7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
+	'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
+	'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
+	'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
+	'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
+	'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
+	'UP8iWi1Qw0Y=';
 // -------------- 获取验证码 倒计时60秒 end ----------------
 // 有下一步的登陆
 const handleNext = () => {
-    loginFirstRef.value?.validate(valid => {
-        if (valid) {
-            loading.value = true;
-            // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
-            if (loginForm.value.rememberMe) {
-                Cookies.set('username', loginForm.value.username, { expires: 30 });
-                const enPwd = encrypt(loginForm.value.password, publicKey);
-                // const enPwd = loginForm.value.password;
-                if (enPwd) {
-                    Cookies.set('password', enPwd, { expires: 30 });
-                }
-                if (loginForm.value.rememberMe) {
-                    Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 });
-                }
-            } else {
-                // 否则移除
-                Cookies.remove('username');
-                Cookies.remove('password');
-                Cookies.remove('rememberMe');
-            }
-            // 调用action的登录方法
-            userStore
-                .phoneLogin(loginForm.value)
-                .then((res: any) => {
-                    console.log(res);
-                    // router.push({ path: redirect.value || '/' });
-                    isFlag.value = false;
-                    loading.value = false;
-                    loginForm.value.code = '';
-                    loginForm.value.uuid = res.uuid;
-                    loginForm.value.phone = res.phone;
-                })
-                .catch(() => {
-                    loading.value = false;
-                    // 重新获取验证码
-                    if (captchaEnabled.value) {
-                        getCode();
-                    }
-                });
-        }
-    });
+	loginFirstRef.value?.validate(valid => {
+		if (valid) {
+			loading.value = true;
+			// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+			if (loginForm.value.rememberMe) {
+				Cookies.set('username', loginForm.value.username, { expires: 30 });
+				const enPwd = encrypt(loginForm.value.password, publicKey);
+				// const enPwd = loginForm.value.password;
+				if (enPwd) {
+					Cookies.set('password', enPwd, { expires: 30 });
+				}
+				if (loginForm.value.rememberMe) {
+					Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 });
+				}
+			} else {
+				// 否则移除
+				Cookies.remove('username');
+				Cookies.remove('password');
+				Cookies.remove('rememberMe');
+			}
+			// 调用action的登录方法
+			userStore
+				.phoneLogin(loginForm.value)
+				.then((res: any) => {
+					console.log(res);
+					// router.push({ path: redirect.value || '/' });
+					isFlag.value = false;
+					loading.value = false;
+					loginForm.value.code = '';
+					loginForm.value.uuid = res.uuid;
+					loginForm.value.phone = res.phone;
+				})
+				.catch(() => {
+					loading.value = false;
+					// 重新获取验证码
+					if (captchaEnabled.value) {
+						getCode();
+					}
+				});
+		}
+	});
 };
 
 // 有下一步的最后一步
 const handleEndLogin = () => {
-    userStore
-        .phoneLogin(loginForm.value)
-        .then((res: any) => {
-            if (res.token) {
-                ElMessage.success('登陆成功');
-                router.push({ path: redirect.value || '/' });
-            } else {
-                ElMessage.error('登陆失败');
-            }
-            loading.value = false;
-        })
-        .catch(() => {
-            loading.value = false;
-        });
+	userStore
+		.phoneLogin(loginForm.value)
+		.then((res: any) => {
+			if (res.token) {
+				ElMessage.success('登陆成功');
+				router.push({ path: redirect.value || '/' });
+			} else {
+				ElMessage.error('登陆失败');
+			}
+			loading.value = false;
+		})
+		.catch(() => {
+			loading.value = false;
+		});
 };
 
 // 无下一步的登陆
 function handleLogin() {
-    loginFirstRef.value?.validate(valid => {
-        if (valid) {
-            loading.value = true;
-            // 调用action的登录方法
-            userStore
-                .login(loginForm.value)
-                .then(() => {
-                    router.push({ path: redirect.value || '/' });
-                })
-                .catch(() => {
-                    loading.value = false;
-                    // 重新获取验证码
-                    if (captchaEnabled.value) {
-                        getCode();
-                    }
-                });
-        }
-    });
+	loginFirstRef.value?.validate(valid => {
+		if (valid) {
+			loading.value = true;
+			// 调用action的登录方法
+			userStore
+				.login(loginForm.value)
+				.then(() => {
+					router.push({ path: redirect.value || '/' });
+				})
+				.catch(() => {
+					loading.value = false;
+					// 重新获取验证码
+					if (captchaEnabled.value) {
+						getCode();
+					}
+				});
+		}
+	});
 }
 
 // 登陆按钮
 const handleAllLogin = () => {
-    // 本地
-    // if (env === 'development') {
-    //     handleLogin();
-    // } else {
-    //     handleNext();
-    // }
-    // handleNext();
-    if (phoneCaptchaEnabled.value) {
-        handleNext();
-    } else {
-        handleLogin();
-    }
+	// 本地
+	// if (env === 'development') {
+	//     handleLogin();
+	// } else {
+	//     handleNext();
+	// }
+	// handleNext();
+	if (phoneCaptchaEnabled.value) {
+		handleNext();
+	} else {
+		handleLogin();
+	}
 };
 
 // 是否有手机号
 const phoneCaptchaEnabled = ref(false);
 function getCode() {
-    getCodeImg().then((res: any) => {
-        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        phoneCaptchaEnabled.value = res.phoneCaptchaEnabled;
-        if (captchaEnabled.value) {
-            codeUrl.value = 'data:image/gif;base64,' + res.img;
-            loginForm.value.uuid = res.uuid;
-        }
-    });
+	getCodeImg().then((res: any) => {
+		captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+		phoneCaptchaEnabled.value = res.phoneCaptchaEnabled;
+		if (captchaEnabled.value) {
+			codeUrl.value = 'data:image/gif;base64,' + res.img;
+			loginForm.value.uuid = res.uuid;
+		}
+	});
 }
 
 function getCookie() {
-    const username = Cookies.get('username');
-    const password = Cookies.get('password');
-    const rememberMe = Cookies.get('rememberMe');
-    // let publicKey = '';
+	const username = Cookies.get('username');
+	const password = Cookies.get('password');
+	const rememberMe = Cookies.get('rememberMe');
+	// let publicKey = '';
 
-    // getPublicKey().then((res: any) => {
-    //     publicKey = res.publicKey;
-    // });
+	// getPublicKey().then((res: any) => {
+	//     publicKey = res.publicKey;
+	// });
 
-    loginForm.value = {
-        username: username === undefined ? loginForm.value.username : username,
-        password: password === undefined ? loginForm.value.password : decrypt(password, privateKey) || '',
-        // password: password === undefined ? loginForm.value.password : password || '',
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
-    };
+	loginForm.value = {
+		username: username === undefined ? loginForm.value.username : username,
+		password: password === undefined ? loginForm.value.password : decrypt(password, privateKey) || '',
+		// password: password === undefined ? loginForm.value.password : password || '',
+		rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+	};
 }
 
 getCode();
@@ -289,73 +328,73 @@ getCookie();
 
 <style lang="scss" scoped>
 .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-image: url('../assets/images/login-background.jpg');
-    background-size: cover;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	background-image: url('../assets/images/login-background.jpg');
+	background-size: cover;
 }
 
 .title {
-    margin: 0px auto 30px auto;
-    text-align: center;
-    color: #707070;
+	margin: 0px auto 30px auto;
+	text-align: center;
+	color: #707070;
 }
 
 .login-form {
-    border-radius: 6px;
-    background: #ffffff;
-    width: 400px;
-    padding: 25px 25px 5px 25px;
+	border-radius: 6px;
+	background: #ffffff;
+	width: 400px;
+	padding: 25px 25px 5px 25px;
 
-    .el-input {
-        height: 40px;
+	.el-input {
+		height: 40px;
 
-        input {
-            height: 40px;
-        }
-    }
+		input {
+			height: 40px;
+		}
+	}
 
-    .input-icon {
-        height: 39px;
-        width: 14px;
-        margin-left: 0px;
-    }
+	.input-icon {
+		height: 39px;
+		width: 14px;
+		margin-left: 0px;
+	}
 }
 
 .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
+	font-size: 13px;
+	text-align: center;
+	color: #bfbfbf;
 }
 
 .login-code {
-    width: 33%;
-    height: 40px;
-    float: right;
+	width: 33%;
+	height: 40px;
+	float: right;
 
-    img {
-        cursor: pointer;
-        vertical-align: middle;
-    }
+	img {
+		cursor: pointer;
+		vertical-align: middle;
+	}
 }
 
 .el-login-footer {
-    height: 40px;
-    line-height: 40px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    font-family: Arial;
-    font-size: 12px;
-    letter-spacing: 1px;
+	height: 40px;
+	line-height: 40px;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	text-align: center;
+	color: #fff;
+	font-family: Arial;
+	font-size: 12px;
+	letter-spacing: 1px;
 }
 
 .login-code-img {
-    height: 40px;
-    padding-left: 12px;
+	height: 40px;
+	padding-left: 12px;
 }
 </style>