feat: 流程设置 放大缩小

src/views/flow/create/components/FlowDesign.vue

@@ -1,5 +1,5 @@
 <script setup name="FlowDesign">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, reactive } from 'vue'
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
 import { storeToRefs } from 'pinia'
@@ -24,6 +24,21 @@ let form = ref({
 	}
 })
 
+// 配置相关
+const zoom = ref(1)
+const marks = reactive({
+	1: 'min',
+	1.1: '1.1',
+	1.2: '1.2',
+	1.3: '1.3',
+	1.4: '1.4',
+	1.5: 'max'
+})
+
+const drawer = ref(false)
+
+// 配置相关
+
 // 接口保存审批流程
 const saveDesign = json => {
 	modelContent.value = JSON.stringify(form.value.processConfig)
@@ -54,5 +69,53 @@ defineExpose({
 </script>
 
 <template>
-	<ScWorkflow v-model="form.processConfig"></ScWorkflow>
+	<el-affix :offset="16" style="height: 74px; width: 100%">
+		<div class="btn-container">
+<!--			<el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>-->
+			<div class="slider">
+				<el-button type="primary" icon="minus" style="margin-right: 16px; width: 32px" @click="zoom -= 0.1" />
+				<el-slider v-model="zoom" :marks="marks" :min="1" :max="1.5" :step="0.1" height="200px" />
+				<el-button type="primary" icon="plus" style="margin-left: 16px; width: 32px" @click="zoom += 0.1" />
+			</div>
+		</div>
+	</el-affix>
+	<div class="affix-container" :style="`transform: scale(${zoom})`" style="transform-origin: 0 0">
+		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
+	</div>
+
+<!--	<el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">-->
+<!--		<div style="height: 100vh">-->
+<!--			<div style="padding: 1px; background-color: #3883fa">-->
+<!--				<el-button type="primary" plain @click="copyParseJson"> 复制格式化后的 JSON </el-button>-->
+<!--				<el-button type="primary" plain @click="copyJson"> 复制压缩后的 JSON </el-button>-->
+<!--				<el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>-->
+<!--			</div>-->
+<!--			<json-editor-vue v-model="data" class="editor" language="zh-CN" current-mode="view" />-->
+<!--		</div>-->
+<!--	</el-drawer>-->
 </template>
+
+<style>
+.flow-design-container {
+	width: 100%;
+	height: 100%;
+	background-color: #f6f8f9;
+}
+.affix-container {
+	display: flex;
+	justify-content: center;
+	flex-direction: row-reverse;
+}
+
+.btn-container {
+	display: flex;
+	height: 42px;
+	margin-left: 16px;
+}
+
+.slider {
+	margin-left: 16px;
+	width: 300px;
+	display: flex;
+}
+</style>