admin-sjzx/src/components/XnWorkflow/index.vue

<!--
 * @Descripttion: 仿钉钉流程设计器
 * @version: 1.2
 * @Author: sakuya
 * @Date: 2021年9月14日08:38:35
 * @LastEditors: yubaoshan
 * @LastEditTime: 2022年2月9日16:48:49
-->
<template>
	<div class="workflow-design">
		<!-- 配置流程全局属性 -->
		<div style="float: right; padding-right: 10px">
			<span v-if="!toDataLegal(childNode)" style="padding-right: 5px">
<!--				<exclamation-circle-outlined style="color: red; font-size: 18px" />-->
<!--                <Warning style="color: red; font-size: 18px"/>-->
			</span>
<!--			<el-tooltip>-->
<!--				<template #title></template>-->
<!--				<el-button @click="$refs.process.showDrawer()">-->
<!--					<template #icon>-->
<!--&lt;!&ndash;						<setting-outlined />&ndash;&gt;-->
<!--                        <Setting />-->
<!--					</template>-->
<!--					-->
<!--				</el-button>-->
<!--			</el-tooltip>-->

            <el-tooltip
                class="box-item"
                effect="dark"
                content="配置流程全局属性"
                placement="top"
            >
                <el-button :icon='Setting'>
                    全局配置
                    <template #icon>
                        <Setting />
                    </template>
                </el-button>
            </el-tooltip>

		</div>
		<div class="box-scale">
			<node-wrap
				v-if="childNode"
				v-model="childNode.childNode"
				:form-field-list-value="childFormFieldListValue"
				:record-data="childRecordData"
				:process-config-info="childNode.properties.configInfo"
				:execution-listener-array="executionListenerArray"
				:task-listener-array="taskListenerArray"
				:selector-api-function="selectorApiFunction"
			/>
			<div class="end-node">
				<div class="end-node-circle"></div>
				<div class="end-node-text">流程结束</div>
			</div>
		</div>
		<process
			ref="process"
			v-model="childNode"
			:form-field-list-value="childFormFieldListValue"
			:record-data="childRecordData"
			:sn-template-array="snTemplateArray"
			:print-template-array="printTemplateArray"
			:execution-listener-array="executionListenerArray"
			:execution-listener-selector-for-custom-event-array="executionListenerSelectorForCustomEventArray"
			:task-listener-array="taskListenerArray"
			:selector-api-function="selectorApiFunction"
		/>
	</div>
</template>

<script>
	import nodeWrap from './nodeWrap.vue'
    import { Warning, Setting, Plus } from '@element-plus/icons-vue'
	import process from './process.vue'

	export default {
        computed: {
            Plus() {
                return Plus
            }
        },
		components: {
			nodeWrap,
            Warning,
            Setting,
			process
		},
		props: {
			modelValue: { type: Object, default: () => {} },
			formFieldListValue: { type: Array, default: () => [] },
			recordData: { type: Object, default: () => {} },
			snTemplateArray: { type: Array, default: () => [] },
			printTemplateArray: { type: Array, default: () => [] },
			executionListenerArray: { type: Array, default: () => [] },
			executionListenerSelectorForCustomEventArray: { type: Array, default: () => [] },
			listenerType: { type: String, default: () => 'default' },
			taskListenerArray: { type: Array, default: () => [] },
			selectorApiFunction: { type: Object, default: () => {} }
		},
		data() {
			return {
				childNode: this.modelValue,
				childFormFieldListValue: this.formFieldListValue,
				childRecordData: this.recordData
			}
		},
		watch: {
			modelValue(val) {
				this.childNode = val
			},
			// 监听字段列表传输的相关动静
			formFieldListValue(val) {
				this.childFormFieldListValue = val
			},
			recordData(val) {
				this.childRecordData = val
			},
			childNode(val) {
				this.$emit('update:modelValue', val)
			}
		},
		methods: {
			toDataLegal(childNode) {
				if (childNode === undefined) {
					return false
				} else {
					return childNode.dataLegal
				}
			}
		}
	}
</script>

<style lang="less">
	@import './flowIndex.less';
</style>