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-start">
                <el-button :icon="Setting" @click="drawerVisibile=true">
                    全局配置
                    <!-- <template #icon>
                        <Setting />
                    </template> -->
                </el-button>
            </el-tooltip>
        </div>
        <div class="box-scale">
			<!-- 展示流程图组件 -->
			<!-- {{ childNode }}{{ modelValue }}444{{ childRecordData }}
			节点111{{ childNode }} -->
			<!-- {{ childRecordData }} -->
    		<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"
			/>
			<!-- <nodeWrap v-if="childNode" v-model="childNode.childNode" :currentActivityId="currentActivityId" /> -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">流程结束111</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>
    <!-- 全局属性抽屉组件 -->
    <drawerTabs v-if="drawerVisibile" v-model="drawerVisibile" @updateDrawer="updateDrawer"></drawerTabs>
</template>

<script>
import nodeWrap from './nodeWrap.vue'
import { Warning, Setting, Plus } from '@element-plus/icons-vue'
import process from './process.vue'
import drawerTabs from './components/drawerTabs.vue'
export default {
    computed: {
        Plus() {
            return Plus
        },
		Setting(){
			return Setting
		},
		Setting(){
			return Warning
		}
    },
    components: {
        nodeWrap,
        Warning,
        Setting,
        process,
        drawerTabs
    },
    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 {
            drawerVisibile: false,
            childNode: this.modelValue,
            childFormFieldListValue: this.formFieldListValue,
            childRecordData: this.recordData
        }
    },
	mounted(){

	console.log(this);
	},
    watch: {
        modelValue(val) {
			console.log(val,"9999999");
            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
            }
        },
		updateDrawer(){
			this.drawerVisibile=false;
		}
    }
}
</script>

<style lang="less">
@import './flowIndex.less';
.box-scale{
    width: 100%;
    height: calc(100vh - 150px);
    overflow-y: auto;
}
</style>