Skip to content

A
api-gateway
Commit 20b65443 by 无尘
Options

feat: 增加环境

parent b541ba35
Showing with 3069 additions and 336 deletions
src/assets/js/error.js
......@@ -8,12 +8,12 @@ export default {
/* if (local.indexOf('localhost') != -1) {
local = 'http://www.gicdev.com';
} */
if (response.errorCode != 1) {
if (response.errorCode == 4) {
if (response.code != 1) {
if (response.code == 4) {
window.location.href = local + '/haoban-web/#/login';
return false;
}
if (response.errorCode == 10) {
if (response.code == 10) {
window.location.href = local + '/haoban-web/#/index';
return false;
}
......
src/components/api/publish-list.vue 0 → 100644
<!--
<publish-list></publish-list>
-->
<template>
<div>
<!-- <div class="search-wrap m-b-20">
<el-input clearable class="w-320" placeholder="请输入发布版本" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div> -->
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="publishName" label="发布版本" show-overflow-tooltip> </el-table-column>
<el-table-column label="版本号" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.publishVersion }}
</template>
</el-table-column>
<el-table-column label="环境" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.env }}
</template>
</el-table-column>
<el-table-column label="发布备注" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.describe }}
</template>
</el-table-column>
<el-table-column label="发布时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleShow(scope.$index, scope.row)" type="text">查看</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
export default {
name: 'publish-list',
data() {
return {
// 面包屑参数
navPath: [
{
name: '发布记录',
path: ''
}
],
searchValue: '',
tableData: [
{
publishId: '1',
publishName: '测试',
publishVersion: 'V1.0.1',
env: '测试',
describe: '描述内容',
createTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0
};
},
methods: {
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 查看定义详情页
*/
handleShow(index, row) {
const that = this;
that.$router.push('/');
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
};
getRequest('/haoban-manage-web/menu-detail', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
$route: {
handler: function(val, oldVal) {},
// 深度观察监听
deep: true
}
}
/* 接收数据 */
/* mounted() {
const that = this;
that.$emit('showTab', 4);
} */
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/components/api/version-list.vue 0 → 100644
<template>
<div>
<div class="search-wrap m-b-20 flex flex-space-between">
<el-input clearable class="w-320" placeholder="请输入注册中心地址搜索" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<div class="search-wrap-right">
<el-radio-group v-model="sceneCode" @change="changeType">
<el-radio-button :label="item.sceneCode" v-for="(item,index) in envOptions" :key="index">{{item.sceneName}}</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="version" label="版本号" show-overflow-tooltip> </el-table-column>
<el-table-column prop="status" label="发布状态" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.status }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="发布时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.publishTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.publishTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="更新时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.updateTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.updateTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="默认版本" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch v-model="scope.row.defaultFlag" active-text="" inactive-text="" @change="changeEnv(scope.row, scope.row.defaultFlag)"> </el-switch>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">发布</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">同步</el-button>
<el-button @click="handleShow(scope.$index, scope.row)" type="text">查看</el-button>
<el-button @click="handleDown(scope.$index, scope.row)" type="text">下线</el-button>
<el-button @click="handleRecord(scope.$index, scope.row)" type="text">发布记录</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'env-set-list',
data() {
return {
searchValue: '',
sceneCode: '',
envOptions:[
{
sceneCode: '1',
sceneName: '测试'
},
{
sceneCode: '2',
sceneName: '正式'
}
],
tableData: [
{
interfaceVersionId: '1',
version: '测试',
status: '1',// 0 删除 1更新修改 2发布 3 历史发布版本
description: '234',
proxyType: '0',
defaultFlag: false,
createTime: 1564455643252,
updateTime: 1564455643252,
publishTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0
};
},
methods: {
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 切换 http dubbo
*/
changeType(val) {
const that = this;
console.log(val);
that.currentPage = 1;
that.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 改变默认环境
*/
changeEnv(row, val) {
const that = this;
that.postChangeEnv(row, val);
},
postChangeEnv(row, val) {
const that = this;
let para = {
defaultFlag: val ? '1' : '0',
interfaceVerionId: row.interfaceVerionId
};
getRequest('/gateway-manage/set-default-version', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('设置成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 查看
*/
handleShow(index, row) {
const that = this;
that.$router.push(`/createApi?interfaceId=${that.$route.query.interfaceId}&interfaceVersionId=${row.interfaceVersionId}`);
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.$router.push(`/createApi?interfaceId=${that.$route.query.interfaceId}&interfaceVersionId=${row.interfaceVersionId}`);
},
/**
* 下线
*/
handleDown(index, row) {
const that = this;
that
.$confirm(`确认将【${row.version}】的【${that.$route.query.interfaceName}】API下线吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDownData(index, row);
})
.catch(() => {});
},
postDownData(index, row) {
const that = this;
let para = {
interfaceVerionId: row.interfaceVerionId
};
getRequest('/gateway-manage/offline-api', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('下线成功', 'warning');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取环境列表
*/
getEnvData() {
const that = this;
getRequest('/gateway-manage/list-all-scene', {})
.then(res => {
let resData = res.data;
if (resData.code == 1) {
that.envOptions = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
search: that.searchValue,
pageNum: that.currentPage,
pageSize: that.pageSize,
sceneCode: taht.sceneCode,
interfaceId: that.$route.query.interfaceId
};
getRequest('/gateway-manage/page-proxy', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
that.tableData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/components/env/env-list.vue 0 → 100644
<!--
<env-list></env-list>
import envList from '@/components/env/env-list.vue';
-->
<template>
<div>
<div class="search-wrap m-b-20 flex flex-space-between">
<el-input clearable class="w-320 serach" placeholder="请输入发布版本" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button type="primary" @click="editEnv">新建环境</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="sceneName" label="环境名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="环境code" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.sceneCode }}
</template>
</el-table-column>
<el-table-column label="环境域名" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.domainUrl }}
</template>
</el-table-column>
<el-table-column label="默认环境" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch v-model="scope.row.defaultFlag" active-text="" inactive-text="" @change="changeEnv(scope.row, scope.row.defaultFlag)"> </el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- <div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div> -->
</div>
<new-env :editRow="editRow" :showDialog="showDialog" @hideDialog="hideDialog"> </new-env>
</div>
</template>
<script>
import newEnv from '@/components/env/new-env.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'env-list',
data() {
return {
searchValue: '',
tableData: [
{
sceneName: '测试',
sceneCode: '234',
domainUrl: 'http://123.com',
defaultFlag: false,
createTime: 1564455643252
}
],
/* pageSize: 20,
currentPage: 1,
totalCount: 0, */
showDialog: false,
editIndex: '',
editRow: {}
};
},
components: {
newEnv
},
methods: {
/**
* 编辑环境
*/
editEnv() {
const that = this;
that.showDialog = true;
},
hideDialog(obj) {
const that = this;
if (!obj) {
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
return false;
}
if (that.editRow.sceneCode) {
that.tableData[that.editIndex].sceneName = obj.sceneName;
that.tableData[that.editIndex].domainUrl = obj.domainUrl;
that.tableData[that.editIndex].defaultFlag = obj.defaultFlag;
} else {
that.currentPage = 1;
that.getData();
}
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
that.$forceUpdate();
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.editIndex = index;
that.editRow = row;
that.showDialog = true;
},
/**
* 删除
*/
handleDel(index, row) {
const that = this;
that
.$confirm('确定删除该环境?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDelData(index, row);
})
.catch(() => {});
},
postDelData(index, row) {
const that = this;
let para = {
sceneCode: row.sceneCode
};
getRequest('/gateway-manage/delete-scene', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('删除成功', 'warning');
that.tableData.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 改变默认环境
*/
changeEnv(row, val) {
const that = this;
that.postChangeEnv(row, val);
},
postChangeEnv(row, val) {
const that = this;
let para = {
defaultFlag: val ? '1' : '0',
sceneCode: row.sceneCode
};
getRequest('/gateway-manage/set-default-scene', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('设置成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {};
getRequest('/gateway-manage/list-all-scene', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
if (resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.defaultFlag = ele.defaultFlag == 1 ? true : false;
});
}
that.tableData = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
}
/* mounted() {
const that = this;
that.getData();
} */
};
</script>
<style lang="less" scoped>
.serach {
visibility: hidden;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/components/env/env-set-list.vue 0 → 100644
<!--
<env-set-list></env-set-list>
import envSetList from '@/components/env/env-set-list.vue';
-->
<template>
<div>
<div class="search-wrap m-b-20 flex flex-space-between">
<el-input clearable class="w-320" placeholder="请输入注册中心地址搜索" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<div class="search-wrap-right">
<el-button type="primary" @click="toCreatSet">新建配置</el-button>
<el-radio-group v-model="proxyType" @change="changeType">
<el-radio-button label="0">http</el-radio-button>
<el-radio-button label="1">dubbo</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="proxyName" label="配置名称" show-overflow-tooltip> </el-table-column>
<el-table-column prop="proxyCode" label="配置code" show-overflow-tooltip> </el-table-column>
<el-table-column label="描述" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.description }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleShow(scope.$index, scope.row)" type="text">查看</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'env-set-list',
data() {
return {
proxyType: '0',
searchValue: '',
tableData: [
{
backendProxyId: '1',
proxyName: '测试',
proxyCode: '123',
description: '234',
proxyType: '0',
createTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0
};
},
methods: {
/**
* 新建配置
*/
toCreatSet() {
const that = this;
that.$router.push(`/createEnvSet?proxyType=${that.proxyType}`);
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 切换 http dubbo
*/
changeType(val) {
const that = this;
console.log(val);
that.currentPage = 1;
that.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 查看
*/
handleShow(index, row) {
const that = this;
that.$router.push(`/createEnvSet?proxyType=${row.proxyType}&backendProxyId=${row.backendProxyId}`);
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.$router.push(`/createEnvSet?proxyType=${row.proxyType}&backendProxyId=${row.backendProxyId}`);
},
/**
* 删除
*/
handleDel(index, row) {
const that = this;
that
.$confirm('确定删除该环境?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDelData(index, row);
})
.catch(() => {});
},
postDelData(index, row) {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
};
getRequest('/gateway-manage/delete-proxy', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('删除成功', 'warning');
that.tableData.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
search: that.searchValue,
pageNum: that.currentPage,
pageSize: that.pageSize,
proxyType: that.proxyType
};
getRequest('/gateway-manage/page-proxy', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
that.tableData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/components/env/new-env.vue 0 → 100644
<!--
<new-env
:editRow="editRow"
:showDialog="showDialog"
@hideDialog="hideDialog">
</new-env>
import newEnv from '@/components/env/new-env.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" :title="editRow.sceneCode ? '编辑环境' : '新建环境'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="envForm">
<el-form-item label="环境名称:" prop="sceneName">
<limitInput :inputWidth="400" :inputValue.sync="formData.sceneName" :holder="'请输入环境名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="环境code:" prop="sceneCode">
<limitInput :inputWidth="400" :disflag="editRow.sceneCode ? true : false" :inputValue.sync="formData.sceneCode" :holder="'请输入环境code'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="环境域名:" prop="domainUrl">
<limitInput :inputWidth="400" :inputValue.sync="formData.domainUrl" :holder="'请输入环境域名'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="默认环境:">
<el-checkbox v-model="formData.defaultFlag">设置为默认环境</el-checkbox>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('envForm')">{{ editRow.sceneCode ? '保 存' : '新 建' }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'new-env',
props: {
showDialog: {
type: Boolean,
default: false
},
editRow: {
type: Object,
default() {
return {
sceneName: '',
sceneCode: '',
domainUrl: '',
defaultFlag: false
};
}
}
},
components: {
limitInput
},
data() {
return {
customDialog: false, // 弹框显示
formData: {
sceneName: '',
sceneCode: '',
domainUrl: '',
defaultFlag: false
},
rules: {
sceneName: [{ required: true, message: '请输入环境名称', trigger: 'blur' }],
sceneCode: [{ required: true, message: '请输入环境code', trigger: 'blur' }],
domainUrl: [{ required: true, message: '请输入环境域名', trigger: 'blur' }]
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
that.$refs['envForm'].resetFields();
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.$refs['envForm'].resetFields();
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.formData.sceneName = '';
that.formData.sceneCode = '';
that.formData.domainUrl = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.formData.sceneName = String(that.formData.sceneName).replace(/\s+/g, '');
that.formData.sceneCode = String(that.formData.sceneCode).replace(/\s+/g, '');
that.formData.domainUrl = String(that.formData.domainUrl).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postEditData();
} else {
return false;
}
});
},
postEditData() {
const that = this;
let para = {
sceneName: that.formData.sceneName,
sceneCode: that.formData.sceneCode,
domainUrl: that.formData.domainUrl,
defaultFlag: that.formData.defaultFlag ? '1' : '0'
};
getRequest(that.editRow.sceneCode ? '/gateway-manage/update-scene' : '/gateway-manage/create-scene', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 提交数据
*/
setData(list) {
const that = this;
that.$emit('hideDialog', that.formData);
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
editRow: function(newData, oldData) {
const that = this;
that.formData = JSON.parse(JSON.stringify(newData));
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
that.formData = JSON.parse(JSON.stringify(that.editRow));
}
};
</script>
<style lang="less" scoped>
.edit-dialog {
/deep/ .el-dialog__body {
padding: 2px 55px 0 34px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #1890ff;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/error/error-code-edit.vue 0 → 100644
<!--
<error-code-edit
:editRow="editRow"
:showDialog="showDialog"
@hideDialog="hideDialog">
</error-code-edit>
import errorCodeEdit from '@/components/error/error-code-edit.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" title="编辑" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="errorCodeForm">
<el-form-item label="接口名称:">
{{ formData.interfaceName }}
</el-form-item>
<el-form-item label="项目分组:">
{{ formData.projectAndGroup }}
</el-form-item>
<el-form-item label="错误码:" prop="errorCode">
<el-input v-model="formData.errorCode"></el-input>
</el-form-item>
<el-form-item label="错误消息:" prop="errorCode">
<el-input v-model="formData.errorInfo"></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('errorCodeForm')">保 存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'error-code-edit',
props: {
showDialog: {
type: Boolean,
default: false
},
editRow: {
type: Object,
default() {
return {
errorSettingId: '',
interfaceName: '',
projectAndGroup: '',
errorCode: '',
errorInfo: ''
};
}
}
},
data() {
return {
customDialog: false, // 弹框显示
formData: {
errorSettingId: '',
interfaceName: '',
projectAndGroup: '',
errorCode: '',
errorInfo: ''
},
rules: {
errorCode: [{ required: true, message: '请输入错误码', trigger: 'blur' }],
errorInfo: [{ required: true, message: '请输入错误消息', trigger: 'blur' }]
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.formData.errorCode = '';
that.formData.errorInfo = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.formData.errorCode = String(that.formData.errorCode).replace(/\s+/g, '');
that.formData.errorInfo = String(that.formData.errorInfo).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postEditData();
} else {
return false;
}
});
},
postEditData() {
const that = this;
let para = {
errorSettingId: that.formData.errorSettingId,
errorCode: that.formData.errorCode,
errorInfo: that.formData.errorInfo
};
getRequest(that.editRow.errorSettingId ? '/gateway-manage/update-error-setting' : '/gateway-manage/create-error-setting', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
}
errMsg.errorInfo(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 提交数据
*/
setData(list) {
const that = this;
that.$emit('hideDialog', that.formData);
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
editRow: function(newData, oldData) {
const that = this;
that.formData = JSON.parse(JSON.stringify(newData));
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
that.formData = JSON.parse(JSON.stringify(that.editRow));
}
};
</script>
<style lang="less" scoped>
.edit-dialog {
/deep/ .el-dialog__body {
padding: 2px 55px 0 34px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #1890ff;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/limit-input.vue
......@@ -20,7 +20,7 @@
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
import strLength from '@/assets/js/strlen';
export default {
name: 'limitinput',
props: {
......@@ -168,6 +168,6 @@ export default {
line-height: 32px;
text-align: right;
font-size: 12px;
color: #909399;
color: #c0c4cc;
}
</style>
src/components/limit-textarea.vue
......@@ -19,7 +19,7 @@
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
import strLength from '@/assets/js/strlen';
export default {
name: 'limittextarea',
props: {
......@@ -156,12 +156,12 @@ export default {
.tip {
position: absolute;
bottom: -28px;
bottom: -4px;
right: 10px;
display: inline-block;
line-height: 32px;
text-align: right;
font-size: 12px;
color: #909399;
color: #c0c4cc;
}
</style>
src/components/program/new-api-group.vue 0 → 100644
<!--
<new-api-group
:editRow="editRow"
:showDialog="showDialog"
@hideDialog="hideDialog">
</new-api-group>
import newApiGroup from '@/components/program/new-api-group.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" :title="formData.programId ? '编辑分组' : '新建分组'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programGroupForm">
<el-form-item label="分组名称:" prop="groupName">
<limitInput :inputWidth="440" :inputValue.sync="formData.groupName" :holder="'请输入分组名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="描述:">
<limit-textarea :inputWidth="440" :inputValue.sync="formData.remark" :holder="'请输入备注内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('programGroupForm')">{{ formData.programId ? '保 存' : '新 建' }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'new-api-group',
props: {
showDialog: {
type: Boolean,
default: false
},
editRow: {
type: Object,
default() {
return {
groupId: '',
groupName: '',
remark: ''
};
}
}
},
components: {
limitInput,
limitTextarea
},
data() {
return {
customDialog: false, // 弹框显示
formData: {
groupId: '',
groupName: '',
remark: ''
},
rules: {
groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
remark: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
that.$refs['programGroupForm'].resetFields();
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.$refs['programGroupForm'].resetFields();
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.formData.groupName = '';
that.formData.remark = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.formData.groupName = String(that.formData.groupName).replace(/\s+/g, '');
that.formData.remark = String(that.formData.remark).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postEditData();
} else {
return false;
}
});
},
postEditData() {
const that = this;
let para = {
groupId: that.formData.groupId,
groupName: that.formData.groupName,
remark: that.formData.remark,
projectId: that.$route.query.projectId
};
getRequest(that.editRow.groupId ? '/gateway-manage/update-api-group' : '/gateway-manage/create-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 提交数据
*/
setData(list) {
const that = this;
that.$emit('hideDialog', that.formData);
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
editRow: function(newData, oldData) {
const that = this;
that.formData = JSON.parse(JSON.stringify(newData));
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
that.formData = JSON.parse(JSON.stringify(that.editRow));
}
};
</script>
<style lang="less" scoped>
.edit-dialog {
/deep/ .el-dialog__body {
padding: 2px 55px 0 34px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #1890ff;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/program/new-program.vue 0 → 100644
<!--
<new-program
:editRow="editRow"
:showDialog="showDialog"
@hideDialog="hideDialog">
</new-program>
import newProgram from '@/components/program/new-program.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" :title="formData.programId ? '编辑项目' : '新建项目'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programForm">
<el-form-item label="项目名称:" prop="projectName">
<limitInput :inputWidth="440" :inputValue.sync="formData.projectName" :holder="'请输入项目名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="描述:">
<limit-textarea :inputWidth="440" :inputValue.sync="formData.projectDescription" :holder="'请输入备注内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('programForm')">{{ formData.programId ? '保 存' : '新 建' }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'new-env',
props: {
showDialog: {
type: Boolean,
default: false
},
editRow: {
type: Object,
default() {
return {
projectId: '',
projectName: '',
projectDescription: ''
};
}
}
},
components: {
limitInput,
limitTextarea
},
data() {
return {
customDialog: false, // 弹框显示
formData: {
projectId: '',
projectName: '',
projectDescription: ''
},
rules: {
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
projectDescription: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}
};
},
methods: {
/**
* 关闭
*/
handleClose(done) {
const that = this;
that.$refs['programForm'].resetFields();
done();
that.hideDialog();
},
/**
* 取消
*/
customCancel() {
const that = this;
that.$refs['programForm'].resetFields();
that.hideDialog();
},
hideDialog() {
const that = this;
that.customDialog = false;
that.formData.projectName = '';
that.formData.projectDescription = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
},
/**
* 确定
*/
customConfirm(formName) {
const that = this;
that.formData.projectName = String(that.formData.projectName).replace(/\s+/g, '');
that.formData.projectDescription = String(that.formData.projectDescription).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postEditData();
} else {
return false;
}
});
},
postEditData() {
const that = this;
let para = {
projectId: that.formData.projectId,
projectName: that.formData.projectName,
projectDescription: that.formData.projectDescription
};
getRequest(that.editRow.projectId ? '/gateway-manage/update-project' : '/gateway-manage/create-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 提交数据
*/
setData(list) {
const that = this;
that.$emit('hideDialog', that.formData);
/* that.$nextTick(() => {
that.formData.classifyName = '';
}); */
}
},
watch: {
showDialog: function(newData, oldData) {
const that = this;
that.customDialog = newData;
},
editRow: function(newData, oldData) {
const that = this;
that.formData = JSON.parse(JSON.stringify(newData));
}
},
/* 接收数据 */
mounted() {
const that = this;
that.customDialog = that.showDialog;
that.formData = JSON.parse(JSON.stringify(that.editRow));
}
};
</script>
<style lang="less" scoped>
.edit-dialog {
/deep/ .el-dialog__body {
padding: 2px 55px 0 34px;
}
/deep/ .el-dialog__footer {
border: none;
padding-top: 3px;
}
&__title {
width: 100%;
height: 38px;
padding: 12px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(235, 238, 245, 1);
}
.el-alert--info {
width: 400px;
font-size: 14px;
color: #606266;
background: #e6f7ff;
border: 1px solid rgba(145, 213, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #1890ff;
}
.el-form {
margin-top: 40px;
}
}
</style>
src/components/tinymce-edit.vue deleted 100644 → 0
<!--
备注：由于使用拖拽上传图片，超过限制的图片不上传不显示，暂时修改了源码的的方法，增加了一个判断，
本来 images_upload_handler 中增加了判断可是
安装 tinymce
$ npm install @tinymce/tinymce-vue -S
npm install tinymce -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
文中所有 static 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包：
中文：https://tinymce-services.azurewebsites.net/1/i18n/download?langs=zh_CN
然后将这个语言包放到 static 目录下，为了结构清晰，包一层 tinymce 目录
static
|____tinymce
|___skins
|___zh_CN.js
<tinymce-edit ref="tinymceWrap" :bodyHtml="ruleForm.gradeDescribe" :projectName="projectName"></tinymce-edit>
import tinymceEdit from 'components/memberShip/tinymce-edit'
公共上传图片请求方法
/*
* method: 'post'
* data: params
*
*/
export const postForm = (url, params) => {
params.requestProject = "gic-clique";
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: params,
headers: {}
});
}
引入路径修改成自己的路径
-->
<template>
<div class="tinymce-contain">
<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
</div>
</template>
<script>
import { postForm } from '@/api/api';
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
export default {
name: 'tinymce-edit',
props: {
bodyHtml: {
type: String,
default() {
return '';
}
},
projectName: {
type: String,
default() {
return 'haoban-manage-web';
}
}
},
data() {
return {
repProjectName: 'haoban-manage-web',
// tinymce
tinymceHtml: '请输入内容',
init: {
language_url: 'static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: 'static/tinymce/skins/lightgray',
height: 300,
// 图片上传
// without images_upload_url set, Upload tab won't show up
// images_upload_url: '',
// images_upload_base_path: '/some/basepath',
images_upload_credentials: true, //是否应传递cookie等凭据
// images_upload_handler提供三个参数：blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure) => {
this.handleImgUpload(blobInfo, success, failure);
},
// 添加插件
plugins: 'link image colorpicker textcolor paste', // paste
toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
branding: false,
paste_data_images: true,
paste_image_maxsize: 5,
setup: function(editor) {
// 点击编辑框回调
editor.on('click', function(e) {});
},
fontsize_formats: '8px 10px 12px 14px 18px 24px 36px'
}
};
},
methods: {
// 上传图片
handleImgUpload(blobInfo, success, failure) {
let that = this;
if (blobInfo.blob().size > 5 * 1024 * 1024) {
failure('单张图片限制大小5M!');
return false;
}
let formdata = new FormData();
formdata.set('upload_file', blobInfo.blob());
formdata.set('requestProject', that.repProjectName);
postForm('/haoban-manage-web/upload-img', formdata)
.then(res => {
success(res.data.result[0].qcloudImageUrl);
})
.catch(res => {
failure('error');
});
}
},
watch: {
projectName: function(newData, oldData) {
let that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
bodyHtml: function(newData, oldData) {
let that = this;
// console.log("新数据:",newData,oldData)
that.tinymceHtml = newData;
}
},
components: {
Editor
},
mounted() {
var that = this;
tinymce.init({});
that.tinymceHtml = that.bodyHtml;
}
};
</script>
<style lang="less" scoped>
.tinymce-contain {
width: 100%;
position: relative;
/deep/ .mce-tinymce {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid #dcdfe6;
}
/deep/ .mce-panel {
border: 0px solid #dcdfe6;
}
}
</style>
src/components/utils/htmlToPdf.js deleted 100644 → 0
// 导出页面为PDF格式
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
install(Vue, options) {
Vue.prototype.getPdf = function() {
var title = this.htmlTitle;
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true,
foreignObjectRendering: true
}).then(function(canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = (contentWidth / 592.28) * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = (592.28 / contentWidth) * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let PDF = new JsPDF('', 'pt', 'a4');
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save(title + '.pdf');
});
};
}
};
src/components/vue-api-header.vue
......@@ -23,7 +23,7 @@
</ul>
<div class="nav-user-name" slot="reference" style="display: inline-block;">
<a class="user-left-img flex flex-align-center"
><img :src="baseInfo.userPhoto" style="width: 30px; height: 30px; border-radius: 15px; padding-right: 2px;" alt=""/><span class="color-fff font-14 p-r-14">{{ baseInfo.userName }}</span
><img :src="baseInfo.avatar" style="width: 30px; height: 30px; border-radius: 15px; padding-right: 2px;" alt=""/><span class="color-fff font-14 p-r-14">{{ baseInfo.userName }}</span
><i class="el-icon-arrow-down font-14 color-fff"></i
></a>
</div>
......@@ -43,7 +43,8 @@ export default {
data() {
return {
baseInfo: {
userPhoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIByXn17AiaibMrdKnDR52QkALMQeRrIUBvSc1Qj9wKyEHRehGErvm45cMZrics3GnC6sxXPwWlafZBQ/132',
userId: '',
avatar: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIByXn17AiaibMrdKnDR52QkALMQeRrIUBvSc1Qj9wKyEHRehGErvm45cMZrics3GnC6sxXPwWlafZBQ/132',
userName: '管理员'
}
};
......@@ -75,7 +76,7 @@ export default {
getRequest('/gateway-manage/invalidate', {})
.then(res => {
const resData = res.data;
if (resData.errorCode == 0) {
if (resData.code == 1) {
showMsg('退出成功', 'success');
// 跳转登录页
window.location.href = window.location.origin + '/api-gateway-web/#/login';
......@@ -89,6 +90,24 @@ export default {
message: error.message
});
});
},
getUserInfo() {
const that = this;
getRequest('/gateway-manage/get-login-userInfo', {})
.then(res => {
const resData = res.data;
if (resData.code == 1) {
that.baseInfo = resData.result;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
......
src/filters/index.js 0 → 100644
/* 全局过滤器 */
const dateFormat = function(timeSpan, format) {
if (!timeSpan) return;
timeSpan = timeSpan.toString().length === 10 ? timeSpan * 1000 : timeSpan;
let date = new Date(timeSpan);
let o = {
'M+': date.getMonth() + 1,
'D+': date.getDate(),
W: '日一二三四五六'.charAt(date.getDay()),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
S: date.getMilliseconds()
};
if (/(Y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
}
}
return format;
};
/**
* 时间戳---> 年-月-日 时:分:秒
* @param timestamp
*/
const formatTimeStamp = function(data) {
let date = new Date(data);
let month = date.getMonth() + 1;
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
let newMonth = month < 10 ? '0' + month : month;
let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return `${date.getFullYear()}-${newMonth}-${day} ${hours}:${minutes}:${seconds}`;
};
/**
* 时间戳---> 年-月-日
* @param timestamp
*/
const timeStampToYmd = function(data) {
let date = new Date(data);
let month = date.getMonth() + 1;
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
let newMonth = month < 10 ? '0' + month : month;
return `${date.getFullYear()}-${newMonth}-${day}`;
};
/**
* 时间戳---> 时:分:秒
* @param timestamp
*/
const timeStampToHms = function(data) {
let date = new Date(data);
let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return `${hours}:${minutes}:${seconds}`;
};
export default {
dateFormat,
formatTimeStamp,
timeStampToYmd,
timeStampToHms
};
src/main.js
......@@ -14,13 +14,17 @@ import '../static/css/index.less';
// import 'element-ui/lib/theme-chalk/index.css'
import '../static/font/iconfont.css';
import '../theme/index.css';
import filters from './filters/index.js';
Vue.config.productionTip = false;
Vue.use(ElementUI, { size: 'large' });
Vue.use(VueAxios, axios);
Vue.axios.defaults.withCredentials = true; // 允许携带 cookie
// 全局注册过滤器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/router/index.js
......@@ -83,6 +83,11 @@ export const constantRouterMap = [
component: _import('index', 'envManage')
},
{
path: '/createEnvSet',
name: '新建配置',
component: _import('index', 'createEnvSet')
},
{
path: '/releaseRecords',
name: '发布记录',
component: _import('index', 'releaseRecords')
......
src/views/index/apiList.vue
......@@ -4,17 +4,71 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="search-wrap m-b-20 flex flex-space-between">
<div>
<el-input clearable class="w-320" placeholder="请输入API名称" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-select class="w-137" v-model="targetType" placeholder="请选择" @change="changeTargetType">
<el-option v-for="item in targetTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<el-button type="primary" @click="createApi">新建API</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="interfaceName" label="API名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="API类型" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.interfaceType == '0' ? 'http' : scope.row.interfaceType == '1' ? 'dubbo ' : '自定义返回' }}
</template>
</el-table-column>
<el-table-column label="访问类型" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.optType }}
</template>
</el-table-column>
<el-table-column label="项目/分组" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.interfaceGroupName }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="toApiListManage(scope.$index, scope.row)" type="text">管理</el-button>
<!-- <el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button> -->
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</div>
<new-api-group :editRow="editRow" :showDialog="showDialog" @hideDialog="hideDialog"> </new-api-group>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import newApiGroup from '@/components/program/new-api-group.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
// import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'apiList',
name: 'apiProgramGroup',
components: {
navBread
navBread,
newApiGroup
},
data() {
return {
......@@ -28,37 +82,107 @@ export default {
name: 'API列表',
path: ''
}
]
],
searchValue: '',
targetType: '',
targetTypeOptions: [
{
value: '0',
label: '私有'
},
{
value: '1',
label: '公开'
}
],
tableData: [
{
interfaceId: '1',
interfaceName: '测试',
interfaceGroupName: '234',
interfaceType: '0',
optType: 'get',
createTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0,
showDialog: false,
editIndex: '',
editRow: {}
};
},
methods: {
/**
* 编辑环境
*/
createApi() {
const that = this;
that.$router.push(`/createApi`);
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 选择 API类型
*/
changeTargetType(val) {
console.log(val);
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 管理
*/
toApiListManage(index, row) {
const that = this;
that.$router.push(`/apiListManage?interfaceId=${row.interfaceId}&interfaceName=${row.interfaceName}`);
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
search: that.searchValue,
target: that.targetType, //对象 0 对内 1对外 2对部分
pageSize: that.pageSize,
pageNum: that.currentPage
};
getRequest('/haoban-manage-web/menu-detail', para)
getRequest('/gateway-manage/page-api', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
}
return;
}
that.$message.error({
duration: 1000,
message: resData.message
});
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
......@@ -84,4 +208,14 @@ export default {
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.w-137 {
width: 137px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/views/index/apiListManage.vue
......@@ -4,17 +4,30 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="api-tab-wrap">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="版本" name="first">
<env-list></env-list>
</el-tab-pane>
<el-tab-pane label="发布记录" name="second">
<publish-list></publish-list>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import publishList from '@/components/api/publish-list.vue';
import { getRequest } from '@/api/api';
export default {
name: 'apiListManage',
components: {
navBread
navBread,
publishList
},
data() {
return {
......@@ -32,11 +45,18 @@ export default {
name: '管理',
path: ''
}
]
],
activeName: 'first'
};
},
methods: {
/**
* tab 切换
*/
handleClick(tab, event) {
console.log(tab, event);
},
/**
* 获取数据
*/
getData() {
......
src/views/index/apiProgram.vue
......@@ -4,17 +4,56 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="search-wrap m-b-20 flex flex-space-between">
<el-input clearable class="w-320" placeholder="请输入项目名称" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button type="primary" @click="editProgram">新建项目</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="描述" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.projectDescription }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="toGroupList(scope.$index, scope.row)" type="text">分组列表</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</div>
<new-program :editRow="editRow" :showDialog="showDialog" @hideDialog="hideDialog"> </new-program>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import newProgram from '@/components/program/new-program.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'apiProgram',
components: {
navBread
navBread,
newProgram
},
data() {
return {
......@@ -28,37 +67,154 @@ export default {
name: '项目列表',
path: ''
}
]
],
searchValue: '',
tableData: [
{
projectId: '1',
projectName: '测试',
projectDescription: '234',
createTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0,
showDialog: false,
editIndex: '',
editRow: {}
};
},
methods: {
/**
* 获取数据
* 编辑环境
*/
getData() {
editProgram() {
const that = this;
that.showDialog = true;
},
hideDialog(obj) {
const that = this;
if (!obj) {
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
return false;
}
if (that.editRow.projectId) {
that.tableData[that.editIndex].projectName = obj.projectName;
that.tableData[that.editIndex].projectDescribe = obj.projectDescribe;
} else {
that.currentPage = 1;
that.getData();
}
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
that.$forceUpdate();
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 分组列表
*/
toGroupList(index, row) {
const that = this;
that.$router.push(`/apiProgramGroup?projectId=${row.projectId}`);
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.editIndex = index;
that.editRow = row;
that.showDialog = true;
},
/**
* 删除
*/
handleDel(index, row) {
const that = this;
that
.$confirm(`【${row.projectName}】下的接口将全部被删除，确认删除吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDelData(index, row);
})
.catch(() => {});
},
postDelData(index, row) {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
projectId: row.projectId
};
getRequest('/haoban-manage-web/menu-detail', para)
getRequest('/gateway-manage/delete-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
return;
}
showMsg.showmsg('删除成功', 'warning');
that.tableData.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: resData.message
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
search: that.searchValue,
pageSize: that.pageSize,
pageNum: that.currentPage
};
getRequest('/gateway-manage/page-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
......@@ -84,4 +240,11 @@ export default {
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/views/index/apiProgramGroup.vue
......@@ -4,17 +4,56 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="search-wrap m-b-20 flex flex-space-between">
<el-input clearable class="w-320" placeholder="请输入分组名称" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button type="primary" @click="editProgram">新建分组</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="groupName" label="分组名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="描述" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.remark }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="toApiList(scope.$index, scope.row)" type="text">API列表</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</div>
<new-api-group :editRow="editRow" :showDialog="showDialog" @hideDialog="hideDialog"> </new-api-group>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import newApiGroup from '@/components/program/new-api-group.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'apiProgramGroup',
components: {
navBread
navBread,
newApiGroup
},
data() {
return {
......@@ -26,43 +65,161 @@ export default {
},
{
name: '项目列表',
path: '/apiProgram'
path: 'apiProgram'
},
{
name: '分组列表',
path: ''
}
]
],
searchValue: '',
tableData: [
{
groupId: '1',
groupName: '测试',
remark: '234',
createTime: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0,
showDialog: false,
editIndex: '',
editRow: {}
};
},
methods: {
/**
* 获取数据
* 编辑环境
*/
getData() {
editProgram() {
const that = this;
that.showDialog = true;
},
hideDialog(obj) {
const that = this;
if (!obj) {
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
return false;
}
if (that.editRow.groupId) {
that.tableData[that.editIndex].groupName = obj.groupName;
that.tableData[that.editIndex].remark = obj.remark;
} else {
that.currentPage = 1;
that.getData();
}
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
that.$forceUpdate();
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* api列表
*/
toApiList(index, row) {
const that = this;
that.$router.push(`/apiList`);
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.editIndex = index;
that.editRow = row;
that.showDialog = true;
},
/**
* 删除
*/
handleDel(index, row) {
const that = this;
that
.$confirm(`【${row.groupName}】下的接口将全部被删除，确认删除吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postDelData(index, row);
})
.catch(() => {});
},
postDelData(index, row) {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
groupId: row.groupId
};
getRequest('/haoban-manage-web/menu-detail', para)
getRequest('/gateway-manage/delete-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
return;
}
showMsg.showmsg('删除成功', 'warning');
that.tableData.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: resData.message
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
search: that.searchValue,
pageSize: that.pageSize,
pageNum: that.currentPage,
projectId: that.$route.query.projectId
};
getRequest('/gateway-manage/list-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
......@@ -78,11 +235,21 @@ export default {
// 深度观察监听
deep: true
}
}
},
/* 接收数据 */
// mounted() {}
mounted() {
const that = this;
that.$emit('showTab', 21);
}
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/views/index/createEnvSet.vue 0 → 100644
<template>
<div class="api-body-content border-box">
<div class="common-nav">
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box">
<div class="base-set-wrap">
<div class="set-title font-14 color-303133">基础配置</div>
<el-form :model="formData" label-width="94px" :rules="rules" ref="envForm">
<el-form-item label="配置名称:" prop="proxyName">
<limitInput :inputWidth="440" :inputValue.sync="formData.proxyName" :holder="'请输入配置名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="配置code:" prop="proxyCode">
<limitInput :inputWidth="440" :disflag="formData.setId ? true : false" :inputValue.sync="formData.proxyCode" :holder="'请输入配置code'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="备注:" prop="description">
<limit-textarea :inputWidth="440" :inputValue.sync="formData.description" :holder="'请输入备注内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
</el-form-item>
<el-form-item label="" v-if="!shoEnvFlag">
<div class="show-set-env" @click="showEnvSet"><span class="font-14 color-5584FF">添加环境配置</span><i class="iconfont iconxiala1 font-14 color-5584FF p-l-10"></i></div>
</el-form-item>
</el-form>
</div>
<div class="env-set-wrap" v-if="shoEnvFlag">
<div class="set-title font-14 color-303133">环境配置</div>
<div class="env-set-body">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="envName" label="配置名称" show-overflow-tooltip>
<template slot-scope="scope">
<el-select v-model="scope.row.sceneCode" placeholder="请选择">
<el-option v-for="item in envOptions" :key="item.sceneCode" :label="item.sceneName" :value="item.sceneCode"> </el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="IP地址" show-overflow-tooltip>
<template slot-scope="scope">
<div :class="['ip-cell w-206', index == 0 ? '' : 'm-t-18']" v-for="(item, index) in scope.row.ips" :key="index">
<el-input v-model="item.ip" placeholder=""></el-input>
<i v-if="scope.row.ips.length > 1 && index < scope.row.ips.length - 1" class="inline-block pointer el-icon-minus p-l-10" @click="toDel(scope.row, scope.$index, index)"></i>
<i v-if="scope.row.ips.length - 1 == index" class="inline-block pointer el-icon-plus p-l-10" @click="toAdd(scope.row, scope.$index, index)"></i>
</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button v-if="tableData.length > 1" @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="add-row text-center pointer" @click="toAddRow"><i class="el-icon-circle-plus-outline font-14 color-5584FF"></i><span class="font-14 color-5584FF p-l-4">添加行</span></div>
</div>
<div class="save-wrap" :style="{ 'padding-left': shoEnvFlag ? '0' : '97px' }">
<el-button type="primary" @click="handleSave('envForm')">保存</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { getRequest } from '@/api/api';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'createEnvSet',
components: {
navBread,
limitInput,
limitTextarea
},
data() {
return {
// 面包屑参数
navPath: [
{
name: '环境管理',
path: '/envManage'
},
{
name: '环境列表',
path: '/envManage'
},
{
name: '新增配置',
path: ''
}
],
formData: {
backendProxyId: this.$route.query.backendProxyId || '',
proxyType: this.$route.query.proxyType || '0',
proxyCode: '',
proxyName: '',
description: '',
envParams: ''
},
rules: {
proxyName: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
proxyCode: [{ required: true, message: '请输入配置code', trigger: 'blur' }]
},
shoEnvFlag: false, // 是否显示环境配置
tableData: [
{
sceneCode: '',
ips: [
{
ip: ''
}
]
}
],
envOptions: [
{
sceneCode: '1',
sceneName: '测试'
},
{
sceneCode: '2',
sceneName: '正式'
}
]
};
},
methods: {
/**
* 显示环境配置
*/
showEnvSet() {
const that = this;
that.shoEnvFlag = true;
},
/**
* 删除 ip
*/
toDel(row, index, child) {
row.ips.splice(child, 1);
},
/**
* 删除 ip
*/
toAdd(row, index, child) {
row.ips.push({
ip: ''
});
},
/**
* 删除环境
*/
handleDel(index, row) {
const that = this;
that
.$confirm('确定删除该环境?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.tableData.splice(index, 1);
})
.catch(() => {});
},
/**
* 添加行
*/
toAddRow() {
const that = this;
that.tableData.push({
envName: '',
ips: [
{
ip: ''
}
]
});
},
/**
* 保存
*/
handleSave(formName) {
const that = this;
that.formData.proxyName = String(that.formData.proxyName).replace(/\s+/g, '');
that.formData.proxyCode = String(that.formData.proxyCode).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.saveData();
} else {
return false;
}
});
},
saveData() {
const that = this;
let para = {
backendProxyId: that.formData.backendProxyId,
proxyType: that.formData.proxyType,
proxyName: that.formData.proxyName,
proxyCode: that.formData.proxyCode,
description: that.formData.description,
envParams: that.shoEnvFlag ? JSON.parse(JSON.stringify(that.tableData)) : ''
};
getRequest(that.$route.query.backendProxyId ? '/gateway-manage/update-proxy' : '/gateway-manage/create-proxy', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
showMsg.showmsg('保存成功', 'success');
that.$router.push('/envManage');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取环境列表
*/
getEnvData() {
const that = this;
getRequest('/gateway-manage/list-all-scene', {})
.then(res => {
let resData = res.data;
if (resData.code == 1) {
that.envOptions = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
backendProxyId: that.backendProxyId
};
getRequest('/gateway-manage/get-proxy', para)
.then(res => {
let resData = res.data;
if (resData.code == 1) {
that.formData = resData.result;
that.tableData = JSON.parse(resData.result.envParams);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
$route: {
handler: function(val, oldVal) {},
// 深度观察监听
deep: true
}
},
/* 接收数据 */
mounted() {
const that = this;
that.$emit('showTab', 3);
}
};
</script>
<style lang="less" scoped>
.w-206 {
width: 206px;
}
.set-title {
margin-bottom: 20px;
font-weight: 600;
}
.show-set-env {
cursor: pointer;
}
.add-row {
padding: 14px 0;
border-bottom: 1px solid #e4e7ed;
margin-bottom: 51px;
}
</style>
src/views/index/envManage.vue
......@@ -4,17 +4,32 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="env-tab-wrap">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="环境列表" name="first">
<env-list></env-list>
</el-tab-pane>
<el-tab-pane label="配置列表" name="second">
<env-set-list></env-set-list>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import envList from '@/components/env/env-list.vue';
import envSetList from '@/components/env/env-set-list.vue';
import { getRequest } from '@/api/api';
export default {
name: 'envManage',
components: {
navBread
navBread,
envList,
envSetList
},
data() {
return {
......@@ -24,11 +39,18 @@ export default {
name: '环境管理',
path: ''
}
]
],
activeName: 'first'
};
},
methods: {
/**
* tab 切换
*/
handleClick(tab, event) {
console.log(tab, event);
},
/**
* 获取数据
*/
getData() {
......@@ -42,13 +64,6 @@ export default {
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
return;
}
return;
}
that.$message.error({
......
src/views/index/errorCode.vue
......@@ -4,17 +4,56 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="search-wrap m-b-20">
<el-input clearable class="w-320" placeholder="请输入接口名称/错误码" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="interfaceName" label="接口名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="项目/分组" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.projectAndGroup }}
</template>
</el-table-column>
<el-table-column label="错误码" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.errorCode }}
</template>
</el-table-column>
<el-table-column label="错误消息" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.errorInfo }}
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</div>
<error-code-edit :editRow="editRow" :showDialog="showDialog" @hideDialog="hideDialog"> </error-code-edit>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import errorCodeEdit from '@/components/error/error-code-edit.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
export default {
name: 'errorCode',
components: {
navBread
navBread,
errorCodeEdit
},
data() {
return {
......@@ -24,37 +63,96 @@ export default {
name: '错误码',
path: ''
}
]
],
searchValue: '',
tableData: [
{
errorSettingId: '1',
interfaceName: '测试',
projectAndGroup: '会员',
errorCode: '404',
errorInfo: '页面不存在'
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0,
showDialog: false,
editIndex: '',
editRow: {}
};
},
methods: {
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 编辑
*/
handleEdit(index, row) {
const that = this;
that.editIndex = index;
that.editRow = row;
that.showDialog = true;
},
hideDialog(obj) {
const that = this;
if (!obj) {
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
return false;
}
that.tableData[that.editIndex].errorCode = obj.errorCode;
that.tableData[that.editIndex].errorInfo = obj.errorInfo;
that.editIndex = '';
that.editRow = {};
that.showDialog = false;
that.$forceUpdate();
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
search: that.searchValue,
pageNum: that.currentPage,
pageSize: that.pageSize
};
getRequest('/haoban-manage-web/menu-detail', para)
getRequest('/gateway-manage/page-error-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
return;
}
if (resData.code == 1) {
that.tableData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
return;
}
that.$message.error({
duration: 1000,
message: resData.message
});
errMsg.errorInfo(resData);
})
.catch(function(error) {
that.$message.error({
......@@ -76,8 +174,16 @@ export default {
mounted() {
const that = this;
that.$emit('showTab', 6);
// that.getData();
}
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/views/index/index.vue
......@@ -144,6 +144,7 @@ export default {
position: relative;
width: calc(100% - 150px);
min-width: 1200px;
overflow-y: auto;
.api-body-content {
width: 100%;
min-width: 1200px;
......@@ -153,19 +154,52 @@ export default {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
padding: 20px;
background: #f5f7fa;
overflow-y: auto;
// overflow-y: auto;
.api-main-content {
position: relative;
width: 100%;
height: calc(100% - 40px);
padding: 20px;
background: #fff;
overflow-y: auto;
}
}
}
}
}
}
.el-table__empty-block {
height: 256px;
}
.el-table__empty-text {
width: auto;
margin-bottom: 80px;
&::before {
content: ' ';
display: block;
width: 60px;
height: 60px;
background: url(../../assets/no-data_icon.png) no-repeat center;
margin: 0px auto 22px auto;
}
}
.line-18 {
line-height: 18px;
}
.search-wrap-right .el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #1890ff;
border-color: #1890ff;
background-color: #fff;
}
.search-wrap-right .el-radio-button__inner:hover {
color: #1890ff;
}
</style>
src/views/index/releaseRecords.vue
......@@ -4,13 +4,60 @@
<nav-bread :navPath="navPath"></nav-bread>
</div>
<div class="api-body-main common-body-main border-box">
<div class="api-main-content border-box"></div>
<div class="api-main-content border-box">
<div class="search-wrap m-b-20">
<el-input clearable class="w-320" placeholder="请输入发布版本" v-model="searchValue" @keyup.native="value => searchData(value)" @clear="clearInput">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="publishName" label="发布版本" show-overflow-tooltip> </el-table-column>
<el-table-column label="API名称" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.apiName }}
</template>
</el-table-column>
<el-table-column label="版本号" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.publishVersion }}
</template>
</el-table-column>
<el-table-column label="环境" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.env }}
</template>
</el-table-column>
<el-table-column label="发布备注" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.describe }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="color-606266 line-18">{{ scope.row.createDate | timeStampToYmd }}</div>
<div class="color-606266 line-18">{{ scope.row.createDate | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="handleShow(scope.$index, scope.row)" type="text">查看</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination text-right m-t-14" v-if="!!totalCount">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
export default {
name: 'releaseRecords',
components: {
......@@ -24,11 +71,60 @@ export default {
name: '发布记录',
path: ''
}
]
],
searchValue: '',
tableData: [
{
publishId: '1',
publishName: '测试',
apiName: '测试',
publishVersion: 'V1.0.1',
env: '测试',
describe: '描述内容',
createDate: 1564455643252
}
],
pageSize: 20,
currentPage: 1,
totalCount: 0
};
},
methods: {
/**
* 搜索
*/
searchData: _debounce(function(value) {
const that = this;
that.currentPage == 1;
that.getData();
}, 500),
/**
* 搜索清除
*/
clearInput() {
this.currentPage = 1;
this.getData();
},
/**
* 分页
*/
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
/**
* 查看定义详情页
*/
handleShow(index, row) {
const that = this;
that.$router.push('/');
},
/**
* 获取数据
*/
getData() {
......@@ -42,19 +138,11 @@ export default {
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result) {
that.$message.error({
duration: 1000,
message: '暂无数据'
});
return;
}
that.tableData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
return;
}
that.$message.error({
duration: 1000,
message: resData.message
});
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
......@@ -80,4 +168,11 @@ export default {
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
</style>
src/views/login/index.vue
......@@ -95,7 +95,7 @@ export default {
postRequest('/gateway-manage/login', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == 1) {
return;
}
errMsg.errorMsg(resData);
......
static/css/public.css
......@@ -325,6 +325,10 @@ input:focus {
display: block;
}
.pointer {
cursor: pointer;
}
.bdr-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -414,6 +418,10 @@ input:focus {
padding: 45px;
}
.p-l-4 {
padding-left: 4px;
}
.p-l-6 {
padding-left: 6px;
}
......@@ -494,10 +502,18 @@ input:focus {
margin-top: 10px;
}
.m-t-14 {
margin-top: 14px;
}
.m-t-15 {
margin-top: 15px;
}
.m-t-18 {
margin-top: 18px;
}
.m-t-20 {
margin-top: 20px;
}
......@@ -538,6 +554,10 @@ input:focus {
margin-bottom: 16px;
}
.m-b-18 {
margin-bottom: 18px;
}
.m-b-20 {
margin-bottom: 20px;
}
......@@ -624,6 +644,10 @@ input:focus {
width: 250px;
}
.w-320 {
width: 320px;
}
.w-500 {
width: 500px;
}
......@@ -799,3 +823,24 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
/* 弹窗 */
.edit-dialog .el-form-item__label {
color: #606266;
}
.edit-dialog .el-form-item__content {
color: #303133;
}
.el-table th>.cell {
font-weight: 500;
color: #303133;
}
.el-table tr td {
padding: 6px 0;
}
.el-tabs__header .el-tabs__nav-wrap::after {
height:1px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment