|
|
@@ -1,713 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-container style=" background: #F2F3F6;">
|
|
|
- <el-aside class="ApiLeft">
|
|
|
- <div class="Api_space_evenly">
|
|
|
- <div :class="{'Api_Interface_list' : Interface_list === '接口列表'}" class="Api_cursor" @click="InterfaceLeft('接口列表')">接口列表</div>
|
|
|
- <div :class="{'Api_Interface_list' : Interface_list === '接口分类'}" class="Api_cursor" @click="InterfaceLeft('接口分类')">接口分类</div>
|
|
|
- </div>
|
|
|
- <div class="Api_search">
|
|
|
- <el-input v-model="filterText" style="width: 55%;margin-left:4%" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
|
|
|
- <el-button v-if="Interface_list === '接口列表'" style="margin-left:4%" type="primary" size="mini">查询</el-button>
|
|
|
- <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addType()">添加分类</el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-tree
|
|
|
- v-if="Interface_list === '接口分类'"
|
|
|
- ref="tree"
|
|
|
- class="filter-tree"
|
|
|
- :data="list"
|
|
|
- node-key="id"
|
|
|
- :props="defaultProps"
|
|
|
- empty-text="无相关接口，请确定搜索内容"
|
|
|
- default-expand-all
|
|
|
- :default-expanded-keys="key_arr"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :filter-node-method="filterNode"
|
|
|
- @node-click="handleNodeClick"
|
|
|
- >
|
|
|
- <!-- eslint-disable-next-line vue/no-template-shadow -->
|
|
|
- <span slot-scope="{ node, data }" style="width:100%;display: flex; align-items: center; justify-content: space-between;" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
|
|
|
- <span>{{ node.label }}</span>
|
|
|
- <span v-show="data.parentId === 0 && data.del === true">
|
|
|
- <el-tooltip class="item" effect="dark" content="添加接口" placement="top">
|
|
|
- <span v-if="Interface_list === '接口分类'" class="el-icon-plus Api_btn" @click="() => append(data)" />
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip class="item" effect="dark" content="删除文档" placement="top">
|
|
|
- <span v-if="Interface_list === '接口分类'" class="el-icon-delete Api_btn" @click="() => remove(data)" />
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- <el-tree
|
|
|
- v-if="Interface_list === '接口列表'"
|
|
|
- :data="list1"
|
|
|
- node-key="id"
|
|
|
- empty-text="无相关接口，请确定搜索内容"
|
|
|
- :default-expanded-keys="key_arr"
|
|
|
- :expand-on-click-node="false"
|
|
|
- @node-click="handleNodeClick1"
|
|
|
- /></div>
|
|
|
- <div align="center" style="margin: 2% 0 10%;"><el-input v-if="ElMenu" v-model="filterText" style="width: 90%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" /></div>
|
|
|
- </el-aside>
|
|
|
- <el-main class="ApiRight">
|
|
|
- <div v-if="home" class="ApiRightContent">
|
|
|
- <div class="Layout">
|
|
|
- <div class="titFont" style="padding: 15px 0; font-size: 22px; font-family:PingFangSC-Medium,PingFang SC;font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API </div>
|
|
|
- </div>
|
|
|
- <el-divider style="color: #EEF0F5; margin: 0 !important" />
|
|
|
- <div style="font-size:18px; padding: 8% 0 1%; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API接口管理平台介绍及接入文档</div>
|
|
|
- <div style="font-size:14px; width: 80%; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(102,102,102,1); line-height:20px;">计划与EMC合作建设公司级反馈平台，覆盖所有内外部反馈，内部大区、客服等渠道反馈，专项工作组case反馈跟踪等场景，项目较大，处于立项阶段，期望收集更多信息和建议。</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 接口分类的列表 -->
|
|
|
- <div v-if="isList" class="ApiRight">
|
|
|
- <div class="ApiRightContent" style="overflow:scroll; overflow-x: hidden;margin-left:-11px;margin-top:-10px;">
|
|
|
- <div>
|
|
|
- <div class="column">
|
|
|
- <div class="titDiv">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">{{ clickData.docName }}</div>
|
|
|
- </div>
|
|
|
- <el-table :data="typeListData" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
|
|
|
- <el-table-column label="接口名称" prop="date" align="center" min-width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <a href="javascript:void(0)" style="color:#20a0ff" @click="clickDetail(scope.row.id)">{{ scope.row.methodName }}</a>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="接口路径" min-width="120" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.methodPath }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 接口列表的列表 -->
|
|
|
- <div v-if="isList1" class="ApiRight">
|
|
|
- <div class="ApiRightContent" style="overflow:scroll; overflow-x: hidden;margin-left:-11px;margin-top:-10px;">
|
|
|
- <div>
|
|
|
- <div class="column">
|
|
|
- <div class="titDiv">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">{{ clickData.docName }}</div>
|
|
|
- </div>
|
|
|
- <el-table :data="tableData1" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
|
|
|
- <el-table-column label="方法名称" prop="prettyshortprint" align="center" min-width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <a href="javascript:void(0)" style="color:#20a0ff" @click="clickDetail(scope.row.id)">{{ scope.row.prettyShortPrint }}</a>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 接口详情 -->
|
|
|
- <div v-if="detail" class="ApiRight">
|
|
|
- <div class="ApiRightContent" style="overflow:scroll; overflow-x: hidden;margin-left:-11px;margin-top:-10px;">
|
|
|
- <div class="column">
|
|
|
- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
|
|
- <el-menu-item index="1">预览</el-menu-item>
|
|
|
- <el-menu-item index="2" disabled>编辑</el-menu-item>
|
|
|
- <el-menu-item index="3" disabled>运行</el-menu-item>
|
|
|
- </el-menu>
|
|
|
-
|
|
|
- <div class="titDiv">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">基本信息</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="display:flex;justify-content:space-between;width:65%;margin-left:3%;margin-top:4%">
|
|
|
- <div class="searchName">接口名称 :
|
|
|
- {{ baseData.methodName }}
|
|
|
- </div>
|
|
|
- <div class="searchName">创建人 :
|
|
|
- {{ clickData.creator }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="display:flex;justify-content:space-between;width:65%;margin-left:3%;margin-top:3%">
|
|
|
- <div class="searchName">更新时间 :
|
|
|
- {{ baseData.gmtModify | formatDate }}
|
|
|
- </div>
|
|
|
- <div class="searchName">api版本号 :
|
|
|
- {{ baseData.currentVersion }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="display:flex;justify-content:space-between;width:100%;margin-left:3%;margin-top:3%">
|
|
|
- <div class="searchName">接口路径 : {{ baseData.methodPath }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="titDiv" style="margin-top:40px">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">备注</div>
|
|
|
- </div>
|
|
|
- <div class="Layout_space_between" style="margin-left: 20px;color:#606266">
|
|
|
- {{ baseData.memo }}
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="titDiv" style="margin-top:40px">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">请求参数</div>
|
|
|
- </div>
|
|
|
- <div class="Layout_space_between" style="margin-left: 20px;color:#606266">
|
|
|
- <div class="searchName">Query : </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="Layout_space_between" style="margin-left: 20px;color:#606266">
|
|
|
- <el-table
|
|
|
- :data="paramData"
|
|
|
- style="width: 100%;margin-top:10px"
|
|
|
- row-key="id"
|
|
|
- border
|
|
|
- stripe
|
|
|
- lazy
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- :header-cell-style="{ background: '#cccccc', color: '#606266' }"
|
|
|
- >
|
|
|
- <el-table-column prop="fieldName" label="参数名称" />
|
|
|
- <el-table-column prop="fieldType" label="参数类型" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="titDiv" style="margin-top:40px">
|
|
|
- <div class="titIcon" />
|
|
|
- <div class="titSonName">返回数据</div>
|
|
|
- </div>
|
|
|
- <div class="Layout">
|
|
|
- <el-input
|
|
|
- v-model="didi"
|
|
|
- style="color:#333B4A"
|
|
|
- type="textarea"
|
|
|
- :autosize="{ minRows: 15, maxRows: 15}"
|
|
|
- :placeholder="didi"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-main>
|
|
|
-
|
|
|
- <!-- 新建分类 -->
|
|
|
- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
|
|
|
- <div style="margin-left:60px">
|
|
|
- <el-form ref="addDeviceForms" :rules="addTreeTypeRules" :model="addTreeType">
|
|
|
- <el-form-item label="分类名" prop="docName" label-width="80px">
|
|
|
- <el-input v-model="addTreeType.docName" size="small" clearable style="width:75%;" placeholder="请填写" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" label-width="80px">
|
|
|
- <el-input v-model="addTreeType.text" size="small" clearable style="width:75%;" placeholder="请填写" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="small" @click="dialogAddTypeVisible = false">取消</el-button>
|
|
|
- <el-button size="small" type="primary" @click="addTreeTpye(addTreeType)">确定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!--添加接口-->
|
|
|
- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddPortVisible" width="60%">
|
|
|
- <div style="margin-left:60px">
|
|
|
- <el-form ref="addTreeTypeForms" :rules="addTreeTypeRules" :model="addTreeType">
|
|
|
- <el-form-item label="接口名称" prop="docName" label-width="120px">
|
|
|
- <el-input v-model="addTreeType.docName" size="small" style="width:75%;" clearable placeholder="请填写" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目" prop="projectName" label-width="120px">
|
|
|
- <el-select v-model="addTreeType.projectName" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="getModuleOpt()">
|
|
|
- <el-option v-for="item in projectOpt" :key="item.key" :label="item.value" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="模块" prop="projectModule" label-width="120px">
|
|
|
- <el-select v-model="addTreeType.projectModule" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="getVersionOpt()">
|
|
|
- <el-option v-for="item in moduleOpt" :key="item.key" :label="item.value" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="版本" prop="version" label-width="120px">
|
|
|
- <el-select v-model="addTreeType.version" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="getApiOpt()">
|
|
|
- <el-option v-for="item in versionOpt" :key="item.key" :label="item.value" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="接口类名" prop="interfaceId" label-width="120px">
|
|
|
- <el-select v-model="addTreeType.interfaceId" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="getMethodOpt()">
|
|
|
- <el-option v-for="item in apiOpt" :key="item.id" :label="item.interfacePath" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="方法名" prop="methodId" label-width="120px">
|
|
|
- <el-select v-model="addTreeType.methodId" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
|
|
|
- <el-option v-for="item in methodsOpt" :key="item.id" :label="item.prettyShortPrint" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" label-width="120px">
|
|
|
- <el-input v-model="addTreeType.text" size="small" style="width:75%;" clearable placeholder="请填写" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="small" @click="dialogAddPortVisible = false">取消</el-button>
|
|
|
- <el-button size="small" type="primary" @click="addPortTpye(addTreeType)">确定</el-button>
|
|
|
- </div>
|
|
|
- <div style="margin-top:5%" />
|
|
|
- </el-dialog>
|
|
|
- </el-container>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import '@/views/projectManage/publicCss/index.css'
|
|
|
-import '@/views/apiManagement/css/index.css'
|
|
|
-import dayjs from 'dayjs'
|
|
|
-import { getParam, getReturn, getApiDetail, getPortDoc, getDocList, createType, getInterfaceInfoListByBizLineId, getProject, getModule, getVersion, getApi, delProject, getMethod, getMethodList } from '@/api/apiManagerment.js'
|
|
|
-
|
|
|
-export default {
|
|
|
- filters: {
|
|
|
- formatDate(e) {
|
|
|
- return dayjs(e).format('YYYY-MM-DD HH:mm:ss')
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: '',
|
|
|
- label: '',
|
|
|
- key_arr: [],
|
|
|
- Interface_list: '接口列表',
|
|
|
- value: '',
|
|
|
- home: true,
|
|
|
- ElMenu: false,
|
|
|
- detail: false,
|
|
|
- isList: false,
|
|
|
- isList1: false,
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
- },
|
|
|
- docName: '',
|
|
|
- parentId: '',
|
|
|
- dialogAddPortVisible: false,
|
|
|
- dialogAddTypeVisible: false,
|
|
|
- userInformation: localStorage.getItem('username'),
|
|
|
- userNames: localStorage.getItem('realname'),
|
|
|
- textMap: {
|
|
|
- addType: '添加分类',
|
|
|
- addPort: '添加接口',
|
|
|
- editPort: '编辑接口'
|
|
|
- },
|
|
|
- dialogStatus: '',
|
|
|
- addTreeType: {},
|
|
|
- data: {},
|
|
|
- bizLineId: {},
|
|
|
- addTreeTypeRules: {
|
|
|
- docName: [{ required: true, message: '不能为空', trigger: 'change' }],
|
|
|
- projectName: [{ required: true, message: '不能为空', trigger: 'change' }],
|
|
|
- projectModule: [{ required: true, message: '不能为空', trigger: 'change' }],
|
|
|
- version: [{ required: true, message: '不能为空', trigger: 'change' }],
|
|
|
- interfaceId: [{ required: true, message: '不能为空', trigger: 'change' }],
|
|
|
- methodId: [{ required: true, message: '不能为空', trigger: 'change' }]
|
|
|
-
|
|
|
- },
|
|
|
- list: [],
|
|
|
- list1: [],
|
|
|
- portTreeList: [],
|
|
|
- projectOpt: [],
|
|
|
- moduleOpt: [],
|
|
|
- versionOpt: [],
|
|
|
- apiOpt: [],
|
|
|
- filterText: '',
|
|
|
- typeListData: [],
|
|
|
- typeListData1: [],
|
|
|
- clickData: {}, // 点击树获取到的数据
|
|
|
- methodsOpt: [],
|
|
|
- didi: '{"code":200,"data":[{"id":6,"docName":"86979","parentId":0,"fileType":1,"children":[]},{"id":1,"docName":"测试文档","parentId":0,"fileType":0,"children":[{"id":3,"docName":"测试文档2","parentId":1,"fileType":1,"children":[{"id":4,"docName":"测试文档3","parentId":3,"fileType":1,"children":[]},{"id":5,"docName":"测试文档4","parentId":3,"fileType":1,"children":[]}]},{"id":2,"docName":"测试小文档","parentId":1,"fileType":2,"methodId":1,"children":[]}]}],"msg":"OK"}',
|
|
|
- paramData: [],
|
|
|
- activeIndex: '1',
|
|
|
- baseData: {},
|
|
|
- tableData1: [],
|
|
|
- lastChildrens: [],
|
|
|
- name: [],
|
|
|
- all_bizId: [] // 业务线
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- filterText(val) {
|
|
|
- this.$refs.tree.filter(val)
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.$store.state.data.status = true
|
|
|
- this.getPortTree()
|
|
|
- this.getListTree()
|
|
|
- this.getProjectOpt()
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- this.$store.state.data.status = false
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- InterfaceLeft(vel) {
|
|
|
- vel === '接口分类' ? this.Interface_list = '接口分类' : this.Interface_list = '接口列表'
|
|
|
- },
|
|
|
- append(data) { // 添加节点
|
|
|
- this.dialogAddPortVisible = true
|
|
|
- this.dialogStatus = 'addPort'
|
|
|
- this.parentId = data.id
|
|
|
- // this.$refs.addTreeTypeForms.resetFields()
|
|
|
- },
|
|
|
- mouseenter(data) { // 导航栏显示新建/删除/编辑
|
|
|
- this.$set(data, 'del', true)
|
|
|
- },
|
|
|
- mouseleave(data) { // 导航栏隐藏新建/删除/编辑
|
|
|
- this.$set(data, 'del', false)
|
|
|
- },
|
|
|
-
|
|
|
- // 根据方法id获取详情
|
|
|
- clickDetail(data) {
|
|
|
- this.detail = true
|
|
|
- this.isList1 = false
|
|
|
- this.isList = false
|
|
|
- this.getapiDetails(data)
|
|
|
- },
|
|
|
- getapiDetails(data) {
|
|
|
- getApiDetail(data).then(response => {
|
|
|
- this.baseData = response.data
|
|
|
- this.getParams(data)
|
|
|
- this.getReturns(data)
|
|
|
- })
|
|
|
- },
|
|
|
- handlerData(arr) {
|
|
|
- return arr.map((item, index) => {
|
|
|
- return {
|
|
|
- key: index,
|
|
|
- value: item
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取新增接口里的枚举值
|
|
|
- getProjectOpt() {
|
|
|
- getProject(Number(localStorage.getItem('bizId'))).then(response => {
|
|
|
- this.projectOpt = this.handlerData(response.data)
|
|
|
- })
|
|
|
- },
|
|
|
- getModuleOpt(bizLineId, projectName) {
|
|
|
- getModule(Number(localStorage.getItem('bizId')), this.addTreeType.projectName).then(response => {
|
|
|
- this.moduleOpt = this.handlerData(response.data)
|
|
|
- })
|
|
|
- },
|
|
|
- getVersionOpt(bizLineId, projectName, projectModule) {
|
|
|
- getVersion(Number(localStorage.getItem('bizId')), this.addTreeType.projectName, this.addTreeType.projectModule).then(response => {
|
|
|
- this.versionOpt = this.handlerData(response.data)
|
|
|
- })
|
|
|
- },
|
|
|
- getApiOpt() {
|
|
|
- getApi(this.addTreeType.projectName, this.addTreeType.projectModule, this.addTreeType.version).then(response => {
|
|
|
- this.apiOpt = response.data
|
|
|
- })
|
|
|
- },
|
|
|
- getMethodOpt(data) {
|
|
|
- getMethod(this.addTreeType.interfaceId).then(response => {
|
|
|
- this.methodsOpt = response.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 根据ID获取分类列表
|
|
|
- getTypeList() {
|
|
|
- getDocList(this.clickData.id).then(response => {
|
|
|
- this.typeListData = response.data
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 根据ID获取接口列表
|
|
|
- getApiList(data) {
|
|
|
- getMethodList(data).then(response => {
|
|
|
- this.typeListData1 = response.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取接口分类树
|
|
|
- getPortTree() {
|
|
|
- getPortDoc(Number(localStorage.getItem('bizId'))).then(response => {
|
|
|
- this.list = response.data
|
|
|
- this.list = this.list.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName
|
|
|
- })) : ''
|
|
|
- })) : ''
|
|
|
- })) : ''
|
|
|
- }))
|
|
|
- this.portTreeList = []
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取接口列表树
|
|
|
- getListTree() {
|
|
|
- getInterfaceInfoListByBizLineId(Number(localStorage.getItem('bizId'))).then(response => {
|
|
|
- this.list1 = response.data
|
|
|
- this.list1 = this.list1.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- parentId: item.children ? 0 : 1,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName,
|
|
|
- children: item.children ? item.children.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.docName
|
|
|
- })) : ''
|
|
|
- })) : ''
|
|
|
- })) : ''
|
|
|
- }))
|
|
|
- this.portTreeList = []
|
|
|
- this.list1.map(item => {
|
|
|
- this.findLastChildren(item.children)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 添加接口
|
|
|
- addPortTpye(data) {
|
|
|
- this.$refs['addTreeTypeForms'].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.addTreeType.bizLineId = Number(localStorage.getItem('bizId'))
|
|
|
- this.addTreeType.fileType = 2
|
|
|
- this.addTreeType.parentId = this.parentId
|
|
|
- this.addTreeType.creator = this.userNames
|
|
|
- createType(this.addTreeType).then(response => {
|
|
|
- if (response.code === 200) {
|
|
|
- this.getPortTree()
|
|
|
- this.getTypeList()
|
|
|
- this.dialogAddPortVisible = false
|
|
|
- this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
|
|
|
- } else {
|
|
|
- this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 添加分类
|
|
|
- addTreeTpye(data) {
|
|
|
- this.addTreeType.docName = data.docName
|
|
|
- this.addTreeType.fileType = 1
|
|
|
- this.addTreeType.creator = this.userNames
|
|
|
- this.addTreeType.bizLineId = Number(localStorage.getItem('bizId'))
|
|
|
- createType(this.addTreeType).then(response => {
|
|
|
- if (response.code === 200) {
|
|
|
- this.getPortTree()
|
|
|
- this.dialogAddTypeVisible = false
|
|
|
- this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
|
|
|
- } else {
|
|
|
- this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除节点
|
|
|
- remove(node, data) {
|
|
|
- this.$confirm('是否确认？', '删除接口', {
|
|
|
- distinguishCancelAndClose: true,
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消'
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- delProject(this.clickData.id).then(response => {
|
|
|
- if (response.code === 200) {
|
|
|
- this.getPortTree()
|
|
|
- this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
|
|
|
- } else {
|
|
|
- this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(action => {
|
|
|
- this.$message({ type: 'success', message: '已取消' })
|
|
|
- })
|
|
|
- },
|
|
|
- // 接口分类点击节点
|
|
|
- handleNodeClick(data) {
|
|
|
- this.clickData = data
|
|
|
- if (data.parentId === 0) {
|
|
|
- this.isList = true
|
|
|
- this.home = false
|
|
|
- this.detail = false
|
|
|
- this.isList1 = false
|
|
|
- this.getTypeList(this.clickData.id)
|
|
|
- }
|
|
|
- if (data.parentId !== 0) {
|
|
|
- this.detail = true
|
|
|
- this.home = false
|
|
|
- this.isList = false
|
|
|
- this.isList1 = false
|
|
|
- this.getapiDetails(this.clickData.methodId)
|
|
|
- }
|
|
|
- },
|
|
|
- // 接口列表点击节点
|
|
|
- handleNodeClick1(data) {
|
|
|
- this.clickData = data
|
|
|
- this.clickData = data
|
|
|
- if (data.children) {
|
|
|
- this.isList = false
|
|
|
- this.isList1 = false
|
|
|
- this.home = true
|
|
|
- this.detail = false
|
|
|
- this.findLastChildren(data.children)
|
|
|
- }
|
|
|
- if (!data.children) {
|
|
|
- this.isList1 = true
|
|
|
- this.home = false
|
|
|
- this.isList = false
|
|
|
- this.detail = false
|
|
|
- this.getMethodListById(this.clickData.id)
|
|
|
- }
|
|
|
- },
|
|
|
- // 找到树最后的子节点
|
|
|
- findLastChildren(arr) {
|
|
|
- arr.map(item => {
|
|
|
- if (item.children) {
|
|
|
- this.findLastChildren(item.children)
|
|
|
- } else {
|
|
|
- this.name = (item.label).split('.')
|
|
|
- item.label = this.name[this.name.length - 1]
|
|
|
- this.lastChildrens.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加方法
|
|
|
- addPort() {
|
|
|
- this.dialogAddPortVisible = true
|
|
|
- this.dialogStatus = 'addPort'
|
|
|
- },
|
|
|
- // 添加分类
|
|
|
- addType() {
|
|
|
- this.dialogAddTypeVisible = true
|
|
|
- this.dialogStatus = 'addType'
|
|
|
- },
|
|
|
-
|
|
|
- handleSelect(key, keyPath) {
|
|
|
- console.log(key, keyPath)
|
|
|
- },
|
|
|
- // 转成json
|
|
|
- getLsit: function(jsonStr) {
|
|
|
- var res = ''
|
|
|
- for (var i = 0, j = 0, k = 0, ii, ele; i < jsonStr.length; i++) { // k:缩进，j:""个数
|
|
|
- ele = jsonStr.charAt(i)
|
|
|
- if (j % 2 === 0 && ele === '}') {
|
|
|
- k--
|
|
|
- for (ii = 0; ii < k; ii++) ele = ' ' + ele
|
|
|
- ele = '\n' + ele
|
|
|
- } else if (j % 2 === 0 && ele === '{') {
|
|
|
- ele += '\n'
|
|
|
- k++
|
|
|
- for (ii = 0; ii < k; ii++) ele += ' '
|
|
|
- } else if (j % 2 === 0 && ele === ',') {
|
|
|
- ele += '\n'
|
|
|
- for (ii = 0; ii < k; ii++) ele += ' '
|
|
|
- } else if (ele === '"') j++
|
|
|
- res += ele
|
|
|
- }
|
|
|
- // eslint-disable-next-line no-return-assign
|
|
|
- return this.didi = res
|
|
|
- },
|
|
|
- // 点击接口列表方法
|
|
|
- getMethodListById(ele) {
|
|
|
- getMethodList(ele).then(response => {
|
|
|
- this.tableData1 = response.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取接口详情页请求参数
|
|
|
- getParams(ele) {
|
|
|
- getParam(ele).then(response => {
|
|
|
- this.paramData = response.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取接口详情页返回参数
|
|
|
- getReturns(ele) {
|
|
|
- getReturn(ele).then(response => {
|
|
|
- this.didi = JSON.stringify(response.data)
|
|
|
- this.getLsit(this.didi)
|
|
|
- })
|
|
|
- },
|
|
|
- // 过滤树
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true
|
|
|
- return data.label.indexOf(value) !== -1
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .ApiLeft {
|
|
|
- padding: 10px 0px 0px 10px;
|
|
|
- background: #FFF;
|
|
|
- color: #333B4A;
|
|
|
- margin: 10px 0px 10px 10px;
|
|
|
- min-height: calc(100vh - 76px);
|
|
|
- .Api_search {
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- .Api_btn {
|
|
|
- margin: 0 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .Api_btn:hover {
|
|
|
- color: #409EFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .ApiRight {
|
|
|
- padding: 10px;
|
|
|
- background: #F2F3F6;
|
|
|
- color: #333B4A;
|
|
|
- min-height: calc(100vh - 65px);
|
|
|
- .ApiRightContent {
|
|
|
- background: #FFF;
|
|
|
- min-height: calc(100vh - 75px);
|
|
|
- padding: 0.5% 3%;
|
|
|
- border-radius: 4px;
|
|
|
- .Layout_space_between{
|
|
|
- /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
|
|
|
- background: #cccccc;}
|
|
|
- }
|
|
|
- .searchName {
|
|
|
- font-size:14px;
|
|
|
- font-family:MicrosoftYaHei;
|
|
|
- line-height:17px;
|
|
|
- color:#909399;
|
|
|
- opacity:1;
|
|
|
- font-weight: 600;}
|
|
|
- }
|
|
|
- }
|
|
|
- .custom-tree-node {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
- padding-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .Api_space_evenly { // 布局
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-evenly;
|
|
|
- }
|
|
|
-
|
|
|
- .Api_Interface_list { // 接口列表和接口分类按钮颜色
|
|
|
- color: #409EFF;
|
|
|
- border-bottom: 2px solid #409EFF;
|
|
|
- padding-bottom: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .Api_cursor { // 小手
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|
qinzhipeng_v