feat: 流程编辑器新增放大缩小功能

src/components/scWorkflow/index.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="sc-workflow-design">
-		<div class="box-scale">
+		<div class="zoom-scale">
+			<el-button circle icon="plus" :disabled="zoom >= 150" @click="onZoom(1)" />
+			<span>{{ zoom }}%</span>
+			<el-button circle icon="minus" :disabled="zoom <= 40" @click="onZoom(-1)" />
+		</div>
+		<div class="box-scale" :style="`transform: scale(${zoom / 100})`">
 			<node-wrap v-if="nodeConfig" v-model="nodeConfig" :disabled="disabled"></node-wrap>
 			<div class="node-wrap">
 				<div class="node-wrap-box node-wrap-box--disabled end-node" :class="[`node-wrap-box--${nodeConfig.lastNode_local_status}`]">
@@ -47,6 +52,7 @@ export default {
 	},
 	data() {
 		return {
+			zoom: 100,
 			nodeConfig: this.modelValue,
 			selectVisible: false,
 			activeSelected: [] /*,
@@ -77,6 +83,14 @@ export default {
 			this.$nextTick(() => {
 				this.$refs.useselect.open(type, data)
 			})
+		},
+		onZoom(n) {
+			this.zoom += 10 * n
+			if (this.zoom <= 40) {
+				this.zoom = 40
+			} else if (this.zoom >= 150) {
+				this.zoom = 150
+			}
 		}
 	}
 }
@@ -85,7 +99,26 @@ export default {
 <style lang="scss">
 .sc-workflow-design {
 	height: 100%;
+	background: #f6f8f9;
 	//width: 100%;
+
+	.box-scale {
+		transform-origin: 50% 0px 0px;
+	}
+
+	.zoom-scale {
+		z-index: 999;
+		position: fixed;
+		top: 178px;
+		right: 40px;
+
+		span {
+			margin: 0 10px;
+			font-size: 15px;
+			color: #7a7a7a;
+			width: 50px;
+		}
+	}
 }
 .sc-workflow-design .box-scale {
 	display: inline-block;