master

分支 (1)

管理

管理

master

workflow
/
index.html

<!doctype html>
<!--[if lte IE 9]><html class="ie"><![endif]-->
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<title>工作流系统</title>
	<link rel="stylesheet" href="styles/css/vendor.css" />
	<link rel="stylesheet" href="styles/css/app.css" />
	<!-- <script src="build/vendor.js"></script>
	<script src="build/app.js"></script> -->
	<script src="js/json2.js"></script>
	<script src="js/template.js"></script>
	<script src="js/jquery.js"></script>
	<script src="vendor/zTree_v3/js/jquery.ztree.core.js"></script>
	<script src="vendor/zTree_v3/js/jquery.ztree.excheck.js"></script>
	<script src="vendor/popper.js/packages/popper/dist/umd/popper.js"></script>
	<script src="vendor/tippyjs/umd/index.all.js"></script>
	<script src="vendor/AlertifyJS/build/alertify.js"></script>
	<script src="js/global.js"></script>
</head>
<body>
<div class="fc-wrap">
	<div class="fc-header">
		<div class="fc-nav-left">
			<div class="fc-nav-back">
				<i class="fa fa-angle-left"></i>
			</div>
			<div class="fc-nav-title">默认对公支付流程</div>
		</div>
		<div class="fc-nav-center">
			<div class="fc-nav-item">流程设计</div>
		</div>
		<div class="fc-nav-right">
			<button type="button" id="btn-save" class="fc-button fc-button-save">保存</button>
			<button type="button" id="btn-cancel" class="fc-button fc-button-back">返回</button>
		</div>
	</div>
	<div class="fc-primary">
		<div class="fc-design">
			<div class="fc-zoom" id="zoom">
				<div class="fc-zoom-out"></div>
				<span>100%</span>
				<div class="fc-zoom-in"></div>
			</div>
			<div class="box-container">
				<div class="box-scale" id="box-scale">
					<!-- <div class="start-node">
						<div class="start-node-circle">开始</div>
						<div class="add-node-toolbar">
							<div class="add-node-btn">
								<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
							</div>
						</div>
					</div>
					<div class="fc-tree-wrap">
						<div class="fc-tree-panel">
							<div class="fc-tree-actor">
								<button type="button" class="fc-btn-close"></button>
								<div class="fc-node-label">
									<div class="fc-node-header">
										<div class="fc-node-title">直接主管审批</div>
										<div class="fc-node-toolbar">
											<button type="button" class="fc-btn">审批</button>
										</div>
									</div>
									<div class="fc-node-body">
										<div class="fc-node-text">连续多级主管</div>
									</div>
								</div>
							</div>
							<div class="add-node-toolbar">
								<div class="add-node-btn">
									<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div class="fc-tree-wrap">
						<div class="fc-tree-panel">
							<div class="add-col-toolbar">
								<button type="button" class="add-col-btn">添加条件</button>
							</div>
							<div class="fc-tree-row">
								<div class="fc-tree-col">
									<div class="fc-tree-wrap">
										<div class="fc-tree-panel">
											<div class="fc-tree-node">
												<div class="fc-arrow to-left">&lt;</div>
												<div class="fc-arrow to-right">&gt;</div>
												<button type="button" class="fc-btn-close"></button>
												<div class="fc-node-label">
													<div class="fc-node-header">
														<div class="fc-node-title">未命名条件</div>
													</div>
													<div class="fc-node-body">

													</div>
												</div>
											</div>
											<div class="add-node-toolbar">
												<div class="add-node-btn">
													<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
												</div>
											</div>
										</div>
									</div>
									<div class="fc-tree-wrap">
										<div class="fc-tree-panel">
											<div class="fc-tree-actor">
												<button type="button" class="fc-btn-close"></button>
												<div class="fc-node-label">
													<div class="fc-node-header">
														<div class="fc-node-title">直接主管审批</div>
														<div class="fc-node-toolbar">
															<button type="button" class="fc-btn">审批</button>
														</div>
													</div>
													<div class="fc-node-body">
														<div class="fc-node-text">连续多级主管</div>
													</div>
												</div>
											</div>
											<div class="add-node-toolbar">
												<div class="add-node-btn">
													<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
												</div>
											</div>
										</div>
									</div>
									<div class="top-cover-line"></div>
									<div class="bottom-cover-line"></div>
								</div>
								<div class="fc-tree-col">
									<div class="fc-tree-wrap">
										<div class="fc-tree-panel">
											<div class="fc-tree-node">
												<div class="fc-arrow to-left">&lt;</div>
												<div class="fc-arrow to-right">&gt;</div>
												<button type="button" class="fc-btn-close"></button>
												<div class="fc-node-label">
													<div class="fc-node-header">
														<div class="fc-node-title">直接主管审批</div>
														<div class="fc-node-toolbar">
															<button type="button" class="fc-btn">审批</button>
														</div>
													</div>
													<div class="fc-node-body">
														<div class="fc-node-text">连续多级主管</div>
													</div>
												</div>
											</div>
											<div class="add-node-toolbar">
												<div class="add-node-btn">
													<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
												</div>
											</div>
										</div>
									</div>
									<div class="top-cover-line"></div>
									<div class="bottom-cover-line"></div>
								</div>
								<div class="fc-tree-col">
									<div class="fc-tree-wrap">
										<div class="fc-tree-panel">
											<div class="fc-tree-node">
												<div class="fc-arrow to-left">&lt;</div>
												<div class="fc-arrow to-right">&gt;</div>
												<button type="button" class="fc-btn-close"></button>
												<div class="fc-node-label">
													<div class="fc-node-header">
														<div class="fc-node-title">直接主管审批</div>
														<div class="fc-node-toolbar">
															<button type="button" class="fc-btn">审批</button>
														</div>
													</div>
													<div class="fc-node-body">
														<div class="fc-node-text">连续多级主管</div>
													</div>
												</div>
											</div>
											<div class="add-node-toolbar">
												<div class="add-node-btn">
													<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
												</div>
											</div>
										</div>
									</div>
									<div class="top-cover-line"></div>
									<div class="bottom-cover-line"></div>
								</div>
							</div>
							<div class="add-node-toolbar">
								<div class="add-node-btn">
									<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div class="end-node">
						<div class="end-node-circle"></div>
						<div class="end-node-text">流程结束</div>
					</div> -->
				</div>
			</div>
		</div>
	</div>
</div>

<!-- <div class="fc-menu">
	<div class="fc-menu-item">
		<div class="item-icon color-orange"><i class="fa fa-user-o"></i></div>
		<div class="item-text">审批人</div>
	</div>
	<div class="fc-menu-item">
		<div class="item-icon"><i class="fa fa-send"></i></div>
		<div class="item-text">抄送人</div>
	</div>
	<div class="fc-menu-item">
		<div class="item-icon color-green"><i class="fa fa-sitemap"></i></div>
		<div class="item-text">条件分支</div>
	</div>
</div> -->

<!-- 添加菜单 -->
<script id="tpl-menu" type="text/html">
	<div class="fc-menu">
		{{each menus as menu}}
		<div class="fc-menu-item">
			<div class="item-icon{{if menu.color}} color-{{menu.color}}{{/if}}"><i class="fa fa-{{menu.icon}}"></i></div>
			<div class="item-text">{{menu.text}}</div>
		</div>
		{{/each}}
	</div>
</script>

<!-- 主架构 -->
<script id="tpl-root" type="text/html">
	<div class="start-node">
		<div class="start-node-circle">开始</div>
		{{include 'tpl-node-add'}}
	</div>
	<div class="end-node">
		<div class="end-node-circle"></div>
		<div class="end-node-text">流程结束</div>
	</div>
</script>

<!-- 容器：节点 -->
<script id="tpl-container" type="text/html">
	<div class="fc-tree-wrap">
		<div class="fc-tree-panel">
			{{include 'tpl-node-add'}}
		</div>
	</div>
</script>

<!-- 容器：分支布局 -->
<script id="tpl-row" type="text/html">
	<div class="fc-tree-row"></div>
</script>

<!-- 容器：分支列 -->
<script id="tpl-col" type="text/html">
	<div class="fc-tree-col">
		<div class="top-cover-line"></div>
		<div class="bottom-cover-line"></div>
	</div>
</script>

<!-- 按钮：添加节点 -->
<script id="tpl-node-add" type="text/html">
	<div class="add-node-toolbar">
		<div class="add-node-btn">
			<button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
		</div>
	</div>
</script>

<!-- 按钮：添加分支 -->
<script id="tpl-col-add" type="text/html">
	<div class="add-col-toolbar">
		<button type="button" class="add-col-btn">添加条件</button>
	</div>
</script>

<!-- 按钮：移除节点/分支 -->
<script id="tpl-remove" type="text/html">
	<button type="button" class="fc-btn-close"></button>
</script>

<!-- 角色节点 -->
<script id="tpl-actor" type="text/html">
	<div class="fc-tree-actor">
		{{include 'tpl-remove'}}
		<div class="fc-node-label">
			<div class="fc-node-header">
				<div class="fc-node-title">{{name}}</div>
				{{if tips}}
				<div class="fc-node-toolbar">
					<button type="button" class="fc-btn">{{if icon}}<i class="fa fa-{{icon}}"></i>{{/if}}{{tips}}</button>
				</div>
				{{/if}}
			</div>
			<div class="fc-node-body">
				<div class="fc-node-text">{{text}}</div>
			</div>
		</div>
	</div>
</script>

<!-- 条件节点 -->
<script id="tpl-node" type="text/html">
	<div class="fc-tree-node">
		<div class="fc-arrow to-left">&lt;</div>
		<div class="fc-arrow to-right">&gt;</div>
		{{include 'tpl-remove'}}
		<div class="fc-node-label">
			<div class="fc-node-header">
				<div class="fc-node-title">{{name||'未命名条件'}}</div>
			</div>
			<div class="fc-node-body">
				<div class="fc-node-text">{{text}}</div>
			</div>
		</div>
	</div>
</script>

<!-- 弹窗演示：审批 -->
<script id="tpl-approver" type="text/html">
	<form name="form" novalidate="novalidate">
		<div class="fc-form">
			<dl>
				<dt><span class="fc-star">*</span>条件名称</dt>
				<dd><input type="text" name="" id="" class="fc-ipt" /></dd>
			</dl>
			<dl>
				<dd><label class="fc-group"><input type="radio" name="" />配置条件</label><label class="fc-group"><input type="radio" name="" />不满足其他分支条件时，进入该分支</label></dd>
			</dl>
		</div>
	</form>
</script>

<!-- 弹窗演示：条件 -->
<script id="tpl-condition" type="text/html">
	<form name="form" novalidate="novalidate">
		<div class="fc-form">
			<dl>
				<dt><span class="fc-star">*</span>选择角色</dt>
				<dd><input type="text" name="" class="fc-ipt fc-ipt-auto" /> <button type="button" class="fc-button tree-select">选 择</button></dd>
			</dl>
		</div>
	</form>
</script>

<!-- 弹窗演示：选择树 -->
<script id="tpl-tree" type="text/html">
	<form name="form" novalidate="novalidate">
		<div class="fc-tree"><ul class="ztree"></ul></div>
	</form>
</script>

<script>
	// $.ux.dialog({
	// 	title: '弹窗组件',
	// 	html: "这是传说中的测试"
	// });
	// $.ux.drawer({
	// 	title: '弹窗组件',
	// 	html: "抽屉效果演示"
	// });
	// $.ux.alert('这是一条警告')
	// $.ux.confirm('确定要执行此操作吗？')
	// $.ux.notify('操作成功！', 'success')
</script>
<script>
	var workflow = new Workflow({
		menus: [{
				type: 'approver', // 节点类型：node-条件节点
				icon: 'user-o', // 图标，参考 fontasome
				color: 'orange', // 图标颜色定制，默认蓝色
				text: '审批节点',
				node: { // 可预定义配置
					tips: '审批',
					icon: 'edit',
					name: '直接主管审批',
					text: '请设置审批人', // 也支持function，this指向 properties
					properties: {

					}
				},
				// 自定义非空验证规则
				valid: function(data) {
					// 返回 false 验证通过
					return false
				},
				handler: function(node, event) {
					var el = node.el;
					var data = node.data;
					$.ux.drawer({
						title: '选择审批人',
						html: $.ux.template('tpl-approver', node.data),
						onok: function() {
							// 节点配置 并 验证（提示）
							// workflow.set(workflow.get(node.data, 'properties'), {
							// 	test: '11'
							// })
							workflow.setProperties(node.data, {
								test: '11'
							})
							workflow.valid(node)
						}
					}).set('width', 640)
				}
			}, {
				type: 'notifier',
				icon: 'send',
				text: '处理节点',
				color: 'green',
				node: {
					tips: '支付',
					icon: 'credit-card',
					color: 'green', // 定义不同色块(blue/green/orange)，也支持色值(#b99a01)
					name: '出纳支付'
				}
			}, {
				type: 'condition',
				icon: 'sitemap',
				text: '条件分支',
				handler: function(node, event) {
					var el = node.el;
					var data = node.data;
					$.ux.drawer({
						title: '条件设置',
						html: $.ux.template('tpl-condition', node.data),
						onshow: function() {
							var $content = $(this.elements.content)
							$content.find('.tree-select').on('click', function() {
								$.ux.dialog({
									title: '选择角色',
									html: $.ux.template('tpl-tree'),
									onshow: function() {
										var $$content = $(this.elements.content)

										var data = [{
											id: 1,
											pId: 0,
											name: "半勾选 1",
											halfCheck: true,
											isParent: true
										}, {
											id: 2,
											pId: 0,
											name: "半勾选 2",
											halfCheck: true,
											checked: true,
											isParent: true
										}, {
											id: 3,
											pId: 0,
											name: "随意勾选 3",
											checked: true,
											isParent: true
										}]
										$.fn.zTree.init($$content.find('.fc-tree .ztree'), {
											check: {
												enable: true,
												autoCheckTrigger: true
											},
											data: {
												simpleData: {
													enable: true
												}
											}
										}, data);
									}
								}).set('height', 420)
							})
						},
						onok: function() {

						}
					}).set('width', 640)
				}
			}],
		// data: {
		// 	"type": "start",
		// 	"properties": {},
		// 	"childNode": {
		// 		"type": "route",
		// 		"properties": {},
		// 		"conditionNodes": [{
		// 			"type": "condition",
		// 			"name": "未命名条件",
		// 			"properties": {}
		// 		}, {
		// 			"type": "condition",
		// 			"name": "未命名条件",
		// 			"properties": {}
		// 		}]
		// 	}
		// }
	})

	// 单独载入数据方式
	workflow.load({
		"type": "start",
		"properties": {},
		"nodeId": "0001",
		"childNode": {
			"childNode": {
				"childNode": {
					"childNode": {
						"nodeId": "0002",
						"prevId": "0005",
						"type": "notifier",
						"properties": {}
					},
					"nodeId": "0005",
					"prevId": "0004",
					"type": "route",
					"properties": {},
					"conditionNodes": [{
						"nodeId": "0006",
						"prevId": "0005",
						"name": "未命名条件",
						"type": "condition",
						"properties": {},
						"childNode": {
							"nodeId": "0008",
							"prevId": "0006",
							"type": "approver",
							"properties": {}
						}
					}, {
						"nodeId": "0007",
						"prevId": "0005",
						"name": "未命名条件",
						"type": "condition",
						"properties": {}
					}]
				},
				"nodeId": "0004",
				"prevId": "0003",
				"type": "notifier",
				"properties": {}
			},
			"nodeId": "0003",
			"prevId": "0001",
			"type": "approver",
			"properties": {}
		}
	})

	$(document).ready(function() {
		$('#btn-save').on('click', function() {
			if (workflow.validAll()) {
				console.log(workflow.getJson())
			}
		})
	})
</script>
</body>
</html>