refactor: 高级应用区分用户输入和接口传入的参数

apps/application/serializers/application_serializers.py

@@ -264,7 +264,7 @@ def get_query_api_input(self, application, params):
                 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:

ui/src/components/ai-chat/index.vue

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

ui/src/views/application-overview/index.vue

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

ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue

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

ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue

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