陈裕财
4 years ago
6 changed files with 354 additions and 83 deletions
-
1package.json
-
61src/components/Guider/Index.js
-
187src/components/Guider/guiderData.js
-
62src/views/xm/XmOverview.vue
-
49src/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