houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <div style="margin-top: 16px">
3     <el-form-item label="脚本格式">
4       <el-input
5         v-model="scriptTaskForm.scriptFormat"
6         clearable
7         @input="updateElementTask()"
8         @change="updateElementTask()"
9       />
10     </el-form-item>
11     <el-form-item label="脚本类型">
12       <el-select v-model="scriptTaskForm.scriptType">
13         <el-option label="内联脚本" value="inline" />
14         <el-option label="外部资源" value="external" />
15       </el-select>
16     </el-form-item>
17     <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
18       <el-input
19         v-model="scriptTaskForm.script"
20         type="textarea"
21         resize="vertical"
22         :autosize="{ minRows: 2, maxRows: 4 }"
23         clearable
24         @input="updateElementTask()"
25         @change="updateElementTask()"
26       />
27     </el-form-item>
28     <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
29       <el-input
30         v-model="scriptTaskForm.resource"
31         clearable
32         @input="updateElementTask()"
33         @change="updateElementTask()"
34       />
35     </el-form-item>
36     <el-form-item label="结果变量">
37       <el-input
38         v-model="scriptTaskForm.resultVariable"
39         clearable
40         @input="updateElementTask()"
41         @change="updateElementTask()"
42       />
43     </el-form-item>
44   </div>
45 </template>
46
47 <script lang="ts" setup>
48 defineOptions({ name: 'ScriptTask' })
49 const props = defineProps({
50   id: String,
51   type: String
52 })
53 const defaultTaskForm = ref({
54   scriptFormat: '',
55   script: '',
56   resource: '',
57   resultVariable: ''
58 })
59 const scriptTaskForm = ref<any>({})
60 const bpmnElement = ref()
61
62 const bpmnInstances = () => (window as any)?.bpmnInstances
63
64 const resetTaskForm = () => {
65   for (let key in defaultTaskForm.value) {
66     let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
67     scriptTaskForm.value[key] = value
68   }
69   scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
70 }
71 const updateElementTask = () => {
72   let taskAttr = Object.create(null)
73   taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
74   taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
75   if (scriptTaskForm.value.scriptType === 'inline') {
76     taskAttr.script = scriptTaskForm.value.script || null
77     taskAttr.resource = null
78   } else {
79     taskAttr.resource = scriptTaskForm.value.resource || null
80     taskAttr.script = null
81   }
82   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
83 }
84
85 onBeforeUnmount(() => {
86   bpmnElement.value = null
87 })
88
89 watch(
90   () => props.id,
91   () => {
92     bpmnElement.value = bpmnInstances().bpmnElement
93     nextTick(() => {
94       resetTaskForm()
95     })
96   },
97   { immediate: true }
98 )
99 </script>