Process UI

/**
* 声明processes
* @type {Array}
* 每个item包含
* @param {string} name   流程名称，如果流程名称为空，那么该流程变成隐藏流程
* @param {string} widget widget名称
* @param {object} params widget需要的参数
* @param {boolean} hidden 该流程是否需要隐藏，默认false
* @param {beforeAction} function return true才会展示该流程，否则跳过
*/
var processes = [{
	name: "开始流程啦",
	widget: "process.start",
	params: {
		type: "alert", // alert, error, success
		title: "这是一个好的开始",
		content: "真的是好的开始么？"
	}
}, {
	name: "继续流程啦",
	widget: "process.start",
	params: {
		type: "error",
		title: "小心！！！",
		content: "....."
	},
	beforeAction: function() {
		// 如果某个数据取出来是true, 那么该函数返回false，也就是这个流程将被直接跳过！
		return !$we.process.getData("jump_2_end");
	}
}, {
	name: "继续流程啦",
	widget: "process.start",
	params: {
		type: "success",
		content: "过渡中"
	},
	hidden: true, //隐藏这个流程的进度条
	beforeAction: function() {return !$we.process.getData("jump_2_end");}
}, {
	name: "流程结束啦",
	widget: "process.end",
	params: {
		title: "结束拉",
		content: "终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。终于。。。",
		success: function() { alert("done!!!") }
	}
}];

/**
* 业务流组件的配置
* @type {Object}
*/
var pConfig = {
	title: "测试啦只是", // 业务流title
	prev: "回去哦", // 上一步按钮的文案
	next: "往下走", // 下一步按钮的文案
	end: "搞定", // 结束按钮的文案
	independent: false, // 这是否是一个独立的流程（不需要显示进度条，并且会将属性设置为独立）
	width: 600, // 宽度
	class_notice_content: "we_pop_content_box", // 容器的class name
	bizStyle: 'dialog' // 或者是 div
};

// 设置一个数据，然后呢，就看你怎么用它了
$we.process.setData("jump_2_end", true);

var pro;
require(["component/process_ui"], function(f) {
	pro = f(processes, pConfig);
	pro.start();
});

var _html = [
	'<div attr="root">',
	'<h2>$name$</h2>',
	'<p>$a$</p>',
	'<p>$b$</p>',
	'</div>'].join("");

var _buttonHtml = '<button attr="click:B">前往流程二</button><button attr="click:C">前往流程三</button>';

$we.widget.reg("AAA", {
	interfaces: {
		/**
		* render函数，AAA的接口函数，对于业务流组件来说，它完全可以转变为一个内置函数，
		* 业务流组件在大多数情况下，不会调用interfaces
		*/
		render: function() {
			this.append(this.el, _html, {
				name: this.name,
				a: this.params.a,
				b: this.params.b
			});
			this.append(this.node.root, _buttonHtml);
		},
	},
	/**
	* 初始化函数
	* @param  {element} el    通过业务流组件传递过来的参数，该业务流组件的business节点
	* @param  {object} params 初始化业务流组件时，每个组件传递的参数
	*/
	init: function(el, params) {
		this.el = el;
		this.params = params;
		
		this.name = "AAA";
	},
	/**
	* 每个组件，如果需要使用业务流的话，需要声明这个
	*/
	process: {
		/**
		* 组件开始调用，业务流组件会调用这个接口来启用组件
		*/
		start: function() { 
			this.render(); 
		},
		/**
		* 组件结束调用，当这个业务结束的时候，业务流组件会调用它
		*/
		end: function() { $(this.node.root).remove(); },
		/**
		* 组件检测是否可以进行下一步
		* 当组件需要进入下一步时，业务流组件将会调用这个接口，
		* 这个接口需要通过 this.notify("goNext") 来通知业务流组件它检测通过，
		* 否则业务流组件在这个地方会停滞下来 通过 this.notify("pause")来通知
		*/
		checkSucc: function() {
			var me = this;
			setTimeout(function() {
				me.notify("goNext");
			}, 200);
			
			// this.notify("pause");
		}
	},
	events: {
		/**
		* 这里需要注意的是
		* goNext这个notification是允许传递一个参数到下一个组件的 start的
		*/
		B: function() {this.notify("goTo", 1)},
		C: function() {this.notify("goTo", 2)}
	}
});

$we.widget.reg("BBB", {
	interfaces: {
		render: function(p) {
			this.append(this.el, _html, {
				name: this.name,
				a: this.params.a,
				b: this.params.b
			});
			
			this.append(this.node.root, p || "");
			
		},
	},
	init: function(el, params) {
		this.el = el;
		this.params = params;
		this.name = "BBB";
	},
	process: {
		/**
		* 组件的开始
		* 这里传递了一个参数过来
		*/
		start: function(p) { this.render(p); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() {
			var me = this;
			setTimeout(function() {
				me.notify("goNext");
			}, 200);
		}
	}
});

$we.widget.reg("CCC", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: this.name,
				a: this.params.a,
				b: this.params.b
			});
			/**
			* 设置按钮
			* prev 或者 next 为false表示去掉按钮
			*/
			this.notify("setButton", {
				prev: false
				//next: "完成"
			});
		},
	},
	init: function(el, params) {
		this.el = el;
		this.params = params;
		this.name = "CCC";
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() {
			// 关闭 notification
			this.notify("close");
		}
	}
});

/**
* 声明processes
* @type {Array}
* 每个item包含
* @param {string} name   流程名称
* @param {string} widget widget名称
* @param {object} params widget需要的参数
*/
var processes = [{
	name: "流程一",
	widget: "AAA",
	params: {a:"GOGOGOGOGO",b:1}
}, {
	name: "流程二",
	widget: "BBB",
	params: {a:"asdg",b:"2222"}
}, {
	name: "流程三",
	widget: "CCC",
	params: {a:"搞啥",b:3}
}];

/**
* 业务流组件的配置
* @type {Object}
*/
var pConfig = {
	title: "测试用业务流程", // 业务流title
	prev: "上一步", // 上一步按钮的文案
	next: "下一步", // 下一步按钮的文案
	end: "完成" // 结束按钮的文案
};

var pro;
require(["component/process_ui"], function(f) {
	pro = f(processes, pConfig);
	pro.start();
});

var _html = [
	'<div attr="root">',
	'<h2>$name$</h2>',
	'<p>$a$</p>',
	'<p>$b$</p>',
	'</div>'].join("");

$we.widget.reg("test.only", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: this.name,
				a: this.params.a,
				b: this.params.b
			});
			/**
			* 设置按钮
			* prev 或者 next 为false表示去掉按钮
			*/
			this.notify("setButton", {
				prev: false,
				next: "走着"
			});
		},
	},
	init: function(el, params) {
		this.el = el;
		this.params = params;
		this.name = "test.only";
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() {
			this.notify("goNext");
		}
	}
});

/**
* 声明processes
* @type {Array}
* 每个item包含
* @param {string} name   流程名称
* @param {string} widget widget名称
* @param {object} params widget需要的参数
*/
var processes = [{
	name: "唯一的流程",
	widget: "test.only",
	params: {a:"only you",b:"only me"}
}];

var only;
require(["component/process_ui"], function(f) {
	only = f(processes, pConfig);
	only.start();
});

var _html = [
	'<div attr="root">',
	'<h2>$name$</h2>',
	'</div>'].join("");

$we.widget.reg("A1", {
	interfaces: {
		render: function() {
			this.tips = $we.widget.add("process.tips.small", this.el, {
				content: "这是啥提示"
			});
			this.append(this.el, _html, {
				name: "A1",
			});
		},
	},
	init: function(el) {
		this.el = el;
	},
	process: {
		start: function() { /*alert(1);*/ this.render(); },
		end: function() { $(this.node.root).remove(); if (this.tips) this.tips.remove();},
		checkSucc: function() { this.notify("goNext"); }
	},
});

$we.widget.reg("A2", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: "A2",
			});
			this.notify("showException", "来到了A2 咯！", 2000);
		},
	},
	init: function(el) {
		this.el = el;
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() { this.notify("goNext"); }
	},
});

$we.widget.reg("A3", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: "A3",
			});
		},
	},
	init: function(el) {
		this.el = el;
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() { this.notify("goNext"); }
	},
});

$we.widget.reg("A4", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: "A4",
			});
		},
	},
	init: function(el) {
		this.el = el;
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() { this.notify("goNext"); }
	},
});

$we.widget.reg("A5", {
	interfaces: {
		render: function() {
			this.append(this.el, _html, {
				name: "A5",
			});
		},
	},
	init: function(el) {
		this.el = el;
	},
	process: {
		start: function() { this.render(); },
		end: function() { $(this.node.root).remove(); },
		checkSucc: function() { this.notify("goNext"); }
	},
});

/**
* 声明processes
* @type {Array}
* 每个item包含
* @param {string} name   流程名称
* @param {string} widget widget名称
* @param {object} params widget需要的参数
*/
var processes = [{
	name: "流程一",
	widget: "A1",
//	beforeAction: function() {this.notify("goTo", 1); return false;}
}, {
	name: "流程二",
	widget: "A2",//,
	beforeAction: function() {this.notify("goTo", 2);return false;}
}, {
	widget: "A3",
	hidden: true    // 划时代的属性，让流程的配置更加灵活。使得该流程是它前面的第一个非hidden流程的子流程
}, {
	widget: "A4",
	hidden: true
}, {
	name: "流程三", // name 默认值为 业务流程
	widget: "A5"
}];

/**
* 业务流组件的配置
* @type {Object}
*/
var pConfig = {
	title: "测试用业务流程", // 业务流title
	prev: "上一步", // 上一步按钮的文案
	next: "下一步", // 下一步按钮的文案
	end: "完成", // 结束按钮的文案
	prevGray: true
};

var pro;
require(["component/process_ui"], function(f) {
	pro = f(processes, pConfig);
	pro.start();
});