|
@@ -9,25 +9,28 @@
|
|
<div class="Api_search">
|
|
<div class="Api_search">
|
|
<el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
|
|
<el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
|
|
<el-button v-if="Interface_list === '接口列表'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">查询</el-button>
|
|
<el-button v-if="Interface_list === '接口列表'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">查询</el-button>
|
|
- <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">添加分类</el-button>
|
|
|
|
|
|
+ <!-- <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">查询</el-button> -->
|
|
|
|
+ <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addType()">添加分类</el-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<el-tree
|
|
<el-tree
|
|
- :data="data1"
|
|
|
|
|
|
+ v-if="Interface_list === '接口分类'"
|
|
|
|
+ :data="list"
|
|
node-key="id"
|
|
node-key="id"
|
|
empty-text="无相关接口,请确定搜索内容"
|
|
empty-text="无相关接口,请确定搜索内容"
|
|
default-expand-all
|
|
default-expand-all
|
|
:default-expanded-keys="key_arr"
|
|
:default-expanded-keys="key_arr"
|
|
:expand-on-click-node="false"
|
|
:expand-on-click-node="false"
|
|
|
|
+ @node-click="handleNodeClick"
|
|
>
|
|
>
|
|
- <span slot-scope="{ node, data }" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
|
|
|
|
|
|
+ <span slot-scope="{ node, data }" style="display: flex; align-items: center; justify-content: space-between;" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
|
|
<span>{{ node.label }}</span>
|
|
<span>{{ node.label }}</span>
|
|
- <span v-show="data.row && data.del">
|
|
|
|
|
|
+ <span>
|
|
<el-tooltip class="item" effect="dark" content="添加接口" placement="top">
|
|
<el-tooltip class="item" effect="dark" content="添加接口" placement="top">
|
|
<span v-if="Interface_list === '接口分类'" class="el-icon-plus Api_btn" @click="() => append(data)" />
|
|
<span v-if="Interface_list === '接口分类'" class="el-icon-plus Api_btn" @click="() => append(data)" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="修改接口" placement="top">
|
|
<el-tooltip class="item" effect="dark" content="修改接口" placement="top">
|
|
- <span v-if="Interface_list === '接口分类'" class="el-icon-edit Api_btn" @click="() => dblclick(data)" />
|
|
|
|
|
|
+ <span v-if="Interface_list === '接口分类'" class="el-icon-edit Api_btn" @click="() => editTree(node,data)" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="删除接口" placement="top">
|
|
<el-tooltip class="item" effect="dark" content="删除接口" placement="top">
|
|
<span v-if="Interface_list === '接口分类'" class="el-icon-delete Api_btn" @click="() => remove(data)" />
|
|
<span v-if="Interface_list === '接口分类'" class="el-icon-delete Api_btn" @click="() => remove(data)" />
|
|
@@ -35,44 +38,16 @@
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-tree>
|
|
- </div>
|
|
|
|
|
|
+ <el-tree
|
|
|
|
+ v-if="Interface_list === '接口列表'"
|
|
|
|
+ :data="data1"
|
|
|
|
+ node-key="id"
|
|
|
|
+ empty-text="无相关接口,请确定搜索内容"
|
|
|
|
+ default-expand-all
|
|
|
|
+ :default-expanded-keys="key_arr"
|
|
|
|
+ :expand-on-click-node="false"
|
|
|
|
+ /></div>
|
|
<div align="center" style="margin: 2% 0 10%;"><el-input v-if="ElMenu" v-model="value" style="width: 90%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" /></div>
|
|
<div align="center" style="margin: 2% 0 10%;"><el-input v-if="ElMenu" v-model="value" style="width: 90%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" /></div>
|
|
- <!--添加接口-->
|
|
|
|
- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddPortVisible" width="40%">
|
|
|
|
- <div style="margin-left:60px">
|
|
|
|
- <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
|
|
|
|
- <el-form-item label="模块" prop="lockModel" label-width="80px">
|
|
|
|
- <el-select v-model="addDeviceData.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
|
|
|
|
- <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="版本" prop="lockModel" label-width="80px">
|
|
|
|
- <el-select v-model="addDeviceData.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
|
|
|
|
- <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="接口类名" prop="bikeModel" label-width="80px">
|
|
|
|
- <el-select v-model="addDeviceData.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
|
|
|
|
- <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="方法名" prop="bikeModel" label-width="80px">
|
|
|
|
- <el-select v-model="addDeviceData.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
|
|
|
|
- <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="api版本" label-width="80px">
|
|
|
|
- <el-input v-model="addDeviceData.deviceNum" 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">确定</el-button>
|
|
|
|
- </div>
|
|
|
|
- <div style="margin-top:5%" />
|
|
|
|
- </el-dialog>
|
|
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</el-aside>
|
|
</el-aside>
|
|
<el-main class="ApiRight">
|
|
<el-main class="ApiRight">
|
|
@@ -85,28 +60,66 @@
|
|
<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: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 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>
|
|
- <div v-show="Details" class="ApiRight">
|
|
|
|
- <div class="ApiRightContent" style=" overflow:scroll; overflow-x: hidden">
|
|
|
|
- <apiDetails ref="Q_details" />
|
|
|
|
|
|
+ <div v-show="home ===false" class="ApiRight">
|
|
|
|
+ <div class="ApiRightContent" style="overflow:scroll; overflow-x: hidden;margin-left:-11px;margin-top:-10px;">
|
|
|
|
+ <apiDetails />
|
|
|
|
+ <!-- <apiList /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-main>
|
|
- <!-- 新建节点 -->
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 新建分类 -->
|
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
|
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
|
|
<div style="margin-left:60px">
|
|
<div style="margin-left:60px">
|
|
- <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
|
|
|
|
- <el-form-item label="分类名" prop="lockModel" label-width="80px">
|
|
|
|
- <el-input v-model="addDeviceData.lockModel" size="small" clearable style="width:75%;" placeholder="请填写" />
|
|
|
|
|
|
+ <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>
|
|
<el-form-item label="备注" label-width="80px">
|
|
<el-form-item label="备注" label-width="80px">
|
|
- <el-input v-model="addDeviceData.deviceNum" size="small" clearable style="width:75%;" placeholder="请填写" />
|
|
|
|
|
|
+ <el-input v-model="addTreeType.text" size="small" clearable style="width:75%;" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button size="small" @click="dialogAddTypeVisible = false">取消</el-button>
|
|
<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="40%">
|
|
|
|
+ <div style="margin-left:60px">
|
|
|
|
+ <el-form ref="addDeviceForms" :rules="addTreeTypeRules" :model="addTreeType">
|
|
|
|
+ <el-form-item label="模块" prop="lockModel" label-width="80px">
|
|
|
|
+ <el-select v-model="addTreeType.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
|
|
|
|
+ <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="版本" prop="lockModel" label-width="80px">
|
|
|
|
+ <el-select v-model="addTreeType.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
|
|
|
|
+ <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="接口类名" prop="bikeModel" label-width="80px">
|
|
|
|
+ <el-select v-model="addTreeType.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
|
|
|
|
+ <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="方法名" prop="bikeModel" label-width="80px">
|
|
|
|
+ <el-select v-model="addTreeType.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
|
|
|
|
+ <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="api版本" label-width="80px">
|
|
|
|
+ <el-input v-model="addTreeType.deviceNum" 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">确定</el-button>
|
|
<el-button size="small" type="primary">确定</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div style="margin-top:5%" />
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-container>
|
|
</el-container>
|
|
|
|
|
|
@@ -116,10 +129,13 @@
|
|
import '@/views/projectManage/publicCss/index.css'
|
|
import '@/views/projectManage/publicCss/index.css'
|
|
import '@/views/apiManagement/css/index.css'
|
|
import '@/views/apiManagement/css/index.css'
|
|
import apiDetails from '@/views/apiManagement/vue/index'
|
|
import apiDetails from '@/views/apiManagement/vue/index'
|
|
|
|
+import apiList from '@/views/apiManagement/apiList'
|
|
|
|
+import { getPortDoc, createType } from '@/api/apiManagerment.js'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
- apiDetails
|
|
|
|
|
|
+ apiDetails,
|
|
|
|
+ apiList
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
var data1 = [{
|
|
var data1 = [{
|
|
@@ -171,36 +187,53 @@ export default {
|
|
screenWidth: '',
|
|
screenWidth: '',
|
|
Details: false,
|
|
Details: false,
|
|
home: true,
|
|
home: true,
|
|
|
|
+ ElMenu: false,
|
|
|
|
+ isDetailfalse: false,
|
|
activeName: 'first',
|
|
activeName: 'first',
|
|
dialogAddPortVisible: false,
|
|
dialogAddPortVisible: false,
|
|
dialogAddTypeVisible: false,
|
|
dialogAddTypeVisible: false,
|
|
textMap: {
|
|
textMap: {
|
|
addType: '添加分类',
|
|
addType: '添加分类',
|
|
- addPort: '添加接口'
|
|
|
|
|
|
+ addPort: '添加接口',
|
|
|
|
+ editPort: '编辑接口'
|
|
},
|
|
},
|
|
|
|
+ textarea2: '',
|
|
dialogStatus: '',
|
|
dialogStatus: '',
|
|
- addDeviceData: {},
|
|
|
|
- addDeviceDataRules: {
|
|
|
|
- lockModel: [{ required: true, message: '锁类型不能为空', trigger: 'change' }],
|
|
|
|
|
|
+ addTreeType: {},
|
|
|
|
+ curcentTreeData: {},
|
|
|
|
+ addTreeTypeRules: {
|
|
|
|
+ docName: [{ required: true, message: '锁类型不能为空', trigger: 'change' }],
|
|
bikeModel: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],
|
|
bikeModel: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],
|
|
deviceNum: [{ required: true, message: '车辆个数不能为空', trigger: 'change' }],
|
|
deviceNum: [{ required: true, message: '车辆个数不能为空', trigger: 'change' }],
|
|
lockSupplier: [{ required: true, message: '锁供应商不能为空', trigger: 'change' }],
|
|
lockSupplier: [{ required: true, message: '锁供应商不能为空', trigger: 'change' }],
|
|
bikeSupplier: [{ required: true, message: '车辆供应商不能为空', trigger: 'change' }]
|
|
bikeSupplier: [{ required: true, message: '车辆供应商不能为空', trigger: 'change' }]
|
|
|
|
|
|
},
|
|
},
|
|
|
|
+ list: [],
|
|
|
|
+ list1: [],
|
|
|
|
+ bikeModelList: [],
|
|
|
|
+ lockModelList: [],
|
|
|
|
+ portTreeList: [],
|
|
defaultProps: {
|
|
defaultProps: {
|
|
children: 'children',
|
|
children: 'children',
|
|
label: 'label'
|
|
label: 'label'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ created() {
|
|
|
|
+ this.$store.state.data.status = false
|
|
|
|
+ this.getPortTree()
|
|
|
|
+ },
|
|
|
|
+ destroyed() {
|
|
|
|
+ this.$store.state.data.status = false
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
InterfaceLeft(vel) {
|
|
InterfaceLeft(vel) {
|
|
vel === '接口分类' ? this.Interface_list = '接口分类' : this.Interface_list = '接口列表'
|
|
vel === '接口分类' ? this.Interface_list = '接口分类' : this.Interface_list = '接口列表'
|
|
},
|
|
},
|
|
append(data) { // 添加节点
|
|
append(data) { // 添加节点
|
|
- this.dialogAddTypeVisible = true
|
|
|
|
- this.dialogStatus = 'addType'
|
|
|
|
|
|
+ this.dialogAddPortVisible = true
|
|
|
|
+ this.dialogStatus = 'addPort'
|
|
},
|
|
},
|
|
mouseenter(data) { // 导航栏显示新建/删除/编辑
|
|
mouseenter(data) { // 导航栏显示新建/删除/编辑
|
|
this.$set(data, 'del', true)
|
|
this.$set(data, 'del', true)
|
|
@@ -208,10 +241,50 @@ export default {
|
|
mouseleave(data) { // 导航栏隐藏新建/删除/编辑
|
|
mouseleave(data) { // 导航栏隐藏新建/删除/编辑
|
|
this.$set(data, 'del', false)
|
|
this.$set(data, 'del', false)
|
|
},
|
|
},
|
|
|
|
+ // 获取接口树
|
|
|
|
+ getPortTree() {
|
|
|
|
+ getPortDoc(1).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 = []
|
|
|
|
+ console.log(this.list)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
|
|
|
|
+ // 添加接口
|
|
|
|
+ addPortTpye(data) {
|
|
|
|
+ createType(this.addTreeType).then(response => {
|
|
|
|
+ this.getPortTree = response.data
|
|
|
|
+ console.log(this.portTreeList)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 添加分类
|
|
|
|
+ addTreeTpye(data) {
|
|
|
|
+ this.addTreeType.docName = data.docName
|
|
|
|
+ this.addTreeType.fileType = 1
|
|
|
|
+ createType(this.addTreeType).then(response => {
|
|
|
|
+ this.getPortTree()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 删除
|
|
// 删除
|
|
remove(node, data) {
|
|
remove(node, data) {
|
|
- this.$confirm('是否确认删除', '确认信息', {
|
|
|
|
|
|
+ this.$confirm('是否确认?', '删除接口', {
|
|
distinguishCancelAndClose: true,
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: '确定',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消'
|
|
cancelButtonText: '取消'
|
|
@@ -223,6 +296,18 @@ export default {
|
|
this.$message({ type: 'success', message: '已取消' })
|
|
this.$message({ type: 'success', message: '已取消' })
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ handleNodeClick(data) { // 点击节点
|
|
|
|
+ this.curcentTreeData = {
|
|
|
|
+ id: data.id
|
|
|
|
+ }
|
|
|
|
+ this.home = false
|
|
|
|
+ // this.getQueryBizModuleList(this.curcentTreeData.id)
|
|
|
|
+ },
|
|
|
|
+ // async getQueryBizModuleList(bizId) {
|
|
|
|
+ // const res = await queryBizModuleList(bizId)
|
|
|
|
+ // this.moduleData = this.handleData(res.data)
|
|
|
|
+ // },
|
|
|
|
+
|
|
cli_Choice() {
|
|
cli_Choice() {
|
|
this.Details = true
|
|
this.Details = true
|
|
this.home = false
|
|
this.home = false
|
|
@@ -237,6 +322,8 @@ export default {
|
|
},
|
|
},
|
|
editTree(node, data) {
|
|
editTree(node, data) {
|
|
data.editShow = true
|
|
data.editShow = true
|
|
|
|
+ this.dialogAddPortVisible = true
|
|
|
|
+ this.dialogStatus = 'editPort'
|
|
document.querySelector(`#tree-item${data.id}`).style.display = 'none'
|
|
document.querySelector(`#tree-item${data.id}`).style.display = 'none'
|
|
},
|
|
},
|
|
editSuccess(node, data) {
|
|
editSuccess(node, data) {
|