陈裕财
4 years ago
6 changed files with 354 additions and 83 deletions
-
1package.json
-
61src/components/Guider/Index.js
-
187src/components/Guider/guiderData.js
-
50src/views/xm/XmOverview.vue
-
33src/views/xm/core/xmProduct/XmProductMng.vue
-
77src/views/xm/core/xmProject/XmProjectMng.vue
@ -0,0 +1,61 @@ |
|||
|
|||
|
|||
import Driver from 'driver.js'; |
|||
import 'driver.js/dist/driver.min.css'; |
|||
import guiderData from './guiderData' |
|||
|
|||
var driver = new Driver({ |
|||
className: 'driver-popover', |
|||
doneBtnText: '知道了', // 结束按钮的文字
|
|||
allowClose: false, // 是否可以通过点击遮罩层关闭指引
|
|||
stageBackground: '#ffffff', // 突出显示元素的背景颜色
|
|||
nextBtnText: '下一步', // 下一步按钮的文字
|
|||
prevBtnText: '上一步', // 上一步按钮的文字
|
|||
closeBtnText: '关闭', // 关闭按钮的文字
|
|||
keyboardControl: false, // 是否允许键盘操控
|
|||
xCloseButton: true, // 将关闭按钮作为X放在弹出
|
|||
onReset: (Element) => { |
|||
}, |
|||
}); |
|||
|
|||
|
|||
export default { |
|||
initDriver:function(guiderName){ |
|||
var driver = new Driver({ |
|||
className: 'driver-popover', |
|||
doneBtnText: '知道了', // 结束按钮的文字
|
|||
allowClose: false, // 是否可以通过点击遮罩层关闭指引
|
|||
stageBackground: '#ffffff', // 突出显示元素的背景颜色
|
|||
nextBtnText: '下一步', // 下一步按钮的文字
|
|||
prevBtnText: '上一步', // 上一步按钮的文字
|
|||
closeBtnText: '永远关闭', // 关闭按钮的文字
|
|||
keyboardControl: false, // 是否允许键盘操控
|
|||
xCloseButton: true, // 将关闭按钮作为X放在弹出
|
|||
onReset: (e) => { |
|||
var event= window.event; |
|||
if(event){ |
|||
var target=event.target; |
|||
if(target && target.className=='driver-close-btn'){ |
|||
localStorage.setItem("guider-"+guiderName,"1"); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
return driver; |
|||
}, |
|||
startBySteps: function(steps) { |
|||
driver.defineSteps(steps); |
|||
driver.start(); |
|||
}, |
|||
|
|||
startByName: function(guiderName,forceDisplayWhileClosed) { |
|||
var localExists=localStorage.getItem('guider-'+guiderName) |
|||
if(localExists=='1' && !forceDisplayWhileClosed){ |
|||
return; |
|||
} |
|||
var driver2=this.initDriver(guiderName); |
|||
var steps=guiderData.getSteps(guiderName); |
|||
driver2.defineSteps(steps); |
|||
driver2.start(); |
|||
}, |
|||
} |
|||
@ -0,0 +1,187 @@ |
|||
var xmHomePage=[ |
|||
{ |
|||
element: '#XmProductAllMng', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以创建新产品，支持手工、复制现有项目、复制模板三种模式快速一键创建项目', |
|||
position: 'left' |
|||
} |
|||
}, |
|||
{ |
|||
element: '#XmMenuMng', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以进行需求管理，包括需求设计、需求迭代、需求细化、需求变更等。', |
|||
position: 'left' |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#XmProjectAllMng', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以进行项目管理、计划管理、任务管理，可以通过复制项目模板、复制现有项目快速创建项目。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#XmMyTaskCenter', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以进行任务管理，包括填报任务进度、分配任务执行人、工作量填报等', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#XmProjectGroupAllMng', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以快速创建项目、产品团队、快速管理团队成员。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
} , |
|||
{ |
|||
element: '#XmQuestionMng', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以进行测试管理、测试设计、测试执行等。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
} , |
|||
{ |
|||
element: '#TaskListAssigneeToMe', |
|||
popover: { |
|||
title: ' ', |
|||
description: '关于审批的所有事项，都可以从这里一站式管理。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
} |
|||
]; |
|||
|
|||
var xmProductMng=[ |
|||
{ |
|||
element: '#guider-one', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以创建新产品，支持手工、复制现有产品、复制模板三种模式快速一键创建产品', |
|||
position: 'bottom' |
|||
} |
|||
}, |
|||
{ |
|||
element: '#guider-two', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以选择更多的查询条件，或者更多的操作。', |
|||
position: 'bottom' |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#guider-three', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以跳转到产品视图，查看更多信息、做产品相关的各种操作。', |
|||
position: 'top', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#guider-four', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以统计产品的总体进度、工作量等所有统计数据。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#guider-five', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以将产品快速复制为新的共享模板、新的产品，达到快速创建产品的效果。', |
|||
position: 'left', |
|||
}, |
|||
padding: 5, |
|||
} |
|||
]; |
|||
|
|||
|
|||
var xmProjectMng=[ |
|||
{ |
|||
element: '#prj-plus-btn', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以创建新项目，支持手工、复制现有项目、复制模板三种模式快速一键创建项目', |
|||
position: 'bottom' |
|||
} |
|||
}, |
|||
{ |
|||
element: '#prj-more-btn', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以选择更多的查询条件，或者更多的操作。', |
|||
position: 'bottom' |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#prj-copy-btn', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以通过复制快速创建项目(同步复制项目计划、项目任务、项目团队及成员)', |
|||
position: 'right', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#prj-del-btn', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以把项目放入回收站(支持从回收站恢复)', |
|||
position: 'right', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#prj-calc-btn', |
|||
popover: { |
|||
title: ' ', |
|||
description: '这里可以把项目的所有统计数据更新为最新的汇总数据(包括进度、任务数、需求数、工作量等)', |
|||
position: 'right', |
|||
}, |
|||
padding: 5, |
|||
}, |
|||
{ |
|||
element: '#prj-view-box', |
|||
popover: { |
|||
title: ' ', |
|||
description: '点击这个区域可以跳转到项目视图（可以管理项目计划、项目任务、项目变更、项目迭代、项目缺陷等）', |
|||
position: 'right', |
|||
}, |
|||
padding: 5, |
|||
} |
|||
]; |
|||
export default { |
|||
//请在下面添加数据
|
|||
steps:{ |
|||
xmHomePage, |
|||
xmProductMng, |
|||
xmProjectMng, |
|||
}, |
|||
|
|||
getSteps:function(guiderName){ |
|||
if(this.steps[guiderName]){ |
|||
return this.steps[guiderName] |
|||
}else{ |
|||
return [] |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue