refactor: 高级应用区分用户输入和接口传入的参数
Some checks failed
sync2gitee / repo-sync (push) Has been cancelled
Typos Check / Spell Check with Typos (push) Has been cancelled

This commit is contained in:
CaptainB 2024-10-18 18:10:13 +08:00 committed by 刘瑞斌
parent ad6d617caa
commit fa17d96969
9 changed files with 504 additions and 119 deletions

View File

@ -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:

View File

@ -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
}
})
: []
: []
})
}

View File

@ -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) => {

View File

@ -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>

View File

@ -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>

View File

@ -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' }
]
})

View File

@ -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>

View File

@ -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')
}

View File

@ -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()