add apimanager module catch-admin-vue files and README doc
This commit is contained in:
uctoo
parent
b784251605
commit
a1d82020ed
95
catch/apimanager/README.md
Normal file
95
catch/apimanager/README.md
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
apitester 模块是一个用于API管理、测试的模块。
|
||||||
|
|
||||||
|
# 概述
|
||||||
|
|
||||||
|
本模块的设计目标是提供开发人员、产品人员等相关角色，可以管理和测试API，可以将系统内部或外部API信息保存在系统内，使得产品具有自完备的特性和持续交付的特性，并可进行灵活的二次开发。
|
||||||
|
|
||||||
|
## 主要特性
|
||||||
|
|
||||||
|
1. 支持API分类管理，支持自定义用户环境变量，支持API测试用例管理。
|
||||||
|
2. 支持HTTP、HTTPS接口测试用例的在线运行。（更多协议支持规划在模块roadmap中）
|
||||||
|
3. 支持接口文档管理。
|
||||||
|
4. 已集成微信第三方平台相关接口测试用例，开发者可快速进行第三方平台应用开发。
|
||||||
|
5. 支持多帐号多应用使用环境，易于团队协作，不限制接口数量、用户数量、请求数量。
|
||||||
|
6. 基于catchadmin开发，模块安装简单，使用便捷，支持模块数据导入导出。
|
||||||
|
7. 开源开放易于二次开发，测试用例可共享，形成产品API知识库。
|
||||||
|
8. 支持私有化部署、云原生部署。
|
||||||
|
|
||||||
|
演示地址：www.uctoo.com 控制台使用demo帐号登录
|
||||||
|
模块使用界面截图：
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20category%20list.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20category%20edit.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20user%20env%20list.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20user%20env%20edit.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20test%20case%20list.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20test%20case%20edit.png"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/apirun.png"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
## 产品架构
|
||||||
|
1. 基于catchadmin标准模块开发方式开发，可在管理后台一键安装模块和初始化模块数据。
|
||||||
|
2. 前端采用axios技术选型，前端可形成标准客户端接口库。
|
||||||
|
3. 本地接口（数据源类型local）主要沿用catchadmin基于用户身份的接口鉴权方案，需在API测试用例header添加authorization参数，其值为登录接口返回的值。
|
||||||
|
4. 在扫码登录后注册用户帐号接口测试用例，演示了采用微信扫码登录后获取到的用户access_token进行接口鉴权的示例。
|
||||||
|
5. 微信相关开发使用了[uctoo/think-easywechat SDK](https://gitee.com/UCT/think-easywechat) 集成catchadmin (TP6+VUE) 和 easywechat 4，支持微信第三方平台、微信小程序云开发、微信支付服务商等特性。
|
||||||
|
|
||||||
|
## 安装教程
|
||||||
|
|
||||||
|
### 运行环境依赖
|
||||||
|
|
||||||
|
PHP >= 7.1.0
|
||||||
|
Mysql >= 5.5.0 (需支持innodb引擎)
|
||||||
|
PDO PHP Extension
|
||||||
|
MBstring PHP Extension
|
||||||
|
CURL PHP Extension
|
||||||
|
ZIP Extension
|
||||||
|
Composer
|
||||||
|
catchadmin
|
||||||
|
|
||||||
|
### 分步骤安装
|
||||||
|
1. 从https://gitee.com/jaguarjack/catchAdmin 或 https://gitee.com/uctoo/uctoo 下载https://gitee.com/uctoo/uctoo/tree/master/catch/apimanager 目录模块，复制到catchadmin对应目录
|
||||||
|
2. apimanager/catch-admin-vue 目录内是模块前端vue项目代码，复制到前端VUE项目对应目录，注意如和原前端vue项目目录的文件有冲突，需自行合并代码版本。如模块新依赖了第三方组件，需要在前端项目目录重新运行 yarn install 命令。
|
||||||
|
3. 登录管理后台，在系统管理->模块管理启用API管理模块，即可安装模块和初始化模块数据。
|
||||||
|
|
||||||
|
### 云原生安装
|
||||||
|
1. 可在 https://www.uctoo.com 注册开发者帐号，登录管理后台，通过云开发功能模块，即可采用云原生方式开通和部署一套独立的UCToo运行实例。（开发中）
|
||||||
|
|
||||||
|
### docker安装
|
||||||
|
可参考uctoo-docker项目 https://gitee.com/UCT/uctoo-docker
|
||||||
|
|
||||||
|
## 使用手册
|
||||||
|
1. 可以通过API管理->API分类功能增删改查API分类。
|
||||||
|
2. 可以通过API环境变量功能增删改查用户环境变量。环境变量的key值以{{key}}方式定义，在API测试用例中对应的{{key}}值将替换为环境变量的value值。每个用户可以创建多组环境变量，可以切换当前选中的环境变量组。
|
||||||
|
3. 可以通过API列表功能增删改查API测试用例。api_url、header、body、query、auth字段支持环境变量。
|
||||||
|
4. 可以对已添加的API测试用例执行测试操作，在API测试界面，可以对api_url、header、body、query、auth等字段进行自定义编辑。发送按钮可以实际执行API测试用例，获得接口返回值。
|
||||||
|
|
||||||
|
具体请参考 https://www.kancloud.cn/doc_uctoo/manual
|
||||||
|
|
||||||
|
## 开发说明
|
||||||
|
### 模块roadmap
|
||||||
|
|
||||||
|
1. 通过解析路由文件router.php中的数据，自动生成系统接口（system类型）的所有测试用例。即实现系统接口的可视化测试。
|
||||||
|
2. 实现API管理功能，即可通过界面配置进行基于appid的接口权限管理，OAUTH2接口鉴权方案。
|
||||||
|
3. 实现API测试用例中API文档字段支持markdown编辑和展示。
|
||||||
|
4. 实现除POST、GET、PUT、DELETE之外的其他接口请求方式。
|
||||||
|
5. 实现全部content-type类型的支持。
|
||||||
|
6. 实现测试数据的保存、历史记录等功能。
|
||||||
|
7. 实现notify类型接口的测试，目前还没有在市面上见过类似功能的产品，但是实际开发中notify类型的接口在微信第三方平台、各种支付回调、硬件数据上传等很多场景都有遇到。
|
||||||
|
8. 实现API测试用例的公开（共享）、私有、保护（有偿获取）等特性。
|
||||||
|
|
||||||
|
具体请参考开源版开发手册 https://www.kancloud.cn/doc_uctoo/uctoo_dev 及 本开源项目示例
|
||||||
116
catch/apimanager/catch-admin-vue/package.json
Normal file
116
catch/apimanager/catch-admin-vue/package.json
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
{
|
||||||
|
"name": "catch-admin",
|
||||||
|
"version": "4.4.0",
|
||||||
|
"description": "catch-admin manage system on element-admin-vue",
|
||||||
|
"author": "JaguarJack <njphper@gmail.com>",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vue-cli-service serve",
|
||||||
|
"lint": "eslint --ext .js,.vue src",
|
||||||
|
"build:prod": "vue-cli-service build",
|
||||||
|
"build:stage": "vue-cli-service build --mode staging",
|
||||||
|
"preview": "node build/index.js --preview",
|
||||||
|
"new": "plop",
|
||||||
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||||
|
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||||
|
"test:ci": "npm run lint && npm run test:unit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/element-ui": "^2.5.4",
|
||||||
|
"axios": "0.18.1",
|
||||||
|
"clipboard": "2.0.4",
|
||||||
|
"codemirror": "5.45.0",
|
||||||
|
"core-js": "3.6.5",
|
||||||
|
"driver.js": "0.9.5",
|
||||||
|
"dropzone": "5.5.1",
|
||||||
|
"echarts": "4.2.1",
|
||||||
|
"element-ui": "2.13.2",
|
||||||
|
"file-saver": "2.0.1",
|
||||||
|
"fuse.js": "3.4.4",
|
||||||
|
"js-cookie": "2.2.0",
|
||||||
|
"jsonlint": "1.6.3",
|
||||||
|
"jszip": "3.2.1",
|
||||||
|
"normalize.css": "7.0.0",
|
||||||
|
"nprogress": "0.2.0",
|
||||||
|
"path-to-regexp": "2.4.0",
|
||||||
|
"screenfull": "4.2.0",
|
||||||
|
"script-loader": "0.7.2",
|
||||||
|
"sortablejs": "1.8.4",
|
||||||
|
"vue": "2.6.10",
|
||||||
|
"vue-count-to": "1.0.13",
|
||||||
|
"vue-highlightjs": "^1.3.3",
|
||||||
|
"vue-router": "3.0.2",
|
||||||
|
"vue-splitpane": "1.0.4",
|
||||||
|
"vuedraggable": "2.20.0",
|
||||||
|
"vuex": "3.1.0",
|
||||||
|
"xlsx": "0.14.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@smallwei/avue": "^2.8.17",
|
||||||
|
"@vue/cli-plugin-babel": "4.4.4",
|
||||||
|
"@vue/cli-plugin-eslint": "4.4.4",
|
||||||
|
"@vue/cli-plugin-unit-jest": "4.4.4",
|
||||||
|
"@vue/cli-service": "4.4.4",
|
||||||
|
"@vue/test-utils": "1.0.0-beta.29",
|
||||||
|
"autoprefixer": "9.5.1",
|
||||||
|
"babel-eslint": "10.1.0",
|
||||||
|
"babel-jest": "^26.3.0",
|
||||||
|
"babel-plugin-dynamic-import-node": "2.3.3",
|
||||||
|
"chalk": "2.4.2",
|
||||||
|
"chokidar": "2.1.5",
|
||||||
|
"connect": "3.6.6",
|
||||||
|
"eslint": "6.7.2",
|
||||||
|
"eslint-plugin-vue": "6.2.2",
|
||||||
|
"highlight.js": "^10.2.0",
|
||||||
|
"html-webpack-plugin": "3.2.0",
|
||||||
|
"husky": "1.3.1",
|
||||||
|
"lint-staged": "8.1.5",
|
||||||
|
"lodash": "^4.17.20",
|
||||||
|
"mockjs": "1.0.1-beta3",
|
||||||
|
"plop": "2.3.0",
|
||||||
|
"runjs": "4.3.2",
|
||||||
|
"sass": "1.26.2",
|
||||||
|
"sass-loader": "8.0.2",
|
||||||
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
|
"serve-static": "1.13.2",
|
||||||
|
"svg-sprite-loader": "4.1.3",
|
||||||
|
"svgo": "1.2.0",
|
||||||
|
"vue-highlight.js": "^3.1.0",
|
||||||
|
"vue-json-editor": "^1.4.3",
|
||||||
|
"vue-json-views": "^1.3.0",
|
||||||
|
"vue-template-compiler": "2.6.10"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions"
|
||||||
|
],
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/JaguarJack/catch-admin-vue/issues"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.9",
|
||||||
|
"npm": ">= 3.0.0"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"admin",
|
||||||
|
"dashboard",
|
||||||
|
"element-ui",
|
||||||
|
"boilerplate",
|
||||||
|
"admin-template",
|
||||||
|
"management-system"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"lint-staged": {
|
||||||
|
"src/**/*.{js,vue}": [
|
||||||
|
"eslint --fix",
|
||||||
|
"git add"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"husky": {
|
||||||
|
"hooks": {}
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/JaguarJack/catch-admin-vue"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
catch/apimanager/catch-admin-vue/src/api/userenv.js
Normal file
7
catch/apimanager/catch-admin-vue/src/api/userenv.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
export function userenvList() {
|
||||||
|
return request({
|
||||||
|
url: "/apiTesterUserenv",
|
||||||
|
method: "get"
|
||||||
|
});
|
||||||
|
}
|
||||||
48
catch/apimanager/catch-admin-vue/src/main.js
Normal file
48
catch/apimanager/catch-admin-vue/src/main.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
|
||||||
|
|
||||||
|
import Element from 'element-ui'
|
||||||
|
import Avue from '@smallwei/avue'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
|
import './styles/element-variables.scss'
|
||||||
|
|
||||||
|
// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
|
||||||
|
|
||||||
|
import '@/styles/index.scss' // global css
|
||||||
|
|
||||||
|
import App from './App'
|
||||||
|
import store from './store'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
import './icons' // icon
|
||||||
|
import './permission' // permission control
|
||||||
|
import './utils/error-log' // error log
|
||||||
|
import request from '@/utils/request'
|
||||||
|
import * as filters from './filters' // global filters
|
||||||
|
import catchAdmin from '@/components/Catch'
|
||||||
|
|
||||||
|
Vue.use(Element, {
|
||||||
|
size: 'small'// set element-ui default size
|
||||||
|
// locale: enLang // 如果使用中文，无需设置，请删除
|
||||||
|
})
|
||||||
|
window.axios = request;
|
||||||
|
Vue.use(Avue, { request });
|
||||||
|
// register global utility filters
|
||||||
|
Object.keys(filters).forEach(key => {
|
||||||
|
Vue.filter(key, filters[key])
|
||||||
|
})
|
||||||
|
|
||||||
|
// 后台启动
|
||||||
|
catchAdmin.boot()
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.prototype.$http = request
|
||||||
|
Vue.prototype.admin = catchAdmin
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<catch-table
|
||||||
|
:ref="table.ref"
|
||||||
|
:headers="table.headers"
|
||||||
|
:border="true"
|
||||||
|
:search="table.search"
|
||||||
|
:filter-params="table.filterParams"
|
||||||
|
:hide-pagination="true"
|
||||||
|
:form-create="formCreate"
|
||||||
|
:actions="table.actions"
|
||||||
|
:api-route="table.apiRoute"
|
||||||
|
:dialog-width="table.dialog.width"
|
||||||
|
default-expand-all
|
||||||
|
row-key="id"
|
||||||
|
:tree-props="table.tree.props"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import renderTable from '@/views/render-table-form'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'apimanager_apicategory',
|
||||||
|
mixins: [renderTable],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableFrom: 'table/apimanager/ApiCategory',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
beforeSubmit(row) {
|
||||||
|
if (row.form.parent_id instanceof Array) {
|
||||||
|
row.form.parent_id = row.form.parent_id.length > 0 ? row.form.parent_id.pop() : 0
|
||||||
|
}
|
||||||
|
return row
|
||||||
|
},
|
||||||
|
afterHandleResponse() {
|
||||||
|
this.$http.get('table/apimanager/ApiCategory', {params: { only: 'form'}}).then(response => {
|
||||||
|
this.formCreate.rule = response.data.form
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="filter-container">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParam.env_name"
|
||||||
|
placeholder="环境名称"
|
||||||
|
clearable
|
||||||
|
class="filter-item form-search-input"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="filter-item search"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="handleSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="filter-item"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="handleRefresh"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="filter-item fr"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="handleCreateEnv"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="data"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
@selection-change="handleSelectMulti"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="env_name" label="环境名称" />
|
||||||
|
<el-table-column prop="selected" label="当前环境" />
|
||||||
|
<el-table-column prop="creator" label="创建人" />
|
||||||
|
<el-table-column prop="created_at" label="创建时间" />
|
||||||
|
<el-table-column prop="updated_at" label="更新时间" />
|
||||||
|
<el-table-column label="操作" fixed="right" width="300">
|
||||||
|
<template slot-scope="module">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="selectAPIenv(module.row.id)"
|
||||||
|
>切换</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(module.row)"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(module.row.id)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="paginate.current"
|
||||||
|
hide-on-single-page
|
||||||
|
:page-sizes="paginate.sizes"
|
||||||
|
:page-size="paginate.limit"
|
||||||
|
:layout="paginate.layout"
|
||||||
|
:total="paginate.total"
|
||||||
|
/>
|
||||||
|
<!----------------------------------- 编辑 ---------------------------------------------->
|
||||||
|
<el-dialog
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="formVisible"
|
||||||
|
@close="handleCancel"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
label-position="top"
|
||||||
|
:ref="formName"
|
||||||
|
:model="formFieldsData"
|
||||||
|
:rules="rules"
|
||||||
|
>
|
||||||
|
<el-form-item
|
||||||
|
label="env_name"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="env_name"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formFieldsData.env_name"
|
||||||
|
placeholder="请输入环境名称"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="env_json"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="env_json"
|
||||||
|
>
|
||||||
|
<avue-crud
|
||||||
|
ref="crudJSON"
|
||||||
|
:option="tableOption"
|
||||||
|
:data="jsonTableData"
|
||||||
|
@row-update="addUpdateJSON"
|
||||||
|
@row-del="rowDelJSON"
|
||||||
|
@row-save="rowSaveJSON"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row, index }" slot="menu">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="rowCellJSON(row, index)"
|
||||||
|
>{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleCancel">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import formOperate from "@/layout/mixin/formOperate";
|
||||||
|
export default {
|
||||||
|
name: "apimanager_apienv",
|
||||||
|
mixins: [formOperate],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formName: "apiEnv",
|
||||||
|
formLabelWidth: "120px",
|
||||||
|
// 刷新路由
|
||||||
|
refreshRoute: true,
|
||||||
|
// 用户搜索
|
||||||
|
queryParam: {
|
||||||
|
env_name: ""
|
||||||
|
},
|
||||||
|
formVisible: false,
|
||||||
|
formFieldsData: {
|
||||||
|
env_name: "",
|
||||||
|
env_json: ""
|
||||||
|
},
|
||||||
|
url: "apiTesterUserenv",
|
||||||
|
// 表单验证
|
||||||
|
rules: {
|
||||||
|
env_name: [{ required: true, message: "请输入环境名称" }],
|
||||||
|
env_json: [{ required: true, message: "请输入环境变量" }]
|
||||||
|
},
|
||||||
|
jsonTableData: [],
|
||||||
|
tableOption: {
|
||||||
|
refreshBtn: false,
|
||||||
|
addBtn: false,
|
||||||
|
editBtn: false,
|
||||||
|
addRowBtn: true,
|
||||||
|
cancelBtn: false,
|
||||||
|
border: true,
|
||||||
|
columnBtn: false,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: "Key",
|
||||||
|
prop: "key",
|
||||||
|
cell: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "Key值示例:{{KeyName}}",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Value",
|
||||||
|
prop: "value",
|
||||||
|
cell: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入Value值",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
formFieldsData: {
|
||||||
|
deep: true,
|
||||||
|
handler(data) {
|
||||||
|
if (data.env_json) {
|
||||||
|
let obj = this.JsonToObject(data.env_json);
|
||||||
|
let arr = Object.entries(obj).map(item => {
|
||||||
|
return { key: item[0], value: item[1], $cellEdit: false };
|
||||||
|
});
|
||||||
|
this.jsonTableData = arr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCreateEnv() {
|
||||||
|
this.jsonTableData = [];
|
||||||
|
this.handleCreate();
|
||||||
|
},
|
||||||
|
selectAPIenv(id) {
|
||||||
|
this.$http.get("apiTesterUserenv/selectAPIenv/" + id).then(response => {
|
||||||
|
this.$message.success(response.message);
|
||||||
|
this.handleRefresh();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// ↓ 处理 ApiBaseInfo Json数据格式 返回 Object 格式 ↓
|
||||||
|
JsonToObject(json) {
|
||||||
|
if (json) {
|
||||||
|
let flag = /\'/.test(json);
|
||||||
|
if (flag) {
|
||||||
|
return JSON.parse(json.replace(/\'/gi, '"'));
|
||||||
|
} else {
|
||||||
|
return JSON.parse(json);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// ↓ JSON 表格 行编辑 ↓
|
||||||
|
rowCellJSON(row, index) {
|
||||||
|
this.$refs.crudJSON.rowCell(row, index);
|
||||||
|
},
|
||||||
|
// ↓ JSON 表格 编辑行数据 ↓
|
||||||
|
addUpdateJSON(form, index, done, loading) {
|
||||||
|
loading();
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
// ↓ JSON 表格 保存行数据 ↓
|
||||||
|
rowSaveJSON(form, done) {
|
||||||
|
done();
|
||||||
|
this.formFieldsData.env_json = this.handlerJson(this.jsonTableData);
|
||||||
|
},
|
||||||
|
// ↓ JSON 表格 删除行数据 ↓
|
||||||
|
rowDelJSON(form, index, done) {
|
||||||
|
this.jsonTableData.splice(index, 1);
|
||||||
|
this.formFieldsData.env_json = this.handlerJson(this.jsonTableData);
|
||||||
|
},
|
||||||
|
handlerJson(arrData) {
|
||||||
|
let cache = {};
|
||||||
|
arrData.forEach(item => {
|
||||||
|
cache[item.key] = item.value;
|
||||||
|
});
|
||||||
|
if (Object.keys(cache).length) {
|
||||||
|
return JSON.stringify(cache);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,659 @@
|
|||||||
|
<template>
|
||||||
|
<div class="run-container">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-row style="margin-bottom:5px">
|
||||||
|
<el-button
|
||||||
|
@click="dialogTableVisible = true"
|
||||||
|
class="filter-item fr"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-s-grid"
|
||||||
|
>
|
||||||
|
</el-button>
|
||||||
|
<el-select
|
||||||
|
style="margin-right:5px"
|
||||||
|
class="filter-item fr"
|
||||||
|
@change="changeUserenv"
|
||||||
|
v-model="currentEnvId"
|
||||||
|
placeholder="用户环境变量"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
:value="env.id"
|
||||||
|
:label="env.env_name"
|
||||||
|
v-for="env in userEnvInfos"
|
||||||
|
:key="env.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-row>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="currentInputUrl"
|
||||||
|
class="input-with-select"
|
||||||
|
:disabled="userable"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
class="method_select"
|
||||||
|
:disabled="userable"
|
||||||
|
v-model="currentSelectMethod"
|
||||||
|
slot="prepend"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(mth, index) in apiMethods"
|
||||||
|
:key="index"
|
||||||
|
:label="mth"
|
||||||
|
:value="mth"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
class="apisend"
|
||||||
|
slot="append"
|
||||||
|
icon="el-icon-s-promotion"
|
||||||
|
@click="_runapi"
|
||||||
|
:disabled="sendAble"
|
||||||
|
>发送</el-button
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<el-tabs class="mt30 tab-liut" type="border-card">
|
||||||
|
<el-tab-pane label="Header">
|
||||||
|
<el-table :data="headerTableData">
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-checkbox v-model="row.open"></el-checkbox>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="KEY">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn v-model="row.key" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="VALUE">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn :selectshow="true" v-model="row.value" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
circle
|
||||||
|
@click="addRow(headerTableData, scope)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-delete"
|
||||||
|
circle
|
||||||
|
type="danger"
|
||||||
|
@click="delRow(row, headerTableData)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Query">
|
||||||
|
<el-table :data="queryTableData">
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-checkbox v-model="row.open"></el-checkbox>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="KEY">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn v-model="row.key" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="VALUE">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn :selectshow="true" v-model="row.value" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
circle
|
||||||
|
@click="addRow(queryTableData, scope)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-delete"
|
||||||
|
circle
|
||||||
|
type="danger"
|
||||||
|
@click="delRow(row, queryTableData)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="Body">
|
||||||
|
<el-radio-group v-model="radio">
|
||||||
|
<el-radio :label="0">none</el-radio>
|
||||||
|
<el-radio :label="1">form-data</el-radio>
|
||||||
|
<el-radio :label="2">x-www-form-urlencoded</el-radio>
|
||||||
|
<el-radio :label="3">json</el-radio>
|
||||||
|
<el-radio :label="4">raw(json)</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<vue-json-editor
|
||||||
|
class="vjd"
|
||||||
|
v-if="radio === 4"
|
||||||
|
v-model="rawJson"
|
||||||
|
:mode="'code'"
|
||||||
|
lang="zh"
|
||||||
|
></vue-json-editor>
|
||||||
|
<el-table
|
||||||
|
v-else
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="This request dose not have a body"
|
||||||
|
element-loading-spinner="el-icon-warning"
|
||||||
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||||
|
:data="bodyTableData"
|
||||||
|
>
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-checkbox v-model="row.open"></el-checkbox>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="KEY">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn v-model="row.key" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="VALUE">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<item-btn :selectshow="true" v-model="row.value" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="50">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
circle
|
||||||
|
@click="addRow(bodyTableData, scope)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-delete"
|
||||||
|
circle
|
||||||
|
type="danger"
|
||||||
|
@click="delRow(row, bodyTableData)"
|
||||||
|
></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<el-card v-if="json" class="box-card mt30">
|
||||||
|
<json-view :data="json" />
|
||||||
|
</el-card>
|
||||||
|
</el-card>
|
||||||
|
<el-dialog :title="currentUserEnvName" :visible.sync="dialogTableVisible">
|
||||||
|
<el-table :data="currentUserEnvJson" border style="width: 100%">
|
||||||
|
<el-table-column prop="key" label="变量" fit> </el-table-column>
|
||||||
|
<el-table-column prop="value" label="值" fit> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import vueJsonEditor from "vue-json-editor";
|
||||||
|
import { userenvList } from "@/api/userenv";
|
||||||
|
import ItemBtn from "./itemBtn.vue";
|
||||||
|
import jsonView from "vue-json-views";
|
||||||
|
import axios from "axios";
|
||||||
|
import qs from "qs";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
jsonView,
|
||||||
|
ItemBtn,
|
||||||
|
vueJsonEditor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// ↓ 是否允许用户发送请求 ↓
|
||||||
|
sendAble: false,
|
||||||
|
// ↓ 是否允许用户编辑 ↓
|
||||||
|
userable: false,
|
||||||
|
// ↓ 用户变量对话框展示与隐藏 ↓
|
||||||
|
dialogTableVisible: false,
|
||||||
|
// ↓ Api Mthods ↓
|
||||||
|
apiMethods: [
|
||||||
|
"POST",
|
||||||
|
"GET",
|
||||||
|
"PUT",
|
||||||
|
"PATCH",
|
||||||
|
"DELETE",
|
||||||
|
"COPY",
|
||||||
|
"HEAD",
|
||||||
|
"OPTIONS"
|
||||||
|
],
|
||||||
|
// ↓ Api 响应 ↓
|
||||||
|
json: null,
|
||||||
|
// ↓ api接口基本信息 ↓
|
||||||
|
apiBaseInfo: {},
|
||||||
|
// ↓ 用户所有环境变量 ↓
|
||||||
|
userEnvInfos: [],
|
||||||
|
// ↓ 当前用户选择的环境变量id ↓
|
||||||
|
currentEnvId: null,
|
||||||
|
// ↓ 用户当前输入的Url ↓
|
||||||
|
currentInputUrl: "",
|
||||||
|
// ↓ 用户当前选择的Api Method ↓
|
||||||
|
currentSelectMethod: "GET",
|
||||||
|
regEnv: /\{\{(.+?)\}\}/g,
|
||||||
|
// ↓ 请求 body 下的 数据发送格式 0:none 1:form-data 2:x-www-form-urlencoded ↓
|
||||||
|
radio: 2,
|
||||||
|
checked: true,
|
||||||
|
input: "",
|
||||||
|
// ↓ 请求Body ↓
|
||||||
|
bodyTableData: [],
|
||||||
|
headerTableData: [],
|
||||||
|
queryTableData: [],
|
||||||
|
radioLabel: ["none", "form-data", "x-www-form-urlencoded", "json"],
|
||||||
|
rawJson: {},
|
||||||
|
headers: null,
|
||||||
|
params: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// ↓ 用户当前选择环境变量信息 ↓
|
||||||
|
currentUserEnvInfo() {
|
||||||
|
if (this.userEnvInfos.length !== 0) {
|
||||||
|
return this.userEnvInfos.filter(env => env.id === this.currentEnvId)[0];
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// ↓ 用户当前选择环境变量信息键值对模型 ↓
|
||||||
|
currentUserEnvJson() {
|
||||||
|
if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_json) {
|
||||||
|
let obj = JSON.parse(this.currentUserEnvInfo.env_json);
|
||||||
|
return Object.entries(obj).map(item => {
|
||||||
|
return { key: item[0], value: item[1] };
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// ↓ 用户当前选择的环境变量名称 ↓
|
||||||
|
currentUserEnvName() {
|
||||||
|
if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_name) {
|
||||||
|
return this.currentUserEnvInfo.env_name;
|
||||||
|
} else {
|
||||||
|
return "未定义名称";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// ↓ 用户当前选择环境变量信息Map数据模型 ↓
|
||||||
|
currentUserEnvMap() {
|
||||||
|
if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_json) {
|
||||||
|
let obj = JSON.parse(this.currentUserEnvInfo.env_json);
|
||||||
|
return obj;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// ↓ Api接口url (base_url + url) ↓
|
||||||
|
currentApiUrl() {
|
||||||
|
// ↓ reg formula ↓
|
||||||
|
let regEnv = /\{\{(.+?)\}\}/g;
|
||||||
|
// ↓ 拿到用户当前地址栏看见的 Url ↓
|
||||||
|
let curInputUrl = this.currentInputUrl;
|
||||||
|
// ↓ 判断用户是否使用了变量环境字符串 ↓
|
||||||
|
let flag = regEnv.test(curInputUrl);
|
||||||
|
if (flag) {
|
||||||
|
if (this.currentUserEnvMap) {
|
||||||
|
let new_url = this.replaceUserenv(curInputUrl); //curInputUrl.replace(regEnv,this.currentUserEnvMap["{{host}}"]);
|
||||||
|
return new_url;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return curInputUrl;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loading() {
|
||||||
|
return !Boolean(this.radio);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
let id = this.$route.query.id;
|
||||||
|
this.$http.get("apitester/" + id).then(response => {
|
||||||
|
this.apiBaseInfo = response.data;
|
||||||
|
this.apiBaseInfo.body = this.apiBaseInfo.body.replace(/'/g, '"');
|
||||||
|
if (this.apiBaseInfo.body) {
|
||||||
|
let resstr = this.apiBaseInfo.body
|
||||||
|
.replace(/\\/g, "")
|
||||||
|
.replace(/"{/g, "{")
|
||||||
|
.replace(/}"/g, "}");
|
||||||
|
this.rawJson = JSON.parse(resstr);
|
||||||
|
} else {
|
||||||
|
this.rawJson = {};
|
||||||
|
}
|
||||||
|
this.resetMethodAndUrl();
|
||||||
|
this.initTable();
|
||||||
|
});
|
||||||
|
userenvList().then(response => {
|
||||||
|
this.userEnvInfos = response.data;
|
||||||
|
if (response.data.length !== 0) {
|
||||||
|
response.data.forEach(env => {
|
||||||
|
if (env.selected) {
|
||||||
|
this.currentEnvId = env.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**@dis 初始化table表格 */
|
||||||
|
initTable() {
|
||||||
|
let { header, query, body, content_type } = this.apiBaseInfo;
|
||||||
|
this.radio = this.radioLabel.findIndex(el => {
|
||||||
|
if (content_type.indexOf(el) !== -1) return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
let resTable = [header, query, body].map(el => {
|
||||||
|
return el ? JSON.parse(el) : false;
|
||||||
|
});
|
||||||
|
[this.headerTableData, this.queryTableData, this.bodyTableData].some(
|
||||||
|
(el, index) => {
|
||||||
|
if (resTable[index] === false) return false;
|
||||||
|
for (const [key, value] of Object.entries(resTable[index])) {
|
||||||
|
if (typeof value === "string") {
|
||||||
|
el.push({ open: true, key: key.trim(), value: value.trim() });
|
||||||
|
} else if (typeof value === "object") {
|
||||||
|
el.push({
|
||||||
|
open: true,
|
||||||
|
key: key.trim(),
|
||||||
|
value: JSON.stringify(value)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
el.push({ open: true, key: key.trim(), value });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watchParam(arr) {
|
||||||
|
let regEnv = /\{\{(.+?)\}\}/g;
|
||||||
|
let watchCeche = {};
|
||||||
|
arr.forEach(item => {
|
||||||
|
let regFlag = regEnv.test(item.value);
|
||||||
|
let cacheFlag = this.currentUserEnvMap[item.value];
|
||||||
|
if (regFlag && cacheFlag) {
|
||||||
|
watchCeche[item.key] = cacheFlag;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return watchCeche;
|
||||||
|
},
|
||||||
|
// ↓ 执行Api 核心业务逻辑 ↓
|
||||||
|
_runapi() {
|
||||||
|
this.requestBeforeHook();
|
||||||
|
switch (this.currentSelectMethod) {
|
||||||
|
case "POST":
|
||||||
|
this.apiPost();
|
||||||
|
break;
|
||||||
|
case "GET":
|
||||||
|
this.apiGet();
|
||||||
|
break;
|
||||||
|
case "PUT":
|
||||||
|
this.apiPut();
|
||||||
|
break;
|
||||||
|
case "DELETE":
|
||||||
|
this.apiDelete();
|
||||||
|
break;
|
||||||
|
case "PATCH":
|
||||||
|
case "COPY":
|
||||||
|
case "HEAD":
|
||||||
|
case "OPTIONS":
|
||||||
|
this.$notify({
|
||||||
|
title: "消息",
|
||||||
|
message: "通知开发人员进行扩展",
|
||||||
|
type: "info"
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.$notify({
|
||||||
|
title: "消息",
|
||||||
|
message: "平台版本暂时不支持该请求方法",
|
||||||
|
type: "info"
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
headFactory(ctype, args) {
|
||||||
|
let product = null;
|
||||||
|
switch (ctype) {
|
||||||
|
case "x-www-form-urlencoded":
|
||||||
|
product = qs.stringify(args);
|
||||||
|
break;
|
||||||
|
case "form-data":
|
||||||
|
let data = new FormData();
|
||||||
|
for (const key in args) {
|
||||||
|
data.append(key, args[key]);
|
||||||
|
}
|
||||||
|
product = data;
|
||||||
|
break;
|
||||||
|
case "raw":
|
||||||
|
this.$notify({
|
||||||
|
title: "消息",
|
||||||
|
message: "平台版本暂时还未支持raw数据格式",
|
||||||
|
type: "info"
|
||||||
|
});
|
||||||
|
product = args;
|
||||||
|
break;
|
||||||
|
case "json":
|
||||||
|
default:
|
||||||
|
product = args;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return product;
|
||||||
|
},
|
||||||
|
tbDataToObj(tb) {
|
||||||
|
const params = {};
|
||||||
|
tb.filter(el => el.open)
|
||||||
|
.map(el =>
|
||||||
|
Object.defineProperty({}, el.key, {
|
||||||
|
value: el.value,
|
||||||
|
writable: true,
|
||||||
|
enumerable: true,
|
||||||
|
configurable: true
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.forEach(el => Object.assign(params, el));
|
||||||
|
return params;
|
||||||
|
},
|
||||||
|
async apiGet() {
|
||||||
|
let { status, data } = await axios
|
||||||
|
.get(this.currentApiUrl, {
|
||||||
|
headers: this.headers,
|
||||||
|
params: this.params
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.json = err;
|
||||||
|
this.$notify({
|
||||||
|
title: "失败",
|
||||||
|
message: "请求发送失败",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (status === 200) {
|
||||||
|
this.json = data;
|
||||||
|
this.$notify({
|
||||||
|
title: "成功",
|
||||||
|
message: "请求发送成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async apiPost() {
|
||||||
|
const data =
|
||||||
|
this.radio === 4
|
||||||
|
? this.rawJson
|
||||||
|
: this.headFactory(
|
||||||
|
this.radioLabel[this.radio],
|
||||||
|
this.tbDataToObj(this.bodyTableData)
|
||||||
|
);
|
||||||
|
let res = await axios
|
||||||
|
.post(this.currentApiUrl, data, {
|
||||||
|
headers: this.headers,
|
||||||
|
params: this.params
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.json = {};
|
||||||
|
this.$notify({
|
||||||
|
title: "失败",
|
||||||
|
message: "请求发送失败",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.json = res.data;
|
||||||
|
this.$notify({
|
||||||
|
title: "成功",
|
||||||
|
message: "请求发送成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async apiPut() {
|
||||||
|
const data = this.headFactory(
|
||||||
|
this.radioLabel[this.radio],
|
||||||
|
this.tbDataToObj(this.bodyTableData)
|
||||||
|
);
|
||||||
|
|
||||||
|
let res = await axios
|
||||||
|
.put(this.currentApiUrl, data, {
|
||||||
|
headers: this.headers,
|
||||||
|
params: this.params
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.json = err;
|
||||||
|
this.$notify({
|
||||||
|
title: "失败",
|
||||||
|
message: "请求发送失败",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.json = res.data;
|
||||||
|
this.$notify({
|
||||||
|
title: "成功",
|
||||||
|
message: "请求发送成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async apiDelete() {
|
||||||
|
const data =
|
||||||
|
this.radio === 4
|
||||||
|
? this.rawJson
|
||||||
|
: this.headFactory(
|
||||||
|
this.radioLabel[this.radio],
|
||||||
|
this.tbDataToObj(this.bodyTableData)
|
||||||
|
);
|
||||||
|
let res = await axios
|
||||||
|
.delete(this.currentApiUrl, {
|
||||||
|
data,
|
||||||
|
headers: this.headers,
|
||||||
|
params: this.params
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.json = err;
|
||||||
|
this.$notify({
|
||||||
|
title: "失败",
|
||||||
|
message: "请求发送失败",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.json = res.data;
|
||||||
|
this.$notify({
|
||||||
|
title: "成功",
|
||||||
|
message: "请求发送成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
requestBeforeHook() {
|
||||||
|
this.headers = this.watchParam(this.headerTableData);
|
||||||
|
this.params = Object.assign(
|
||||||
|
this.tbDataToObj(this.queryTableData),
|
||||||
|
this.watchParam(this.queryTableData)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// ↓ 修改用户环境变量 ↓
|
||||||
|
changeUserenv(env) {
|
||||||
|
this.$http.get("apiTesterUserenv/selectAPIenv/" + env).then(response => {
|
||||||
|
this.$message.success(response.message);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// ↓ 重置 Api Methods 与 Api Url ↓
|
||||||
|
resetMethodAndUrl() {
|
||||||
|
this.currentInputUrl = this.apiBaseInfo.api_url;
|
||||||
|
this.currentSelectMethod = this.apiBaseInfo.methods.toLocaleUpperCase();
|
||||||
|
},
|
||||||
|
//循环用户选中的环境变量进行替换
|
||||||
|
replaceUserenv(orgStr) {
|
||||||
|
let userEnv = this.currentUserEnvJson;
|
||||||
|
for (let envelement of userEnv) {
|
||||||
|
orgStr = orgStr.replace(envelement.key, envelement.value);
|
||||||
|
}
|
||||||
|
return orgStr;
|
||||||
|
},
|
||||||
|
/**@dis 删除行 */
|
||||||
|
delRow(row, _table) {
|
||||||
|
let index = _table.findIndex(_row => row === _row);
|
||||||
|
_table.splice(index, 1);
|
||||||
|
},
|
||||||
|
addRow(_table) {
|
||||||
|
_table.push({ open: false, key: "KEY", value: "VALUE" });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// ↓ 监听经过处理的 Api Url 控制发送按钮是否开启 ↓
|
||||||
|
currentApiUrl(url) {
|
||||||
|
let flag = /http|https/.test(url);
|
||||||
|
if (url && flag) {
|
||||||
|
this.sendAble = false;
|
||||||
|
} else {
|
||||||
|
this.sendAble = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.run-container {
|
||||||
|
margin: 20px;
|
||||||
|
.method_select {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.apisend {
|
||||||
|
background-color: #70b9eb;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.mt30 {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.tab-liut {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.vjd {
|
||||||
|
.jsoneditor-vue {
|
||||||
|
height: 430px;
|
||||||
|
}
|
||||||
|
.jsoneditor-poweredBy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item-btn-container">
|
||||||
|
<el-row>
|
||||||
|
<el-col v-show="!selectValue" :span="18">
|
||||||
|
<el-button @click="clickBtn" v-if="isShow">{{ value }}</el-button>
|
||||||
|
<el-input
|
||||||
|
ref="inputRef"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-else
|
||||||
|
:value="value"
|
||||||
|
@blur="inputBlur"
|
||||||
|
@input="value => this.$emit('input', value)"
|
||||||
|
></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-show="selectValue" :span="18">
|
||||||
|
<el-tag v-if="filename" @close="delFile" closable type="success">{{
|
||||||
|
filename
|
||||||
|
}}</el-tag>
|
||||||
|
<el-upload
|
||||||
|
v-else
|
||||||
|
action="/upload/image"
|
||||||
|
:limit="1"
|
||||||
|
ref="upload"
|
||||||
|
:show-file-list="false"
|
||||||
|
:http-request="uploadGuard"
|
||||||
|
>
|
||||||
|
<el-button size="small" type="primary">点击上传</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-select v-if="selectshow" v-model="selectValue">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, File, Number],
|
||||||
|
default() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectshow: {
|
||||||
|
value: Boolean,
|
||||||
|
default() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: false,
|
||||||
|
label: "Text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: true,
|
||||||
|
label: "File"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectValue: false,
|
||||||
|
filename: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
uploadFile() {
|
||||||
|
return this.$refs.upload;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**@dis 切换状态 */
|
||||||
|
clickBtn() {
|
||||||
|
this.isShow = false;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.inputRef.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
inputBlur() {
|
||||||
|
this.isShow = true;
|
||||||
|
},
|
||||||
|
uploadGuard({ file }) {
|
||||||
|
this.filename = file.name;
|
||||||
|
this.$emit("input", file);
|
||||||
|
},
|
||||||
|
delFile() {
|
||||||
|
this.filename = "";
|
||||||
|
this.$emit("input", null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.item-btn-container {
|
||||||
|
.el-button {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,816 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>分类</span>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<el-tree
|
||||||
|
:data="apicategory"
|
||||||
|
:props="apicategoryProps"
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
@node-click="getApicategoryData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18">
|
||||||
|
<div class="filter-container">
|
||||||
|
<el-row>
|
||||||
|
<el-input
|
||||||
|
v-model="queryParam.api_title"
|
||||||
|
placeholder="名称"
|
||||||
|
clearable
|
||||||
|
class="filter-item form-search-input"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-model="queryParam.api_name"
|
||||||
|
placeholder="标识"
|
||||||
|
clearable
|
||||||
|
class="filter-item form-search-input"
|
||||||
|
/>
|
||||||
|
<el-select
|
||||||
|
v-model="queryParam.type"
|
||||||
|
clearable
|
||||||
|
placeholder="请选择数据源类型"
|
||||||
|
class="filter-item"
|
||||||
|
style="margin-right: 5px"
|
||||||
|
>
|
||||||
|
<el-option value="1" label="remote" />
|
||||||
|
<el-option value="2" label="local" />
|
||||||
|
</el-select>
|
||||||
|
<el-button
|
||||||
|
class="filter-item fr"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="handleRefresh"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
style="margin-right: 5px"
|
||||||
|
class="filter-item fr search"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="handleSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
<el-row style="margin-top: 5px">
|
||||||
|
<el-select
|
||||||
|
class="filter-item "
|
||||||
|
@change="changeUserenv"
|
||||||
|
v-model="userenvid"
|
||||||
|
placeholder="用户环境变量"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
:value="env.id"
|
||||||
|
:label="env.env_name"
|
||||||
|
v-for="env in userenvs"
|
||||||
|
:key="env.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-button
|
||||||
|
class="filter-item fr"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="handleCreate"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
v-if="this.selectedIds.length"
|
||||||
|
size="small"
|
||||||
|
class="filter-item mb-5"
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleMultiDelete"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="data"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
@selection-change="handleSelectMulti"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55"
|
||||||
|
:selectable="selectInit"
|
||||||
|
/>
|
||||||
|
<el-table-column label="名称">
|
||||||
|
<template slot-scope="api">{{ api.row.api_title }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="methods" label="methods" />
|
||||||
|
<el-table-column prop="api_name" label="标识" />
|
||||||
|
<!-- <el-table-column prop="status" label="状态">
|
||||||
|
<template slot-scope="api">
|
||||||
|
<el-switch
|
||||||
|
v-if="api.row.id === 0"
|
||||||
|
v-model="api.row.status"
|
||||||
|
disabled
|
||||||
|
active-text="启用"
|
||||||
|
:active-value="1"
|
||||||
|
/>
|
||||||
|
<el-switch
|
||||||
|
v-else
|
||||||
|
v-model="api.row.status"
|
||||||
|
active-text="启用"
|
||||||
|
inactive-text="禁用"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="2"
|
||||||
|
@change="disOrEnableUser(api.row)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
<el-table-column prop="type" label="数据源类型">
|
||||||
|
<template slot-scope="api">
|
||||||
|
<el-tag v-if="api.row.type === 1" type="success">remote</el-tag>
|
||||||
|
<el-tag v-if="api.row.type === 2" type="danger">local</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="created_at" label="创建时间" />
|
||||||
|
<el-table-column label="操作" fixed="right" width="300">
|
||||||
|
<template slot-scope="api">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="testApi(api.row.id)"
|
||||||
|
>测试</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
v-if="api.row.id === 0"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
v-else
|
||||||
|
@click="beforeHandleUpdate(api.row)"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
v-if="api.row.id === 0"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
v-else
|
||||||
|
@click="handleDelete(api.row.id)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
class="pagination-container"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="paginate.current"
|
||||||
|
hide-on-single-page
|
||||||
|
:page-sizes="paginate.sizes"
|
||||||
|
:page-size="paginate.limit"
|
||||||
|
:layout="paginate.layout"
|
||||||
|
:total="paginate.total"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!----------------------------------- API ---------------------------------------------->
|
||||||
|
<el-dialog
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="formVisible"
|
||||||
|
:destroy-on-close="true"
|
||||||
|
@close="handleCancel()"
|
||||||
|
>
|
||||||
|
<el-form :ref="formName" :model="formFieldsData" :rules="rules">
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-form-item
|
||||||
|
label="分类"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="category_id"
|
||||||
|
>
|
||||||
|
<el-cascader
|
||||||
|
v-model="formFieldsData.category_id"
|
||||||
|
:options="treeCategory.data"
|
||||||
|
:props="treeCategory.prop"
|
||||||
|
:show-all-levels="false"
|
||||||
|
style="width: 85%"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="type" :label-width="formLabelWidth" prop="type">
|
||||||
|
<el-select
|
||||||
|
v-model="formFieldsData.type"
|
||||||
|
style="width: 85%"
|
||||||
|
placeholder="请选择数据源类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, key) in type"
|
||||||
|
:key="key"
|
||||||
|
:label="item"
|
||||||
|
:value="key"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="名称"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="api_title"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formFieldsData.api_title"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="标识"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="api_name"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formFieldsData.api_name"
|
||||||
|
placeholder="请输入英文唯一标识"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="methods类型"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="methods"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
v-model="formFieldsData.methods"
|
||||||
|
placeholder="请选择methods类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, key) in methodsTypes"
|
||||||
|
:key="key"
|
||||||
|
:label="item"
|
||||||
|
:value="key"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="api_url"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="api_url"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formFieldsData.api_url"
|
||||||
|
placeholder="请输入api地址"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Header">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudHeader"
|
||||||
|
:option="tableOption"
|
||||||
|
:data="headerTableData"
|
||||||
|
@row-update="addUpdateHeader"
|
||||||
|
@row-del="rowDelHeader"
|
||||||
|
@row-save="rowSaveHeader"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row, index }" slot="menu">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="rowCellHeader(row, index)"
|
||||||
|
>{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Body">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudBody"
|
||||||
|
:option="tableOption"
|
||||||
|
:data="bodyTableData"
|
||||||
|
@row-update="addUpdateBody"
|
||||||
|
@row-del="rowDelBody"
|
||||||
|
@row-save="rowSaveBody"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row, index }" slot="menu">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="rowCellBody(row, index)"
|
||||||
|
>{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Query">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudQuery"
|
||||||
|
:option="tableOption"
|
||||||
|
:data="queryTableData"
|
||||||
|
@row-update="addUpdateQuery"
|
||||||
|
@row-del="rowDelQuery"
|
||||||
|
@row-save="rowSaveQuery"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row, index }" slot="menu">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="rowCellQuery(row, index)"
|
||||||
|
>{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Auth">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudAuth"
|
||||||
|
:option="tableOption"
|
||||||
|
:data="authTableData"
|
||||||
|
@row-update="addUpdateAuth"
|
||||||
|
@row-del="rowDelAuth"
|
||||||
|
@row-save="rowSaveAuth"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row, index }" slot="menu">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="rowCellAuth(row, index)"
|
||||||
|
>{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="content-type"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="content_type"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
v-model="formFieldsData.content_type"
|
||||||
|
style="width: 85%"
|
||||||
|
placeholder="请选择content_type类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, key) in content_types"
|
||||||
|
:key="key"
|
||||||
|
:label="item"
|
||||||
|
:value="key"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="文档url"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="doc_url"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="formFieldsData.doc_url"
|
||||||
|
placeholder="请输入文档url地址"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="文档"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="document"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="5"
|
||||||
|
v-model="formFieldsData.document"
|
||||||
|
placeholder="请输入文档内容，markdown格式"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="示例请求数据"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="sample_data"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="5"
|
||||||
|
v-model="formFieldsData.sample_data"
|
||||||
|
placeholder="请输入示例请求数据"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="示例返回数据"
|
||||||
|
:label-width="formLabelWidth"
|
||||||
|
prop="sample_result"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="5"
|
||||||
|
v-model="formFieldsData.sample_result"
|
||||||
|
placeholder="请输入示例返回数据"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formFieldsData.sort"
|
||||||
|
:min="1"
|
||||||
|
:max="100000"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" :label-width="formLabelWidth">
|
||||||
|
<el-radio v-model="formFieldsData.status" :label="1" checked
|
||||||
|
>已完成</el-radio
|
||||||
|
>
|
||||||
|
<el-radio v-model="formFieldsData.status" :label="2"
|
||||||
|
>待开发</el-radio
|
||||||
|
>
|
||||||
|
<el-radio v-model="formFieldsData.status" :label="3"
|
||||||
|
>开发中</el-radio
|
||||||
|
>
|
||||||
|
<el-radio v-model="formFieldsData.status" :label="4"
|
||||||
|
>已废弃</el-radio
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleCancel()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="submit">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import formOperate from "@/layout/mixin/formOperate";
|
||||||
|
import { userenvList } from "@/api/userenv";
|
||||||
|
export default {
|
||||||
|
name: "apimanager_apitester",
|
||||||
|
mixins: [formOperate],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formName: "apis",
|
||||||
|
// 刷新路由
|
||||||
|
refreshRoute: true,
|
||||||
|
apicategoryProps: {
|
||||||
|
label: "category_title"
|
||||||
|
},
|
||||||
|
formLabelWidth: "120px",
|
||||||
|
// api搜索
|
||||||
|
queryParam: {
|
||||||
|
api_title: "",
|
||||||
|
api_name: "",
|
||||||
|
status: "",
|
||||||
|
type: "",
|
||||||
|
category_id: ""
|
||||||
|
},
|
||||||
|
formVisible: false,
|
||||||
|
formFieldsData: {
|
||||||
|
api_title: "",
|
||||||
|
api_name: "",
|
||||||
|
api_url: "",
|
||||||
|
category_id: 0,
|
||||||
|
type: "",
|
||||||
|
methods: "",
|
||||||
|
auth: "",
|
||||||
|
header: "",
|
||||||
|
query: "",
|
||||||
|
body: "",
|
||||||
|
doc_url: "",
|
||||||
|
document: "",
|
||||||
|
sample_data: "",
|
||||||
|
sample_result: "",
|
||||||
|
sort: "",
|
||||||
|
status: "",
|
||||||
|
content_type: "",
|
||||||
|
env_id: "",
|
||||||
|
memo: ""
|
||||||
|
},
|
||||||
|
url: "apitester",
|
||||||
|
data: [],
|
||||||
|
// 分类
|
||||||
|
treeCategory: {
|
||||||
|
data: [],
|
||||||
|
default: [],
|
||||||
|
prop: {
|
||||||
|
label: "category_title",
|
||||||
|
value: "id",
|
||||||
|
emitPath: false,
|
||||||
|
checkStrictly: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// methods类型
|
||||||
|
type: {
|
||||||
|
1: "remote",
|
||||||
|
2: "local"
|
||||||
|
},
|
||||||
|
// methods类型
|
||||||
|
methodsTypes: {
|
||||||
|
POST: "POST",
|
||||||
|
GET: "GET",
|
||||||
|
PUT: "PUT",
|
||||||
|
PATCH: "PATCH",
|
||||||
|
DELETE: "DELETE",
|
||||||
|
COPY: "COPY",
|
||||||
|
HEAD: "HEAD",
|
||||||
|
OPTIONS: "OPTIONS"
|
||||||
|
},
|
||||||
|
content_types: {
|
||||||
|
"application/x-www-form-urlencoded":
|
||||||
|
"application/x-www-form-urlencoded",
|
||||||
|
"application/json; charset=utf-8": "application/json; charset=utf-8",
|
||||||
|
"multipart/form-data": "multipart/form-data",
|
||||||
|
raw: "raw"
|
||||||
|
},
|
||||||
|
// 表单验证
|
||||||
|
rules: {
|
||||||
|
api_title: [
|
||||||
|
{ required: true, message: "请输入名称", trigger: "blur" },
|
||||||
|
{ min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
|
||||||
|
],
|
||||||
|
api_name: [
|
||||||
|
{ required: true, message: "请输入英文唯一标识", trigger: "blur" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 分类
|
||||||
|
apicategory: [],
|
||||||
|
userenvs: [],
|
||||||
|
userenvid: {},
|
||||||
|
// ↓ api form 表单 ↓
|
||||||
|
headerTableData: [],
|
||||||
|
bodyTableData: [],
|
||||||
|
queryTableData: [],
|
||||||
|
authTableData: [],
|
||||||
|
// ↓ api form 表单 Options ↓
|
||||||
|
tableOption: {
|
||||||
|
refreshBtn: false,
|
||||||
|
addBtn: false,
|
||||||
|
editBtn: false,
|
||||||
|
addRowBtn: true,
|
||||||
|
cancelBtn: false,
|
||||||
|
border: true,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: "Key",
|
||||||
|
prop: "key",
|
||||||
|
cell: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入Key值",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Value",
|
||||||
|
prop: "value",
|
||||||
|
cell: true,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入Value值",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 初始化数据
|
||||||
|
mounted() {
|
||||||
|
this.$http.get("apicategory").then(response => {
|
||||||
|
this.apicategory = response.data;
|
||||||
|
});
|
||||||
|
userenvList().then(response => {
|
||||||
|
if (response.data.length !== 0) {
|
||||||
|
response.data.forEach(env => {
|
||||||
|
if (env.selected) {
|
||||||
|
this.userenvid = env.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.userenvs = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
testApi(id) {
|
||||||
|
this.$router.push({ path: "/apimanager/apirun", query: { id } });
|
||||||
|
},
|
||||||
|
// 获取分类API
|
||||||
|
getApicategoryData(data, node, self) {
|
||||||
|
this.queryParam.category_id = data.id;
|
||||||
|
this.handleSearch();
|
||||||
|
},
|
||||||
|
// 禁用/启用
|
||||||
|
disOrEnableApi(api) {
|
||||||
|
this.$http.put("apitester/switch/status/" + api.id).then(response => {
|
||||||
|
this.$message({
|
||||||
|
message: response.message,
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
this.$http.get("apicategory").then(response => {
|
||||||
|
this.treeCategory.data = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeHandleUpdate(api) {
|
||||||
|
this.beforeCreate();
|
||||||
|
this.$http.get(this.url + "/" + api.id).then(response => {
|
||||||
|
const api = response.data;
|
||||||
|
this.handleUpdate(api);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectInit(row, index) {
|
||||||
|
return row.id !== 0;
|
||||||
|
},
|
||||||
|
submit() {
|
||||||
|
this.handleSubmit();
|
||||||
|
},
|
||||||
|
onJsonChange(value) {
|
||||||
|
console.log("value:", value);
|
||||||
|
},
|
||||||
|
onJsonSave(value) {
|
||||||
|
console.log("value:", value);
|
||||||
|
},
|
||||||
|
changeUserenv(env) {
|
||||||
|
this.$http
|
||||||
|
.get("apiTesterUserenv/selectAPIenv/" + env)
|
||||||
|
.then(response => {});
|
||||||
|
},
|
||||||
|
// ↓ Header 表格 行编辑 ↓
|
||||||
|
rowCellHeader(row, index) {
|
||||||
|
this.$refs.crudHeader.rowCell(row, index);
|
||||||
|
},
|
||||||
|
rowCellBody(row, index) {
|
||||||
|
this.$refs.crudBody.rowCell(row, index);
|
||||||
|
},
|
||||||
|
rowCellQuery(row, index) {
|
||||||
|
this.$refs.crudQuery.rowCell(row, index);
|
||||||
|
},
|
||||||
|
rowCellAuth(row, index) {
|
||||||
|
this.$refs.crudAuth.rowCell(row, index);
|
||||||
|
},
|
||||||
|
// ↓ Header 表格 编辑行数据 ↓
|
||||||
|
addUpdateHeader(form, index, done, loading) {
|
||||||
|
loading();
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
addUpdateBody(form, index, done, loading) {
|
||||||
|
loading();
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
addUpdateQuery(form, index, done, loading) {
|
||||||
|
loading();
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
addUpdateAuth(form, index, done, loading) {
|
||||||
|
loading();
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
afterCancel() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.headerTableData = [];
|
||||||
|
this.bodyTableData = [];
|
||||||
|
this.queryTableData = [];
|
||||||
|
this.authTableData = [];
|
||||||
|
}, 400);
|
||||||
|
Object.keys(this.formFieldsData).forEach(k => {
|
||||||
|
switch (k) {
|
||||||
|
case "category_id":
|
||||||
|
this.formFieldsData[k] = null;
|
||||||
|
break;
|
||||||
|
case "type":
|
||||||
|
this.formFieldsData[k] = "1";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// ↓ Header 表格 保存行数据 ↓
|
||||||
|
rowSaveHeader(form, done) {
|
||||||
|
done();
|
||||||
|
let json = this.handlerTable(this.headerTableData);
|
||||||
|
this.formFieldsData.header = json;
|
||||||
|
},
|
||||||
|
rowSaveBody(form, done) {
|
||||||
|
done();
|
||||||
|
let json = this.handlerTable(this.bodyTableData);
|
||||||
|
this.formFieldsData.body = json;
|
||||||
|
},
|
||||||
|
rowSaveQuery(form, done) {
|
||||||
|
done();
|
||||||
|
let json = this.handlerTable(this.queryTableData);
|
||||||
|
this.formFieldsData.query = json;
|
||||||
|
},
|
||||||
|
rowSaveAuth(form, done) {
|
||||||
|
done();
|
||||||
|
let json = this.handlerTable(this.authTableData);
|
||||||
|
this.formFieldsData.auth = json;
|
||||||
|
},
|
||||||
|
// ↓ Header 表格 删除行数据 ↓
|
||||||
|
rowDelHeader(form, index, done) {
|
||||||
|
this.headerTableData.splice(index, 1);
|
||||||
|
let json = this.handlerTable(this.headerTableData);
|
||||||
|
this.formFieldsData.header = json;
|
||||||
|
},
|
||||||
|
rowDelBody(form, index, done) {
|
||||||
|
this.bodyTableData.splice(index, 1);
|
||||||
|
let json = this.handlerTable(this.bodyTableData);
|
||||||
|
this.formFieldsData.body = json;
|
||||||
|
},
|
||||||
|
rowDelQuery(form, index, done) {
|
||||||
|
this.queryTableData.splice(index, 1);
|
||||||
|
let json = this.handlerTable(this.queryTableData);
|
||||||
|
this.formFieldsData.query = json;
|
||||||
|
},
|
||||||
|
rowDelAuth(form, index, done) {
|
||||||
|
this.authTableData.splice(index, 1);
|
||||||
|
let json = this.handlerTable(this.authTableData);
|
||||||
|
this.formFieldsData.auth = json;
|
||||||
|
},
|
||||||
|
// ↓ 处理 ApiBaseInfo Json数据格式 返回 Object 格式 ↓
|
||||||
|
JsonToObject(json) {
|
||||||
|
if (json && json !== "") {
|
||||||
|
let flag = /\'/.test(json);
|
||||||
|
if (flag) {
|
||||||
|
return JSON.parse(json.replace(/\'/gi, '"'));
|
||||||
|
} else {
|
||||||
|
return JSON.parse(json);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initTableData(json) {
|
||||||
|
let obj = this.JsonToObject(json);
|
||||||
|
let arr = Object.entries(obj).map(item => {
|
||||||
|
return { key: item[0], value: item[1], $cellEdit: false };
|
||||||
|
});
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
|
handlerTable(arr) {
|
||||||
|
let obj = {};
|
||||||
|
if (arr) {
|
||||||
|
arr.forEach(item => {
|
||||||
|
return (obj[item.key] = item.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (Object.keys(obj).length) {
|
||||||
|
return JSON.stringify(obj);
|
||||||
|
} else {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
formFieldsData: {
|
||||||
|
handler(data) {
|
||||||
|
if (data.header) {
|
||||||
|
this.headerTableData = this.initTableData(data.header);
|
||||||
|
}
|
||||||
|
if (data.body) {
|
||||||
|
this.bodyTableData = this.initTableData(data.body);
|
||||||
|
}
|
||||||
|
if (data.auth) {
|
||||||
|
this.authTableData = this.initTableData(data.auth);
|
||||||
|
}
|
||||||
|
if (data.query) {
|
||||||
|
this.queryTableData = this.initTableData(data.query);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.custom-tree-node {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
// api分类
|
||||||
|
apicategory: () => import('@/views/apimanager/apicategory'),
|
||||||
|
// api测试
|
||||||
|
apitester: () => import('@/views/apimanager/apitester'),
|
||||||
|
apirun: () => import('@/views/apimanager/apirun'),
|
||||||
|
apienv: () => import('@/views/apimanager/apienv')
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user