glj-代码提交

This commit is contained in:
glj 2023-07-08 13:49:40 +08:00
parent 5de7ce79ae
commit 5ac1356488
8 changed files with 339 additions and 119 deletions

View File

@ -1,6 +1,6 @@
import request from '/@/utils/request';
import qs from 'qs'
import { moduleName } from '/@/utils/request';
/**
* 不建议写成 request.post(xxx)因为这样 post 无法 params data 同时传参
*
@ -10,7 +10,7 @@ import qs from 'qs'
*/
export function useLoginApi() {
return {
signInByUsername: ({tenantId, deptId, roleId, username, password, type, key, code, grantType}) => {
signInByUsername: ({ tenantId, deptId, roleId, username, password, type, key, code, grantType }) => {
return request({
url: '/api/system-manager/oauth/token',
method: 'post',
@ -22,7 +22,7 @@ export function useLoginApi() {
'Captcha-Code': code,
'Content-Type': 'application/x-www-form-urlencoded',
},
data: qs.stringify( {
data: qs.stringify({
tenantId,
username,
password,
@ -50,3 +50,26 @@ export function useLoginApi() {
},
};
}
//sendEmailCode 邮箱发送验证码
export function sendEmailCode(emailAccount) {
return request({
url: '/api/' + moduleName + '/ui/captcha/sendEmailCode',
method: 'get',
params: {
emailAccount
}
});
}
//sendEmailCode 邮箱发送验证码
export function codeCheck(emailAccount,code) {
return request({
url: '/api/' + moduleName + '/ui/captcha/codeCheck',
method: 'get',
params: {
emailAccount,
code
}
});
}

View File

@ -1,5 +1,6 @@
import request from '/@/utils/request';
import qs from 'qs';
import {moduleName} from '/@/utils/request';
export const getUserInfo = () => {
return request({

View File

@ -0,0 +1,90 @@
<template>
<el-dialog title="Change password" v-model="state.isShowDialog" width="600px">
<el-form :model="state.ruleForm" size="default" label-width="100px" :rules="rules" ref="adminAddFormRef"
style="margin-left: 6%;">
<el-form-item prop="originalPassword" label="originalPassword">
<el-input v-model="state.ruleForm.originalPassword" class="m-2" placeholder="please enter data oldPassword " :rows="3" type="text"
style="width:320px;" />
</el-form-item>
<el-form-item prop="password" label="password">
<el-input v-model="state.ruleForm.password" class="m-2" placeholder="please enter data password" :rows="3" type="text"
style="width:320px;" />
</el-form-item>
<el-form-item prop="email" label="email">
<el-input v-model="state.ruleForm.email" class="m-2" placeholder="please enter data email" :rows="3" type="text"
style="width:320px;" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">cancel</el-button>
<el-button type="primary" @click="onSubmit()" size="default" :loading="state.isLoading">upload</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { updatePasswordNew } from '/@/api/system/user';
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading: false,
ruleForm: {},
dataForm: new FormData(),
})
//
const rules = reactive({
originalPassword: [
{ required: true, message: 'please enter data originalPassword', trigger: 'blur' }
],
password: [
{ required: true, message: 'please enter data password', trigger: 'blur' }
],
email: [
{ required: true, message: 'please enter data email', trigger: 'blur' }
],
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = () => {
state.isShowDialog = true;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
updatePasswordNew(state.ruleForm).then(da=>{
ElMessage.success("Successfully modified");
closeDialog();
})
}
//
defineExpose({
openDialog,
});
</script>
<style scoped></style>

View File

@ -1,22 +1,14 @@
<template>
<div class="layout-navbars-breadcrumb-user pr15"
:style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70"
:hide-timeout="50"
trigger="click"
@command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont icon-ziti"
title="component size"></i>
<i class="iconfont icon-ziti" title="component size"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="large"
:disabled="state.disabledSize === 'large'">Large</el-dropdown-item>
<el-dropdown-item command="default"
:disabled="state.disabledSize === 'default'">Default</el-dropdown-item>
<el-dropdown-item command="small"
:disabled="state.disabledSize === 'small'">Small</el-dropdown-item>
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">Large</el-dropdown-item>
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">Default</el-dropdown-item>
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">Small</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -49,10 +41,7 @@
</template>
</el-popover>
</div> -->
<el-dropdown :show-timeout="70"
:hide-timeout="50"
trigger="click"
@command="onLanguageChange">
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
<!-- <div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont"
:class="state.disabledI18n === 'en' ? 'icon-fuhao-zhongwen' : 'icon-fuhao-yingwen'"></i>
@ -67,19 +56,14 @@
</el-dropdown-menu>
</template> -->
</el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon mr10"
@click="onScreenfullClick">
<i class="iconfont"
:title="state.isScreenfull ? '关全屏' : '开全屏'"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i class="iconfont" :title="state.isScreenfull ? '关全屏' : '开全屏'"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<el-dropdown :show-timeout="70"
:hide-timeout="50"
@command="onHandleCommandClick">
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
<img :src="userInfos.photo"
class="layout-navbars-breadcrumb-user-link-photo mr5" />
<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
{{ userInfos.userName === '' ? 'chief' : userInfos.userName }}
<el-icon class="el-icon--right">
<ele-ArrowDown />
@ -88,8 +72,7 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="/home">Dashboard</el-dropdown-item>
<el-dropdown-item divided
command="logOut">Sign out</el-dropdown-item>
<el-dropdown-item divided command="logOut">Sign out</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -240,53 +223,61 @@ onMounted(() => {
Session.set('refresh-token', res.refresh_token);
})
}
}, 5*60*1000);
}, 5 * 60 * 1000);
});
</script>
<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
display: flex;
align-items: center;
justify-content: flex-end;
&-link {
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
&-photo {
width: 25px;
height: 25px;
border-radius: 100%;
}
}
&-icon {
padding: 0 10px;
cursor: pointer;
color: var(--next-bg-topBarColor);
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
&:hover {
background: var(--next-color-user-hover);
i {
display: inline-block;
animation: logoAnimation 0.3s ease-in-out;
}
}
}
:deep(.el-dropdown) {
color: var(--next-bg-topBarColor);
}
:deep(.el-badge) {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
}
:deep(.el-badge__content.is-fixed) {
top: 12px;
}
display: flex;
align-items: center;
justify-content: flex-end;
&-link {
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
&-photo {
width: 25px;
height: 25px;
border-radius: 100%;
}
}
&-icon {
padding: 0 10px;
cursor: pointer;
color: var(--next-bg-topBarColor);
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
&:hover {
background: var(--next-color-user-hover);
i {
display: inline-block;
animation: logoAnimation 0.3s ease-in-out;
}
}
}
:deep(.el-dropdown) {
color: var(--next-bg-topBarColor);
}
:deep(.el-badge) {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
}
:deep(.el-badge__content.is-fixed) {
top: 12px;
}
}
</style>

View File

@ -277,7 +277,6 @@ const getTableData = () => {
//
const startBot = (row) => {
bootRef.value.openDialog(row);
};
//

View File

@ -1,30 +1,31 @@
<template>
<el-form size="large" class="login-content-form">
<el-form-item class="login-animation1">
<el-input text placeholder="Please input username or email" v-model="state.ruleForm.userName" clearable autocomplete="off">
<el-input text placeholder="Please input username or email" v-model="state.ruleForm.userName" clearable
autocomplete="off">
<template #prefix>
<el-icon class="el-input__icon"><ele-User /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation2">
<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="Please input password" v-model="state.ruleForm.password" autocomplete="off">
<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="Please input password"
v-model="state.ruleForm.password" autocomplete="off">
<template #prefix>
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
</template>
<template #suffix>
<i
class="iconfont el-input__icon login-content-password"
<i class="iconfont el-input__icon login-content-password"
:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
@click="state.isShowPassword = !state.isShowPassword"
>
@click="state.isShowPassword = !state.isShowPassword">
</i>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation3" v-if="state.captchaMode">
<el-col :span="15">
<el-input text maxlength="5" placeholder="Please input validate code" v-model="state.ruleForm.code" clearable autocomplete="off">
<el-input text maxlength="5" placeholder="Please input validate code" v-model="state.ruleForm.code"
clearable autocomplete="off">
<template #prefix>
<el-icon class="el-input__icon"><ele-Position /></el-icon>
</template>
@ -37,7 +38,8 @@
</el-col>
</el-form-item>
<el-form-item class="login-animation4">
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn"
:loading="state.loading.signIn">
<span>LOGIN</span>
</el-button>
</el-form-item>
@ -45,7 +47,7 @@
</template>
<script setup name="loginAccount">
import { reactive, computed, onMounted } from 'vue';
import { reactive, computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
@ -57,7 +59,8 @@ import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
import { useLoginApi } from '/@/api/login';
//
const storesThemeConfig = useThemeConfig();
const { themeConfig, website } = storeToRefs(storesThemeConfig);
@ -66,9 +69,9 @@ const router = useRouter();
const loginApi = useLoginApi();
const state = reactive({
isShowPassword: false,
ruleForm: {
//ID
isShowPassword: false,
ruleForm: {
//ID
tenantId: website.value.tenantId,
//
userName: "",
@ -80,23 +83,23 @@ const state = reactive({
key: "",
//code
code: "",
},
loading: {
signIn: false,
},
captchaMode: website.value.captchaMode,
captchaUrl: "",
},
loading: {
signIn: false,
},
captchaMode: website.value.captchaMode,
captchaUrl: "",
});
const getCaptchaCode = async () => {
const res = await loginApi.getCaptcha()
state.captchaUrl = res.image;
state.ruleForm.key = res.key;
const res = await loginApi.getCaptcha()
state.captchaUrl = res.image;
state.ruleForm.key = res.key;
};
onMounted(() => {
if(state.captchaMode) {
getCaptchaCode();
}
if (state.captchaMode) {
getCaptchaCode();
}
});
//
const currentTime = computed(() => {
@ -104,15 +107,15 @@ const currentTime = computed(() => {
});
//
const onSignIn = () => {
//
//
if (state.ruleForm.userName === "") {
ElMessage.error("请输入用户名");
return;
}
if (state.ruleForm.password === "") {
ElMessage.error("请输入密码");
return;
}
ElMessage.error("Please enter one user name");
return;
}
if (state.ruleForm.password === "") {
ElMessage.error("Please enter the password");
return;
}
state.loading.signIn = true;
loginApi.signInByUsername({
tenantId: state.ruleForm.tenantId,
@ -128,21 +131,21 @@ const onSignIn = () => {
Session.setEx('token', res.access_token);
Session.set('token-time', new Date().getTime());
Session.set('refresh-token', res.refresh_token);
if (themeConfig.value.isRequestRoutes) {
if (themeConfig.value.isRequestRoutes) {
initBackEndControlRoutes().then(() => {
signInSuccess()
}).catch(() => {state.loading.signIn = false;});
}).catch(() => { state.loading.signIn = false; });
} else {
initFrontEndControlRoutes().then(() => {
signInSuccess()
}).catch(() => {state.loading.signIn = false;});
}
}).catch(()=>{
if(state.captchaMode) {
}).catch(() => { state.loading.signIn = false; });
}
}).catch(() => {
if (state.captchaMode) {
getCaptchaCode()
}
state.loading.signIn = false;
})
})
};
//
const signInSuccess = () => {
@ -170,6 +173,7 @@ const signInSuccess = () => {
<style scoped lang="scss">
.login-content-form {
margin-top: 20px;
@for $i from 1 through 4 {
.login-animation#{$i} {
opacity: 0;
@ -179,25 +183,29 @@ const signInSuccess = () => {
animation-delay: calc($i/10) + s;
}
}
.login-content-password {
display: inline-block;
width: 20px;
cursor: pointer;
&:hover {
color: #909399;
}
}
.login-content-code {
width: 100%;
padding: 0;
font-weight: bold;
letter-spacing: 5px;
}
.login-content-submit {
width: 100%;
letter-spacing: 2px;
font-weight: 300;
margin-top: 15px;
margin-top: 5px;
}
}
</style>

View File

@ -0,0 +1,108 @@
<template>
<el-dialog title="Forgot password" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="100px" :rules="rules" ref="adminAddFormRef"
style="margin-left: 6%;">
<el-form-item prop="email" label="email">
<el-input v-model="state.ruleForm.email" class="m-2" placeholder="please enter data email " :rows="3" type="text"
style="width:320px;" />
<el-button style="margin-left: 10px;" @click="sendEmail()" size="default">send</el-button>
</el-form-item>
<el-form-item prop="type" label="code">
<el-input v-model="state.ruleForm.code" class="m-2" placeholder="please enter data code " :rows="3" type="text"
style="width:220px;" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">cancel</el-button>
<el-button type="primary" @click="onSubmit()" size="default" :loading="state.isLoading">upload</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { sendEmailCode, codeCheck } from '/@/api/login';
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading: false,
ruleForm: {},
dataForm: new FormData(),
})
//
const rules = reactive({
email: [
{ required: true, message: 'please enter data email', trigger: 'blur' }
],
code: [
{ required: true, message: 'please enter data code', trigger: 'blur' }
],
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = () => {
state.isShowDialog = true;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const sendEmail = () => {
if (state.ruleForm.email === "") {
ElMessage.error("please enter data email");
return;
}
//
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (!mailReg.test(state.ruleForm.email)) {
ElMessage.error("Please enter the correct email format");
return;
}
let data = {};
data.emailAccount = state.ruleForm.email;
sendEmailCode(data.emailAccount).then(da=>{
ElMessage.success("Successfully sent");
})
}
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
codeCheck(state.ruleForm.email,state.ruleForm.code).then(da=>{
if(da == 1404){
ElMessage.error("Verification code error");
return;
}
ElMessage.success("The new password has been sent to the email");
closeDialog();
})
}
//
defineExpose({
openDialog,
});
</script>
<style scoped></style>

View File

@ -28,7 +28,7 @@
<span class="dialog-footer">
<el-button @click="state.isShowDialog = false">Cancel</el-button>
<el-button type="success" @click="save()">
Save
Send
</el-button>
</span>
</template>