252 lines
7.5 KiB
Vue
252 lines
7.5 KiB
Vue
<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> |