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 request from '/@/utils/request';
import qs from 'qs' import qs from 'qs'
import { moduleName } from '/@/utils/request';
/** /**
* 不建议写成 request.post(xxx)因为这样 post 无法 params data 同时传参 * 不建议写成 request.post(xxx)因为这样 post 无法 params data 同时传参
* *
@ -10,7 +10,7 @@ import qs from 'qs'
*/ */
export function useLoginApi() { export function useLoginApi() {
return { return {
signInByUsername: ({tenantId, deptId, roleId, username, password, type, key, code, grantType}) => { signInByUsername: ({ tenantId, deptId, roleId, username, password, type, key, code, grantType }) => {
return request({ return request({
url: '/api/system-manager/oauth/token', url: '/api/system-manager/oauth/token',
method: 'post', method: 'post',
@ -22,7 +22,7 @@ export function useLoginApi() {
'Captcha-Code': code, 'Captcha-Code': code,
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
}, },
data: qs.stringify( { data: qs.stringify({
tenantId, tenantId,
username, username,
password, 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 request from '/@/utils/request';
import qs from 'qs'; import qs from 'qs';
import {moduleName} from '/@/utils/request';
export const getUserInfo = () => { export const getUserInfo = () => {
return request({ 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> <template>
<div class="layout-navbars-breadcrumb-user pr15" <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
:style="{ flex: layoutUserFlexNum }"> <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<el-dropdown :show-timeout="70"
:hide-timeout="50"
trigger="click"
@command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon"> <div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont icon-ziti" <i class="iconfont icon-ziti" title="component size"></i>
title="component size"></i>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="large" <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">Large</el-dropdown-item>
: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="default" <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">Small</el-dropdown-item>
:disabled="state.disabledSize === 'default'">Default</el-dropdown-item>
<el-dropdown-item command="small"
:disabled="state.disabledSize === 'small'">Small</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -49,10 +41,7 @@
</template> </template>
</el-popover> </el-popover>
</div> --> </div> -->
<el-dropdown :show-timeout="70" <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
:hide-timeout="50"
trigger="click"
@command="onLanguageChange">
<!-- <div class="layout-navbars-breadcrumb-user-icon"> <!-- <div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont" <i class="iconfont"
:class="state.disabledI18n === 'en' ? 'icon-fuhao-zhongwen' : 'icon-fuhao-yingwen'"></i> :class="state.disabledI18n === 'en' ? 'icon-fuhao-zhongwen' : 'icon-fuhao-yingwen'"></i>
@ -67,19 +56,14 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> --> </template> -->
</el-dropdown> </el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon mr10" <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
@click="onScreenfullClick"> <i class="iconfont" :title="state.isScreenfull ? '关全屏' : '开全屏'"
<i class="iconfont"
:title="state.isScreenfull ? '关全屏' : '开全屏'"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div> </div>
<el-dropdown :show-timeout="70" <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
:hide-timeout="50"
@command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link"> <span class="layout-navbars-breadcrumb-user-link">
<img :src="userInfos.photo" <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
class="layout-navbars-breadcrumb-user-link-photo mr5" />
{{ userInfos.userName === '' ? 'chief' : userInfos.userName }} {{ userInfos.userName === '' ? 'chief' : userInfos.userName }}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<ele-ArrowDown /> <ele-ArrowDown />
@ -88,8 +72,7 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="/home">Dashboard</el-dropdown-item> <el-dropdown-item command="/home">Dashboard</el-dropdown-item>
<el-dropdown-item divided <el-dropdown-item divided command="logOut">Sign out</el-dropdown-item>
command="logOut">Sign out</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -240,7 +223,7 @@ onMounted(() => {
Session.set('refresh-token', res.refresh_token); Session.set('refresh-token', res.refresh_token);
}) })
} }
}, 5*60*1000); }, 5 * 60 * 1000);
}); });
</script> </script>
@ -249,17 +232,20 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
&-link { &-link {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
&-photo { &-photo {
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 100%; border-radius: 100%;
} }
} }
&-icon { &-icon {
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
@ -268,23 +254,28 @@ onMounted(() => {
line-height: 50px; line-height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
background: var(--next-color-user-hover); background: var(--next-color-user-hover);
i { i {
display: inline-block; display: inline-block;
animation: logoAnimation 0.3s ease-in-out; animation: logoAnimation 0.3s ease-in-out;
} }
} }
} }
:deep(.el-dropdown) { :deep(.el-dropdown) {
color: var(--next-bg-topBarColor); color: var(--next-bg-topBarColor);
} }
:deep(.el-badge) { :deep(.el-badge) {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
:deep(.el-badge__content.is-fixed) { :deep(.el-badge__content.is-fixed) {
top: 12px; top: 12px;
} }

View File

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

View File

@ -1,30 +1,31 @@
<template> <template>
<el-form size="large" class="login-content-form"> <el-form size="large" class="login-content-form">
<el-form-item class="login-animation1"> <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> <template #prefix>
<el-icon class="el-input__icon"><ele-User /></el-icon> <el-icon class="el-input__icon"><ele-User /></el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item class="login-animation2"> <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> <template #prefix>
<el-icon class="el-input__icon"><ele-Unlock /></el-icon> <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
</template> </template>
<template #suffix> <template #suffix>
<i <i class="iconfont el-input__icon login-content-password"
class="iconfont el-input__icon login-content-password"
:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
@click="state.isShowPassword = !state.isShowPassword" @click="state.isShowPassword = !state.isShowPassword">
>
</i> </i>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item class="login-animation3" v-if="state.captchaMode"> <el-form-item class="login-animation3" v-if="state.captchaMode">
<el-col :span="15"> <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> <template #prefix>
<el-icon class="el-input__icon"><ele-Position /></el-icon> <el-icon class="el-input__icon"><ele-Position /></el-icon>
</template> </template>
@ -37,7 +38,8 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item class="login-animation4"> <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> <span>LOGIN</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
@ -45,7 +47,7 @@
</template> </template>
<script setup name="loginAccount"> <script setup name="loginAccount">
import { reactive, computed, onMounted } from 'vue'; import { reactive, computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
@ -58,6 +60,7 @@ import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime'; import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading'; import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login'; import { useLoginApi } from '/@/api/login';
// //
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const { themeConfig, website } = storeToRefs(storesThemeConfig); const { themeConfig, website } = storeToRefs(storesThemeConfig);
@ -94,7 +97,7 @@ const getCaptchaCode = async () => {
state.ruleForm.key = res.key; state.ruleForm.key = res.key;
}; };
onMounted(() => { onMounted(() => {
if(state.captchaMode) { if (state.captchaMode) {
getCaptchaCode(); getCaptchaCode();
} }
}); });
@ -106,11 +109,11 @@ const currentTime = computed(() => {
const onSignIn = () => { const onSignIn = () => {
// //
if (state.ruleForm.userName === "") { if (state.ruleForm.userName === "") {
ElMessage.error("请输入用户名"); ElMessage.error("Please enter one user name");
return; return;
} }
if (state.ruleForm.password === "") { if (state.ruleForm.password === "") {
ElMessage.error("请输入密码"); ElMessage.error("Please enter the password");
return; return;
} }
state.loading.signIn = true; state.loading.signIn = true;
@ -131,14 +134,14 @@ const onSignIn = () => {
if (themeConfig.value.isRequestRoutes) { if (themeConfig.value.isRequestRoutes) {
initBackEndControlRoutes().then(() => { initBackEndControlRoutes().then(() => {
signInSuccess() signInSuccess()
}).catch(() => {state.loading.signIn = false;}); }).catch(() => { state.loading.signIn = false; });
} else { } else {
initFrontEndControlRoutes().then(() => { initFrontEndControlRoutes().then(() => {
signInSuccess() signInSuccess()
}).catch(() => {state.loading.signIn = false;}); }).catch(() => { state.loading.signIn = false; });
} }
}).catch(()=>{ }).catch(() => {
if(state.captchaMode) { if (state.captchaMode) {
getCaptchaCode() getCaptchaCode()
} }
state.loading.signIn = false; state.loading.signIn = false;
@ -170,6 +173,7 @@ const signInSuccess = () => {
<style scoped lang="scss"> <style scoped lang="scss">
.login-content-form { .login-content-form {
margin-top: 20px; margin-top: 20px;
@for $i from 1 through 4 { @for $i from 1 through 4 {
.login-animation#{$i} { .login-animation#{$i} {
opacity: 0; opacity: 0;
@ -179,25 +183,29 @@ const signInSuccess = () => {
animation-delay: calc($i/10) + s; animation-delay: calc($i/10) + s;
} }
} }
.login-content-password { .login-content-password {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #909399; color: #909399;
} }
} }
.login-content-code { .login-content-code {
width: 100%; width: 100%;
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
letter-spacing: 5px; letter-spacing: 5px;
} }
.login-content-submit { .login-content-submit {
width: 100%; width: 100%;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 300; font-weight: 300;
margin-top: 15px; margin-top: 5px;
} }
} }
</style> </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"> <span class="dialog-footer">
<el-button @click="state.isShowDialog = false">Cancel</el-button> <el-button @click="state.isShowDialog = false">Cancel</el-button>
<el-button type="success" @click="save()"> <el-button type="success" @click="save()">
Save Send
</el-button> </el-button>
</span> </span>
</template> </template>