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