mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
refactor: 高级应用区分用户输入和接口传入的参数
This commit is contained in:
parent
ad6d617caa
commit
fa17d96969
|
|
@ -264,7 +264,7 @@ class ApplicationSerializer(serializers.Serializer):
|
|||
if work_flow is not None:
|
||||
for node in work_flow.get('nodes', []):
|
||||
if node['id'] == 'base-node':
|
||||
input_field_list = node.get('properties', {}).get('input_field_list', [])
|
||||
input_field_list = node.get('properties', {}).get('api_input_field_list', node.get('properties', {}).get('input_field_list', []))
|
||||
if input_field_list is not None:
|
||||
for field in input_field_list:
|
||||
if field['assignment_method'] == 'api_input' and field['variable'] in params:
|
||||
|
|
|
|||
|
|
@ -364,8 +364,47 @@ function handleInputFieldList() {
|
|||
props.data.work_flow?.nodes
|
||||
?.filter((v: any) => v.id === 'base-node')
|
||||
.map((v: any) => {
|
||||
inputFieldList.value = v.properties.input_field_list
|
||||
? v.properties.input_field_list
|
||||
inputFieldList.value = v.properties.user_input_field_list
|
||||
? v.properties.user_input_field_list
|
||||
.map((v: any) => {
|
||||
switch (v.type) {
|
||||
case 'input':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'TextInput',
|
||||
label: v.name,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required
|
||||
}
|
||||
case 'select':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'SingleSelect',
|
||||
label: v.name,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required,
|
||||
option_list: v.optionList.map((o: any) => {
|
||||
return { key: o, value: o }
|
||||
})
|
||||
}
|
||||
case 'date':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'DatePicker',
|
||||
label: v.name,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required,
|
||||
attrs: {
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
'value-format': 'YYYY-MM-DD HH:mm:ss',
|
||||
type: 'datetime'
|
||||
}
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
: v.properties.input_field_list ? v.properties.input_field_list
|
||||
.filter((v: any) => v.assignment_method === 'user_input')
|
||||
.map((v: any) => {
|
||||
switch (v.type) {
|
||||
|
|
@ -405,9 +444,50 @@ function handleInputFieldList() {
|
|||
break
|
||||
}
|
||||
})
|
||||
: []
|
||||
apiInputFieldList.value = v.properties.input_field_list
|
||||
? v.properties.input_field_list
|
||||
: []
|
||||
|
||||
apiInputFieldList.value = v.properties.api_input_field_list
|
||||
? v.properties.api_input_field_list
|
||||
.map((v: any) => {
|
||||
switch (v.type) {
|
||||
case 'input':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'TextInput',
|
||||
label: v.variable,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required
|
||||
}
|
||||
case 'select':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'SingleSelect',
|
||||
label: v.variable,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required,
|
||||
option_list: v.optionList.map((o: any) => {
|
||||
return { key: o, value: o }
|
||||
})
|
||||
}
|
||||
case 'date':
|
||||
return {
|
||||
field: v.variable,
|
||||
input_type: 'DatePicker',
|
||||
label: v.variable,
|
||||
default_value: default_value[v.variable],
|
||||
required: v.is_required,
|
||||
attrs: {
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
'value-format': 'YYYY-MM-DD HH:mm:ss',
|
||||
type: 'datetime'
|
||||
}
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
: v.properties.input_field_list
|
||||
? v.properties.input_field_list
|
||||
.filter((v: any) => v.assignment_method === 'api_input')
|
||||
.map((v: any) => {
|
||||
switch (v.type) {
|
||||
|
|
@ -447,7 +527,7 @@ function handleInputFieldList() {
|
|||
break
|
||||
}
|
||||
})
|
||||
: []
|
||||
: []
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -342,7 +342,15 @@ function getDetail() {
|
|||
detail.value.work_flow?.nodes
|
||||
?.filter((v: any) => v.id === 'base-node')
|
||||
.map((v: any) => {
|
||||
apiInputParams.value = v.properties.input_field_list
|
||||
apiInputParams.value = v.properties.api_input_field_list
|
||||
? v.properties.api_input_field_list
|
||||
.map((v: any) => {
|
||||
return {
|
||||
name: v.variable,
|
||||
value: v.default_value
|
||||
}
|
||||
})
|
||||
: v.properties.input_field_list
|
||||
? v.properties.input_field_list
|
||||
.filter((v: any) => v.assignment_method === 'api_input')
|
||||
.map((v: any) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="isEdit ? '编辑参数' : '添加参数'"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="fieldFormRef"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-form-item label="参数" prop="variable">
|
||||
<el-input
|
||||
v-model="form.variable"
|
||||
placeholder="请输入参数"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
@blur="form.variable = form.variable.trim()"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否必填" @click.prevent>
|
||||
<el-switch size="small" v-model="form.is_required"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="默认值"
|
||||
prop="default_value"
|
||||
:rules="{
|
||||
required: form.is_required,
|
||||
message: '请输入默认值',
|
||||
trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.default_value"
|
||||
placeholder="请输入默认值"
|
||||
@blur="form.name = form.name.trim()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
|
||||
{{ isEdit ? '保存' : '添加' }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const fieldFormRef = ref()
|
||||
const loading = ref<boolean>(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const form = ref<any>({
|
||||
name: '',
|
||||
variable: '',
|
||||
type: 'input',
|
||||
is_required: true,
|
||||
assignment_method: 'api_input',
|
||||
optionList: [''],
|
||||
default_value: ''
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
|
||||
variable: [
|
||||
{ required: true, message: '请输入参数', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母数字和下划线', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
name: '',
|
||||
variable: '',
|
||||
type: 'input',
|
||||
is_required: true,
|
||||
assignment_method: 'api_input',
|
||||
optionList: [''],
|
||||
default_value: ''
|
||||
}
|
||||
isEdit.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const open = (row: any) => {
|
||||
if (row) {
|
||||
form.value = cloneDeep(row)
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('refresh', form.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="flex-between mb-16">
|
||||
<h5 class="lighter">{{ '接口传参' }}</h5>
|
||||
<el-button link type="primary" @click="openAddDialog()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
|
||||
:data="props.nodeModel.properties.api_input_field_list"
|
||||
class="mb-16"
|
||||
>
|
||||
<el-table-column prop="variable" label="参数" />
|
||||
<el-table-column prop="default_value" label="默认值" />
|
||||
<el-table-column label="必填">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.is_required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" width="80">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" content="修改" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddDialog(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<el-button type="primary" text @click="deleteField($index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<ApiFieldFormDialog ref="ApiFieldFormDialogRef" @refresh="refreshFieldList" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { set } from 'lodash'
|
||||
import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
|
||||
import { MsgError } from '@/utils/message'
|
||||
|
||||
const props = defineProps<{ nodeModel: any }>()
|
||||
|
||||
const currentIndex = ref(null)
|
||||
const ApiFieldFormDialogRef = ref()
|
||||
const inputFieldList = ref<any[]>([])
|
||||
|
||||
function openAddDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
ApiFieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function deleteField(index: any) {
|
||||
inputFieldList.value.splice(index, 1)
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
|
||||
}
|
||||
|
||||
|
||||
function refreshFieldList(data: any) {
|
||||
for (let i = 0; i < inputFieldList.value.length; i++) {
|
||||
if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
|
||||
MsgError('参数已存在: ' + data.variable)
|
||||
return
|
||||
}
|
||||
}
|
||||
// 查看另一个list又没有重复的
|
||||
let arr = props.nodeModel.properties.user_input_field_list
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].variable === data.variable) {
|
||||
MsgError('参数已存在: ' + data.variable)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (currentIndex.value !== null) {
|
||||
inputFieldList.value.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
inputFieldList.value.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
ApiFieldFormDialogRef.value.close()
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!props.nodeModel.properties.api_input_field_list) {
|
||||
if (props.nodeModel.properties.input_field_list) {
|
||||
props.nodeModel.properties.input_field_list
|
||||
.filter((item: any) => {
|
||||
return item.assignment_method === 'api_input'
|
||||
})
|
||||
.forEach((item: any) => {
|
||||
inputFieldList.value.push(item)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
inputFieldList.value.push(...props.nodeModel.properties.api_input_field_list)
|
||||
}
|
||||
set(props.nodeModel.properties, 'api_input_field_list', inputFieldList)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="isEdit ? '编辑变量' : '添加变量'"
|
||||
:title="isEdit ? '编辑参数' : '添加参数'"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<el-form-item label="变量" prop="variable">
|
||||
<el-form-item label="参数" prop="variable">
|
||||
<el-input
|
||||
v-model="form.variable"
|
||||
placeholder="请输入变量"
|
||||
placeholder="请输入参数"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
@blur="form.variable = form.variable.trim()"
|
||||
|
|
@ -100,12 +100,6 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="赋值方式">
|
||||
<el-radio-group v-model="form.assignment_method">
|
||||
<el-radio value="user_input">用户输入</el-radio>
|
||||
<el-radio value="api_input">接口传参</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
|
|
@ -142,7 +136,7 @@ const form = ref<any>({
|
|||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
|
||||
variable: [
|
||||
{ required: true, message: '请输入变量', trigger: 'blur' },
|
||||
{ required: true, message: '请输入参数', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母数字和下划线', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="flex-between mb-16">
|
||||
<h5 class="lighter">{{ '用户输入' }}</h5>
|
||||
<el-button link type="primary" @click="openAddDialog()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
|
||||
:data="props.nodeModel.properties.user_input_field_list"
|
||||
class="mb-16"
|
||||
>
|
||||
<el-table-column prop="variable" label="参数" />
|
||||
<el-table-column prop="name" label="显示名称" />
|
||||
<el-table-column label="输入类型">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="default_value" label="默认值" />
|
||||
<el-table-column label="必填">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.is_required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" width="80">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" content="修改" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddDialog(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<el-button type="primary" text @click="deleteField($index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { set } from 'lodash'
|
||||
import UserFieldFormDialog from './UserFieldFormDialog.vue'
|
||||
import { MsgError } from '@/utils/message'
|
||||
|
||||
const props = defineProps<{ nodeModel: any }>()
|
||||
|
||||
const currentIndex = ref(null)
|
||||
const UserFieldFormDialogRef = ref()
|
||||
const inputFieldList = ref<any[]>([])
|
||||
|
||||
function openAddDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
UserFieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function deleteField(index: any) {
|
||||
inputFieldList.value.splice(index, 1)
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
|
||||
}
|
||||
|
||||
|
||||
function refreshFieldList(data: any) {
|
||||
for (let i = 0; i < inputFieldList.value.length; i++) {
|
||||
if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
|
||||
MsgError('参数已存在: ' + data.variable)
|
||||
return
|
||||
}
|
||||
}
|
||||
// 查看另一个list又没有重复的
|
||||
let arr = props.nodeModel.properties.api_input_field_list
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].variable === data.variable) {
|
||||
MsgError('参数已存在: ' + data.variable)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (currentIndex.value !== null) {
|
||||
inputFieldList.value.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
inputFieldList.value.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
UserFieldFormDialogRef.value.close()
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!props.nodeModel.properties.user_input_field_list) {
|
||||
if (props.nodeModel.properties.input_field_list) {
|
||||
props.nodeModel.properties.input_field_list
|
||||
.filter((item: any) => {
|
||||
return item.assignment_method === 'user_input'
|
||||
})
|
||||
.forEach((item: any) => {
|
||||
inputFieldList.value.push(item)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
inputFieldList.value.push(...props.nodeModel.properties.user_input_field_list)
|
||||
}
|
||||
set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -45,57 +45,8 @@
|
|||
@submitDialog="submitDialog"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="flex-between mb-16">
|
||||
<h5 class="lighter">全局变量</h5>
|
||||
<el-button link type="primary" @click="openAddDialog()">
|
||||
<el-icon class="mr-4"><Plus /></el-icon> 添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-if="props.nodeModel.properties.input_field_list?.length > 0"
|
||||
:data="props.nodeModel.properties.input_field_list"
|
||||
class="mb-16"
|
||||
>
|
||||
<el-table-column prop="variable" label="变量" />
|
||||
<el-table-column prop="name" label="显示名称" />
|
||||
<el-table-column label="输入类型">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
|
||||
<el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.is_required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="assignment_method" label="赋值方式">
|
||||
<template #default="{ row }">
|
||||
{{ row.assignment_method === 'user_input' ? '用户输入' : '接口传参' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" width="80">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" content="修改" placement="top">
|
||||
<el-button type="primary" text @click.stop="openAddDialog(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<el-button type="primary" text @click="deleteField($index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<UserInputFieldTable ref="UserInputFieldTableFef" :node-model="nodeModel" />
|
||||
<ApiInputFieldTable ref="ApiInputFieldTableFef" :node-model="nodeModel" />
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<div class="flex-between">
|
||||
|
|
@ -139,7 +90,7 @@
|
|||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
|
||||
>公用
|
||||
>公用
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
|
||||
|
|
@ -162,8 +113,8 @@
|
|||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="danger">{{
|
||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||
}}</span>
|
||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||
}}</span>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
|
||||
<Check />
|
||||
|
|
@ -184,7 +135,9 @@
|
|||
@click="openTTSParamSettingDialog"
|
||||
:disabled="!form_data.tts_model_id"
|
||||
>
|
||||
<el-icon class="mr-4"><Setting /></el-icon>
|
||||
<el-icon class="mr-4">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
设置
|
||||
</el-button>
|
||||
<el-switch size="small" v-model="form_data.tts_model_enable" />
|
||||
|
|
@ -221,7 +174,7 @@
|
|||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
|
||||
>公用
|
||||
>公用
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
||||
|
|
@ -244,8 +197,8 @@
|
|||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="danger">{{
|
||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||
}}</span>
|
||||
$t('views.application.applicationForm.form.aiModel.unavailable')
|
||||
}}</span>
|
||||
</div>
|
||||
<el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
|
||||
<Check />
|
||||
|
|
@ -256,7 +209,6 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
|
||||
</NodeContainer>
|
||||
<TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
|
||||
</template>
|
||||
|
|
@ -270,10 +222,12 @@ import { relatedObject } from '@/utils/utils'
|
|||
import useStore from '@/stores'
|
||||
import applicationApi from '@/api/application'
|
||||
import type { Provider } from '@/api/type/model'
|
||||
import FieldFormDialog from './component/FieldFormDialog.vue'
|
||||
import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
|
||||
import { t } from '@/locales'
|
||||
import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
|
||||
import ApiInputFieldTable from './component/ApiInputFieldTable.vue'
|
||||
import UserInputFieldTable from './component/UserInputFieldTable.vue'
|
||||
|
||||
const { model } = useStore()
|
||||
|
||||
const {
|
||||
|
|
@ -286,6 +240,8 @@ const sttModelOptions = ref<any>(null)
|
|||
const ttsModelOptions = ref<any>(null)
|
||||
const providerOptions = ref<Array<Provider>>([])
|
||||
const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
|
||||
const UserInputFieldTableFef = ref()
|
||||
const ApiInputFieldTableFef = ref()
|
||||
|
||||
const form = {
|
||||
name: '',
|
||||
|
|
@ -306,6 +262,7 @@ const wheel = (e: any) => {
|
|||
function submitDialog(val: string) {
|
||||
set(props.nodeModel.properties.node_data, 'prologue', val)
|
||||
}
|
||||
|
||||
const form_data = computed({
|
||||
get: () => {
|
||||
if (props.nodeModel.properties.node_data) {
|
||||
|
|
@ -356,39 +313,6 @@ function getTTSModel() {
|
|||
})
|
||||
}
|
||||
|
||||
const currentIndex = ref(null)
|
||||
const FieldFormDialogRef = ref()
|
||||
const inputFieldList = ref<any[]>([])
|
||||
|
||||
function openAddDialog(data?: any, index?: any) {
|
||||
if (typeof index !== 'undefined') {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
FieldFormDialogRef.value.open(data)
|
||||
}
|
||||
|
||||
function deleteField(index: any) {
|
||||
inputFieldList.value.splice(index, 1)
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList', inputFieldList.value)
|
||||
}
|
||||
|
||||
function refreshFieldList(data: any) {
|
||||
for (let i = 0; i < inputFieldList.value.length; i++) {
|
||||
if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
|
||||
MsgError('变量已存在: ' + data.variable)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (currentIndex.value !== null) {
|
||||
inputFieldList.value.splice(currentIndex.value, 1, data)
|
||||
} else {
|
||||
inputFieldList.value.push(data)
|
||||
}
|
||||
currentIndex.value = null
|
||||
FieldFormDialogRef.value.close()
|
||||
props.nodeModel.graphModel.eventCenter.emit('refreshFieldList', inputFieldList.value)
|
||||
}
|
||||
|
||||
const openTTSParamSettingDialog = () => {
|
||||
const model_id = form_data.value.tts_model_id
|
||||
|
|
@ -406,12 +330,6 @@ const refreshTTSForm = (data: any) => {
|
|||
|
||||
onMounted(() => {
|
||||
set(props.nodeModel, 'validate', validate)
|
||||
if (props.nodeModel.properties.input_field_list) {
|
||||
props.nodeModel.properties.input_field_list.forEach((item: any) => {
|
||||
inputFieldList.value.push(item)
|
||||
})
|
||||
}
|
||||
set(props.nodeModel.properties, 'input_field_list', inputFieldList)
|
||||
if (!props.nodeModel.properties.node_data.tts_type) {
|
||||
set(props.nodeModel.properties.node_data, 'tts_type', 'BROWSER')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,11 +38,18 @@ const globalFields = [
|
|||
const inputFieldList = ref<any[]>([])
|
||||
|
||||
const getRefreshFieldList = () => {
|
||||
return props.nodeModel.graphModel.nodes
|
||||
const user_input_fields = props.nodeModel.graphModel.nodes
|
||||
.filter((v: any) => v.id === 'base-node')
|
||||
.map((v: any) => cloneDeep(v.properties.input_field_list))
|
||||
.map((v: any) => cloneDeep(v.properties.user_input_field_list))
|
||||
.reduce((x: any, y: any) => [...x, ...y], [])
|
||||
.map((i: any) => ({ label: i.name, value: i.variable }))
|
||||
const api_input_fields = props.nodeModel.graphModel.nodes
|
||||
.filter((v: any) => v.id === 'base-node')
|
||||
.map((v: any) => cloneDeep(v.properties.api_input_field_list))
|
||||
.reduce((x: any, y: any) => [...x, ...y], [])
|
||||
.map((i: any) => ({ label: i.name, value: i.variable }))
|
||||
|
||||
return [...user_input_fields, ...api_input_fields]
|
||||
}
|
||||
const refreshFieldList = () => {
|
||||
const refreshFieldList = getRefreshFieldList()
|
||||
|
|
|
|||
Loading…
Reference in New Issue