Skip to content

S
so-manage-ui
Commit 5df31795 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

[fix]: 部分代码格式化；修复控制台出现的warning；替换::v-deep为:deep()

parent 5bcb7b08
Hide whitespace changes
Inline Side-by-side
Showing with 618 additions and 701 deletions
src/App.vue
View file @ 5df31795
......@@ -5,6 +5,7 @@
<div class="container" :class="menuShow ? '' : 'full_screen'" v-if="pageShow">
<!-- <bg-nav :highlightParentRule="highlightParentRule" :title="nowParent.menuName" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" /> -->
<bg-nav
v-if="nowParent.children"
:highlightParentRule="highlightParentRule"
width="208px"
:list="nowParent.children"
......
src/components/login-by-account.vue
View file @ 5df31795
<template>
<div class="login-by-account">
<el-form
ref="loginFormRef"
label-position="top"
:model="loginForm"
:rules="steploginFormRules"
>
<el-form ref="loginFormRef" label-position="top" :model="loginForm" :rules="steploginFormRules">
<el-form-item prop="userid">
<el-input
v-model="loginForm.userid"
placeholder="请输入账号"
@keyup.enter.native="loginAction()"
/>
<el-input v-model="loginForm.userid" placeholder="请输入账号" @keyup.enter.native="loginAction()" />
</el-form-item>
<el-form-item prop="password">
<el-input
:type="hidePassword ? 'password' : 'text'"
v-model="loginForm.password"
placeholder="请输入密码"
@keyup.enter.native="loginAction()"
>
@keyup.enter.native="loginAction()">
<span
slot="suffix"
:title="hidePassword ? '显示密码' : '隐藏密码'"
:class="hidePassword ? 'hide-password' : 'show-password'"
@click="hidePassword = !hidePassword"
style="cursor: pointer"
></span>
style="cursor: pointer"></span>
</el-input>
</el-form-item>
<el-form-item prop="yzm">
......@@ -35,32 +24,24 @@
v-model="loginForm.yzm"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
style="width: 240px"
/>
style="width: 240px" />
<div class="yzm_img">
<img
title="看不清？换一张"
:src="imgSrc"
@click="getImg()"
style="width: 100%"
/>
<img title="看不清？换一张" :src="imgSrc" @click="getImg()" style="width: 100%" />
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginAction()" style="width: 100%">
登 录
<el-button type="primary" @click="loginAction()" style="width: 100%"> 登 录 </el-button>
</el-form-item>
<el-form-item style="margin-top: 24px">
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp;
<bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<el-form-item style="margin-top: 24px;">
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp; <bg-icon style="font-size: 12px;margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<div class="regist_bottom">
<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
<span class="fr forget_psd" @click.prevent="$emit('password')">忘记密码？</span>
<span class="fr forget_psd" @click.prevent="$emit('password')">忘记密码？</span>
</div>
</el-form>
</div>
......@@ -74,8 +55,8 @@ import { generateRoutes } from "../router/index";
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { Encrypt } from "@/services/secret.js"
import { useStore } from "vuex"
import { Encrypt } from "@/services/secret.js";
import { useStore } from "vuex";
const state = reactive({
loginForm: {
......@@ -93,127 +74,121 @@ const state = reactive({
identifyCode: "",
hidePassword: true,
rememberPassword: false,
})
});
const store = useStore()
const store = useStore();
const loginFormRef = ref(null)
const loginFormRef = ref(null);
const loginAction = () => {
if (state.rememberPassword) {
let userinfo = window.btoa(
encodeURI(`${state.loginForm.userid},${state.loginForm.password}`)
);
setCookie("userinfo", userinfo);
} else {
clearCookie("userinfo");
}
if (state.rememberPassword) {
let userinfo = window.btoa(encodeURI(`${state.loginForm.userid},${state.loginForm.password}`));
setCookie("userinfo", userinfo);
} else {
clearCookie("userinfo");
}
loginFormRef.value.validate((valid) => {
if (valid) {
axios.get(
`/apaas/system/v5/user/verifyCaptcha?id=${state.imgId}&value=${state.loginForm.yzm}`
)
.then((res) => {
if (res.data.code == 200) {
login();
} else {
ElMessage.error(res.data.data);
}
});
loginFormRef.value.validate((valid) => {
if (valid) {
axios.get(`/apaas/system/v5/user/verifyCaptcha?id=${state.imgId}&value=${state.loginForm.yzm}`).then((res) => {
if (res.data.code == 200) {
login();
} else {
ElMessage.error(res.data.data);
}
});
}
});
};
const login = () => {
axios.post(`/apaas/system/v5/user/login`, {
system_account: state.loginForm.userid,
password: Encrypt(state.loginForm.password)
})
.then(({ data }) => {
if (data.code == 200) {
getUser();
} else {
getImg(true);
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
}
axios
.post(`/apaas/system/v5/user/login`, {
system_account: state.loginForm.userid,
password: Encrypt(state.loginForm.password),
})
.then(({ data }) => {
if (data.code == 200) {
getUser();
} else {
getImg(true);
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
};
const getUserInfo = () => {
return axios.get(`/apaas/system/v5/user/getUserInfo`);
}
return axios.get(`/apaas/system/v5/user/getUserInfo`);
};
const getMenu = (search) => {
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
}
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
};
const getUser = () => {
Promise.all([getUserInfo(), getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = res[1].data.data&&res[1].data.data[0].children || [];
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
store.commit("setMenu", data);
Promise.all([getUserInfo(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = (res[1].data.data && res[1].data.data[0].children) || [];
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
store.commit("setMenu", data);
menu.menuToRouter(data);
menu.menuToRouter(data);
store.commit("setRoute", data);
store.commit("setRoute", data);
//存储菜单对象信息
let menuObj = {};
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
//跳转到工作台页面
window.location.href = "/apaas/portal/ui/#/";
}
});
//存储菜单对象信息
let menuObj = {};
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
//跳转到工作台页面
window.location.href = "/apaas/portal/ui/#/";
}
});
};
const getMenuObj = (menu, parentRowPath, menuObj) => {
menu.forEach((e, idx) => {
e.rowPath = parentRowPath + "." + idx;
menuObj[e.path] = e;
if (e.children && e.children.length) {
getMenuObj(e.children, e.rowPath, menuObj);
}
});
menu.forEach((e, idx) => {
e.rowPath = parentRowPath + "." + idx;
menuObj[e.path] = e;
if (e.children && e.children.length) {
getMenuObj(e.children, e.rowPath, menuObj);
}
});
};
const getImg = (clearInput = false) => {
axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`)
.then((res) => {
if (res.data.code == 200) {
state.imgId = res.data.data.id;
state.imgSrc = res.data.data.captcha;
}
});
if (clearInput) {
state.loginForm.yzm = "";
}
axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
if (res.data.code == 200) {
state.imgId = res.data.data.id;
state.imgSrc = res.data.data.captcha;
}
});
if (clearInput) {
state.loginForm.yzm = "";
}
};
onBeforeMount(() => {
getImg();
if (getCookie("userinfo")) {
let userinfo = window.atob(decodeURI(getCookie("userinfo"))).split(",");
getImg();
if (getCookie("userinfo")) {
let userinfo = window.atob(decodeURI(getCookie("userinfo"))).split(",");
state.loginForm.userid = userinfo[0];
state.loginForm.password = userinfo[1];
state.checked = true;
state.loginForm.userid = userinfo[0];
state.loginForm.password = userinfo[1];
state.checked = true;
state.rememberPassword = true;
} else {
state.checked = false;
}
})
const {loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword, rememberPassword} = toRefs(state)
state.rememberPassword = true;
} else {
state.checked = false;
}
});
const { loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword, rememberPassword } = toRefs(state);
</script>
<style lang="scss" scoped>
.login-by-account {
.msg-code {
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
......@@ -233,5 +208,4 @@ const {loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword,
line-height: 34px;
}
}
</style>
src/components/login-by-code.vue
View file @ 5df31795
<template>
<div class="login-by-code">
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="mobile">
<div class="login-by-code">
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="mobile">
<el-input
v-model="loginForm.mobile"
autofocus="autofocus"
placeholder="请输入手机号码"
@keyup.enter.native="loginAction()" />
</el-form-item>
<el-form-item prop="code">
<div class="msg-code">
<el-input
v-model="loginForm.mobile"
autofocus="autofocus"
placeholder="请输入手机号码"
v-model="loginForm.code"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
/>
</el-form-item>
<el-form-item prop="code">
<div class="msg-code">
<el-input
v-model="loginForm.code"
placeholder="请输入验证码"
@keyup.enter.native="loginAction()"
style="width: 280px"
>
</el-input>
<div class="yzm_img">
<el-button type="primary" @click.prevent="getMsgCode()" style="width: 100%;height: 34px;">
{{countDown > 0 ? countDown + '秒后再次获取' : '发送验证码'}}
</el-button>
<!-- <a class="input-append disabled" v-if="false && countDown > 0">
style="width: 280px">
</el-input>
<div class="yzm_img">
<el-button
type="primary"
:disabled="countDown > 0"
@click.prevent="getMsgCode()"
style="width: 100%; height: 34px">
{{ countDown > 0 ? countDown + "秒后再次获取" : "发送验证码" }}
</el-button>
<!-- <a class="input-append disabled" v-if="false && countDown > 0">
{{ countDown }}秒后再次获取
</a>
<a class="input-append" @click="getMsgCode" v-else>
获取验证码
</a> -->
</div>
</div>
</el-form-item>
<el-form-item style="margin-top: 54px;">
<el-button type="primary" @click.prevent="loginAction()" style="width: 100%">
登 录
</el-button>
</el-form-item>
<el-form-item style="margin-top: 24px;">
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp; <bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<div>
<span class="fr forget_psd" @click.prevent="$emit('password')">忘记密码？</span>
</div>
</div>
</el-form-item>
<el-form-item style="margin-top: 54px">
<el-button type="primary" @click.prevent="loginAction()" style="width: 100%"> 登 录 </el-button>
</el-form-item>
<el-form-item style="margin-top: 24px">
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp;
<bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<div>
<span class="fr forget_psd" @click.prevent="$emit('password')">忘记密码？</span>
</div>
</el-form>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
</el-form>
</div>
</template>
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const validatePhone = (rule, value, callback) => {
const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
const state = reactive({
loginForm: {
mobile: "",
code: "",
},
loginFormRules: {
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
countDown: 0,
countDownTimer: null,
})
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
const loginFormRef = ref(null)
const state = reactive({
loginForm: {
mobile: "",
code: "",
},
loginFormRules: {
mobile: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
},
countDown: 0,
countDownTimer: null,
});
const getMsgCode = () => {
loginFormRef.value.validateField("mobile", (valid) => {
if (valid) {
axios.post('/apaas/system/v5/sms/verifyCode',{phone: state.loginForm.mobile}).then(({ data }) => {
if (data.code == 200) {
countDownAction();
}else {
ElMessage.error(data.data);
}
});
}
});
};// 获取验证码
const countDownAction = () => {
state.countDown = 60;
if (state.countDownTimer) {
clearInterval(state.countDownTimer);
const loginFormRef = ref(null);
const getMsgCode = () => {
loginFormRef.value.validateField("mobile", (valid) => {
if (valid) {
axios.post("/apaas/system/v5/sms/verifyCode", { phone: state.loginForm.mobile }).then(({ data }) => {
if (data.code == 200) {
countDownAction();
} else {
ElMessage.error(data.data);
}
state.countDownTimer = setInterval(() => {
if (state.countDown > 0) {
state.countDown--;
});
}
});
}; // 获取验证码
const countDownAction = () => {
state.countDown = 60;
if (state.countDownTimer) {
clearInterval(state.countDownTimer);
}
state.countDownTimer = setInterval(() => {
if (state.countDown > 0) {
state.countDown--;
} else {
clearInterval(state.countDownTimer);
}
}, 1000);
};
const loginAction = () => {
loginFormRef.value.validate((valid) => {
if (valid) {
axios
.post(`/apaas/system/v5/user/phone/login`, {
phone: state.loginForm.mobile,
code: state.loginForm.code,
})
.then(({ data }) => {
if (data.code == 200) {
getUser();
} else {
clearInterval(state.countDownTimer);
}
}, 1000);
}
const loginAction = () => {
loginFormRef.value.validate((valid) => {
if (valid) {
axios.post(`/apaas/system/v5/user/phone/login`, {
phone: state.loginForm.mobile,
code: state.loginForm.code,
})
.then(({ data }) => {
if (data.code == 200) {
getUser();
} else {
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
ElMessage.error(data.data);
}
})
.catch((error) => {
console.log(error);
});
} // 短信验证码登录
const getUserInfo = () => {
return axios.get(`/apaas/system/v5/user/getUserInfo`);
}
const getMenu = (search) => {
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
}
const getUser = () => {
Promise.all([getUserInfo(), getMenu('dadb2d3f-e263-48d1-9389-42acb9ea49f8')]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = res[1].data.data&&res[1].data.data[0].children || [];
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
store.commit("setMenu", data);
});
}; // 短信验证码登录
menu.menuToRouter(data);
const getUserInfo = () => {
return axios.get(`/apaas/system/v5/user/getUserInfo`);
};
const getMenu = (search) => {
return axios.get(`/apaas/system/v5/menu/user/tree?search=${search}`);
};
const getUser = () => {
Promise.all([getUserInfo(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")]).then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
let data = (res[1].data.data && res[1].data.data[0].children) || [];
store.commit("setUserInfo", res[0].data.data);
// if (res.data.data.userType == 1) {
//超管
store.commit("setMenu", data);
store.commit("setRoute", data);
menu.menuToRouter(data);
//存储菜单对象信息
let menuObj = {};
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
//跳转到工作台页面
window.location.href = "/apaas/portal/ui/#/";
}
});
}
const { loginForm, loginFormRules, countDown, countDownTimer } = toRefs(state);
</script>
<style lang="scss" scoped>
.login-by-code {
.msg-code {
store.commit("setRoute", data);
//存储菜单对象信息
let menuObj = {};
getMenuObj(data, "", menuObj);
store.commit("setMenuObj", menuObj);
// }
generateRoutes();
// this.$router.push("/");
//跳转到工作台页面
window.location.href = "/apaas/portal/ui/#/";
}
});
};
const { loginForm, loginFormRules, countDown, countDownTimer } = toRefs(state);
</script>
<style lang="scss" scoped>
.login-by-code {
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
.el-form {
.form-title {
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
.el-form {
.form-title {
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 20px;
margin-bottom: 5px;
> img {
margin-left: 5px;
}
line-height: 20px;
margin-bottom: 5px;
> img {
margin-left: 5px;
}
}
}
</style>
\ No newline at end of file
}
</style>
src/i18n/i18n.js
View file @ 5df31795
import {createI18n} from 'vue-i18n'
import {createI18n} from 'vue-i18n/index'
import lang from './index'
const i18n = createI18n({
......
src/main.js
View file @ 5df31795
......@@ -27,7 +27,7 @@ import i18n from "./i18n/i18n.js";
import axios from "./request/http.js";
const createVue = createApp(App);
createVue.use(ElementPlus, { locale });
// createVue.use(ElementPlus, { locale });
function getMsgAppid() {
axios.get(`/apaas/system/v5/message/account`).then((res) => {
......@@ -96,12 +96,11 @@ Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
// }
}
generateRoutes();
createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui);
createVue.mount("#app");
})
.catch(() => {
createVue.use(ElementPlus).use(store).use(router).use(i18n).use(bgui);
.catch((e) => {
console.error(e)
}).finally(() => {
createVue.use(ElementPlus, { locale }).use(store).use(router).use(i18n).use(bgui);
createVue.mount("#app");
});
......
src/page/login/index.vue
View file @ 5df31795
<template>
<div class="login-container">
<div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
<div class="bg-main">
<!-- <div class="bg-logo">
<div class="login-container">
<div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
<div class="bg-main">
<!-- <div class="bg-logo">
<img class="logo" src="../../assets/imgs/login_img_logo.png" />
</div> -->
<div class="bg-content">
<bg-tabs
class="login-tab"
v-model="loginTab"
style="min-height: 450px;width: 480px"
v-if="pageType === 'login'"
>
<bg-tab label="账号密码登录" name="account">
<LoginByAccount @register="switchPageType('account')" @password="password"/>
</bg-tab>
<bg-tab label="验证码登录" name="register">
<LoginByCode @register="switchPageType('register')" @password="password"/>
</bg-tab>
</bg-tabs>
</div>
<div class="bg-content">
<bg-tabs
class="login-tab"
v-model="loginTab"
style="min-height: 450px; width: 480px"
v-if="pageType === 'login'">
<bg-tab label="账号密码登录" name="account">
<LoginByAccount @register="switchPageType('account')" @password="password" />
</bg-tab>
<bg-tab label="验证码登录" name="register">
<LoginByCode @register="switchPageType('register')" @password="password" />
</bg-tab>
</bg-tabs>
</div>
<!-- v-if="pageType !== 'register'" -->
<div class="bg-msg">
<p>
Copyright © 比格大数据, All Rights Reserved.
</p>
<p>
ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号
</p>
<p>
法律声明 | 隐私政策
</p>
</div>
</div>
</template>
<script setup>
import LoginByAccount from "@/components/login-by-account.vue";
import LoginByCode from "@/components/login-by-code.vue";
// import RegisterPersonalUser from "@/components/register-personal-user.vue";
// import RegisterFrimUser from "@/components/register-firm-user.vue";
// import RegisterOrgUser from "@/components/register-org-user.vue";
// import RegisterSuccess from "@/components/register-success.vue";
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const pageType = ref('login')
const loginTab = ref('account')
const registerTab = ref('registerTab')
<!-- v-if="pageType !== 'register'" -->
<div class="bg-msg">
<p>Copyright © 比格大数据, All Rights Reserved.</p>
<p>ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号</p>
<p>法律声明 | 隐私政策</p>
</div>
</div>
</template>
const switchPageType = (type) => {
// pageType.value = type
router.push('/registe')
<script setup>
import LoginByAccount from "@/components/login-by-account.vue";
import LoginByCode from "@/components/login-by-code.vue";
// import RegisterPersonalUser from "@/components/register-personal-user.vue";
// import RegisterFrimUser from "@/components/register-firm-user.vue";
// import RegisterOrgUser from "@/components/register-org-user.vue";
// import RegisterSuccess from "@/components/register-success.vue";
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
}
const password = () => {
router.push('/password')
}
</script>
<style lang="scss" scoped>
.login-container {
width: 100vw;
height: calc(100vh - 56px);
background-image: url("@/assets/imgs/bg_zhuce.png");
background-size: 100% 100%;
background-position: center center;
position: relative;
.bg-main {
position: absolute;
top: 50%;
right: 0;
margin-right: 16vw;
margin-bottom: 80px;
transform: translateY(calc(-50%));
width: 500px;
max-height: calc(100vh - 100px);
overflow: hidden auto;
&::-webkit-scrollbar {
width: 16px;
height: 1px;
}
/* &::-webkit-scrollbar-track {
const pageType = ref("login");
const loginTab = ref("account");
const registerTab = ref("registerTab");
const switchPageType = (type) => {
// pageType.value = type
router.push("/registe");
};
const password = () => {
router.push("/password");
};
</script>
<style lang="scss" scoped>
.login-container {
width: 100vw;
height: calc(100vh - 56px);
background-image: url("@/assets/imgs/bg_zhuce.png");
background-size: 100% 100%;
background-position: center center;
position: relative;
.bg-main {
position: absolute;
top: 50%;
right: 0;
margin-right: 16vw;
margin-bottom: 80px;
transform: translateY(calc(-50%));
width: 500px;
max-height: calc(100vh - 100px);
overflow: hidden auto;
&::-webkit-scrollbar {
width: 16px;
height: 1px;
}
/* &::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0);
} */
&::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: 8px 0 0 #a5adb7 inset;
border: 4px solid rgba(0, 0, 0, 0);
}
> .bg-logo {
display: flex;
justify-content: center;
align-items: center;
.logo{
width: 450px;
}
> span {
font-size: 36px;
color: #ffffff;
margin-left: 25px;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: 8px 0 0 #a5adb7 inset;
border: 4px solid rgba(0, 0, 0, 0);
}
> .bg-logo {
display: flex;
justify-content: center;
align-items: center;
.logo {
width: 450px;
}
> .bg-content {
> span {
font-size: 36px;
color: #ffffff;
margin-left: 25px;
}
}
> .bg-warning {
text-align: center;
background-color: #fdf4e2;
color: #e56600;
font-size: 14px;
height: 32px;
line-height: 32px;
> .bg-content {
}
> .bg-msg {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #616f94;
text-align: center;
> p {
padding: 8px 0;
}
}
> .bg-warning {
text-align: center;
background-color: #fdf4e2;
color: #e56600;
font-size: 14px;
height: 32px;
line-height: 32px;
}
> .bg-msg {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #616f94;
text-align: center;
> p {
padding: 8px 0;
}
}
</style>
\ No newline at end of file
}
</style>
src/page/main/config/accessRule/index.vue
View file @ 5df31795
......@@ -445,10 +445,10 @@ onBeforeMount(() => {
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
:deep() td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
:deep() .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
......@@ -460,7 +460,7 @@ onBeforeMount(() => {
}
}
::v-deep .dialog_box_detail {
:deep() .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
......
src/page/main/config/loginPage/index.vue
View file @ 5df31795
......@@ -97,7 +97,7 @@ const rules = reactive({});
padding-left: 24px;
.el-form {
width: 60%;
::v-deep .el-form-item {
:deep() .el-form-item {
&:nth-of-type(1) {
.el-upload--picture-card {
width: 120px;
......@@ -112,7 +112,7 @@ const rules = reactive({});
}
}
}
::v-deep .gap-title {
:deep() .gap-title {
font-size: 16px;
color: #202531;
}
......
src/page/main/config/preference/index.vue
View file @ 5df31795
......@@ -254,7 +254,7 @@ const save = () => {};
.authorizeForm,
.secureForm,
.registerForm {
::v-deep .el-form-item {
:deep() .el-form-item {
margin-bottom: 24px;
width: 750px;
font-size: 14px;
......
src/page/main/develop/systemApproval/approval/index.vue
View file @ 5df31795
......@@ -248,11 +248,11 @@ const save = () => {
}
.approveForm {
padding: 24px 24px 0 24px;
::v-deep .el-form-item {
:deep() .el-form-item {
margin-bottom: 24px;
}
::v-deep .el-form-item__label,
::v-deep .el-radio__label {
:deep() .el-form-item__label,
:deep() .el-radio__label {
color: var(--el-text-color-primary);
}
}
......
src/page/main/log/userAccount/index.vue
View file @ 5df31795
......@@ -482,10 +482,10 @@ onBeforeMount(() => {
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
:deep() td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
:deep() .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
......@@ -497,7 +497,7 @@ onBeforeMount(() => {
}
}
::v-deep .dialog_box_detail {
:deep() .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
......
src/page/main/log/userBehavior/index.vue
View file @ 5df31795
......@@ -482,10 +482,10 @@ onBeforeMount(() => {
border-radius: 3px;
border: solid 1px #b0bee8;
}
::v-deep td {
:deep() td {
padding: 9px 0 !important;
}
::v-deep .el-switch {
:deep() .el-switch {
height: 20px;
width: 44px;
.el-switch__core {
......@@ -497,7 +497,7 @@ onBeforeMount(() => {
}
}
::v-deep .dialog_box_detail {
:deep() .dialog_box_detail {
.el-dialog__body {
padding: 0 0 18px 0;
height: 580px;
......
src/page/registe/index.vue
View file @ 5df31795
......@@ -3,22 +3,16 @@
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/login' }"> 登录 </el-breadcrumb-item>
<el-breadcrumb-item > 注册 </el-breadcrumb-item>
<el-breadcrumb-item> 注册 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="registe-content">
<div class="registe-header">
<div>业务系统注册</div>
<div class="registe-heade-sub">注册信息提示审批后即可登录</div>
<div>业务系统注册</div>
<div class="registe-heade-sub">注册信息提示审批后即可登录</div>
</div>
<div class="registe-form">
<el-form
ref="infoFormRef"
:model="infoForm"
label-width="120px"
:rules="infoFormRules"
style="width: 90%"
>
<el-form ref="infoFormRef" :model="infoForm" label-width="120px" :rules="infoFormRules" style="width: 90%">
<div class="registe-info">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
......@@ -35,73 +29,44 @@
style="width: 100%" />
</el-form-item>
<el-form-item prop="business_name" label="业务系统名称">
<el-input
v-model="infoForm.business_name"
placeholder="请输入"
maxlength="20"
show-word-limit
/>
<el-input v-model="infoForm.business_name" placeholder="请输入" maxlength="20" show-word-limit />
</el-form-item>
<el-form-item prop="develop_id" label="开发厂商名称">
<el-select
v-model="infoForm.develop_id"
placeholder="请选择"
filterable
style="width: 100%">
<el-select v-model="infoForm.develop_id" placeholder="请选择" filterable style="width: 100%">
<el-option
v-for="item in developList"
:key="'develop_'+item.id"
:key="'develop_' + item.id"
:label="item.dict_name"
:value="item.id"
/>
:value="item.id" />
<template #empty>
<div class="select-empty">
<div>无匹配数据</div>
<el-button style="height: 32px;margin-top: 10px;" @click="addDevelop"> 新增</el-button>
</div>
<div class="select-empty">
<div>无匹配数据</div>
<el-button style="height: 32px; margin-top: 10px" @click="addDevelop"> 新增</el-button>
</div>
</template>
</el-select>
</el-form-item>
<el-form-item prop="system_account" label="账号">
<el-input
v-model="infoForm.system_account"
placeholder="请输入"
/>
<el-input v-model="infoForm.system_account" placeholder="请输入" />
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input
type="password"
v-model="infoForm.password"
placeholder="请输入"
/>
<el-input type="password" v-model="infoForm.password" placeholder="请输入" />
</el-form-item>
<el-form-item prop="confirm_password" label="确认密码">
<el-input
type="password"
v-model="infoForm.confirm_password"
placeholder="请输入"
/>
<el-input type="password" v-model="infoForm.confirm_password" placeholder="请输入" />
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input
v-model="infoForm.phone"
placeholder="请输入"
/>
<el-input v-model="infoForm.phone" placeholder="请输入" />
</el-form-item>
<el-form-item prop="code" label="验证码">
<div class="msg-code">
<el-input
v-model="infoForm.code"
placeholder="请输入"
style="860px"
>
</el-input>
<el-input v-model="infoForm.code" placeholder="请输入" style="860px"> </el-input>
<div class="yzm_img">
<el-button type="primary" style="width: 100%;height: 34px;" @click="sendSms" :disabled="countDown">
{{countDown > 0 ? countDown + '秒后再次获取' : '发送验证码'}}
</el-button>
<el-button type="primary" style="width: 100%; height: 34px" @click="sendSms" :disabled="countDown">
{{ countDown > 0 ? countDown + "秒后再次获取" : "发送验证码" }}
</el-button>
</div>
</div>
</div>
</el-form-item>
<el-form-item prop="business_desc" label="业务系统概述">
<el-input
......@@ -110,8 +75,7 @@
v-model="infoForm.business_desc"
placeholder="请输入"
maxlength="200"
show-word-limit
/>
show-word-limit />
</el-form-item>
</div>
</div>
......@@ -122,41 +86,31 @@
</div>
<div class="info-form">
<el-form-item prop="contact_name" label="联系人">
<el-input
v-model="infoForm.contact_name"
placeholder="请输入"
/>
<el-input v-model="infoForm.contact_name" placeholder="请输入" />
</el-form-item>
<el-form-item prop="contact_phone" label="联系电话">
<el-input
v-model="infoForm.contact_phone"
placeholder="请输入"
/>
<el-input v-model="infoForm.contact_phone" placeholder="请输入" />
</el-form-item>
</div>
</div>
</el-form>
</el-form>
</div>
<div class="registe-footer">
<el-button @click="router.go(-1)">返回登录页</el-button>
<el-button type="primary" @click="submit">注册</el-button>
<el-button @click="router.go(-1)">返回登录页</el-button>
<el-button type="primary" @click="submit">注册</el-button>
</div>
</div>
<el-dialog v-model="dialogVisit" title="新增" width="520px" :before-close="handleCloseDialog" destroy-on-close>
<div class="dialog_form">
<el-form
<el-form
ref="developFormRef"
:model="developForm"
label-width="120px"
:rules="developFormRules"
style="width: 90%"
>
<el-form-item prop="develop" label="开发厂商名称">
<el-input
v-model="developForm.develop"
placeholder="请输入"
/>
</el-form-item>
style="width: 90%">
<el-form-item prop="develop" label="开发厂商名称">
<el-input v-model="developForm.develop" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
<template #footer>
......@@ -170,12 +124,12 @@
</template>
<script setup>
import { ref, computed, onMounted, reactive, toRefs } from "vue";
import { ref, computed, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "@/request/http.js";
import { Encrypt } from "@/services/secret.js"
import { Encrypt } from "@/services/secret.js";
import { ElMessage } from "element-plus";
import { validatePhone } from "@/services/rules.js"
import { validatePhone } from "@/services/rules.js";
const validateBusinessName = (rule, value, callback) => {
let reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
......@@ -212,16 +166,15 @@ const validateSystemAccount = (rule, value, callback) => {
};
const checkPhoneRepet = (rule, value, callback) => {
let params = {phone: value};
axios.post(`/apaas/system/v5/user/checkPhone`,params)
.then((res) => {
if (res.data.code == 200) {
callback()
}else {
callback(new Error(res.data.data))
}
})
}
let params = { phone: value };
axios.post(`/apaas/system/v5/user/checkPhone`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
};
const validatePass = (rule, value, callback) => {
if (value !== state.infoForm.password) {
......@@ -244,13 +197,14 @@ const state = reactive({
code: "",
business_desc: "",
contact_name: "",
contact_phone: ""
contact_phone: "",
},
infoFormRules: {
organization_id: [{ required: true, message: "请选择开发厂商", trigger: "blur" }],
business_name: [
{ required: true, message: "请输入业务系统名称", trigger: "blur" },
{ validator: validateBusinessName, trigger: "blur" },],
{ validator: validateBusinessName, trigger: "blur" },
],
develop_id: [{ required: true, message: "请选择开发厂商", trigger: "blur" }],
system_account: [
{ required: true, message: "请输入账号", trigger: "blur" },
......@@ -261,40 +215,44 @@ const state = reactive({
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 8, message: "密码长度不得低于8位", trigger: "blur" },
],
],
confirm_password: [
{ required: true, message: "请确认密码", trigger: "blur" },
{ validator: validatePass, trigger: "blur" },
],
phone: [{ required: true, message: "请输入手机号", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
{ validator: checkPhoneRepet, trigger: "blur" },],
],
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
{ validator: checkPhoneRepet, trigger: "blur" },
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
contact_name: [{ required: true, message: "请输入联系人", trigger: "blur" }],
contact_phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" }],
contact_phone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: validatePhone, trigger: "blur" },
],
},
developForm: {
develop: ""
develop: "",
},
developFormRules: {
develop: [{ required: true, message: "请输入开发厂商名称", trigger: "blur" }],
develop: [{ required: true, message: "请输入开发厂商名称", trigger: "blur" }],
},
dialogVisit: false,
countDown: 0,
countDownTimer: null,
orgData: [],
developList: []
})
developList: [],
});
const treeProps = {
label: "name",
children: "Child",
value: "organization_id",
};
// const loading = ref(false)
const list = ref([])
const infoFormRef = ref(null)
const developFormRef = ref(null)
const list = ref([]);
const infoFormRef = ref(null);
const developFormRef = ref(null);
// const remoteMethod = (query) => {
// if (query) {
......@@ -312,7 +270,7 @@ const developFormRef = ref(null)
const submit = () => {
infoFormRef.value.validate((valid) => {
if(valid) {
if (valid) {
const params = {
organization_id: state.infoForm.organization_id,
business_name: state.infoForm.business_name,
......@@ -323,174 +281,174 @@ const submit = () => {
contact_name: state.infoForm.contact_name,
contact_phone: state.infoForm.contact_phone,
phone: state.infoForm.phone,
code: state.infoForm.code
}
axios.post('/apaas/system/v5/user/register',params).then(({ data }) => {
if (data.code == 200) {
ElMessage.success('注册信息已提交！');
router.go(-1)
}else {
ElMessage.error(data.data);
}
});
code: state.infoForm.code,
};
axios.post("/apaas/system/v5/user/register", params).then(({ data }) => {
if (data.code == 200) {
ElMessage.success("注册信息已提交！");
router.go(-1);
} else {
ElMessage.error(data.data);
}
});
}
})
}
});
};
const sendSms = () => {
infoFormRef.value.validateField("phone", (valid) => {
if (valid) {
axios.post('/apaas/system/v5/sms/verifyCode',{phone: state.infoForm.phone}).then(({ data }) => {
if (data.code == 200) {
countDownAction();
}
});
}
});
}
if (valid) {
axios.post("/apaas/system/v5/sms/verifyCode", { phone: state.infoForm.phone }).then(({ data }) => {
if (data.code == 200) {
countDownAction();
}
});
}
});
};
const countDownAction = () => {
state.countDown = 60;
if (state.countDownTimer) {
clearInterval(state.countDownTimer);
}
state.countDownTimer = setInterval(() => {
if (state.countDown > 0) {
state.countDown--;
} else {
clearInterval(state.countDownTimer);
}
}, 1000);
}
state.countDown = 60;
if (state.countDownTimer) {
clearInterval(state.countDownTimer);
}
state.countDownTimer = setInterval(() => {
if (state.countDown > 0) {
state.countDown--;
} else {
clearInterval(state.countDownTimer);
}
}, 1000);
};
const addDevelop = () => {
state.dialogVisit = true;
}
};
const handleCloseDialog = () => {
state.dialogVisit = false;
}
};
const confirmAdd = () => {
developFormRef.value.validate((valid) => {
if(valid) {
axios.post('/apaas/system/v5/user/dict/develop/add',{dict_name: state.developForm.develop}).then(({ data }) => {
if (data.code == 200) {
state.infoForm.develop_id = data.data;
getDevelopList()
}else {
ElMessage.error(data.data);
}
handleCloseDialog()
});
if (valid) {
axios
.post("/apaas/system/v5/user/dict/develop/add", { dict_name: state.developForm.develop })
.then(({ data }) => {
if (data.code == 200) {
state.infoForm.develop_id = data.data;
getDevelopList();
} else {
ElMessage.error(data.data);
}
handleCloseDialog();
});
}
})
}
});
};
const getOrgData = () => {
axios.get('/apaas/system/v5/user/org/tree').then(({ data }) => {
if (data.code == 200) {
state.orgData = data.data || []
}
});
}
axios.get("/apaas/system/v5/user/org/tree").then(({ data }) => {
if (data.code == 200) {
state.orgData = data.data || [];
}
});
};
const getDevelopList = () => {
axios.get('/apaas/system/v5/user/dict/develop').then(({ data }) => {
if (data.code == 200) {
state.developList = data.data || []
}
});
}
axios.get("/apaas/system/v5/user/dict/develop").then(({ data }) => {
if (data.code == 200) {
state.developList = data.data || [];
}
});
};
onMounted(() => {
getOrgData()
getDevelopList()
})
getOrgData();
getDevelopList();
});
const { infoForm,
infoFormRules,
dialogVisit,
developForm,
developFormRules,
countDown,
countDownTimer,
orgData,
developList } = toRefs(state)
const {
infoForm,
infoFormRules,
dialogVisit,
developForm,
developFormRules,
countDown,
countDownTimer,
orgData,
developList,
} = toRefs(state);
</script>
<style lang="scss" scoped>
.registe-container {
margin: 0 auto;
width: 1200px;
height: 100%;
.registe-content {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
// height: calc(100% - 100px);
.registe-header {
padding: 20px 0;
text-align: center;
font-size: 22px;
color: #1a1a1a;
font-weight: bold;
.registe-heade-sub {
font-size: 14px;
font-weight: 400;
color: #404a62;
padding: 10px 0;
}
.registe-container {
margin: 0 auto;
width: 1200px;
height: 100%;
.registe-content {
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
// height: calc(100% - 100px);
.registe-header {
padding: 20px 0;
text-align: center;
font-size: 22px;
color: #1a1a1a;
font-weight: bold;
.registe-heade-sub {
font-size: 14px;
font-weight: 400;
color: #404a62;
padding: 10px 0;
}
.registe-form {
padding: 0 24px;
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
}
.registe-form {
padding: 0 24px;
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
}
.registe-footer {
border-top: solid 1px #e6e9ef;
text-align: right;
padding: 24px;
.msg-code {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.yzm_img {
flex: 1;
margin-left: 20px;
}
}
}
.dialog_form {
margin: 20px 0;
.registe-footer {
border-top: solid 1px #e6e9ef;
text-align: right;
padding: 24px;
}
}
.dialog_form {
margin: 20px 0;
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 5df31795
......@@ -69,7 +69,7 @@ router.beforeEach((to, from, next) => {
// 检查to.path是否存在于免登陆白名单
if (inWhiteList(to.path)) {
next();
return next();
} else {
// 判断是否已经登录，未登录则重定向到首页或其他页面（通过query传参记录原来的路径）
// 根据配置判断是否跳转第三方登录，跳转第三方登录则不跳login
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment