|
@@ -1,238 +0,0 @@
|
|
-<template>
|
|
|
|
- <div class="hc-page-box">
|
|
|
|
- <HcCard>
|
|
|
|
- <template #header>
|
|
|
|
- <div class="w-32">
|
|
|
|
- <el-select v-model="httpForm.type" placeholder="请求类型" size="large">
|
|
|
|
- <el-option v-for="item in typeData" :label="item" :value="item"/>
|
|
|
|
- </el-select>
|
|
|
|
- </div>
|
|
|
|
- <div class="w-full ml-3">
|
|
|
|
- <el-input v-model="httpForm.url" size="large" placeholder="请求地址,不要加 域名 和 api 字符" clearable @keyup="keyUpEvent"/>
|
|
|
|
- </div>
|
|
|
|
- <div class="ml-3">
|
|
|
|
- <el-button type="primary" hc-btn @click="searchClick">
|
|
|
|
- <HcIcon name="send-plane"/>
|
|
|
|
- <span>发起请求</span>
|
|
|
|
- </el-button>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- <div class="hc-http-form-box">
|
|
|
|
- <div class="http-form-config">
|
|
|
|
- <div class="title-box">快速配置</div>
|
|
|
|
- <div class="config-item">
|
|
|
|
- <div class="name-box">
|
|
|
|
- <div class="name">携带 项目ID</div>
|
|
|
|
- <div class="val">{{projectId}}</div>
|
|
|
|
- </div>
|
|
|
|
- <span class="switch">
|
|
|
|
- <el-switch v-model="httpForm.data.projectId" inline-prompt :active-value="projectId" active-text="是" inactive-value="" inactive-text="否" />
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="config-item">
|
|
|
|
- <div class="name-box">
|
|
|
|
- <div class="name">携带 合同段ID</div>
|
|
|
|
- <div class="val">{{contractId}}</div>
|
|
|
|
- </div>
|
|
|
|
- <span class="switch">
|
|
|
|
- <el-switch v-model="httpForm.data.contractId" inline-prompt :active-value="contractId" active-text="是" inactive-value="" inactive-text="否"/>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="http-form-data">
|
|
|
|
- <div class="title-box">
|
|
|
|
- <div class="title">提交数据表单</div>
|
|
|
|
- <div class="extra">
|
|
|
|
- <HcNewSwitch :datas="formDataTypeTab" :keys="formDataTypeKey" @change="formDataTypeChange"/>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="hc-table-ref-box form-data">
|
|
|
|
- <el-table :data="formDataTable" height="100%" row-key="key" border default-expand-all v-if="formDataTypeKey === 'form'">
|
|
|
|
- <el-table-column prop="key" label="字段名称" width="220">
|
|
|
|
- <template #default="scope">
|
|
|
|
- <el-input v-model="scope.row.key"/>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="val" label="参数内容">
|
|
|
|
- <template #default="scope">
|
|
|
|
- <el-input v-model="scope.row.val"/>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="action" label="操作" width="280" align="center">
|
|
|
|
- <template #default="scope">
|
|
|
|
- <el-button type="primary" plain size="small" @click="addFormData(scope)">
|
|
|
|
- <HcIcon name="add-box"/>
|
|
|
|
- <span>添加同级</span>
|
|
|
|
- </el-button>
|
|
|
|
- <el-button type="primary" plain size="small" @click="addFormDatas(scope)">
|
|
|
|
- <HcIcon name="add-circle"/>
|
|
|
|
- <span>添加子级</span>
|
|
|
|
- </el-button>
|
|
|
|
- <el-button type="danger" plain size="small" @click="delFormData(scope)">
|
|
|
|
- <HcIcon name="delete-bin-2"/>
|
|
|
|
- <span>删除</span>
|
|
|
|
- </el-button>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- </el-table>
|
|
|
|
- <HcCodeEditor :data="httpForm" placeholder="请先在表单模式下添加数据..." v-if="formDataTypeKey === 'code'"/>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="http-form-res">
|
|
|
|
- <div class="title-box">
|
|
|
|
- <div class="title">返回数据</div>
|
|
|
|
- <div class="extra">
|
|
|
|
- <el-button type="primary" hc-btn>
|
|
|
|
- <HcIcon name="database"/>
|
|
|
|
- <span>查看整体JSON数据</span>
|
|
|
|
- </el-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="http-form-res-box">
|
|
|
|
- <HcCodeEditor :data="httpForm" placeholder="请求响应结果区域..."/>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </HcCard>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script setup>
|
|
|
|
-import {ref,watch,onMounted} from "vue";
|
|
|
|
-import {useRouter, useRoute} from 'vue-router'
|
|
|
|
-import {useAppStore} from "~src/store";
|
|
|
|
-import HcCodeEditor from "./components/HcCodeEditor.vue";
|
|
|
|
-
|
|
|
|
-//初始变量
|
|
|
|
-const router = useRouter()
|
|
|
|
-const useRoutes = useRoute()
|
|
|
|
-const useAppState = useAppStore()
|
|
|
|
-
|
|
|
|
-//全局变量
|
|
|
|
-const projectId = ref(useAppState.getProjectId);
|
|
|
|
-const contractId = ref(useAppState.getContractId);
|
|
|
|
-
|
|
|
|
-const typeData = ref([ 'GET', 'POST'])
|
|
|
|
-
|
|
|
|
-//搜索表单
|
|
|
|
-const httpForm = ref({
|
|
|
|
- type: 'GET', url: '', data: { projectId: '', contractId: '' }
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
-//回车搜索
|
|
|
|
-const keyUpEvent = (e) => {
|
|
|
|
- if (e.key === "Enter") {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-//搜索
|
|
|
|
-const searchClick = () => {
|
|
|
|
-
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-//结构类型tab数据和相关处理
|
|
|
|
-const formDataTypeKey = ref('form')
|
|
|
|
-const formDataTypeTab = ref([
|
|
|
|
- {key:'form', name: '表单模式'},
|
|
|
|
- {key:'code', name: '查看模式'}
|
|
|
|
-]);
|
|
|
|
-const formDataTypeChange = (item) => {
|
|
|
|
- formDataTypeKey.value = item?.key;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-//表单表格数据
|
|
|
|
-const formDataTable = ref([
|
|
|
|
- {
|
|
|
|
- key: '1', val: '1',
|
|
|
|
- children: [
|
|
|
|
- {key: '2', val: '2'},
|
|
|
|
- {key: '3', val: '3'},
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
-])
|
|
|
|
-
|
|
|
|
-//添加同级
|
|
|
|
-const addFormData = (scope) => {
|
|
|
|
- console.log(scope)
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-//添加子级
|
|
|
|
-const addFormDatas = (scope) => {
|
|
|
|
- console.log(scope)
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-//删除数据
|
|
|
|
-const delFormData = (scope) => {
|
|
|
|
- console.log(scope)
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
-.hc-http-form-box {
|
|
|
|
- position: relative;
|
|
|
|
- display: flex;
|
|
|
|
- height: 100%;
|
|
|
|
- .http-form-config {
|
|
|
|
- position: relative;
|
|
|
|
- padding-right: 24px;
|
|
|
|
- border-right: 1px solid #e4e7ed;
|
|
|
|
- .config-item {
|
|
|
|
- position: relative;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- padding: 14px 0;
|
|
|
|
- .name-box {
|
|
|
|
- position: relative;
|
|
|
|
- margin-right: 40px;
|
|
|
|
- .val {
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #aaa;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .config-item + .config-item {
|
|
|
|
- border-top: 1px solid #e4e7ed;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .http-form-data {
|
|
|
|
- position: relative;
|
|
|
|
- padding: 0 24px;
|
|
|
|
- flex: 1;
|
|
|
|
- .hc-table-ref-box.form-data {
|
|
|
|
- height: calc(100% - 60px);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .http-form-res {
|
|
|
|
- flex: 1;
|
|
|
|
- position: relative;
|
|
|
|
- padding-left: 24px;
|
|
|
|
- border-left: 1px solid #e4e7ed;
|
|
|
|
- .http-form-res-box {
|
|
|
|
- position: relative;
|
|
|
|
- height: calc(100% - 60px);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .http-form-config, .http-form-data, .http-form-res {
|
|
|
|
- .title-box {
|
|
|
|
- position: relative;
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
- font-size: 18px;
|
|
|
|
- font-weight: 400;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- .title {
|
|
|
|
- position: relative;
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
-
|
|
|
|
-<style lang="scss">
|
|
|
|
-.http-form-data .hc-table-ref-box.form-data .el-table td.el-table__cell div {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|