From ef61883a5437d03c5e384ba0b35c3e0885a882ab Mon Sep 17 00:00:00 2001
From: liuguocan <527956374@qq.com>
Date: 星期二, 14 三月 2023 13:57:40 +0800
Subject: [PATCH] 登录页面添加滑块校验/报表页面高度问题处理
---
src/views/report/demo/print_1.vue | 24 ++++++-
src/views/tool/report_design/index.vue | 10 ++-
src/views/user/login.vue | 57 +++++++++++-------
src/views/tool/report_design/iframe.css | 3 +
package.json | 1
src/views/user/dragVerify/index.vue | 58 +++++++++++++++++++
src/router/index.js | 2
7 files changed, 124 insertions(+), 31 deletions(-)
diff --git a/package.json b/package.json
index bef6d58..cd0bc8f 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
+ "vue-drag-verify": "^1.0.6",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
diff --git a/src/router/index.js b/src/router/index.js
index 7f3bbfd..74eaad3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,7 +43,7 @@
},
{
path: '/login',
- component: () => import('@/views/login'),
+ component: () => import('@/views/user/login'),
hidden: true
},
{
diff --git a/src/views/report/demo/print_1.vue b/src/views/report/demo/print_1.vue
index bcc2aad..53295eb 100644
--- a/src/views/report/demo/print_1.vue
+++ b/src/views/report/demo/print_1.vue
@@ -1,5 +1,7 @@
<template>
- <iframe ref="iframe" :src="url" scrolling="auto" :style="{height:'calc(100% - 5px)',width:'100%',border:'none'}" />
+ <div class="report-box">
+ <iframe id="iframe-box" @load="loadFrame" ref="iframe" :src="url" scrolling="auto" :style="{height:'100%',width:'100%',border:'none'}" />
+ </div>
</template>
<script>
@@ -20,10 +22,24 @@
let token = getToken();
this.url = globalConf.baseUrl + `/jmreport/view/ff9bd143582a6dfed897ba8b6f93b175?token=${token}`
this.height = window.screen.availHeight
+ },
+ methods:{
+ loadFrame() {
+ const iframeBox = document.getElementById('iframe-box')
+ const doc = iframeBox.contentWindow.document
+ const head = doc.getElementsByTagName('head')
+ const linkTag = document.createElement('link')
+ linkTag.id = 'newstyle'
+ linkTag.href = `./iframe.css`
+ linkTag.setAttribute('rel', 'stylesheet')
+ linkTag.setAttribute('type', 'text/css')
+ head[0].append(linkTag)
+ }
}
}
</script>
-
-<style scoped>
-
+<style lang="scss">
+.report-box{
+ height: calc( 100vh - 150px );
+}
</style>
diff --git a/src/views/tool/report_design/iframe.css b/src/views/tool/report_design/iframe.css
new file mode 100644
index 0000000..fee6c39
--- /dev/null
+++ b/src/views/tool/report_design/iframe.css
@@ -0,0 +1,3 @@
+.jm-sheet-sheet{
+ padding-left: 20px!important;
+}
diff --git a/src/views/tool/report_design/index.vue b/src/views/tool/report_design/index.vue
index e6875b5..b60b315 100644
--- a/src/views/tool/report_design/index.vue
+++ b/src/views/tool/report_design/index.vue
@@ -1,5 +1,7 @@
<template>
- <iframe ref="iframe" :src="url" scrolling="auto" :style="{height:'calc(100% - 5px)',width:'100%',border:'none'}" />
+ <div class="report-box">
+ <iframe ref="iframe" :src="url" scrolling="auto" :style="{height:'100%',width:'100%',border:'none'}" />
+ </div>
</template>
<script>
@@ -24,6 +26,8 @@
}
</script>
-<style scoped>
-
+<style lang="scss">
+.report-box{
+ height: calc( 100vh - 150px );
+}
</style>
diff --git a/src/views/user/dragVerify/index.vue b/src/views/user/dragVerify/index.vue
new file mode 100644
index 0000000..9027ab1
--- /dev/null
+++ b/src/views/user/dragVerify/index.vue
@@ -0,0 +1,58 @@
+<template>
+ <drag-verify
+ :width="width"
+ :height="height"
+ :text="text"
+ :success-text="successText"
+ :background="background"
+ :progress-bar-bg="progressBarBg"
+ :completed-bg="completedBg"
+ :handler-bg="handlerBg"
+ :handler-icon="handlerIcon"
+ :text-size="textSize"
+ :success-icon="successIcon"
+ @passcallback="passcallback2"
+ ref="Verify"
+ >
+ </drag-verify>
+</template>
+<script>
+
+import dragVerify from 'vue-drag-verify'
+import 'font-awesome/css/font-awesome.min.css'
+export default {
+ name: 'DragVerify',
+ components: {
+ dragVerify
+ },
+ data () {
+ return {
+ handlerIcon: 'fa fa-angle-double-right',
+ successIcon: 'fa fa-check',
+ background: '#f5f5f5',
+ progressBarBg: 'rgba(71,141,251,0.5)',
+ completedBg: '#1890ff',
+ handlerBg: '#fff',
+ text: '璇峰皢婊戝潡鎷栧姩鍒板彸渚�',
+ successText: '楠岃瘉鎴愬姛',
+ width: 350,
+ height: 45,
+ textSize: '14px',
+ isCircle: 'true'
+ }
+ },
+ methods: {
+ passcallback2 () {
+ if (this.$refs.Verify.isPassing) {
+ this.$emit('success')
+ }
+ }
+ }
+}
+</script>
+<style>
+.drag_verify .dv_handler_bg{
+ width: 45px!important;
+ height: 45px!important;
+}
+</style>
diff --git a/src/views/login.vue b/src/views/user/login.vue
similarity index 82%
rename from src/views/login.vue
rename to src/views/user/login.vue
index 6a11fae..a093b95 100644
--- a/src/views/login.vue
+++ b/src/views/user/login.vue
@@ -23,19 +23,20 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- auto-complete="off"
- placeholder="楠岃瘉鐮�"
- style="width: 63%"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
+ <el-form-item>
+<!-- <el-input-->
+<!-- v-model="loginForm.code"-->
+<!-- auto-complete="off"-->
+<!-- placeholder="楠岃瘉鐮�"-->
+<!-- style="width: 63%"-->
+<!-- @keyup.enter.native="handleLogin"-->
+<!-- >-->
+<!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
+<!-- </el-input>-->
+<!-- <div class="login-code">-->
+<!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
+<!-- </div>-->
+ <drag-verify @success="verifyTrue" ref="verify"/>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox>
<el-form-item style="width:100%;">
@@ -62,20 +63,22 @@
</template>
<script>
-import { getCodeImg } from "@/api/login";
+import dragVerify from './dragVerify/index.vue'// 婊戝姩楠岃瘉缁勪欢
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
- name: "Login",
+ components: {
+ 'drag-verify': dragVerify
+ },
data() {
return {
+ verify:false,
codeUrl: "",
loginForm: {
- username: "",
- password: "",
+ username: "supervisor",
+ password: "123456",
rememberMe: false,
- code: "",
uuid: ""
},
loginRules: {
@@ -104,10 +107,13 @@
}
},
created() {
- this.getCode();
+ // this.getCode();
this.getCookie();
},
methods: {
+ verifyTrue () {
+ this.verify = true
+ },
getCode() {
getCodeImg().then(res => {
// console.log(res);
@@ -137,6 +143,11 @@
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
+ if (!this.verify) {
+ this.$message.error('璇峰厛瀹屾垚楠岃瘉')
+ this.loading = false
+ return
+ }
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
@@ -151,9 +162,9 @@
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
- if (this.captchaEnabled) {
- this.getCode();
- }
+ // if (this.captchaEnabled) {
+ // this.getCode();
+ // }
});
}
});
@@ -168,7 +179,7 @@
justify-content: center;
align-items: center;
height: 100%;
- background-image: url("../assets/images/login-background.jpg");
+ background-image: url("../../assets/images/login-background.jpg");
background-size: cover;
}
.title {
--
Gitblit v1.9.1