init
This commit is contained in:
吴红兵
252
src/views/knowledge/aiFlow/panels/HttpPanel.vue
Normal file
252
src/views/knowledge/aiFlow/panels/HttpPanel.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="panel-content">
|
||||
<!-- 输入变量部分 -->
|
||||
<div class="mb-2 panel-section">
|
||||
<div class="flex justify-between items-center panel-header">
|
||||
<span>变量输入</span>
|
||||
<el-button type="primary" size="small" @click="addParam">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="params-list">
|
||||
<div v-for="(param, index) in inputParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="param.name" placeholder="变量名" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="param.type" placeholder="变量值" class="w-full">
|
||||
<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
|
||||
<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeHttpParam(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 请求方法 -->
|
||||
<div class="mb-2 panel-section">
|
||||
<div class="panel-header">
|
||||
<span>请求方法</span>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="node.httpParams.method" class="w-full">
|
||||
<el-option value="GET" label="GET" />
|
||||
<el-option value="POST" label="POST" />
|
||||
<el-option value="PUT" label="PUT" />
|
||||
<el-option value="DELETE" label="DELETE" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="node.httpParams.url" placeholder="请求URL" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 请求参数 -->
|
||||
<div class="mb-2 panel-section">
|
||||
<div class="flex justify-between items-center panel-header">
|
||||
<span>请求参数</span>
|
||||
<el-button type="primary" size="small" @click="addHttpParam">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="Params" name="params">
|
||||
<div class="params-list">
|
||||
<div v-for="(param, index) in node.httpParams.paramsParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="param.name" placeholder="参数名称" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="param.type" placeholder="变量值" class="w-full">
|
||||
<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
|
||||
<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeHttpParam(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="Body" name="body" v-if="['POST', 'PUT'].includes(node.httpParams.method)">
|
||||
<el-radio-group v-model="node.httpParams.contentType" size="small" class="mb-2">
|
||||
<el-radio label="none">无</el-radio>
|
||||
<el-radio label="application/x-www-form-urlencoded">Form Data</el-radio>
|
||||
<el-radio label="application/json">JSON</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<template v-if="node.httpParams.contentType === 'application/x-www-form-urlencoded'">
|
||||
<div class="params-list">
|
||||
<div v-for="(param, index) in node.httpParams.bodyParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="param.name" placeholder="参数名称" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="param.type" placeholder="变量值" class="w-full">
|
||||
<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
|
||||
<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeBody(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="node.httpParams.contentType === 'application/json'">
|
||||
<el-row>
|
||||
<json-editor v-model="node.httpParams.jsonBody" />
|
||||
</el-row>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="Headers" name="headers">
|
||||
<div class="params-list">
|
||||
<div v-for="(header, index) in node.httpParams.headerParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-input v-model="header.name" placeholder="Header名称" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="header.type" placeholder="变量值" class="w-full">
|
||||
<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
|
||||
<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button @click="removeHeader(index)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 输出变量 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-header">
|
||||
<span>输出变量</span>
|
||||
</div>
|
||||
|
||||
<div class="params-list">
|
||||
<div v-for="(output, index) in outputParams" :key="index" class="mb-2">
|
||||
<div class="param-item">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="9">
|
||||
<el-text> 变量名： </el-text>
|
||||
<el-tag>{{ output.name }}</el-tag>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-text>|</el-text>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-text> 变量类型： </el-text>
|
||||
<el-tag>{{ output.type }}</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Plus, Delete } from '@element-plus/icons-vue';
|
||||
import common from './common.ts';
|
||||
// @ts-ignore
|
||||
import JsonEditor from '@axolo/json-editor-vue';
|
||||
|
||||
export default {
|
||||
name: 'HttpPanel',
|
||||
components: {
|
||||
JsonEditor,
|
||||
Plus,
|
||||
Delete,
|
||||
},
|
||||
mixins: [common],
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'params', // 默认显示Params标签页
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addHttpParam() {
|
||||
if (this.activeTab === 'params') {
|
||||
this.node.httpParams.paramsParams.push({});
|
||||
} else if (this.activeTab === 'headers') {
|
||||
this.node.httpParams.headerParams.push({});
|
||||
} else {
|
||||
this.node.httpParams.bodyParams.push({});
|
||||
}
|
||||
},
|
||||
removeHttpParam(index) {
|
||||
this.node.httpParams.paramsParams.splice(index, 1);
|
||||
},
|
||||
addHeader() {
|
||||
this.node.httpParams.headerParams.push({});
|
||||
},
|
||||
removeHeader(index) {
|
||||
this.node.httpParams.headerParams.splice(index, 1);
|
||||
},
|
||||
addBody() {
|
||||
this.node.httpParams.bodyParams.push({});
|
||||
},
|
||||
removeBody(index) {
|
||||
this.node.httpParams.bodyParams.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user