336 lines
11 KiB
Vue
336 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="接口名称" prop="productName" style="width: 30%">
|
||
<el-input type="text" v-model="ruleForm.productName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select v-model="ruleForm.productState" placeholder="请选择状态" @change="changestate(ruleForm.productState)">
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="未上线" value="0"></el-option>
|
||
<el-option label="已上线" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button type="danger" @click="add()">新增+</el-button>
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%">
|
||
<el-table-column
|
||
label="序号"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.productId }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="接口名称"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-popover trigger="hover" placement="top">
|
||
<div slot="reference" class="name-wrapper">
|
||
<el-tag size="medium">{{ scope.row.productName }}</el-tag>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="接口描述"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-popover trigger="hover" placement="top">
|
||
<div slot="reference" class="name-wrapper">
|
||
{{ scope.row.productContent }}
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="接口来源"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-popover trigger="hover" placement="top">
|
||
<div slot="reference" class="name-wrapper">
|
||
<el-tag size="medium">{{ scope.row.productFrom }}</el-tag>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="接口销量"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-popover trigger="hover" placement="top">
|
||
<div slot="reference" class="name-wrapper">
|
||
<el-tag size="medium">{{ scope.row.productSales }}</el-tag>
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
@click="handlelook(scope.row)">详情</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
@click="handleEdit(scope.row)">修改</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
@click="handleDelete(scope.row)">删除</el-button>
|
||
</div>
|
||
<br>
|
||
<div v-if="scope.row.productState===0">
|
||
<el-button
|
||
size="mini"
|
||
type="success"
|
||
@click="handleUpdState(scope.row)">上线</el-button>
|
||
</div>
|
||
<div v-if="scope.row.productState===1">
|
||
<el-button
|
||
size="mini"
|
||
type="success"
|
||
@click="handleUpdState(scope.row)">下架</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!--分页-->
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="ruleForm.pageNum"
|
||
:page-sizes="[5, 7, 9, 11]"
|
||
:page-size="ruleForm.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total">
|
||
</el-pagination>
|
||
|
||
<el-dialog
|
||
title="提示"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
:before-close="handleClose">
|
||
<center>
|
||
<el-form :model="api" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="接口名称" prop="productName" style="width: 70%">
|
||
<el-input type="text" v-model="api.productName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接口类型" prop="productType" style="width: 70%">
|
||
<el-input type="text" v-model="api.productType" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接口描述" prop="productContent" style="width: 70%">
|
||
<el-input type="text" v-model="api.productContent" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接口价格" prop="productPrice" style="width: 70%">
|
||
<el-input type="text" v-model="api.productPrice" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接口来源" prop="productFrom" style="width: 70%">
|
||
<el-input type="text" v-model="api.productFrom" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="重要路由" prop="apiRouter" style="width: 70%">
|
||
<el-input type="text" v-model="api.apiRouter" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="接口地址" prop="apiAddress" style="width: 70%">
|
||
<el-input type="text" v-model="api.apiAddress" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="返回格式" prop="returnFormat" style="width: 70%">
|
||
<el-input type="text" v-model="api.returnFormat" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="请求方式" prop="requestMethod" style="width: 70%">
|
||
<el-input type="text" v-model="api.requestMethod" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</center>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||
<el-button type="primary" @click="addForm(api)">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {
|
||
addproduct,
|
||
delapi,
|
||
productStateLis,
|
||
productStateList,
|
||
selectapiList,
|
||
UpdproductState
|
||
} from "@/api/background/apimanage";
|
||
import {resetForm} from "@/utils/muyu";
|
||
import {add} from "lodash/math";
|
||
|
||
export default {
|
||
name: "Apimanage",
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
return {
|
||
tableData:[],
|
||
ruleForm:{
|
||
pageNum:1,
|
||
pageSize:9,
|
||
productType:'' ,
|
||
productState:''
|
||
},
|
||
total:0,
|
||
dialogVisible: false,
|
||
api:{},
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
resetForm,
|
||
//新增对话框关闭
|
||
handleClose(done) {
|
||
this.$confirm('确认关闭？')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => {});
|
||
},
|
||
getapiList(){
|
||
selectapiList(this.ruleForm).then(response=>{
|
||
console.log(response)
|
||
this.tableData=response.data.productListResps
|
||
this.total=response.data.total
|
||
})
|
||
},
|
||
// //状态查询
|
||
// productStateLis(){
|
||
// productStateLis().then(response=>{
|
||
// this.productStateList=response.data
|
||
// })
|
||
// },
|
||
changestate(value){
|
||
this.ruleForm.productState=value
|
||
this.getapiList()
|
||
},
|
||
//查询
|
||
submitForm(){
|
||
this.getapiList()
|
||
},
|
||
//分页
|
||
handleSizeChange(val) {
|
||
console.log(`每页 ${val} 条`);
|
||
this.ruleForm.pageSize=val
|
||
this.getapiList()
|
||
},
|
||
handleCurrentChange(val) {
|
||
console.log(`当前页: ${val}`);
|
||
this.ruleForm.pageNum=val
|
||
this.getapiList()
|
||
},
|
||
//接口详情
|
||
handlelook(row){
|
||
this.$router.push({path:"/apidetailmessage/index",query:{api:row}})
|
||
},
|
||
//修改
|
||
handleEdit(row){
|
||
this.$router.push({path:"/apiupdmessage/index",query:{api:row}})
|
||
},
|
||
//删除
|
||
handleDelete(row){
|
||
if (confirm("确定删除么")){
|
||
delapi(row.productId).then(response=>{
|
||
alert(response.msg)
|
||
if (response.code==200){
|
||
this.getapiList()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//新增
|
||
add(){
|
||
this.dialogVisible=true
|
||
},
|
||
addForm(){
|
||
addproduct(this.api).then(response=>{
|
||
alert(response.msg)
|
||
if (response.code==200){
|
||
this.dialogVisible=false
|
||
this.getapiList()
|
||
}
|
||
})
|
||
},
|
||
//产品上/下线
|
||
handleUpdState(row){
|
||
if (row.productState==0){
|
||
if (confirm("确定上线么")){
|
||
row.productState=1
|
||
alert(JSON.stringify(row))
|
||
UpdproductState(row).then(response=>{
|
||
alert(response.msg)
|
||
if (response.code==200){
|
||
this.getapiList()
|
||
}
|
||
})
|
||
}
|
||
}else {
|
||
if (confirm("确定下架么")){
|
||
row.productState=0
|
||
UpdproductState(row).then(response=>{
|
||
alert(response.msg)
|
||
if (response.code==200){
|
||
this.getapiList()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.getapiList()
|
||
// this.productStateList()
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|