mt-fe-group
/
basic-framework
7
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity

Compare commits

merge into: mt-fe-group:master
mt-fe-group:lb
mt-fe-group:master
...
pull from: mt-fe-group:lb
mt-fe-group:lb
mt-fe-group:master

3 Commits
master ... lb

Author SHA1 Message Date
  lb ced15e45d5 update Login page 1 year ago
  lb d1f4ab3555 update ignore 1 year ago
  lb 8876e015ae add footer 1 year ago
10 changed files with 21546 additions and 514 deletions
Unified View
Diff Options
Show Stats
  1. +3
    -0
      .gitignore
  2. +20866
    -314
      package-lock.json
  3. BIN
      public/favicon.ico
  4. BIN
      src/assets/img/cnbm.png
  5. BIN
      src/assets/img/login-back.png
  6. BIN
      src/assets/img/login.gif
  7. +17
    -0
      src/views/main-footer.vue
  8. +115
    -96
      src/views/main.vue
  9. +110
    -0
      src/views/pages/login copy.vue
  10. +435
    -104
      src/views/pages/login.vue

+ 3
- 0
.gitignore View File

@@ -19,3 +19,6 @@ yarn-error.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw* *.sw*

# lock
package-lock.json

+ 20866
- 314
package-lock.json
File diff suppressed because it is too large
View File


BIN
public/favicon.ico View File

Before After
Width: 100  |  Height: 100  |  Size: 1.9 KiB

BIN
src/assets/img/cnbm.png View File

Before After
Width: 100  |  Height: 100  |  Size: 1.9 KiB

BIN
src/assets/img/login-back.png View File

Before After
Width: 1118  |  Height: 1080  |  Size: 42 KiB

BIN
src/assets/img/login.gif View File

Before After
Width: 1280  |  Height: 960  |  Size: 4.6 MiB

+ 17
- 0
src/views/main-footer.vue View File

@@ -0,0 +1,17 @@
<template>
<div class="footerbar">
© 中建材智能自动化研究院有限公司
<!-- © {{ 'copyright.company' | i18nFilter }} -->
</div>
</template>

<style lang="scss">
.footerbar{
width: 100%;
height: 20px;
text-align: center;
font-size: 12px;
color: #C7C7C7;
margin: 5px 0;
}
</style>

+ 115
- 96
src/views/main.vue View File

@@ -1,102 +1,121 @@
<template> <template>
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
<template v-if="!loading">
<main-navbar />
<main-sidebar />
<div class="aui-content__wrapper">
<main-content v-if="!$store.state.contentIsNeedRefresh" />
</div>
</template>
</div>
<div
v-loading.fullscreen.lock="loading"
:element-loading-text="$t('loading')"
:class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
>
<template v-if="!loading">
<main-navbar />
<main-sidebar />
<div class="aui-content__wrapper">
<main-content v-if="!$store.state.contentIsNeedRefresh" />
<main-footer />
</div>
</template>
</div>
</template> </template>


<script> <script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
import debounce from 'lodash/debounce'
import MainNavbar from "./main-navbar";
import MainSidebar from "./main-sidebar";
import MainContent from "./main-content";
import MainFooter from "./main-footer";
import debounce from "lodash/debounce";
export default { export default {
provide () {
return {
// 刷新
refresh () {
this.$store.state.contentIsNeedRefresh = true
this.$nextTick(() => {
this.$store.state.contentIsNeedRefresh = false
})
}
}
},
data () {
return {
loading: true
}
},
components: {
MainNavbar,
MainSidebar,
MainContent
},
watch: {
$route: 'routeHandle'
},
created () {
this.windowResizeHandle()
this.routeHandle(this.$route)
Promise.all([
this.getUserInfo(),
this.getPermissions()
]).then(() => {
this.loading = false
})
},
methods: {
// 窗口改变大小
windowResizeHandle () {
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
window.addEventListener('resize', debounce(() => {
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
}, 150))
},
// 路由, 监听
routeHandle (route) {
if (!route.meta.isTab) {
return false
}
var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
if (!tab) {
tab = {
...window.SITE_CONFIG['contentTabDefault'],
...route.meta,
'name': route.name,
'params': { ...route.params },
'query': { ...route.query }
}
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
}
this.$store.state.sidebarMenuActiveName = tab.menuId
this.$store.state.contentTabsActiveName = tab.name
},
// 获取当前管理员信息
getUserInfo () {
return this.$http.get('/sys/user/info').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$store.state.user.id = res.data.id
this.$store.state.user.name = res.data.username
this.$store.state.user.superAdmin = res.data.superAdmin
}).catch(() => {})
},
// 获取权限
getPermissions () {
return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
window.SITE_CONFIG['permissions'] = res.data
}).catch(() => {})
}
}
}
provide() {
return {
// 刷新
refresh() {
this.$store.state.contentIsNeedRefresh = true;
this.$nextTick(() => {
this.$store.state.contentIsNeedRefresh = false;
});
},
};
},
data() {
return {
loading: true,
};
},
components: {
MainNavbar,
MainSidebar,
MainFooter,
MainContent,
},
watch: {
$route: "routeHandle",
},
created() {
this.windowResizeHandle();
this.routeHandle(this.$route);
Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
this.loading = false;
});
},
methods: {
// 窗口改变大小
windowResizeHandle() {
this.$store.state.sidebarFold =
document.documentElement["clientWidth"] <= 992 || false;
window.addEventListener(
"resize",
debounce(() => {
this.$store.state.sidebarFold =
document.documentElement["clientWidth"] <= 992 || false;
}, 150)
);
},
// 路由, 监听
routeHandle(route) {
if (!route.meta.isTab) {
return false;
}
var tab = this.$store.state.contentTabs.filter(
(item) => item.name === route.name
)[0];
if (!tab) {
tab = {
...window.SITE_CONFIG["contentTabDefault"],
...route.meta,
name: route.name,
params: { ...route.params },
query: { ...route.query },
};
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(
tab
);
}
this.$store.state.sidebarMenuActiveName = tab.menuId;
this.$store.state.contentTabsActiveName = tab.name;
},
// 获取当前管理员信息
getUserInfo() {
return this.$http
.get("/sys/user/info")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$store.state.user.id = res.data.id;
this.$store.state.user.name = res.data.username;
this.$store.state.user.superAdmin = res.data.superAdmin;
})
.catch(() => {});
},
// 获取权限
getPermissions() {
return this.$http
.get("/sys/menu/permissions")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
window.SITE_CONFIG["permissions"] = res.data;
})
.catch(() => {});
},
},
};
</script> </script>

+ 110
- 0
src/views/pages/login copy.vue View File

@@ -0,0 +1,110 @@
<template>
<div class="aui-wrapper aui-page__login">
<div class="aui-content__wrapper">
<main class="aui-content">
<div class="login-header">
<h2 class="login-brand">{{ $t('brand.lg') }}</h2>
</div>
<div class="login-body">
<h3 class="login-title">{{ $t('login.title') }}</h3>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
<el-form-item prop="username">
<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
</span>
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="login-footer">
<p>{{ $t('login.copyright') }}</p>
</div>
</main>
</div>
</div>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { getUUID } from '@/utils'
export default {
data () {
return {
captchaPath: '',
dataForm: {
username: 'admin',
password: 'admin',
uuid: 'string',
captcha: ''
}
}
},
computed: {
dataRule () {
return {
username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
password: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
captcha: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
created () {
this.getCaptcha()
},
methods: {
// 获取验证码
getCaptcha () {
this.dataForm.uuid = getUUID()
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http.post('/login', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.getCaptcha()
return this.$message.error(res.msg)
}
Cookies.set('token', res.data.token)
this.$router.replace({ name: 'home' })
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>

+ 435
- 104
src/views/pages/login.vue View File

@@ -1,110 +1,441 @@
<template> <template>
<div class="aui-wrapper aui-page__login">
<div class="aui-content__wrapper">
<main class="aui-content">
<div class="login-header">
<h2 class="login-brand">{{ $t('brand.lg') }}</h2>
</div>
<div class="login-body">
<h3 class="login-title">{{ $t('login.title') }}</h3>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
<el-form-item prop="username">
<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
</span>
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="login-footer">
<p>{{ $t('login.copyright') }}</p>
</div>
</main>
</div>
</div>
<div class="login-container">
<div
class="login-background"
:style="{
backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
}"
>
<div class="login-background-container">
<div class="back-title">
Wel<span>come</span>
<p>
<span class="back-title-point" />&gt;&gt;&gt;项目名称&lt;&lt;&lt;
</p>
</div>
<img
:src="require('../../assets/img/login.gif')"
style="width: 90%; margin-left: 5%"
alt=""
/>
</div>
</div>
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataRule"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title" :title="'标题'">
<img
src="../../assets/img/cnbm.png"
style="width: 1em; height: 1em; position: relative; top: .15em; margin-right: 12px"
alt=""
/>
<!-- {{ "title" | i18nFilter }} -->
中建材智能自动化院
</h3>
</div>

<el-form-item prop="username" style="margin: 0px 8.3%">
<el-input
ref="username"
v-model="dataForm.username"
:placeholder="'请输入用户名'"
name="username"
type="text"
tabindex="1"
autocomplete="on"
/>
</el-form-item>

<el-tooltip
v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual
>
<el-form-item prop="password" style="margin: 8px 8.3%">
<el-input
:key="passwordType"
ref="password"
v-model="dataForm.password"
:type="passwordType"
:placeholder="'请输入密码'"
name="password"
tabindex="2"
autocomplete="on"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="dataFormSubmitHandle"
/>
<span class="show-pwd" @click="showPwd">
<!-- <svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/> -->
</span>
</el-form-item>
</el-tooltip>

<el-form-item prop="captcha" style="margin: 0px 8.3%">
<el-row :gutter="20">
<el-col :span="14">
<el-input
v-model="dataForm.captcha"
:placeholder="$t('login.captcha')"
>
<!-- <span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true">
<use xlink:href="#icon-safetycertificate"></use>
</svg>
</span> -->
</el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()" />
</el-col>
</el-row>
</el-form-item>
<!-- <lang-select class="login-language" /> -->

<el-button
:loading="loading"
type="primary"
style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh"
@click.native.prevent="dataFormSubmitHandle"
>
<!-- {{ "login.logIn" | i18nFilter }} -->
登录
</el-button>
<el-row class="login-footer">
<el-row class="login-language">
<el-col
:span="2"
:offset="8"
:class="['login-language-box', language === 'zh' ? 'isActive' : '']"
@click.native="changeLanguage('zh')"
>
中文
</el-col>
<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col>
<el-col
:span="2"
:offset="1"
:class="['login-language-box', language === 'en' ? 'isActive' : '']"
@click.native="changeLanguage('en')"
>
English
</el-col>
</el-row>
<el-row class="login-copyright">
<!-- {{ "copyright.copyright" | i18nFilter }}：{{
"copyright.company" | i18nFilter
}}&nbsp;&nbsp;&nbsp;&nbsp;{{ "copyright.version" | i18nFilter }}：1.0 -->
版权所有: &copy;中建材智能自动化研究院有限公司 2023 v1.0
</el-row>
</el-row>
</el-form>
</div>
</template> </template>


<script> <script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { getUUID } from '@/utils'
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import { getUUID } from "@/utils";

export default { export default {
data () {
return {
captchaPath: '',
dataForm: {
username: 'admin',
password: 'admin',
uuid: 'string',
captcha: ''
}
}
},
computed: {
dataRule () {
return {
username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
password: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
captcha: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
created () {
this.getCaptcha()
},
methods: {
// 获取验证码
getCaptcha () {
this.dataForm.uuid = getUUID()
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http.post('/login', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.getCaptcha()
return this.$message.error(res.msg)
}
Cookies.set('token', res.data.token)
this.$router.replace({ name: 'home' })
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
name: "Login",
data() {
return {
baseImg: require("../../assets/img/login-back.png"),
coverImgUrl: "",
dataForm: {
username: "admin",
password: "admin",
uuid: "string",
captcha: "",
},
captchaPath: "",
passwordType: "password",
capsTooltip: false,
loading: false,
redirect: undefined,
otherQuery: {},
};
},
computed: {
language() {
return "zh";
},
dataRule() {
return {
username: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
password: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
captcha: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
};
},
},

created() {
this.getCaptcha();
},

methods: {
// 检查大写
checkCapslock() {},
// 显示密码
showPwd() {},
// 改变语言环境
changeLanguage(lang) {},
// 获取验证码
getCaptcha() {
this.dataForm.uuid = getUUID();
this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
},
// 表单提交
dataFormSubmitHandle: debounce(
function() {
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
return false;
}
this.$http
.post("/login", this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
this.getCaptcha();
return this.$message.error(res.msg);
}
Cookies.set("token", res.data.token);
this.$router.replace({ name: "home" });
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg:#283443;
$light_gray: #fff;
$cursor: #161616;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
height: 6vh !important;
}
}

/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;

input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
}
}

.el-form-item {
border: 1px solid #d7d8d9;
border-radius: 5px;
color: #454545;
height: 6vh;
.el-form-item__content {
height: calc(6vh - 2px);
line-height: 6vh;
.el-input {
height: calc(6vh - 2px);
}
}
}
}
</style>

<style lang="scss" scoped>
// $bg:#2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #161616;

.login-container {
min-height: 100%;
width: 100%;
background-size: cover;
// background-color: $bg;
overflow: hidden;
.login-background {
position: absolute;
width: 60%;
top: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.login-background-container {
width: 95%;
.back-title {
color: #26b9de;
font-size: 88px;
margin-left: 17%;
span {
color: #fff;
}
p {
font-size: 22px;
letter-spacing: 1px;
.back-title-point {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #26b9de;
margin-right: 14px;
}
}
}
}
}

.login-form {
position: absolute;
width: 40%;
max-width: 100%;
top: 0;
right: 0;
bottom: 0;
padding: 0 6.67%;
margin: 0 auto;
overflow: hidden;
background: rgba($color: #fff, $alpha: 1);
backdrop-filter: blur(10px);
box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1);
.login-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-bottom: 5vh;
}
.login-language {
font-size: 15px;
text-align: center;
color: $cursor;
margin-bottom: 12px;
.login-language-box {
cursor: pointer;
}
.isActive {
color: #0b58ff;
cursor: auto;
}
}
.login-copyright {
text-align: center;
color: #c7c7c7;
font-size: 15px;
line-height: 28px;
padding: 0 16%;
}
}

.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;

span {
&:first-of-type {
margin-right: 16px;
}
}
}

.svg-container {
padding: 6px 5px 6px 15px;
color: #000;
vertical-align: middle;
width: 30px;
display: inline-block;
}

.title-container {
position: relative;
margin-top: 18vh;

.title {
font-size: 34px;
line-height: 6vh;
margin: 0px auto 40px auto;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
letter-spacing: 2px;
}
}

.show-pwd {
position: absolute;
right: 10px;
top: 0;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}

.thirdparty-button {
position: absolute;
right: 0;
bottom: 6px;
}

@media only screen and (max-width: 470px) {
.thirdparty-button {
display: none;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save