布局修改、组件代码移植

pull/271/head
小哥 3 years ago
parent 3fbc9ac890
commit 93b3bc595d

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 智能作业系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
# 智能作业系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载

@ -1,8 +1,8 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 智能作业系统
# 生产环境配置
ENV = 'production'
# 若依管理系统/生产环境
# 智能作业系统/生产环境
VUE_APP_BASE_API = '/prod-api'

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 智能作业系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
# 智能作业系统/测试环境
VUE_APP_BASE_API = '/stage-api'

@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.6.1",
"description": "若依管理系统",
"description": "智能作业系统",
"author": "若依",
"license": "MIT",
"scripts": {

@ -7,6 +7,7 @@
<script>
import ThemePicker from "@/components/ThemePicker";
import WaterMark from '@/plugins/waterMark.js'
export default {
name: "App",
@ -18,7 +19,90 @@ export default {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
},
mounted() {
// this.initWartHeight = document.body.clientHeight
// this.initWaterMark(this.initWartHeight)
// window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
//
initWaterMark(height) {
let userInfo = this.$store.state.user.userInfo,
_time = this.$global.createTime('day'),
_str = '测试角色' + ' / ' + '测试用户' + ' / ' + _time
console.log(userInfo, '水印')
WaterMark(_str, height)
},
handleScroll() {
this.$nextTick(() => {
let height = document.getElementById('app-main').scrollHeight
console.log('内容区高度', height)
if (height && this.initWartHeight != height) {
this.initWartHeight = height
this.initWaterMark(height)
}
})
},
// hasOpen
isOpenIframePage() {
console.log(this.componentsArr, 'this.componentsArr')
const target = this.componentsArr.find(item => {
console.log(item, 'item')
return item.path === this.$route.query.path
})
if (target && !target.hasOpen) {
target.hasOpen = true
}
},
// iframeComponent
getComponentsArr() {
// debugger
const router = this.$router
const routes = router.options.routes
// console.log(router.options.routes, ' router.options.routes')
const iframeArr = [] //routes.filter(item => item.iframeComponent)
const [{ iframeComponent = null } = {}] = iframeArr || []
// if (sessionStorage.getItem('iframeMenuList')) return false
//
const [{ name: custRouteName, path, component }] = routes.filter(item => item.name === 'uCustView')
const custComponent = { name: custRouteName, menuUrl: path, component }
// console.log(custViews, 'custViews')
if (sessionStorage.getItem('iframeMenuList')) {
const iframeMenuList = JSON.parse(sessionStorage.getItem('iframeMenuList')) || []
// console.log(routes,iframeArr,'iframeArr')
console.log(iframeMenuList, 'options 1111')
return [...iframeMenuList, custComponent].map(item => {
const name = item.menuId || item.menuUrl.replace('/', '')
return {
name,
path: item.menuUrl,
menuUrl: item.menuUrl,
hasOpen: false, // false
component: iframeComponent, //
// fullPath: item.fullPath,
}
})
}
return false
},
// iframe
initIframe() {
// debugger
const componentsArr = this.getComponentsArr()
console.log(componentsArr, 'componentsArr')
if (componentsArr) {
componentsArr.forEach(item => {
Vue.component(item.name, item.component)
})
this.componentsArr = componentsArr
console.log(this.componentsArr, 'this.componentsArr')
// iframe
this.isOpenIframePage()
}
},
},
};
</script>
<style scoped>

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid) {
return request({
url: '/auth/login',
url: '/system/login',
headers: {
isToken: false
},
@ -15,7 +15,7 @@ export function login(username, password, code, uuid) {
// 注册方法
export function register(data) {
return request({
url: '/auth/register',
url: '/system/register',
headers: {
isToken: false
},
@ -27,7 +27,7 @@ export function register(data) {
// 刷新方法
export function refreshToken() {
return request({
url: '/auth/refresh',
url: '/system/refresh',
method: 'post'
})
}
@ -43,7 +43,7 @@ export function getInfo() {
// 退出方法
export function logout() {
return request({
url: '/auth/logout',
url: '/system/logout',
method: 'delete'
})
}

@ -1,4 +1,4 @@
import request from '@/utils/request'
import request from '@/utils/request'
// 查询菜单列表
export function listMenu(query) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1000 B

@ -1,10 +1,11 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
overflow-y: hidden;
top: 80px;
}
.sidebarHide {
@ -16,10 +17,10 @@
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
height: 100%;
height: calc(100vh - 80px);
position: fixed;
font-size: 0px;
top: 0;
top: 80px;
bottom: 0;
left: 0;
z-index: 1001;

@ -0,0 +1,528 @@
<template>
<div class="header">
<div class="banner-box">
<img src="../assets/img/banner/head_bank_logo.png" alt="" class="bank_logo" />
<div class="header-name">
<span class="bigcharacter-logo">天津银行公司业务智能作业系统</span>
<span class="ismallcharacter-logo">BUSINESS INTELLIGENCE OPERATING SYSTEM OF BANK OF TIANJIN</span>
</div>
<!-- <div class="model_wrap">
<div class="banner-model">
<el-badge :is-dot="getDaRankNewStatus" class="banner-model spc_dot">
<div @click="toRbRank" class="model-item">
<img src="../assets/img/banner/red_black.png" class="banner-icon" />
<p>红黑榜</p>
</div>
</el-badge>
</div>
<el-badge :is-dot="listNewStatus" class="banner-model">
<div @click="toNewProd" class="model-item">
<img src="../assets/img/banner/new_pro.png" class="banner-icon" />
<p>新品上架</p>
</div>
</el-badge>
<el-badge class="banner-model">
<div @click="toHotPro" class="model-item">
<img src="../assets/img/banner/pro_hot.png" class="banner-icon" />
<p>产品热销</p>
</div>
</el-badge>
</div> -->
<div class="banner-user">
<img src="../assets/img/banner/head_avatar.png" />
<div>
<p></p>
<p>数据日期</p>
</div>
</div>
<el-dropdown @command="handleClickCommand" trigger="click">
<span>
{{ currentRoleName }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in roleList" :key="item.roleId" :command="item.roleId">{{
item.roleName
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 修改密码 -->
<div class="icon-l"></div>
<div class="logout">
<el-tooltip popper-class="func-tootip" placement="bottom" effect="light">
<div class="logout-text" slot="content">退出登录</div>
<img src="../assets/logo-imgs/安全退出icon@2x.png" alt="" class="icon-close" @click="logout" />
</el-tooltip>
</div>
<div class="resetPwd">
<span class="reset-text" @click="modifyPwd"></span>
</div>
</div>
<el-dialog
class="pwd-dialog"
title="修改密码"
append-to-body
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="true"
width="600px"
:before-close="cancle"
>
<el-form ref="pwdForm" size="small" :model="pwdForm" :rules="pwdRule">
<el-form-item label="用户名" >
<el-input v-model="pwdForm.loginName" readonly></el-input>
</el-form-item>
<el-form-item label="原密码" prop="oldPassword">
<el-input v-model="pwdForm.oldPassword" placeholder="请输入原密码" show-password></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="pwdForm.newPassword" placeholder="请输入新密码" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPwd">
<el-input v-model="pwdForm.confirmPwd" placeholder="请再次输入新密码" show-password></el-input>
</el-form-item>
<el-form-item label="密码格式" required>
<div class="reind-text">8~18个字符以数字或字母开头可以包含的特殊字符有`.~!@#%*()?-_=+。</div>
</el-form-item>
</el-form>
<div class="func-btn">
<el-button type="default" size="small" @click="cancle"></el-button>
<el-button type="primary" size="small" @click="updatePwd"></el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
// inject: ['reload'],
data() {
const validateNewPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入新密码'))
} else {
if (this.pwdForm.confirmPwd !== '') {
this.$refs.pwdForm.validateField('confirmPwd')
}
callback()
}
}
const validateConfirmPwd = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value !== this.pwdForm.newPassword) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
roleList: [],
getState: true,
getDaRankNewStatus: false,
listNewStatus: false,
currentRole: '',
currentRoleName: '',
dialogVisible: false,
pwdForm: {
loginName: '',
oldPassword: '',
newPassword: '',
confirmPwd: '',
},
pwdRule: {
newPassword: [
{ validator: validateNewPassword, trigger: 'blur' },
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^[A-Za-z0-9][A-Za-z0-9`~!@#%*()?\-_=+.]{7,17}$/,
message: '8~18个字符以数字或字母开头可以包含的特殊字符有`~!@#%*()?-_=+.',
trigger: 'blur',
},
],
confirmPwd: [
{ validator: validateConfirmPwd, trigger: 'blur' },
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
],
},
isNew: true,
isNewRank: true,
etDate: '',
}
},
watch: {
//-new
changeState: {
handler(newVal) {
this.$store.state.user.headerState = newVal
if (!newVal) {
this.listNewStatus = false
}
},
},
changeStateRed: {
handler(newVal) {
this.$store.state.user.StateRed = newVal
if (!newVal) {
this.getDaRankNewStatus = false
}
},
},
},
methods: {
...mapMutations({
// setUserInfo: 'SET_USER_INFO',
// setRoleList: 'SET_ROLE_LIST',
// switchMenuLoaded: 'SWITCH_MENU_LOADED',
// changeState: 'changeState',
// changeStateRed: 'changeStateRed',
}),
...mapActions({
logout: 'doLogOut',
}),
async logout() {
this.$confirm('确定注销并退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {});
},
// doLogout() {
// this.logout()
// .then(res => {
// this.$message.success('')
// setTimeout(() => location.reload(), 1500)
// })
// .catch(err => {
// this.$message.success('')
// setTimeout(() => this.doClean(), 1500)
// })
// },
modifyPwd() {
this.pwdForm.loginName = this.userInfo.loginName
this.dialogVisible = true
},
cancle() {
this.dialogVisible = false
this.$refs.pwdForm.resetFields()
},
updatePwd() {
this.$refs.pwdForm.validate(valid => {
if (valid) {
if (this.pwdForm.confirmPwd !== this.pwdForm.newPassword) {
this.$message({
message: '两次输入的密码不一致',
type: 'error',
})
return
}
const { newPassword, ...args } = this.pwdForm
this.$api.sys.user
.resetPassword({
...args,
password: newPassword,
})
.then(res => {
if (res.data.code == 200) {
this.$message.success('修改密码成功,请重新登录!')
this.dialogVisible = false
setTimeout(() => {
this.doClean()
}, 500)
} else {
this.$message({
message: res.data.msg,
type: 'error',
})
}
})
} else {
this.$message.error('请检查输入项!')
}
})
},
doClean() {
// this.$store.commit('RESET_USER')
// this.$store.commit('RESET_APP')
// this.$auth.removeToken()
// location.reload()
},
//
handleClickCommand(command) {
this.currentRole = command
let role = this.roleList.find(item => item.roleId === command)
this.currentRoleName = role.roleName
this.roleChangeFn(this, role.roleId)
},
toNewProd() {
this.listNewStatus = false
window.sessionStorage.setItem('headerState', 'false')
this.$router.push({
path: '/pm/newProd',
})
},
toHotPro() {
this.listNewStatus = false
this.$router.push({
path: '/pm/hotPro',
})
},
toActive() {
this.isNew = false
this.$router.push({
path: '/mkt/activeQuery',
})
},
toRbRank() {
this.getDaRankNewStatus = false
window.sessionStorage.setItem('StateRed', 'false')
this.$router.push({
path: '/ws/rbRank',
})
},
},
computed: {
...mapGetters({
}),
},
created() {},
mounted() {
// if (this.userInfo.userName === '') {
// this.$store.commit('RESET_USER')
// this.$store.commit('RESET_APP')
// this.$auth.removeToken()
// this.$router.replace({ path: '/login' })
// }
// const role = this.roleList.find(item => item.roleId === this.userInfo.roleId)
// ;[this.currentRoleName, this.currentRole] = !role ? ['', ''] : [role.roleName, role.roleId]
// if (window.sessionStorage.getItem('headerState') !== 'false') {
// if (this.$store.state.user.headerState) {
// //
// this.$http.post(this.$api.pmApi.listNewStatus, {}).then(res => {
// if (res.data.code == 200) {
// let newState = res.data.data.isNew
// if (newState != 0) {
// this.listNewStatus = true
// } else {
// this.listNewStatus = false
// }
// } else {
// this.$message({
// message: res.data.msg,
// type: 'error',
// })
// }
// })
// } else {
// this.listNewStatus = false
// }
// }
// if (window.sessionStorage.getItem('StateRed') !== 'false') {
// if (this.$store.state.user.StateRed) {
// //
// this.$http.post(this.$api.main.getDaRankNewStatus, {}).then(res => {
// if (res.data.code == 200) {
// let redState = res.data.data.isNew
// if (redState != 0) {
// this.getDaRankNewStatus = true
// } else {
// this.getDaRankNewStatus = false
// }
// } else {
// this.$message({
// message: res.data.msg,
// type: 'error',
// })
// }
// })
// } else {
// this.getDaRankNewStatus = false
// }
// }
// const getLoginNum = sessionStorage.getItem('userLoginNum')
// if (sessionStorage.getItem('userLoginNum') === '1') {
// this.$confirm('', '', {
// type: 'warning',
// })
// .then(() => {
// sessionStorage.removeItem('userLoginNum')
// this.modifyPwd()
// })
// .catch(() => {
// sessionStorage.removeItem('userLoginNum')
// })
// }
//
// this.etDate = sessionStorage.getItem('etDate')
// console.log(this.etDate, 'this.etDate')
},
}
</script>
<style lang="scss">
.header {
width: 100%;
// height: 100%;
height: 80px;
}
.banner-box {
// width: 100%;
display: flex;
align-items: center;
height: 100%;
font-size: 0.16rem;
.bank_logo {
width: 100px;
margin: 0;
height: auto;
margin: 0 30px;
margin-right: 40px;
}
.banner-model {
width: 80px;
text-align: center;
cursor: pointer;
.model-item {
display: flex;
align-items: center;
font-size: 14px;
}
.banner-icon {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.02rem;
background-size: contain;
background-repeat: no-repeat;
}
p {
line-height: 18px;
// font-size: 12px;
}
.el-badge {
.el-badge__content.is-fixed.is-dot {
top: 6px !important;
right: 12px !important;
}
.el-badge__content.is-dot {
height: 8px !important;
width: 8px !important;
}
}
}
.model_wrap {
display: flex;
margin-left: auto;
.banner-model:first-child {
margin-left: auto;
}
}
.el-divider--vertical {
margin: 15px 8px !important;
}
.banner-user {
display: flex;
align-items: center;
margin-right: 30px;
margin-left: auto;
img {
margin: 0 10px 0 10px;
height: 38px;
width: 38px;
background-size: contain;
}
p {
font-size: 0.14rem;
line-height: 20px;
}
}
.el-dropdown {
// max-width: 100px; //
text-align: center;
// line-height: 44px;
font-size: 0.16rem;
font-weight: bold;
cursor: pointer;
}
.logout {
width: 0.2rem;
height: 0.2rem;
color: red;
// margin: 0 0.4rem 0 0.22rem;
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
}
}
</style>
<style lang="scss" scoped>
::v-deep .el-badge__content.is-fixed.is-dot {
right: 15px;
margin-top: 6px;
margin-right: 17px;
background: red;
}
::v-deep .spc_dot .el-badge__content.is-fixed.is-dot {
left: 39px;
margin-top: 1px !important;
}
.resetPwd {
cursor: pointer;
width: 56px;
height: 14px;
margin-right: 24px;
}
.icon-l{
width: 1px;
height: 14px;
margin-right: 20px;
margin-left: 20px;
background: #B9C8DF;
}
.icon-close{
width: 15px;
height: 16px;
}
.header-name {
width: 308px;
height: 40px;
// margin: 20px 0 0 10px;
display: flex;
flex-wrap: wrap;
}
.bigcharacter-logo{
width: 308px;
height: 22px;
color: rgba(34, 34, 34, 1);
font-size: 22px;
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
text-align: left;
font-weight: bolder;
line-height: 33px;
margin-bottom: 8px;
}
.ismallcharacter-logo{
width: 308px;
height: 9px;
display: inline-block;
color: rgba(34, 34, 34, 1);
font-size: 9px;
transform: scale(0.75);
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight:600;
white-space: nowrap;
line-height: 14px;
margin-left: -39px;
}
</style>

@ -35,7 +35,7 @@ export default {
return this.tabList.length > 0
},
...mapGetters({
isCollapse: 'getCollapseStatus',
}),
},
created(){

@ -0,0 +1,42 @@
<template>
<div class="right-fence-box">
<div class="content">
右侧边栏111
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
}
</script>
<style lang="scss">
//
.right-fence-box {
// width: 423px;
width: 25.5%;
min-height: calc(100% - 104px);
border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px;
background: #ffffff;
position: absolute;
overflow-y: auto;
right: 24px;
top: 24px;
.content{
margin-top: 20%;
text-align: center;
}
.tab{
font-size: 2px;
background: red;
}
}
</style>

@ -1,20 +1,24 @@
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
<div class="left-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
</div>
<RightFence></RightFence>
<iframe-toggle />
</section>
</template>
<script>
import iframeToggle from "./IframeToggle/index"
import RightFence from '@/components/RightFence.vue'
export default {
name: 'AppMain',
components: { iframeToggle },
components: { iframeToggle, RightFence },
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
@ -30,10 +34,13 @@ export default {
.app-main {
/* 50= navbar 50 */
background-color: #EBEFFB;
min-height: calc(100vh - 50px);
height: calc(100vh - 50px);
width: 100%;
overflow-y: auto;
position: relative;
overflow: hidden;
}
.left-main{
width: calc(75% - 40px);
}
.fixed-header + .app-main {
@ -43,7 +50,7 @@ export default {
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 0px);
height: calc(100vh - 80px);
}
.fixed-header + .app-main {

@ -35,7 +35,7 @@ export default {
},
data() {
return {
title: '若依管理系统',
title: '智能作业系统',
logo: logoImg
}
}

@ -1,5 +1,10 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div class="app-layout-header">
<div class="me-header">
<p-header></p-header>
</div>
</div>
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
@ -11,12 +16,14 @@
<right-panel>
<settings />
</right-panel>
<RightFence></RightFence>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import pHeader from '@/components/Header'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
@ -28,6 +35,7 @@ export default {
AppMain,
Navbar,
RightPanel,
pHeader,
Settings,
Sidebar,
TagsView
@ -65,12 +73,25 @@ export default {
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-layout-header {
width: 100%;
position: fixed;
}
.me-header {
width: 100%;
// height: 0.6rem;
height: 80px;
background-image: url('./../assets/img/home/head_bg_logo.png');
color: #333;
// background-size: cover;
background-size: 100% 100%;
}
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
height: calc(100% - 0px);
width: 100%;
overflow-y: hidden;
&.mobile.openSidebar {
position: fixed;

@ -12,6 +12,7 @@ import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import global from './plugins/global';
import { download } from '@/utils/request'
import './assets/icons' // icon
@ -48,6 +49,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.$global = global;
// 全局组件挂载
Vue.component('DictTag', DictTag)

@ -0,0 +1,473 @@
import axios from 'axios'
const global = {
// 表单必输项
requiredRule: {
required: true,
message: '该项为必输项!',
trigger: ['blur', 'change'],
},
// 文件上传接口
uploadURL: process.env.VUE_APP_BASE_API + 'sys/file/upload',
//影像平台接口上传接口文件
uploadToIcon: process.env.VUE_APP_BASE_API + '/sys/file/uploadToIcon',
//文件下载
downLoadUrl: process.env.VUE_APP_BASE_API + 'sys/file/download?fileId=',
// 公告文件上传接口
uploadToIconSf: process.env.VUE_APP_BASE_API + '/sys/file/upload',
// 图片
// getPicUrl:'/get/{value}/mg.do'
getPicUrl: process.env.VUE_APP_BASE_API + '/sys/file/get/{value}/mg.do',
// 码值转换
getNameByCode: (codeInfo, codeValue, isMult = false) => {
if (!codeInfo) {
return codeValue
}
if (!codeValue) {
return ''
}
if (isMult) codeValue = isMult ? codeValue.split(',') : codeValue
let codeName = '',
codeValues = []
for (let i = 0; i < codeInfo.length; i++) {
if (Array.isArray(codeValue)) {
for (let j = 0; j < codeValue.length; j++) {
if (codeValue[j] == codeInfo[i].value) {
codeValues.push(codeInfo[i].content)
}
}
} else {
if (codeValue == codeInfo[i].value) {
codeName = codeInfo[i].content
break
}
}
codeName = codeValues.join(',')
}
return codeName == '' ? codeValue : codeName
},
// 分转元
regFenToYuan: val => {
let num = Number(val)
if (!isNaN(num)) {
num = num * 0.01 + ''
let reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g //千分符的正则
return num.replace(reg, '$1,')
} else {
return null
}
},
// 判断字符串是否为空
isEmptyStr(str) {
if (str == '') return true
const regu = '^[ ]+$'
const re = new RegExp(regu)
return re.test(str)
},
//文件下载/表格导出
downloadFiles(_url, _params, _this, requestFn = 'download') {
_this.$http[requestFn](_url, _params).then(response => {
if (_url === _this.$api.cmApi.exporAllCstInfo) {
console.log(response, 'response')
// if (response.isOK) {
// _this.$message.successs(response.msg)
// } else {
// _this.$message.error(response.msg)
// }
} else if (!response.data.code) {
let contentDisposition = response.headers['content-disposition']
const blob = new Blob([response.data])
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
let fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('filename=') + 9, contentDisposition.length));
fileName = fileName.replace((/"/g), "");
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, fileName)
}
} else {
_this.$message.error(response.msg)
}
})
},
/* /
* 支持影像平台下载
*/
downloadImage(_url, _params, _this, requestFn = 'download') {
_this.$http[requestFn](_url, _params).then(response => {
if (!response.data.code) {
let fileName = response.headers['content-disposition']
const blob = new Blob([response.data])
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
// 公共方法不支持截取去掉fileName两边的""
fileName = fileName.substr(0, fileName.length - 1)
let spcStr = (fileName.split('=')[1]).substr(1)
elink.download = fileName && decodeURI(spcStr)
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, fileName)
}
} else {
_this.$message.error(response.msg)
}
})
},
/**
* 每隔几个字符进行添加对应标记
* @param {*} str 需要添加标记的字符串
* @param {*} vkey 标记
* @param {*} vnum 字符个数
*/
strReplace: (str, vnum = 2, vkey = '-') => {
if (!str) return ''
let result = ''
for (var i = 0, len = str.length; i < len; i++) {
result += str[i]
if (i % vnum == 1) result += vkey
}
if (result.slice(-1) == vkey) result = result.slice(0, -1)
return result
},
/**
* 判断是否是数组
*/
isArrayFn: value => {
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
} else {
return Object.prototype.toString.call(value) === '[object Array]'
}
},
/**
* isEmpty 判空
*/
isEmpty: str => {
let flag = true
if (str != null && str != undefined)
flag =
str
.replace(/(^\s*)|(\s*$)/g, '')
.replace(/<\/?.+?>/g, '')
.replace(/[\r\n]/g, '').length > 0 ?
false :
true
return flag
},
/**
* 时间格式化
* @param {*} time 传入的时间
*/
timeFamat(time) {
var newTime = new Date(time)
var year = newTime.getFullYear() //年
var month = newTime.getMonth() + 1 //月
var day = newTime.getDate() //日
var clock = year + '-'
if (month < 10) clock += '0'
clock += month + '-'
if (day < 10) clock += '0'
clock += day
return clock
},
/**
* 创建当前时间
* @param {*} isTrue 精确到年天标识
*/
createTime: isTrue => {
var now = new Date()
var year = now.getFullYear() //年
var month = now.getMonth() + 1 //月
var day = now.getDate() //日
var hh = now.getHours() //时
var mm = now.getMinutes() //分
var ss = now.getSeconds() //秒
if (isTrue == 'year') return year
var clock = year + '-'
if (month < 10) clock += '0'
if (isTrue == 'month') return (clock += month)
clock += month + '-'
if (day < 10) clock += '0'
clock += day
//精确到天
if (isTrue == 'day') return clock
clock += clock + ' '
if (hh < 10) clock += '0'
clock += hh + ':'
if (mm < 10) clock += '0'
clock += mm + ':'
if (ss < 10) clock += '0'
clock += ss
return clock
},
//加法
NumberAdd: (arg1, arg2, n = 2) => {
var r1, r2, m
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return ((arg1 * m + arg2 * m) / m).toFixed(n)
},
//减法
NumberSub: (arg1, arg2) => {
var r1, r2, m, n
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
//动态控制精度长度
n = r1 >= r2 ? r1 : r2
return ((arg1 * m - arg2 * m) / m).toFixed(n)
},
//乘法
NumberMul: (arg1, arg2) => {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString()
try {
m += s1.split('.')[1].length
} catch (e) {}
try {
m += s2.split('.')[1].length
} catch (e) {}
return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
},
//除法
NumberDiv: (arg1, arg2) => {
var t1 = 0,
t2 = 0,
r1,
r2
try {
t1 = arg1.toString().split('.')[1].length
} catch (e) {}
try {
t2 = arg2.toString().split('.')[1].length
} catch (e) {}
r1 = Number(arg1.toString().replace('.', ''))
r2 = Number(arg2.toString().replace('.', ''))
return (r1 / r2) * Math.pow(10, t2 - t1)
},
/*
检查数组是否有重复
keyName:数组里面的对象的属性名
*/
isArrayRepeat: (arr, keyName) => {
let hash = {}
if (keyName) {
for (let i in arr) {
if (hash[arr[i][keyName]]) {
return true
} else {
hash[arr[i][keyName]] = true
}
}
} else {
for (let i in arr) {
if (hash[arr[i]]) {
return true
} else {
hash[arr[i]] = true
}
}
}
return false
},
/*
异步请求顺序执行
_arr:方法名
*/
async getAllFn(_arr, _this) {
for (let i = 0; i < _arr.length; i++) {
await this.getReqDataFn(_arr[i], _this)
}
},
getReqDataFn(fn, _this) {
var p = new Promise(resolve => {
_this[fn]()
setTimeout(() => {
resolve()
}, 100)
})
return p
},
/*
格式化金额数字, 加千分位并保留两位小数
params: num(传入的金额)
*/
formatAmountNum: num => {
if (num == 0) {
return num
}
if (!num) {
return
}
num = num + ''
if (!num.includes('.')) {
num += '.'
}
return num
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ','
})
.replace(/\.$/, '.00')
},
/**
* 时间比较大小
*/
compareDate: (sDate, eDate, isSame = false) => {
let st = new Date(sDate)
let et = new Date(eDate)
let flag = !st && !et ? false : st.getTime() >= et.getTime() ? false : true
if (isSame) flag = !st && !et ? false : st.getTime() > et.getTime() ? false : true
return flag
},
/**
* 手机号码验证
*/
checkPhoneFn: (mobile) => {
let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[0-9])[0-9]{8}$/;
return reg.test(mobile)
},
/**
* 将指定日期区间按月份分割
* @param {Object} beginDate 开始日期
* @param {Object} endDate 结束日期
* @return {Array} 分割好的array数组
*/
dateCutByMonth(beginDate, endDate) {
//分割好的数组
let dateCutList = new Array();
let b_date = new Date(beginDate);
let e_date = new Date(endDate);
//获取各个年份
let b_year = parseInt(b_date.getFullYear());
let e_year = parseInt(e_date.getFullYear());
//获取各个月份
let b_month = parseInt(b_date.getMonth()) + 1;
let e_month = parseInt(e_date.getMonth()) + 1;
//获取日期之间相差的月数
let month_list = monthList();
//按月份分割日期
for (let i = 0; i < month_list.length; i++) {
//当前月开始日期:第一天
let i_b_date = new Date(month_list[i]);
i_b_date.setDate(1);
//当前月最后一天
let i_e_date = new Date(month_list[i]);
i_e_date.setMonth(i_e_date.getMonth() + 1);
i_e_date.setDate(1);
i_e_date.setDate(i_e_date.getDate() - 1);
//第一次循环:开始月份
if (i == 0) {
let i_e_ymd = dateToString(i_e_date);
dateCutList.push([beginDate, i_e_ymd]);
//除第一次和最后一次循环:中间月份
} else if (i != 0 && i != month_list.length - 1) {
let i_b_ymd = dateToString(i_b_date);
let i_e_ymd = dateToString(i_e_date);
dateCutList.push([i_b_ymd, i_e_ymd]);
//最后一次循环:结束月份
} else if (i == month_list.length - 1) {
let i_b_ymd = dateToString(i_b_date);
dateCutList.push([i_b_ymd, endDate]);
}
}
return dateCutList;
/**
* 获取日期区间的月份集合
*/
function monthList() {
//相差的月份总数
let result = new Array();
let b = new Date(b_year, b_month - 1, 1);
let e = new Date(e_year, e_month - 1, 1);
while (b < e) {
result.push(b.getFullYear() + "-" + (b.getMonth() + 1));
b.setMonth(b.getMonth() + 1);
}
result.push(e_year + "-" + e_month);
return result;
}
/**
* 将日期转换为指定格式的字符串
* @param {Date} date 要转换的日期
*/
function dateToString(date) {
let month = (date.getMonth() + 1);
let day = date.getDate();
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
return date.getFullYear() + "-" + (month) + "-" + day;
}
},
}
export default global

@ -0,0 +1,32 @@
let style
let clearWaterMark = () => {
if (style) style.remove
}
export default function createWaterMark(str,_height) {
clearWaterMark()
if (!str) return
let width = window.parseInt(document.body.clientWidth),
canvasWidth = width / window.parseInt(width / 400),
fontFamily = window.getComputedStyle(document.body)['font-family'],
canvas = document.createElement('canvas')
canvas.width = canvasWidth
canvas.height = 200
let cxt = canvas.getContext('2d')
cxt.rotate((-20 * Math.PI) / 180)
cxt.font = `18px${fontFamily}`
cxt.fillStyle = 'rgba(8,8,8,0.2)'
cxt.fillText(str, 50, 200)
let imgSrc = canvas.toDataURL('image/png')
style = document.createElement('style')
style.innerHTML = `.with-watermark:before{
content:"";
width:100%;
pointer-events:none;
height:${_height}px;
display:block;
position:absolute;
z-index:99999;
background-image:url("${imgSrc}")
}`
;(document.head.append || document.head.appendChild).apply(document.head, [style])
}

@ -1,10 +1,10 @@
<template>
<div class="app-container">
<div class="app-container home-page">
<PageTabs
class="alive-tabs"
:tabdate="tabdate">
</PageTabs>
<div style="width: 100%;height:100%;background-color: #ffffff;margin-left: 5px;box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);border-radius: 6px;">
<div style="width: 100%;height: calc(100vh - 500px);background-color: #ffffff;margin-left: 5px;box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);border-radius: 6px;">
</div>
</div>
@ -36,6 +36,8 @@ export default {
activated() {
},
created() {
console.log('用户基本信息', sessionStorage.getItem('userInfo'))
console.log('缓存', JSON.stringify(sessionStorage.sessionObj))
let roleType =
sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).roleType
? JSON.parse(sessionStorage.getItem('userInfo')).roleType

Loading…
Cancel
Save