ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/flow/flowcanvas.vue

<!--
@ 作者: 秦东
@ 时间: 2023-05-26 09:19:46
@ 备注: 
-->
<script lang='ts' setup>
import '@/styles/workflowcss/workflow.scss'

import { useStore } from '@/store/workflow/index' 

import { initializeWorkFlow,setWorkFlowData } from '@/api/workflowapi/index'

let { setTableId, setIsTried } = useStore()

let tipList = ref<any>([]);
let tipVisible = ref(false);
let nowVal = ref(100);	//缩放比例
let processConfig = ref<any>({});
let nodeConfig = ref({});
let workFlowDef = ref({});
let flowPermission = ref([]);
let directorMaxLevel = ref(0);

//首次加载页面
onMounted(async ()=>{
	let { data } = await initializeWorkFlow({name:""})
	// console.log("data",data)
	let {
		nodeConfig: nodes,
		flowPermission: flows,
		directorMaxLevel: directors,
		workFlowDef: works,
		tableId,
	} = data;
	nodeConfig.value = nodes;
	flowPermission.value = flows;
	directorMaxLevel.value = directors;
	workFlowDef.value = works;
	setTableId(tableId);
})
//错误提示
const reErr = ({ childNode }:any) => {
	if (childNode) {
		let { type, error, nodeName, conditionNodes } = childNode;
		if (type == 1 || type == 2 || type == 3) {
		if (error) {
			tipList.value.push({
			name: nodeName,
			type: ["", "审核人", "抄送人", "执行人"][type],
			});
		}
		reErr(childNode);
		} else if (type == 4) {
		reErr(childNode);
		} else if (type == 5) {
		reErr(childNode);
		for (var i = 0; i < conditionNodes.length; i++) {
			if (conditionNodes[i].error) {
			tipList.value.push({ name: conditionNodes[i].nodeName, type: "条件" });
			}
			reErr(conditionNodes[i]);
		}
		}
	} else {
		childNode = null;
	}
};
//保存
const saveSet = async () => {
	setIsTried(true);
	tipList.value = [];
	reErr(nodeConfig.value);
	if (tipList.value.length != 0) {
		tipVisible.value = true;
		return;
	}
	processConfig.value.flowPermission = flowPermission.value;
	// eslint-disable-next-line no-console
	// console.log(JSON.stringify(processConfig.value));
	let res = await setWorkFlowData(processConfig.value);
	if (res.code == 200) {
		ElMessage.success("设置成功")
		setTimeout(function () {
			window.location.href = "";
		}, 200);
	}
};
//缩放画布
const zoomSize = (type:number) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return;
    }
    nowVal.value -= 10;
  } else {
    if (nowVal.value == 300) {
      return;
    }
    nowVal.value += 10;
  }
};
</script>
<template>
	<div class="canvas_body">
		<div class="fd-nav-content-new">
			<!--画板-->
			<section class="dingflow-design">		
				<div class="zoom">
					<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
						<span>{{ nowVal }}%</span>
					<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
				</div>
				<div class="box-scale" :style="`transform: scale(${ nowVal / 100});`">
					<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
					<div class="end-node">
						<div class="end-node-circle"></div>
						<div class="end-node-text">流程结束</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.canvas_body{
	height: 100%;
    width: inherit;
}
</style>