引用抽屉组件

src/components/XnWorkflow/index.vue

@@ -7,133 +7,134 @@
  * @LastEditTime: 2022年2月9日16:48:49
 -->
 <template>
-	<div class="workflow-design">
+    <div class="workflow-design">
-		<!-- 配置流程全局属性 -->
+        <!-- 配置流程全局属性 -->
-		<div style="float: right; padding-right: 10px">
+        <div style="float: right; padding-right: 10px">
-			<span v-if="!toDataLegal(childNode)" style="padding-right: 5px">
+            <span v-if="!toDataLegal(childNode)" style="padding-right: 5px">
-<!--				<exclamation-circle-outlined style="color: red; font-size: 18px" />-->
+                <!--				<exclamation-circle-outlined style="color: red; font-size: 18px" />-->
-<!--                <Warning style="color: red; font-size: 18px"/>-->
+                <!--                <Warning style="color: red; font-size: 18px"/>-->
-			</span>
+            </span>
-<!--			<el-tooltip>-->
+            <!--			<el-tooltip>-->
-<!--				<template #title></template>-->
+            <!--				<template #title></template>-->
-<!--				<el-button @click="$refs.process.showDrawer()">-->
+            <!--				<el-button @click="$refs.process.showDrawer()">-->
-<!--					<template #icon>-->
+            <!--					<template #icon>-->
-<!--&lt;!&ndash;						<setting-outlined />&ndash;&gt;-->
+            <!--&lt;!&ndash;						<setting-outlined />&ndash;&gt;-->
-<!--                        <Setting />-->
+            <!--                        <Setting />-->
-<!--					</template>-->
+            <!--					</template>-->
-<!--					-->
+            <!--					-->
-<!--				</el-button>-->
+            <!--				</el-button>-->
-<!--			</el-tooltip>-->
+            <!--			</el-tooltip>-->
 
-            <el-tooltip
+            <el-tooltip class="box-item" effect="dark" content="配置流程全局属性" placement="top">
-                class="box-item"
+                <el-button :icon="Setting" @click="drawerVisibile=true">
-                effect="dark"
-                content="配置流程全局属性"
-                placement="top"
-            >
-                <el-button :icon='Setting'>
                     全局配置
                     <template #icon>
                         <Setting />
                     </template>
                 </el-button>
             </el-tooltip>
-
+        </div>
-		</div>
+        <div class="box-scale">
-		<div class="box-scale">
+            <node-wrap
-			<node-wrap
+                v-if="childNode"
-				v-if="childNode"
+                v-model="childNode.childNode"
-				v-model="childNode.childNode"
+                :form-field-list-value="childFormFieldListValue"
-				:form-field-list-value="childFormFieldListValue"
+                :record-data="childRecordData"
-				:record-data="childRecordData"
+                :process-config-info="childNode.properties.configInfo"
-				:process-config-info="childNode.properties.configInfo"
+                :execution-listener-array="executionListenerArray"
-				:execution-listener-array="executionListenerArray"
+                :task-listener-array="taskListenerArray"
-				:task-listener-array="taskListenerArray"
+                :selector-api-function="selectorApiFunction"
-				:selector-api-function="selectorApiFunction"
+            />
-			/>
+            <div class="end-node">
-			<div class="end-node">
+                <div class="end-node-circle"></div>
-				<div class="end-node-circle"></div>
+                <div class="end-node-text">流程结束</div>
-				<div class="end-node-text">流程结束</div>
+            </div>
-			</div>
+        </div>
-		</div>
+        <process
-		<process
+            ref="process"
-			ref="process"
+            v-model="childNode"
-			v-model="childNode"
+            :form-field-list-value="childFormFieldListValue"
-			:form-field-list-value="childFormFieldListValue"
+            :record-data="childRecordData"
-			:record-data="childRecordData"
+            :sn-template-array="snTemplateArray"
-			:sn-template-array="snTemplateArray"
+            :print-template-array="printTemplateArray"
-			:print-template-array="printTemplateArray"
+            :execution-listener-array="executionListenerArray"
-			:execution-listener-array="executionListenerArray"
+            :execution-listener-selector-for-custom-event-array="executionListenerSelectorForCustomEventArray"
-			:execution-listener-selector-for-custom-event-array="executionListenerSelectorForCustomEventArray"
+            :task-listener-array="taskListenerArray"
-			:task-listener-array="taskListenerArray"
+            :selector-api-function="selectorApiFunction"
-			:selector-api-function="selectorApiFunction"
+        />
-		/>
+    </div>
-	</div>
+    <!-- 全局属性抽屉组件 -->
+    <drawerTabs v-if="drawerVisibile" v-model="drawerVisibile" @updateDrawer="updateDrawer"></drawerTabs>
 </template>
 
 <script>
-	import nodeWrap from './nodeWrap.vue'
+import nodeWrap from './nodeWrap.vue'
-    import { Warning, Setting, Plus } from '@element-plus/icons-vue'
+import { Warning, Setting, Plus } from '@element-plus/icons-vue'
-	import process from './process.vue'
+import process from './process.vue'
-
+import drawerTabs from './components/drawerTabs.vue'
-	export default {
+export default {
-        computed: {
+    computed: {
-            Plus() {
+        Plus() {
-                return Plus
+            return Plus
+        }
+    },
+    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
+        }
+    },
+    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
             }
         },
-		components: {
+		updateDrawer(){
-			nodeWrap,
+			this.drawerVisibile=false;
-            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';
+@import './flowIndex.less';
 </style>