fix(新手引导): 新建超级管理员用户-首次加载会出现两次新手引导弹窗
This commit is contained in:
parent
fbc23ebfcb
commit
6e336d34c0
|
@ -43,12 +43,8 @@ export default {
|
|||
localStorage.setItem("resetGuide", 'true')
|
||||
localStorage.setItem("guide", 'false')
|
||||
localStorage.removeItem('step')
|
||||
if(this.$route.path.includes('project')){
|
||||
this.$router.push('/project/home')
|
||||
this.$router.go(0);
|
||||
}else{
|
||||
this.$router.push('/project/home')
|
||||
}
|
||||
this.$router.push('/project/home')
|
||||
this.$router.go(0);
|
||||
break;
|
||||
case "novice":
|
||||
this.$refs.sideMenu.toggle(2);
|
||||
|
@ -62,170 +58,26 @@ export default {
|
|||
if (res.data.length > 0 && res.data[0].guideStep) {
|
||||
localStorage.setItem('step', res.data[0].guideStep)
|
||||
localStorage.setItem("noviceStatus", res.data[0].status)
|
||||
if(localStorage.getItem("resetGuide") !== 'true'){
|
||||
localStorage.setItem('guide',res.data[0].guideStep > 0 ? 'true' : 'false')
|
||||
}
|
||||
} else {
|
||||
localStorage.setItem('guide','false')
|
||||
localStorage.removeItem('step')
|
||||
}
|
||||
let microApps = JSON.parse(sessionStorage.getItem("micro_apps"));
|
||||
if(localStorage.getItem("guide") === 'false' && microApps && microApps['project']) {
|
||||
let step = localStorage.getItem("step") && localStorage.getItem("resetGuide") !== 'true' ?
|
||||
localStorage.getItem("step") : "1"
|
||||
localStorage.setItem("step", step)
|
||||
|
||||
if(step !== '3'){
|
||||
if(this.$route.path.includes('/project/home')){
|
||||
this.initStepAll()
|
||||
}else{
|
||||
if(!this.$route.path.includes('/project/home')){
|
||||
this.initStep()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initStepAll() {
|
||||
const _this = this
|
||||
_this.$nextTick(() => {
|
||||
const tour = _this.$shepherd({
|
||||
useModalOverlay: true,
|
||||
exitOnEsc: false,
|
||||
keyboardNavigation: false,
|
||||
defaultStepOptions: {
|
||||
scrollTo: {
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
},
|
||||
canClickTarget: false,
|
||||
// 高亮元素四周要填充的空白像素
|
||||
modalOverlayOpeningPadding: 0,
|
||||
// 空白像素的圆角
|
||||
modalOverlayOpeningRadius: 4
|
||||
}
|
||||
})
|
||||
tour.addSteps([
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-workspace'),
|
||||
on: 'bottom-start'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = true
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, null, 2)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step1.title"),
|
||||
text: _this.$t("shepherd.step1.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-menu'),
|
||||
on: 'right'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, '/project/home', 3)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step2.title"),
|
||||
text: _this.$t("shepherd.step2.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project'),
|
||||
on: 'bottom-end'
|
||||
},
|
||||
classes: "custom-width",
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, null, 4)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step3.title"),
|
||||
text: _this.$t("shepherd.step3.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project-menu'),
|
||||
on: 'bottom-start'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, '/project/home', 5)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step4.title"),
|
||||
text: _this.$t("shepherd.step4.text")
|
||||
},
|
||||
{
|
||||
arrow:true,
|
||||
modalOverlayOpeningPadding: 8,
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project-name'),
|
||||
on: 'right'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, false)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.know")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step5.title"),
|
||||
text: _this.$t("shepherd.step5.text")
|
||||
}
|
||||
])
|
||||
tour.start()
|
||||
})
|
||||
},
|
||||
initStep() {
|
||||
const _this = this
|
||||
_this.$nextTick(() => {
|
||||
|
|
|
@ -170,8 +170,13 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.$refs.introduction.resVisible = false
|
||||
if(localStorage.getItem("guide") === 'false' && localStorage.getItem("step") === '3') {
|
||||
this.initStep()
|
||||
let microApps = JSON.parse(sessionStorage.getItem("micro_apps"));
|
||||
if(localStorage.getItem("guide") === 'false' && microApps && microApps['project']) {
|
||||
if(localStorage.getItem("step") === '3'){
|
||||
this.initStep()
|
||||
}else{
|
||||
this.initStepAll()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -187,6 +192,151 @@ export default {
|
|||
edit() {
|
||||
this.$refs.editProject.edit(this.project);
|
||||
},
|
||||
initStepAll() {
|
||||
const _this = this
|
||||
_this.$nextTick(() => {
|
||||
const tour = _this.$shepherd({
|
||||
useModalOverlay: true,
|
||||
exitOnEsc: false,
|
||||
keyboardNavigation: false,
|
||||
defaultStepOptions: {
|
||||
scrollTo: {
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
},
|
||||
canClickTarget: false,
|
||||
// 高亮元素四周要填充的空白像素
|
||||
modalOverlayOpeningPadding: 0,
|
||||
// 空白像素的圆角
|
||||
modalOverlayOpeningRadius: 4
|
||||
}
|
||||
})
|
||||
tour.addSteps([
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-workspace'),
|
||||
on: 'bottom-start'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = true
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, null, 2)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step1.title"),
|
||||
text: _this.$t("shepherd.step1.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-menu'),
|
||||
on: 'right'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, '/project/home', 3)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step2.title"),
|
||||
text: _this.$t("shepherd.step2.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project'),
|
||||
on: 'bottom-end'
|
||||
},
|
||||
classes: "custom-width",
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, null, 4)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step3.title"),
|
||||
text: _this.$t("shepherd.step3.text")
|
||||
},
|
||||
{
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project-menu'),
|
||||
on: 'bottom-start'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, true)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.exit")
|
||||
},
|
||||
{
|
||||
action: function() {
|
||||
return _this.gotoNext(this, '/project/home', 5)
|
||||
},
|
||||
classes: 'shep-btn',
|
||||
text: _this.$t("shepherd.next")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step4.title"),
|
||||
text: _this.$t("shepherd.step4.text")
|
||||
},
|
||||
{
|
||||
arrow:true,
|
||||
modalOverlayOpeningPadding: 8,
|
||||
attachTo: {
|
||||
element: document.querySelector('.shepherd-project-name'),
|
||||
on: 'right'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action: function() {
|
||||
_this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
|
||||
return _this.gotoCancel(this, false)
|
||||
},
|
||||
classes: 'close-btn',
|
||||
text: _this.$t("shepherd.know")
|
||||
}
|
||||
],
|
||||
title: _this.$t("shepherd.step5.title"),
|
||||
text: _this.$t("shepherd.step5.text")
|
||||
}
|
||||
])
|
||||
tour.start()
|
||||
})
|
||||
},
|
||||
initStep() {
|
||||
const _this = this
|
||||
_this.$nextTick(() => {
|
||||
|
|
Loading…
Reference in New Issue