feat: 审批 组件调整

src/components/scWorkflow/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="sc-workflow-design">
 		<div class="box-scale">
-			<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
+			<node-wrap v-if="nodeConfig" v-model="nodeConfig" :disabled="disabled"></node-wrap>
 			<div class="node-wrap">
-				<div class="node-wrap-box start-node">
+				<div class="node-wrap-box node-wrap-box--disabled end-node">
 					<div class="title" style="background: var(--el-color-info)">
 						<span class="title_label">结束</span>
 					</div>
@@ -39,7 +39,11 @@ export default {
 		}
 	},
 	props: {
-		modelValue: { type: Object, default: () => {} }
+		modelValue: { type: Object, default: () => {} },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data() {
 		return {
@@ -91,6 +95,7 @@ export default {
 	justify-content: center;
 	flex-wrap: wrap;
 	min-width: min-content;
+	background: #f6f8f9;
 }
 
 .sc-workflow-design {
@@ -103,6 +108,11 @@ export default {
 		padding: 0px 50px;
 		position: relative;
 		z-index: 1;
+		& + .node-wrap {
+			.node-wrap-box.end-node:before {
+				content: '';
+			}
+		}
 	}
 	.node-wrap-box {
 		display: inline-flex;
@@ -115,7 +125,37 @@ export default {
 		border-radius: 4px;
 		cursor: pointer;
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
-		&.start-node {
+		&--disabled {
+			cursor: default;
+			/*.content {
+        color: var(--el-text-color-disabled);
+      }*/
+			.title_label {
+				&:hover {
+					text-decoration-line: none !important;
+				}
+			}
+		}
+		// 已执行
+		&--success {
+			.title {
+				background: var(--el-color-success) !important;
+			}
+		}
+		// 执行中
+		&--error {
+			.title {
+				background: var(--el-color-error) !important;
+			}
+		}
+		// 未执行
+		&--info {
+			.title {
+				background: var(--el-color-info) !important;
+			}
+		}
+		&.start-node,
+		&.end-node {
 			.title_label {
 				&:hover {
 					text-decoration-line: none;
@@ -135,7 +175,8 @@ export default {
 		border-color: rgb(202, 202, 202) transparent transparent;
 		background: #f6f8f9;
 	}
-	.node-wrap-box.start-node:before {
+	.node-wrap-box.start-node:before,
+	.node-wrap-box.end-node:before {
 		content: none;
 	}
 	.node-wrap-box .title {
@@ -226,6 +267,64 @@ export default {
 	.branch-wrap {
 		display: inline-flex;
 		width: 100%;
+		&--disabled {
+			.branch-box {
+				margin-top: 0;
+			}
+			.add-branch {
+				display: none;
+			}
+			.auto-judge {
+				cursor: default;
+				&:hover {
+					.close {
+						display: none;
+					}
+					.priority-title {
+						display: block;
+						//display: none;
+					}
+					&:after {
+						border: unset;
+						box-shadow: unset;
+					}
+					.sort-left {
+						display: none;
+					}
+					.sort-right {
+						display: none;
+					}
+				}
+			}
+		}
+
+		// 已执行
+		&--success {
+			.auto-judge:after {
+				border: 1px solid var(--el-color-success) !important;
+			}
+			//.title {
+			//  //background: var(--el-color-success) !important;
+			//}
+		}
+		// 执行中
+		&--error {
+			.auto-judge:after {
+				border: 1px solid var(--el-color-error) !important;
+			}
+			/*      .title {
+        background: var(--el-color-error) !important;
+      }*/
+		}
+		// 未执行
+		&--info {
+			.auto-judge:after {
+				border: 1px solid var(--el-color-info) !important;
+			}
+			/*.title {
+        background: var(--el-color-info) !important;
+      }*/
+		}
 	}
 	.branch-box-wrap {
 		display: flex;
@@ -240,7 +339,7 @@ export default {
 		flex-direction: column;
 		align-items: center;
 		position: relative;
-		background: #f6f8f9;
+		//background: #f6f8f9;
 	}
 	.branch-box {
 		display: flex;
@@ -313,13 +412,14 @@ export default {
 		border-style: solid;
 		border-width: 8px 6px 4px;
 		border-color: rgb(202, 202, 202) transparent transparent;
-		background: rgb(245, 245, 247);
+		//background: rgb(245, 245, 247);
+		background: #f6f8f9;
 	}
 	.auto-judge .title {
 		line-height: 16px;
 	}
 	.auto-judge .title .node-title {
-		color: #15bc83;
+		color: var(--el-color-success);
 		&.last-child-title {
 			color: #999;
 		}
@@ -388,12 +488,13 @@ export default {
 		right: -1px;
 	}
 	.end-node {
-		border-radius: 50%;
-		font-size: 14px;
-		color: rgba(25, 31, 37, 0.4);
-		text-align: left;
+		//border-radius: 50%;
+		//font-size: 14px;
+		//color: rgba(25, 31, 37, 0.4);
+		color: var(--el-text-color-disabled);
+		//text-align: left;
 	}
-	.end-node-circle {
+	/*.end-node-circle {
 		width: 10px;
 		height: 10px;
 		margin: auto;
@@ -403,7 +504,7 @@ export default {
 	.end-node-text {
 		margin-top: 5px;
 		text-align: center;
-	}
+	}*/
 	.auto-judge:hover {
 		.sort-left {
 			display: flex;
@@ -451,8 +552,8 @@ export default {
 		transition: all 0.1s;
 	}
 	.auto-judge:hover:after {
-		border: 1px solid #3296fa;
-		box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+		border: 1px solid var(--el-color-primary);
+		box-shadow: 0 0 6px 0 var(--el-color-primary-light-5);
 	}
 	.node-wrap-box:after {
 		pointer-events: none;
@@ -466,9 +567,9 @@ export default {
 		border-radius: 4px;
 		transition: all 0.1s;
 	}
-	.node-wrap-box:hover:after {
-		border: 1px solid #3296fa;
-		box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+	.node-wrap-box:not(.node-wrap-box--disabled):hover:after {
+		border: 1px solid var(--el-color-primary);
+		box-shadow: 0 0 6px 0 var(--el-color-primary-light-5);
 	}
 }
 
@@ -522,13 +623,17 @@ export default {
 }
 
 .dark .sc-workflow-design {
+	.box-scale {
+		background: var(--el-bg-color);
+	}
+	/*.col-box {
+    background: var(--el-bg-color);
+  }*/
 	.node-wrap-box,
 	.auto-judge {
 		background: #2b2b2b;
 	}
-	.col-box {
-		background: var(--el-bg-color);
-	}
+
 	.top-left-cover-line,
 	.top-right-cover-line,
 	.bottom-left-cover-line,

src/components/scWorkflow/nodeWrap.vue

@@ -1,17 +1,17 @@
 <template>
-	<promoter v-if="nodeConfig.type == 0" v-model="nodeConfig"></promoter>
+	<promoter v-if="nodeConfig.type == 0" v-model="nodeConfig" :disabled="disabled"></promoter>
 
-	<approver v-if="nodeConfig.type == 1" v-model="nodeConfig"></approver>
+	<approver v-if="nodeConfig.type == 1" v-model="nodeConfig" :disabled="disabled"></approver>
 
-	<send v-if="nodeConfig.type == 2" v-model="nodeConfig"></send>
+	<send v-if="nodeConfig.type == 2" v-model="nodeConfig" :disabled="disabled"></send>
 
-	<branch v-if="nodeConfig.type == 4" v-model="nodeConfig">
+	<branch v-if="nodeConfig.type == 4" v-model="nodeConfig" :disabled="disabled">
 		<template #default="slot">
-			<node-wrap v-if="slot.node" v-model="slot.node.childNode"></node-wrap>
+			<node-wrap v-if="slot.node" v-model="slot.node.childNode" :disabled="disabled"></node-wrap>
 		</template>
 	</branch>
 
-	<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode"></node-wrap>
+	<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode" :disabled="disabled"></node-wrap>
 </template>
 
 <script>
@@ -28,7 +28,11 @@ export default {
 		send
 	},
 	props: {
-		modelValue: { type: Object, default: () => {} }
+		modelValue: { type: Object, default: () => {} },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data() {
 		return {

src/components/scWorkflow/nodes/addNode.vue

@@ -3,20 +3,20 @@
 		<div class="add-node-btn">
 			<el-popover placement="right-start" :width="270" trigger="click" :hide-after="0" :show-after="0">
 				<template #reference>
-					<el-button type="primary" icon="plus" circle></el-button>
+					<el-button v-if="!disabled" type="primary" icon="plus" circle></el-button>
 				</template>
 				<div class="add-node-popover-body">
 					<ul>
 						<li>
-							<el-icon style="color: #ff943e" @click="addType(1)"><user-filled /></el-icon>
+							<el-icon style="color: var(--el-color-warning)" @click="addType(1)"><user-filled /></el-icon>
 							<p>审批节点</p>
 						</li>
 						<li>
-							<el-icon style="color: #3296fa" @click="addType(2)"><promotion /></el-icon>
+							<el-icon style="color: var(--el-color-primary)" @click="addType(2)"><promotion /></el-icon>
 							<p>抄送节点</p>
 						</li>
 						<li>
-							<el-icon style="color: #15bc83" @click="addType(4)"><share /></el-icon>
+							<el-icon style="color: var(--el-color-success)" @click="addType(4)"><share /></el-icon>
 							<p>条件分支</p>
 						</li>
 					</ul>
@@ -29,7 +29,11 @@
 <script>
 export default {
 	props: {
-		modelValue: { type: Object, default: () => {} }
+		modelValue: { type: Object, default: () => {} },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data() {
 		return {}

src/components/scWorkflow/nodes/send.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="node-wrap">
-		<div class="node-wrap-box">
+		<div class="node-wrap-box" :class="{ 'node-wrap-box--disabled': disabled }">
 			<div class="title" style="background: var(--el-color-primary)">
 				<el-icon class="icon"><promotion /></el-icon>
 				<span v-show="!isEditTitle" class="title_label" @click="editTitle('box_nodeTitle')"
-					>{{ nodeConfig.nodeName }}<el-icon class="edit-icon"><edit /></el-icon
+					>{{ nodeConfig.nodeName }}<el-icon v-if="!disabled" class="edit-icon"><edit /></el-icon
 				></span>
 				<el-input
 					v-show="isEditTitle"
@@ -15,14 +15,14 @@
 					@blur="saveTitle"
 					@keyup.enter="saveTitle"
 				></el-input>
-				<el-icon class="close" @click.stop="delNode()"><close /></el-icon>
+				<el-icon v-if="!disabled" class="close" @click.stop="delNode()"><close /></el-icon>
 			</div>
 			<div class="content" @click="show">
 				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
 				<span v-else class="placeholder">请选择人员</span>
 			</div>
 		</div>
-		<add-node v-model="nodeConfig.childNode"></add-node>
+		<add-node v-model="nodeConfig.childNode" :disabled="disabled"></add-node>
 		<el-drawer v-model="drawer" title="抄送人设置" destroy-on-close append-to-body :size="500" class="aDrawer">
 			<template #header>
 				<div class="node-wrap-drawer__title">
@@ -64,7 +64,11 @@ export default {
 	},
 	inject: ['select'],
 	props: {
-		modelValue: { type: Object, default: () => {} }
+		modelValue: { type: Object, default: () => {} },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
 	},
 	data() {
 		return {
@@ -84,11 +88,13 @@ export default {
 	},
 	methods: {
 		show() {
+			if (this.disabled) return
 			this.form = {}
 			this.form = JSON.parse(JSON.stringify(this.nodeConfig))
 			this.drawer = true
 		},
 		editTitle(refName) {
+			if (this.disabled) return
 			this.isEditTitle = true
 			this.$nextTick(() => {
 				if (this.$refs[refName]) {