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 同时传参
*
@ -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 ? '关全屏' : '开全屏'"
<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>
@ -249,17 +232,20 @@ onMounted(() => {
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;
@ -268,23 +254,28 @@ onMounted(() => {
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;
}

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';
@ -58,6 +60,7 @@ import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
//
const storesThemeConfig = useThemeConfig();
const { themeConfig, website } = storeToRefs(storesThemeConfig);
@ -106,11 +109,11 @@ const currentTime = computed(() => {
const onSignIn = () => {
//
if (state.ruleForm.userName === "") {
ElMessage.error("请输入用户名");
ElMessage.error("Please enter one user name");
return;
}
if (state.ruleForm.password === "") {
ElMessage.error("请输入密码");
ElMessage.error("Please enter the password");
return;
}
state.loading.signIn = true;
@ -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>