Skip to content

Commit 6b037de

Browse files
shaohuzhang1shaohuzhang1
committed
feat: Init create trigger ui
1 parent ca3ef91 commit 6b037de

4 files changed

Lines changed: 906 additions & 9 deletions

File tree

‎ui/src/views/trigger/component/ApplicationParameter.vue‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
<template>
2+
<el-form
3+
@submit.prevent
4+
:model="modelValue"
5+
label-position="top"
6+
require-asterisk-position="right"
7+
label-width="auto"
8+
hide-required-asterisk
9+
ref="applicationParameterFormRef"
10+
>
11+
<template v-for="(f, index) in base_field_list" :key="f.field">
12+
<el-form-item
13+
v-if="modelValue[f.field]"
14+
:label="$t('workflow.nodes.startNode.question')"
15+
:prop="`${f.field}.value`"
16+
:rules="{
17+
message: `${f.label.value}为必填参数`,
18+
trigger: 'blur',
19+
required: f.required,
20+
}"
21+
>
22+
<template #label>
23+
<div class="flex-between">
24+
<div>
25+
{{ f.label.value }}
26+
<span class="color-danger" v-if="f.required">*</span>
27+
</div>
28+
<el-select
29+
:teleported="false"
30+
v-if="modelValue[f.field]"
31+
v-model="modelValue[f.field].source"
32+
size="small"
33+
style="width: 85px"
34+
>
35+
<el-option label="引用" value="reference" />
36+
<el-option :label="$t('common.custom')" value="custom" />
37+
</el-select>
38+
</div>
39+
</template>
40+
41+
<el-cascader
42+
v-if="modelValue[f.field].source === 'reference'"
43+
v-model="modelValue[f.field].value"
44+
:options="options"
45+
:placeholder="$t('views.tool.form.param.selectPlaceholder')"
46+
:props="props"
47+
/>
48+
<el-input
49+
v-else
50+
v-model="modelValue[f.field].value"
51+
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
52+
/>
53+
</el-form-item>
54+
</template>
55+
<template v-for="(f, index) in user_input_field_list" :key="f.field">
56+
<el-form-item
57+
v-if="modelValue['user_input_field_list'] && modelValue['user_input_field_list'][f.field]"
58+
:label="$t('workflow.nodes.startNode.question')"
59+
:prop="`user_input_field_list.${f.field}.value`"
60+
:rules="{
61+
message: `${f.label.value}为必填参数`,
62+
trigger: 'blur',
63+
required: f.required,
64+
}"
65+
>
66+
<template #label>
67+
<div class="flex-between">
68+
<div>
69+
{{ f.label.value }}
70+
<span class="color-danger" v-if="f.required">*</span>
71+
</div>
72+
<el-select
73+
:teleported="false"
74+
v-if="modelValue['user_input_field_list'][f.field]"
75+
v-model="modelValue['user_input_field_list'][f.field].source"
76+
size="small"
77+
style="width: 85px"
78+
>
79+
<el-option label="引用" value="reference" />
80+
<el-option :label="$t('common.custom')" value="custom" />
81+
</el-select>
82+
</div>
83+
</template>
84+
85+
<el-cascader
86+
v-if="modelValue['user_input_field_list'][f.field].source === 'reference'"
87+
v-model="modelValue[f.field].value"
88+
:options="options"
89+
:placeholder="$t('views.tool.form.param.selectPlaceholder')"
90+
:props="props"
91+
/>
92+
<el-input
93+
v-else
94+
v-model="modelValue['user_input_field_list'][f.field].value"
95+
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
96+
/>
97+
</el-form-item>
98+
</template>
99+
<template v-for="(f, index) in api_input_field_list" :key="f.field">
100+
<el-form-item
101+
v-if="modelValue['api_input_field_list'] && modelValue['api_input_field_list'][f.field]"
102+
:label="$t('workflow.nodes.startNode.question')"
103+
:prop="`api_input_field_list.${f.field}.value`"
104+
:rules="{
105+
message: `${f.label.value}为必填参数`,
106+
trigger: 'blur',
107+
required: f.required,
108+
}"
109+
>
110+
<template #label>
111+
<div class="flex-between">
112+
<div>
113+
{{ f.label.value }}
114+
<span class="color-danger" v-if="f.required">*</span>
115+
</div>
116+
<el-select
117+
:teleported="false"
118+
v-if="modelValue['api_input_field_list'][f.field]"
119+
v-model="modelValue['api_input_field_list'][f.field].source"
120+
size="small"
121+
style="width: 85px"
122+
>
123+
<el-option label="引用" value="reference" />
124+
<el-option :label="$t('common.custom')" value="custom" />
125+
</el-select>
126+
</div>
127+
</template>
128+
129+
<el-cascader
130+
v-if="modelValue['api_input_field_list'][f.field].source === 'reference'"
131+
v-model="modelValue[f.field].value"
132+
:options="options"
133+
:placeholder="$t('views.tool.form.param.selectPlaceholder')"
134+
:props="props"
135+
/>
136+
<el-input
137+
v-else
138+
v-model="modelValue['api_input_field_list'][f.field].value"
139+
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
140+
/>
141+
</el-form-item>
142+
</template>
143+
</el-form>
144+
</template>
145+
<script setup lang="ts">
146+
import { computed, ref } from 'vue'
147+
import { FormInstance } from 'element-plus'
148+
const applicationParameterFormRef = ref<FormInstance>()
149+
const props = defineProps<{ application?: any; modelValue: any; trigger: any }>()
150+
const emit = defineEmits(['update:modelValue'])
151+
152+
const options = computed(() => {
153+
if (props.trigger.trigger_type === 'EVENT') {
154+
const body = props.trigger.trigger_setting.body
155+
if (body) {
156+
return [
157+
{
158+
label: 'body',
159+
value: 'body',
160+
children: body.map((item: any) => ({ label: item.field, value: item.field })),
161+
},
162+
]
163+
}
164+
return []
165+
} else {
166+
}
167+
return []
168+
})
169+
170+
const base_node = computed(() => {
171+
return props.application?.work_flow.nodes.find((n: any) => n.type === 'base-node')
172+
})
173+
const api_input_field_list = computed(() => {
174+
const result: Array<any> = []
175+
if (base_node.value && base_node.value.properties.api_input_field_list) {
176+
base_node.value.properties.api_input_field_list.forEach((item: any) => {
177+
result.push({
178+
field: item.variable,
179+
required: item.is_required,
180+
label: { value: item.variable },
181+
})
182+
})
183+
}
184+
return result
185+
})
186+
const user_input_field_list = computed(() => {
187+
const result: Array<any> = []
188+
if (base_node.value && base_node.value.properties.user_input_field_list) {
189+
base_node.value.properties.user_input_field_list.forEach((item: any) => {
190+
result.push({
191+
field: item.field,
192+
required: item.required,
193+
label:
194+
typeof item.label == 'string'
195+
? { value: item.label }
196+
: { ...item.label, value: item.label.label },
197+
})
198+
})
199+
}
200+
return result
201+
})
202+
const base_field_list = computed<Array<any>>(() => {
203+
const result: Array<any> = [
204+
{ field: 'question', required: true, default_value: '', label: { value: 'Question' } },
205+
]
206+
if (base_node.value) {
207+
if (base_node.value.properties.node_data.file_upload_enable) {
208+
if (base_node.value.properties.node_data.file_upload_setting.document) {
209+
result.push({
210+
field: 'document',
211+
required: true,
212+
default_value: '[]',
213+
label: { value: '文档' },
214+
})
215+
}
216+
if (base_node.value.properties.node_data.file_upload_setting.image) {
217+
result.push({
218+
field: 'image',
219+
required: true,
220+
default_value: '[]',
221+
label: { value: '图片' },
222+
})
223+
}
224+
if (base_node.value.properties.node_data.file_upload_setting.audio) {
225+
result.push({
226+
field: 'audio',
227+
required: true,
228+
default_value: '[]',
229+
label: { value: '音频' },
230+
})
231+
}
232+
if (base_node.value.properties.node_data.file_upload_setting.video) {
233+
result.push({
234+
field: 'video',
235+
required: true,
236+
default_value: '[]',
237+
label: { value: '视频' },
238+
})
239+
}
240+
241+
if (base_node.value.properties.node_data.file_upload_setting.other) {
242+
result.push({
243+
field: 'other',
244+
required: true,
245+
default_value: '[]',
246+
label: { value: '其他' },
247+
})
248+
}
249+
}
250+
}
251+
return result
252+
})
253+
const init_parameters = () => {
254+
const parameter: any = {}
255+
base_field_list.value.forEach((f) => {
256+
parameter[f.field] = { source: 'custom', value: f.default_value }
257+
})
258+
api_input_field_list.value.forEach((f) => {
259+
if (!parameter.api_input_field_list) {
260+
parameter['api_input_field_list'] = {}
261+
}
262+
parameter['api_input_field_list'][f.field] = {
263+
source: 'custom',
264+
value: f.default_value ? f.default_value : '',
265+
}
266+
})
267+
user_input_field_list.value.forEach((f) => {
268+
if (!parameter['user_input_field_list']) {
269+
parameter['user_input_field_list'] = {}
270+
}
271+
parameter['user_input_field_list'][f.field] = {
272+
source: 'custom',
273+
value: f.default_value ? f.default_value : '',
274+
}
275+
})
276+
emit('update:modelValue', { ...parameter, ...props.modelValue })
277+
}
278+
279+
init_parameters()
280+
const validate = () => {
281+
return applicationParameterFormRef.value?.validate()
282+
}
283+
defineExpose({ validate })
284+
</script>
285+
<style lang=""></style>

‎ui/src/views/trigger/component/ToolParameter.vue‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<el-form
3+
@submit.prevent
4+
:model="modelValue"
5+
label-position="top"
6+
require-asterisk-position="right"
7+
label-width="auto"
8+
hide-required-asterisk
9+
ref="toolParameterFormRef"
10+
>
11+
<template v-for="(f, index) in input_field_list" :key="f.field">
12+
<el-form-item
13+
v-if="modelValue[f.field]"
14+
:label="$t('workflow.nodes.startNode.question')"
15+
:prop="`${f.field}.value`"
16+
:rules="{
17+
message: `${f.label.value}为必填参数`,
18+
trigger: 'blur',
19+
required: f.required,
20+
}"
21+
>
22+
<template #label>
23+
<div class="flex-between">
24+
<div>
25+
{{ f.label.value }}
26+
<span class="color-danger" v-if="f.required">*</span>
27+
</div>
28+
<el-select
29+
:teleported="false"
30+
v-if="modelValue[f.field]"
31+
v-model="modelValue[f.field].source"
32+
size="small"
33+
style="width: 85px"
34+
>
35+
<el-option label="引用" value="reference" />
36+
<el-option :label="$t('common.custom')" value="custom" />
37+
</el-select>
38+
</div>
39+
</template>
40+
41+
<el-cascader
42+
v-if="modelValue[f.field].source === 'reference'"
43+
v-model="modelValue[f.field].value"
44+
:options="options"
45+
:placeholder="$t('views.tool.form.param.selectPlaceholder')"
46+
:props="props"
47+
/>
48+
<el-input
49+
v-else
50+
v-model="modelValue[f.field].value"
51+
:placeholder="$t('views.tool.form.param.inputPlaceholder')"
52+
/>
53+
</el-form-item>
54+
</template>
55+
</el-form>
56+
</template>
57+
<script setup lang="ts">
58+
import { computed, ref } from 'vue'
59+
import { FormInstance } from 'element-plus'
60+
const toolParameterFormRef = ref<FormInstance>()
61+
const props = defineProps<{ tool?: any; modelValue: any; trigger: any }>()
62+
const emit = defineEmits(['update:modelValue'])
63+
64+
const options = computed(() => {
65+
if (props.trigger.trigger_type === 'EVENT') {
66+
const body = props.trigger.trigger_setting.body
67+
if (body) {
68+
return [
69+
{
70+
label: 'body',
71+
value: 'body',
72+
children: body.map((item: any) => ({ label: item.field, value: item.field })),
73+
},
74+
]
75+
}
76+
return []
77+
} else {
78+
}
79+
return []
80+
})
81+
82+
const input_field_list = computed(() => {
83+
const result: Array<any> = []
84+
if (props.tool && props.tool.input_field_list) {
85+
props.tool.input_field_list.forEach((item: any) => {
86+
result.push({
87+
field: item.name,
88+
required: item.is_required,
89+
label: { value: item.name },
90+
})
91+
})
92+
}
93+
return result
94+
})
95+
96+
const init_parameters = () => {
97+
const parameter: any = {}
98+
input_field_list.value.forEach((f) => {
99+
parameter[f.field] = { source: 'custom', value: f.default_value }
100+
})
101+
emit('update:modelValue', { ...parameter, ...props.modelValue })
102+
}
103+
104+
init_parameters()
105+
const validate = () => {
106+
return toolParameterFormRef.value?.validate()
107+
}
108+
defineExpose({ validate })
109+
</script>
110+
<style lang="scss"></style>

0 commit comments

Comments
 (0)