完善审批工作流设计器

完善审批工作流设计器

src/components/scWorkflow/index.vue

@@ -1,131 +1,141 @@
 <!--
  * @Descripttion: 仿钉钉流程设计器
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年9月14日08:38:35
- * @LastEditors:
+ * @LastEditors: sakuya
- * @LastEditTime:
+ * @LastEditTime: 2021年10月28日23:07:06
 -->
 
 <template>
 	<div class="sc-workflow-design">
 		<div class="box-scale">
-			<node-wrap v-model="nodeConfig"></node-wrap>
+			<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
 			<div class="end-node">
 				<div class="end-node-circle"></div>
 				<div class="end-node-text">流程结束</div>
 			</div>
 		</div>
+		<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
 	</div>
 </template>
 
 <script>
 	import nodeWrap from './nodeWrap'
+	import useSelect from './select'
 
 	export default {
+		provide(){
+			return {
+				select: this.selectHandle
+			}
+		},
 		props: {
 			modelValue: { type: Object, default: () => {} }
 		},
 		components: {
-			nodeWrap
+			nodeWrap,
+			useSelect
 		},
 		data() {
 			return {
-				nodeConfig: this.modelValue
+				nodeConfig: this.modelValue,
+				selectVisible: false
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.nodeConfig = val
 			}
 		},
 		mounted() {
 
 		},
 		methods: {
-
+			selectHandle(type, data){
+				this.selectVisible = true
+				this.$nextTick(() => {
+					this.$refs.useselect.open(type, data)
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
 	.sc-workflow-design {width: 100%;}
+	.sc-workflow-design .box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
 
-	.box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
+	.sc-workflow-design {
-
+		.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
-	.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
+		.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
-	.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
+		.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
-
+		.node-wrap-box.start-node:before {content: none}
-	.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
+		.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;}
-	.node-wrap-box.start-node:before {content: none}
+		.node-wrap-box .title .icon {margin-right: 5px;}
-
+		.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
-	.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;}
+		.node-wrap-box .content {position: relative;padding: 15px;}
-	.node-wrap-box .title .icon {margin-right: 5px;}
+		.node-wrap-box .content .placeholder {color: #999;}
-	.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
+		.node-wrap-box:hover .close {display: block;}
-	.node-wrap-box .content {position: relative;padding: 15px;}
+		.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
-	.node-wrap-box .content .placeholder {color: #999;}
+		.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
-	.node-wrap-box:hover .close {display: block;}
+		.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
-
+		.add-node-btn span {}
-	.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
+		.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
-	.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.branch-wrap {display: inline-flex;width: 100%;}
-	.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
+		.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
-	.add-node-btn span {}
+		.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
-
+		.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
-	.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
+		.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
-
+		.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
-	.branch-wrap {display: inline-flex;width: 100%;}
+		.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
-	.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
+		.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
-
+		.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
-	.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
+		.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
-	.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
+		.auto-judge .title {line-height: 16px;}
-	.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.auto-judge .title .node-title {color: #15BC83;}
-
+		.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
-	.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
+		.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
-	.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
+		.auto-judge .content {position: relative;padding-top: 15px;}
-	.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.auto-judge .content .placeholder {color: #999;}
-
+		.auto-judge:hover {
-
+			.close {display: block;}
-	.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
+			.priority-title {display: none;}
-	.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
+		}
-
+		.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
-	.auto-judge .title {line-height: 16px;}
+		.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
-	.auto-judge .title .node-title {color: #15BC83;}
+		.top-left-cover-line {left: -1px;}
-	.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
+		.top-right-cover-line {right: -1px;}
-	.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
+		.bottom-left-cover-line {left: -1px;}
-
+		.bottom-right-cover-line {right: -1px;}
-	.auto-judge .content {position: relative;padding-top: 15px;}
+		.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
-	.auto-judge .content .placeholder {color: #999;}
+		.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
-
+		.end-node-text {margin-top: 5px;text-align: center;}
-	.auto-judge:hover {
+		.auto-judge:hover {
-		.close {display: block;}
+			.sort-left {display: flex;}
-		.priority-title {display: none;}
+			.sort-right {display: flex;}
+		}
+		.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
+		.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
+		.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
+		.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
+		.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
+		.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
+		.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
 	}
 
-	.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
+	.tags-list {margin-top: 15px;}
-	.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
+	.add-node-popover-body {}
+	.add-node-popover-body li {display: inline-block;width: 80px;text-align: center;padding:10px 0;}
+	.add-node-popover-body li i {border: 1px solid var(--el-border-color-light);width:40px;height:40px;border-radius: 50%;text-align: center;line-height: 38px;font-size: 18px;cursor: pointer;}
+	.add-node-popover-body li i:hover {border: 1px solid #3296fa;background: #3296fa;color: #fff!important;}
+	.add-node-popover-body li p {font-size: 12px;margin-top: 5px;}
+	.node-wrap-drawer__title {padding-right:40px;}
+	.node-wrap-drawer__title label {cursor: pointer;}
+	.node-wrap-drawer__title label:hover {border-bottom: 1px dashed #409eff;}
+	.node-wrap-drawer__title .node-wrap-drawer__title-edit {color: #409eff;margin-left: 10px;}
 
-	.top-left-cover-line {left: -1px;}
+	[data-theme='dark'] .sc-workflow-design {
-	.top-right-cover-line {right: -1px;}
-	.bottom-left-cover-line {left: -1px;}
-	.bottom-right-cover-line {right: -1px;}
-
-
-	.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
-	.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
-	.end-node-text {margin-top: 5px;text-align: center;}
-
-	.auto-judge:hover {
-		.sort-left {display: flex;}
-		.sort-right {display: flex;}
-	}
-
-	.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
-	.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
-
-	.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
-
-	.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
-	.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
-
-	.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
-	.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
-
-	[data-theme='dark'] {
 		.node-wrap-box,.auto-judge {background: #2b2b2b;}
 		.col-box {background: #222225;}
 		.top-left-cover-line,

src/components/scWorkflow/nodes/addNode.vue

@@ -1,14 +1,25 @@
 <template>
 	 <div class="add-node-btn-box">
 	 	<div class="add-node-btn">
-			<el-popover placement="right-start" :width="300" v-model:visible="visible" :hide-after="0" :show-after="0">
+			<el-popover placement="right-start" :width="270" v-model:visible="visible" :hide-after="0" :show-after="0">
 				<template #reference>
 					<el-button type="primary" icon="el-icon-plus" circle></el-button>
 				</template>
 				<div class="add-node-popover-body">
-					<el-button icon="el-icon-user-solid" type="primary" circle plain @click="addType(1)"></el-button>
+					<ul>
-					<el-button icon="el-icon-s-promotion" type="primary" circle plain @click="addType(2)"></el-button>
+						<li>
-					<el-button icon="el-icon-share" type="primary" circle plain @click="addType(4)"></el-button>
+							<i class="el-icon-user-solid" style="color: #ff943e;" @click="addType(1)"></i>
+							<p>审批节点</p>
+						</li>
+						<li>
+							<i class="el-icon-s-promotion" style="color: #3296fa;" @click="addType(2)"></i>
+							<p>抄送节点</p>
+						</li>
+						<li>
+							<i class="el-icon-share" style="color: #15BC83;" @click="addType(4)"></i>
+							<p>条件分支</p>
+						</li>
+					</ul>
 				</div>
 			</el-popover>
 	 	</div>
@@ -34,13 +45,26 @@
 				if (type == 1) {
 					node = {
 						nodeName: "审核人",
-						type: 1,
+						type: 1,			//节点类型
+						setType: 1,			//审核人类型
+						nodeUserList: [],	//审核人成员
+						nodeRoleList: [],	//审核角色
+						examineLevel: 1,	//指定主管层级
+						directorLevel: 1,	//自定义连续主管审批层级
+						selectMode: 1,		//发起人自选类型
+						termAuto: false,	//审批期限超时自动审批
+						term: 0,			//审批期限
+						termMode: 1,		//审批期限超时后执行类型
+						examineMode: 1,		//多人审批时审批方式
+						directorMode: 0,	//连续主管审批方式
 						childNode: this.modelValue
 					}
 				}else if(type == 2){
 					node = {
 						nodeName: "抄送人",
 						type: 2,
+						userSelectFlag: true,
+						nodeUserList: [],
 						childNode: this.modelValue
 					}
 
@@ -52,12 +76,16 @@
 							{
 								nodeName: "条件1",
 								type: 3,
-								priorityLevel: 1
+								priorityLevel: 1,
+								conditionMode: 1,
+								conditionList: []
 							},
 							{
 								nodeName: "条件2",
 								type: 3,
-								priorityLevel: 2
+								priorityLevel: 2,
+								conditionMode: 1,
+								conditionList: []
 							}
 						],
 						childNode: this.modelValue

src/components/scWorkflow/nodes/approver.vue

@@ -8,28 +8,88 @@
 			</div>
 			<div class="content">
 				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
-				<span v-else class="placeholder">请选择人员</span>
+				<span v-else class="placeholder">请选择</span>
 			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body>
+		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
 			<el-container>
 				<el-main style="padding:0 20px 20px 20px">
 					<el-form label-position="top">
-						<el-form-item label="">
+
-							<el-input v-model="form.nodeName"></el-input>
-						</el-form-item>
-						<el-divider></el-divider>
 						<el-form-item label="审批人员类型">
-							<el-radio-group v-model="form.settype" class="clear">
+							<el-select v-model="form.setType">
-								<el-radio :label="1">指定成员</el-radio>
+								<el-option :value="1" label="指定成员"></el-option>
-								<el-radio :label="2">主管</el-radio>
+								<el-option :value="2" label="主管"></el-option>
-								<el-radio :label="4">发起人自选</el-radio>
+								<el-option :value="3" label="角色"></el-option>
-								<el-radio :label="5">发起人自己</el-radio>
+								<el-option :value="4" label="发起人自选"></el-option>
-								<el-radio :label="7">连续多级主管</el-radio>
+								<el-option :value="5" label="发起人自己"></el-option>
+								<el-option :value="7" label="连续多级主管"></el-option>
+							</el-select>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==1" label="选择成员">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
+							</div>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==2" label="指定主管">
+							发起人的第 <el-input-number v-model="form.examineLevel" :min="1" size="mini"/> 级主管
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==3" label="选择角色">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
+							</div>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==4" label="发起人自选">
+							<el-radio-group v-model="form.selectMode">
+								<el-radio :label="1">自选一个人</el-radio>
+								<el-radio :label="2">自选多个人</el-radio>
 							</el-radio-group>
 						</el-form-item>
+
+						<el-form-item v-if="form.setType==7" label="连续主管审批终点">
+							<el-radio-group v-model="form.directorMode">
+								<el-radio :label="0">直到最上层主管</el-radio>
+								<el-radio :label="1">自定义审批终点</el-radio>
+							</el-radio-group>
+							<p v-if="form.directorMode==1">直到发起人的第  <el-input-number v-model="form.directorLevel" :min="1" size="mini"/> 级主管</p>
+						</el-form-item>
+
 						<el-divider></el-divider>
+						<el-form-item label="">
+							<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
+						</el-form-item>
+						<template v-if="form.termAuto">
+							<el-form-item label="审批期限（为 0 则不生效）">
+								<el-input-number v-model="form.term" :min="0" size="mini"/> 小时
+							</el-form-item>
+							<el-form-item label="审批期限超时后执行">
+								<el-radio-group v-model="form.termMode">
+									<el-radio :label="0">自动通过</el-radio>
+									<el-radio :label="1">自动拒绝</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</template>
+						<el-divider></el-divider>
+						<el-form-item label="多人审批时审批方式">
+							<el-radio-group v-model="form.examineMode">
+								<p><el-radio :label="1">按顺序依次审批</el-radio></p>
+								<p><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
+								<p><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
+							</el-radio-group>
+						</el-form-item>
 					</el-form>
 				</el-main>
 				<el-footer>
@@ -45,6 +105,7 @@
 	import addNode from './addNode'
 
 	export default {
+		inject: ['select'],
 		props: {
 			modelValue: { type: Object, default: () => {} }
 		},
@@ -55,6 +116,7 @@
 			return {
 				nodeConfig: {},
 				drawer: false,
+				isEditTitle: false,
 				form: {}
 			}
 		},
@@ -69,9 +131,18 @@
 		methods: {
 			show(){
 				this.form = {}
-				this.form = {...this.nodeConfig}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
 				this.drawer = true
 			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
 			save(){
 				this.$emit("update:modelValue", this.form)
 				this.drawer = false
@@ -79,21 +150,37 @@
 			delNode(){
 				this.$emit("update:modelValue", this.nodeConfig.childNode)
 			},
+			delUser(index){
+				this.form.nodeUserList.splice(index, 1)
+			},
+			delRole(index){
+				this.form.nodeRoleList.splice(index, 1)
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
 			toText(nodeConfig){
-				if(nodeConfig.settype == 1){
+				if(nodeConfig.setType == 1){
 					if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
-						const users = nodeConfig.nodeUserList.map(item=>item.name).join(" 或 ")
+						const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
 						return users
 					}else{
 						return false
 					}
-				}else if (nodeConfig.settype == 2) {
+				}else if (nodeConfig.setType == 2) {
-					return "直接主管"
+					return nodeConfig.examineLevel == 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
-				}else if (nodeConfig.settype == 4) {
+				}else if (nodeConfig.setType == 3) {
+					if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length>0) {
+						const roles = nodeConfig.nodeRoleList.map(item=>item.name).join("、")
+						return '角色-' + roles
+					}else{
+						return false
+					}
+				}else if (nodeConfig.setType == 4) {
 					return "发起人自选"
-				}else if (nodeConfig.settype == 5) {
+				}else if (nodeConfig.setType == 5) {
 					return "发起人自己"
-				}else if (nodeConfig.settype == 7) {
+				}else if (nodeConfig.setType == 7) {
 					return "连续多级主管"
 				}
 			}
@@ -102,4 +189,5 @@
 </script>
 
 <style>
+
 </style>

src/components/scWorkflow/nodes/branch.vue

@@ -31,19 +31,62 @@
 			</div>
 			<add-node v-model="nodeConfig.childNode"></add-node>
 		</div>
-		<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body>
+		<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body :size="600">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
 			<el-container>
 				<el-main style="padding:0 20px 20px 20px">
 					<el-form label-position="top">
-						<el-form-item label="">
+						<el-form-item label="条件关系">
-							<el-input v-model="form.nodeName"></el-input>
+							<el-radio-group v-model="form.conditionMode">
+								<el-radio :label="1">且</el-radio>
+								<el-radio :label="2">或</el-radio>
+							</el-radio-group>
 						</el-form-item>
 						<el-divider></el-divider>
-						<el-form-item label="条件">
+						<el-form-item>
-							{{ nodeConfig.conditionNodes[index].conditionList }}
+							<el-table :data="form.conditionList">
+								<el-table-column prop="label" label="描述">
+									<template #default="scope">
+										<el-input v-model="scope.row.label" placeholder="描述"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="field" label="条件字段" width="130">
+									<template #default="scope">
+										<el-input v-model="scope.row.field" placeholder="条件字段"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="operator" label="运算符" width="130">
+									<template #default="scope">
+										<el-select v-model="scope.row.operator" placeholder="Select">
+											<el-option label="等于" value="="></el-option>
+											<el-option label="不等于" value="!="></el-option>
+											<el-option label="大于" value=">"></el-option>
+											<el-option label="大于等于" value=">="></el-option>
+											<el-option label="小于" value="<"></el-option>
+											<el-option label="小于等于" value="<="></el-option>
+											<el-option label="包含" value="include"></el-option>
+											<el-option label="不包含" value="notinclude"></el-option>
+										</el-select>
+									</template>
+								</el-table-column>
+								<el-table-column prop="value" label="值" width="100">
+									<template #default="scope">
+										<el-input v-model="scope.row.value" placeholder="值"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="value" label="移除" width="50">
+									<template #default="scope">
+										<el-button size="mini" type="text" @click="deleteConditionList(scope.$index)">移除</el-button>
+									</template>
+								</el-table-column>
+							</el-table>
 						</el-form-item>
-						<el-divider></el-divider>
+						<p><el-button type="primary" icon="el-icon-plus" round @click="addConditionList">增加条件</el-button></p>
-						<p><el-button type="primary">增加条件</el-button></p>
 					</el-form>
 				</el-main>
 				<el-footer>
@@ -69,6 +112,7 @@
 			return {
 				nodeConfig: {},
 				drawer: false,
+				isEditTitle: false,
 				index: 0,
 				form: {}
 			}
@@ -85,9 +129,18 @@
 			show(index){
 				this.index = index
 				this.form = {}
-				this.form = {...this.nodeConfig.conditionNodes[index]}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig.conditionNodes[index]))
 				this.drawer = true
 			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
 			save(){
 				this.nodeConfig.conditionNodes[this.index] = this.form
 				this.$emit("update:modelValue", this.nodeConfig)
@@ -98,7 +151,9 @@
 				this.nodeConfig.conditionNodes.push({
 					nodeName: "条件" + len,
 					type: 3,
-					priorityLevel: len
+					priorityLevel: len,
+					conditionMode: 1,
+					conditionList: []
 				})
 			},
 			delTerm(index){
@@ -128,11 +183,25 @@
 				})
 				this.$emit("update:modelValue", this.nodeConfig)
 			},
+			addConditionList(){
+				this.form.conditionList.push({
+					label: '',
+					field: '',
+					operator: '=',
+					value: ''
+				})
+			},
+			deleteConditionList(index){
+				this.form.conditionList.splice(index, 1)
+			},
 			toText(nodeConfig, index){
 				var { conditionList } = nodeConfig.conditionNodes[index]
-				if (conditionList && conditionList.length > 0) {
+				if (conditionList && conditionList.length == 1) {
 					const text = conditionList.map(item => `${item.label}${item.operator}${item.value}`).join(" 和 ")
 					return text
+				}else if(conditionList && conditionList.length > 1){
+					const conditionModeText = nodeConfig.conditionNodes[index].conditionMode==1?'且行':'或行'
+					return conditionList.length + "个条件，" + conditionModeText
 				}else{
 					if(index == nodeConfig.conditionNodes.length - 1){
 						return "其他条件进入此流程"

src/components/scWorkflow/nodes/promoter.vue

@@ -5,16 +5,28 @@
 				<i class="icon el-icon-user-solid"></i>
 				<span>{{ nodeConfig.nodeName }}</span>
 			</div>
-			<div class="content">所有人</div>
+			<div class="content">
+				<span>{{ toText(nodeConfig) }}</span>
+			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body>
+		<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
 			<el-container>
 				<el-main style="padding:0 20px 20px 20px">
 					<el-form label-position="top">
-						<el-form-item label="">
+						<el-form-item label="谁可以发起此审批">
-							<el-input v-model="form.nodeName"></el-input>
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
+							</div>
 						</el-form-item>
+						<el-alert v-if="form.nodeRoleList.length==0" title="不指定则默认所有人都可发起此审批" type="info" :closable="false"/>
 					</el-form>
 				</el-main>
 				<el-footer>
@@ -30,6 +42,7 @@
 	import addNode from './addNode'
 
 	export default {
+		inject: ['select'],
 		props: {
 			modelValue: { type: Object, default: () => {} }
 		},
@@ -40,6 +53,7 @@
 			return {
 				nodeConfig: {},
 				drawer: false,
+				isEditTitle: false,
 				form: {}
 			}
 		},
@@ -54,12 +68,35 @@
 		methods: {
 			show(){
 				this.form = {}
-				this.form = {...this.nodeConfig}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+				this.isEditTitle = false
 				this.drawer = true
 			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
+			delRole(index){
+				this.form.nodeRoleList.splice(index, 1)
+			},
 			save(){
 				this.$emit("update:modelValue", this.form)
 				this.drawer = false
+			},
+			toText(nodeConfig){
+				if(nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0){
+					return nodeConfig.nodeRoleList.map(item=>item.name).join("、")
+				}else{
+					return "所有人"
+				}
 			}
 		}
 	}

src/components/scWorkflow/nodes/send.vue

@@ -12,16 +12,24 @@
 			</div>
 		</div>
 		<add-node v-model="nodeConfig.childNode"></add-node>
-		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body>
+		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<i class="node-wrap-drawer__title-edit el-icon-edit-outline"></i></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
 			<el-container>
 				<el-main style="padding:0 20px 20px 20px">
 					<el-form label-position="top">
-						<el-form-item label="">
+						<el-form-item label="选择要抄送的人员">
-							<el-input v-model="form.nodeName"></el-input>
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
+							</div>
 						</el-form-item>
-						<el-divider></el-divider>
 						<el-form-item label="">
-							<el-checkbox v-model="form.ccSelfSelectFlag" label="允许发起人自选"></el-checkbox>
+							<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
 						</el-form-item>
 					</el-form>
 				</el-main>
@@ -38,6 +46,7 @@
 	import addNode from './addNode'
 
 	export default {
+		inject: ['select'],
 		props: {
 			modelValue: { type: Object, default: () => {} }
 		},
@@ -48,6 +57,7 @@
 			return {
 				nodeConfig: {},
 				drawer: false,
+				isEditTitle: false,
 				form: {}
 			}
 		},
@@ -62,9 +72,18 @@
 		methods: {
 			show(){
 				this.form = {}
-				this.form = {...this.nodeConfig}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
 				this.drawer = true
 			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
 			save(){
 				this.$emit("update:modelValue", this.form)
 				this.drawer = false
@@ -72,12 +91,18 @@
 			delNode(){
 				this.$emit("update:modelValue", this.nodeConfig.childNode)
 			},
+			delUser(index){
+				this.form.nodeUserList.splice(index, 1)
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
 			toText(nodeConfig){
 				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
-					const users = nodeConfig.nodeUserList.map(item=>item.name).join(" 或 ")
+					const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
 					return users
 				}else{
-					if(nodeConfig.ccSelfSelectFlag){
+					if(nodeConfig.userSelectFlag){
 						return "发起人自选"
 					}else{
 						return false

src/components/scWorkflow/select.vue

@@ -0,0 +1,269 @@
+<template>
+	<el-dialog v-model="dialogVisible" :title="titleMap[type-1]" :width="type==1?680:460" destroy-on-close append-to-body @closed="$emit('closed')">
+
+		<template v-if="type==1">
+			<div class="sc-user-select">
+				<div class="sc-user-select__left">
+					<div class="sc-user-select__search">
+						<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
+							<template #append>
+								<el-button icon="el-icon-search" @click="search"></el-button>
+							</template>
+						</el-input>
+					</div>
+					<div class="sc-user-select__select">
+						<div class="sc-user-select__tree" v-loading="showGrouploading">
+							<el-scrollbar>
+								<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupId" @node-click="groupClick"/>
+							</el-scrollbar>
+						</div>
+						<div class="sc-user-select__user" v-loading="showUserloading">
+							<div class="sc-user-select__user__list">
+								<el-scrollbar ref="userScrollbar">
+									<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
+								</el-scrollbar>
+							</div>
+							<footer>
+								<el-pagination background layout="prev,next" small :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
+							</footer>
+						</div>
+					</div>
+				</div>
+				<div class="sc-user-select__toicon"><i class="el-icon-right"></i></div>
+				<div class="sc-user-select__selected">
+					<header>已选 ({{selected.length}})</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="(item, index) in selected" :key="item.id">
+								<span class="name">
+									<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
+									<label>{{item.name}}</label>
+								</span>
+								<span class="delete">
+									<el-button type="text" icon="el-icon-delete" circle size="mini" @click="deleteSelected(index)"></el-button>
+								</span>
+							</li>
+						</el-scrollbar>
+					</ul>
+				</div>
+			</div>
+		</template>
+
+		<template v-if="type==2">
+			<div class="sc-user-select sc-user-select-role">
+				<div class="sc-user-select__left">
+					<div class="sc-user-select__select">
+						<div class="sc-user-select__tree" v-loading="showGrouploading">
+							<el-scrollbar>
+								<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
+							</el-scrollbar>
+						</div>
+					</div>
+				</div>
+				<div class="sc-user-select__toicon"><i class="el-icon-right"></i></div>
+				<div class="sc-user-select__selected">
+					<header>已选 ({{selected.length}})</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="(item, index) in selected" :key="item.id">
+								<span class="name">
+									<label>{{item.name}}</label>
+								</span>
+								<span class="delete">
+									<el-button type="text" icon="el-icon-delete" circle size="mini" @click="deleteSelected(index)"></el-button>
+								</span>
+							</li>
+						</el-scrollbar>
+					</ul>
+				</div>
+			</div>
+		</template>
+
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取 消</el-button>
+			<el-button type="primary" @click="save">确 认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	import config from "@/config/workflow";
+
+	export default {
+		props: {
+			modelValue: { type: Boolean, default: false }
+		},
+		data() {
+			return {
+				groupProps: config.group.props,
+				userProps: config.user.props,
+				roleProps: config.role.props,
+
+				titleMap: ['人员选择', '角色选择'],
+				dialogVisible: false,
+				showGrouploading: false,
+				showUserloading: false,
+				keyword: '',
+				groupId: '',
+				pageSize: config.user.pageSize,
+				total: 0,
+				currentPage: 1,
+				group: [],
+				user: [],
+				role: [],
+				type: 1,
+				selected: [],
+				value: []
+			}
+		},
+		computed: {
+			selectedIds(){
+				return this.selected.map(t => t.id)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//打开赋值
+			open(type, data){
+				this.type = type
+				this.value = data||[]
+				this.selected = JSON.parse(JSON.stringify(data||[]))
+				this.dialogVisible = true
+
+				if(this.type==1){
+					this.getGroup()
+					this.getUser()
+				}else if(this.type==2){
+					this.getRole()
+				}
+
+			},
+			//获取组织
+			async getGroup(){
+				this.showGrouploading = true;
+				var res = await config.group.apiObj.get();
+				this.showGrouploading = false;
+				var allNode = {[config.group.props.key]: '', [config.group.props.label]: '所有'}
+				res.data.unshift(allNode);
+				this.group = config.group.parseData(res).rows
+			},
+			//获取用户
+			async getUser(){
+				this.showUserloading = true;
+				var params = {
+					[config.user.request.keyword]: this.keyword || null,
+					[config.user.request.groupId]: this.groupId || null,
+					[config.user.request.page]: this.currentPage,
+					[config.user.request.pageSize]: this.pageSize
+				}
+				var res = await config.user.apiObj.get(params);
+				this.showUserloading = false;
+				this.user =  config.user.parseData(res).rows;
+				this.total = config.user.parseData(res).total || 0;
+				this.$refs.userScrollbar.setScrollTop(0)
+			},
+			//获取角色
+			async getRole(){
+				this.showGrouploading = true;
+				var res = await config.role.apiObj.get();
+				this.showGrouploading = false;
+				this.role = config.role.parseData(res).rows
+			},
+			//组织点击
+			groupClick(data){
+				this.keyword = ''
+				this.currentPage = 1
+				this.groupId = data[config.group.props.key]
+				this.getUser()
+			},
+			//用户点击
+			userClick(data, checked){
+				if(checked){
+					this.selected.push({
+						id: data[config.user.props.key],
+						name: data[config.user.props.label]
+					})
+				}else{
+					this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
+				}
+			},
+			//用户分页点击
+			paginationChange(){
+				this.getUser()
+			},
+			//用户搜索
+			search(){
+				this.groupId = ''
+				this.$refs.groupTree.setCurrentKey(this.groupId)
+				this.currentPage = 1
+				this.getUser()
+			},
+			//删除已选
+			deleteSelected(index){
+				this.selected.splice(index,1);
+				if(this.type==1){
+					this.$refs.userTree.setCheckedKeys(this.selectedIds)
+				}else if(this.type==2){
+					this.$refs.groupTree.setCheckedKeys(this.selectedIds)
+				}
+			},
+			//角色点击
+			roleClick(data, checked){
+				if(checked){
+					this.selected.push({
+						id: data[config.role.props.key],
+						name: data[config.role.props.label]
+					})
+				}else{
+					this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
+				}
+			},
+			//提交保存
+			save(){
+				this.value.splice(0,this.value.length);
+				this.selected.map(item => {
+					this.value.push(item)
+				})
+				this.dialogVisible = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-user-select {display: flex;}
+	.sc-user-select__left {width: 400px;}
+	.sc-user-select__right {flex: 1;}
+
+	.sc-user-select__search {padding-bottom:10px;}
+
+	.sc-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
+	.sc-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
+	.sc-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
+	.sc-user-select__user__list {flex: 1;overflow: auto;}
+	.sc-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}
+
+	.sc-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
+	.sc-user-select__toicon i {background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}
+
+	.sc-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
+	.sc-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
+	.sc-user-select__selected ul {height:300px;overflow: auto;}
+	.sc-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
+	.sc-user-select__selected li .name {display: flex;align-items: center;}
+	.sc-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
+	.sc-user-select__selected li .name label {}
+	.sc-user-select__selected li .delete {display: none;}
+	.sc-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
+	.sc-user-select__selected li:hover .delete {display: inline-block;}
+
+	.sc-user-select-role .sc-user-select__left {width: 200px;}
+	.sc-user-select-role .sc-user-select__tree {border: none;height: 343px;}
+	.sc-user-select-role .sc-user-select__selected {}
+
+	[data-theme='dark'] .sc-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
+	[data-theme='dark'] .sc-user-select__toicon i {background: #383838;}
+</style>

src/config/workflow.js

@@ -0,0 +1,69 @@
+import API from "@/api";
+
+//审批工作流人员/组织选择器配置
+
+export default {
+	//配置接口正常返回代码
+	successCode: 200,
+	//配置组织
+	group: {
+		//请求接口对象
+		apiObj: API.system.role.list,
+		//接受数据字段映射
+		parseData: function (res) {
+			return {
+				rows: res.data,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		//显示数据字段映射
+		props: {
+			key: 'id',
+			label: 'label',
+			children: 'children'
+		}
+	},
+	//配置用户
+	user: {
+		apiObj: API.demo.page,
+		pageSize: 20,
+		parseData: function (res) {
+			return {
+				rows: res.data.rows,
+				total: res.data.total,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		props: {
+			key: 'id',
+			label: 'user',
+		},
+		request: {
+			page: 'page',
+			pageSize: 'pageSize',
+			groupId: 'groupId',
+			keyword: 'keyword'
+		}
+	},
+	//配置角色
+	role: {
+		//请求接口对象
+		apiObj: API.system.role.list,
+		//接受数据字段映射
+		parseData: function (res) {
+			return {
+				rows: res.data,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		//显示数据字段映射
+		props: {
+			key: 'id',
+			label: 'label',
+			children: 'children'
+		}
+	}
+}

src/views/vab/workflow.vue

@@ -1,8 +1,15 @@
 <template>
-	<el-main>
+	<el-container>
-		<el-alert title="仿钉钉审批工作流. 现预览阶段, 功能有限后期将不断迭代, 一般工作流设计器都是满足不了业务需求的,建议拷贝一份组件自行根据业务扩展开发" type="warning" style="margin-bottom:20px;"></el-alert>
+		<el-header>
-		<sc-workflow v-model="data.nodeConfig"></sc-workflow>
+			<el-page-header :content="data.name"></el-page-header>
-	</el-main>
+			<div class="do">
+				<el-button type="primary" @click="exportJson">export JSON</el-button>
+			</div>
+		</el-header>
+		<el-main>
+			<sc-workflow v-model="data.nodeConfig"></sc-workflow>
+		</el-main>
+	</el-container>
 </template>
 
 <script>
@@ -16,60 +23,76 @@
 		data() {
 			return {
 				data: {
-					id: 1,
+					"id": 1,
-					name: "合同审批",
+					"name": "请假审批",
-					nodeConfig: {
+					"nodeConfig": {
-						nodeName: "发起人",
+						"nodeName": "发起人",
-						type: 0,	// 0 发起人 1审批 2抄送 3条件 4路由
+						"type": 0,
-						childNode: {
+						"nodeRoleList": [],
-							nodeName: "审核人",
+						"childNode": {
-							type: 1,
+							"nodeName": "条件路由",
-							settype: 1,	// 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
+							"type": 4,
-							nodeUserList: [
+							"conditionNodes": [{
-								{
+									"nodeName": "长期",
-									id: 1,
+									"type": 3,
-									name: "Sakuya"
+									"priorityLevel": 1,
+									"conditionMode": 1,
+									"conditionList": [{
+										"label": "请假天数",
+										"field": "day",
+										"operator": ">",
+										"value": "7"
+									}],
+									"childNode": {
+										"nodeName": "领导审批",
+										"type": 1,
+										"setType": 1,
+										"nodeUserList": [{
+											"id": "360000197302144442",
+											"name": "何敏"
+										}],
+										"nodeRoleList": [],
+										"examineLevel": 1,
+										"directorLevel": 1,
+										"selectMode": 1,
+										"termAuto": false,
+										"term": 0,
+										"termMode": 1,
+										"examineMode": 1,
+										"directorMode": 0
+									}
 								},
 								{
-									id: 2,
+									"nodeName": "短期",
-									name: "Lolowan"
+									"type": 3,
+									"priorityLevel": 2,
+									"conditionMode": 1,
+									"conditionList": [],
+									"childNode": {
+										"nodeName": "直接主管审批",
+										"type": 1,
+										"setType": 2,
+										"nodeUserList": [],
+										"nodeRoleList": [],
+										"examineLevel": 1,
+										"directorLevel": 1,
+										"selectMode": 1,
+										"termAuto": false,
+										"term": 0,
+										"termMode": 1,
+										"examineMode": 1,
+										"directorMode": 0
+									}
 								}
 							],
-							childNode: {
+							"childNode": {
-								nodeName: "路由",
+								"nodeName": "抄送人",
-								type: 4,
+								"type": 2,
-								conditionNodes: [
+								"userSelectFlag": true,
-									{
+								"nodeUserList": [{
-										nodeName: "条件1",
+									"id": "220000200908305857",
-										type: 3,
+									"name": "何秀英"
-										priorityLevel: 1,
+								}]
-										conditionList: [
-											{
-												label: "上级审核状态",
-												field: "promoter",
-												operator: "=",
-												value: '保留'
-											}
-										],
-										childNode: {
-											nodeName: "条件审核",
-											type: 1,
-											settype: 2
-										}
-									},
-									{
-										nodeName: "条件2",
-										type: 3,
-										priorityLevel: 2,
-										conditionList: []
-									}
-								],
-								childNode: {
-									nodeName: "抄送人",
-									type: 2,
-									ccSelfSelectFlag: true,
-									nodeUserList: []
-								}
 							}
 						}
 					}
@@ -80,11 +103,12 @@
 
 		},
 		methods: {
-
+			exportJson() {
+				this.$message("返回值请查看F12控制台console.log()")
+				console.log(this.data)
+			}
 		}
 	}
 </script>
 
-<style>
+<style></style>
-
-</style>