improve: 接口权限/调试

This commit is contained in:
From-wh 2023-04-11 16:54:14 +08:00
parent 63ecfbdd92
commit 020ba9c589
9 changed files with 272 additions and 53 deletions

View File

@ -62,6 +62,17 @@ export function routeDet(id) {
method: 'get',
});
}
/**
* 接口分类编辑
* @param {*} data
* @returns
*/
export function routeEdit(id, appName) {
return request({
url: `system/route_cate/${id}/edit?app_name=${appName}`,
method: 'get',
});
}
/**
* @description 修改名称

View File

@ -94,3 +94,13 @@ export function getRuleList() {
method: 'get',
});
}
/**
* @description 权限列表
*/
export function menusBatch(data) {
return request({
url: `setting/menus/batch`,
method: 'post',
data,
});
}

View File

@ -55,9 +55,9 @@ export default {
if (Number(this.$route.query.type) === 1) {
this.iframeUrl = `${moveLink}/pages/index/index?type=iframeWindow`;
} else {
this.iframeUrl = `https://v4.wuht.net/pages/index/index?type=iframeWindow`;
// this.iframeUrl = `https://v4.wuht.net/pages/index/index?type=iframeWindow`;
// this.iframeUrl = `${location.origin}/pages/index/index?type=iframeWindow`;
this.iframeUrl = `${location.origin}/pages/index/index?type=iframeWindow`;
}
diyGetInfo(parseInt(pageId)).then((datas) => {
let data = datas.data.info.value;

View File

@ -12,7 +12,7 @@
@on-visible-change="visible"
>
<Form ref="formValidate" :model="formValidate" :label-width="110" @submit.native.prevent>
<Row type="flex" :gutter="24">
<!-- <Row type="flex" :gutter="24">
<Col span="24">
<FormItem label="类型:">
<RadioGroup v-model="formValidate.auth_type" @on-change="changeRadio">
@ -23,14 +23,14 @@
</RadioGroup>
</FormItem>
</Col>
</Row>
</Row> -->
<Row type="flex" :gutter="24">
<Col v-bind="grid">
<FormItem :label="!authType ? '接口名称:' : '按钮名称:'" prop="menu_name">
<div class="add">
<Input v-model="formValidate.menu_name" :placeholder="!authType ? '请输入接口名称' : '请输入按钮名称'">
</Input>
<Button class="ml10 df" v-show="!authType" @click="getRuleList()" icon="ios-apps"></Button>
<!-- <Button class="ml10 df" v-show="!authType" @click="getRuleList()" icon="ios-apps"></Button> -->
</div>
</FormItem>
</Col>
@ -95,7 +95,7 @@
</RadioGroup>
</FormItem>
</Col>
<Col :xs="24">
<Col v-bind="grid">
<FormItem label="状态:">
<RadioGroup v-model="formValidate.is_show">
<Radio :label="item.value" v-for="(item, i) in isShowRadio" :key="i">

View File

@ -67,13 +67,15 @@
</i-switch>
</template>
</vxe-table-column>
<vxe-table-column field="date" title="操作" align="center" width="200" fixed="right">
<vxe-table-column field="date" title="操作" align="center" width="250" fixed="right">
<template v-slot="{ row, index }">
<span v-auth="['setting-system_menus-add']">
<a @click="addRoute(row)" v-if="row.auth_type === 1">添加权限</a>
<Divider type="vertical" v-if="row.auth_type === 1" />
<a @click="addE(row, '添加子菜单')" v-if="row.auth_type === 1">添加子菜单</a>
<a @click="addE(row, '添加规则')" v-else>添加规则</a>
<!-- <a @click="addE(row, '添加规则')" v-else>添加规则</a> -->
</span>
<Divider type="vertical" />
<Divider type="vertical" v-if="row.auth_type === 1" />
<a @click="edit(row, '编辑')">编辑</a>
<Divider type="vertical" />
<a @click="del(row, '删除规则')">删除</a>
@ -85,16 +87,57 @@
:formValidate="formValidate"
:titleFrom="titleFrom"
@getList="getList"
@selectRule="selectRule"
ref="menusFrom"
@clearFrom="clearFrom"
></menus-from>
<Modal
v-model="ruleModal"
scrollable
width="1100"
title="权限列表"
@on-ok="addRouters"
@on-cancel="ruleModal = false"
@on-visible-change="modalchange"
>
<div class="search-rule">
<Input
class="mr10"
v-model="searchRule"
placeholder="输入关键词搜索"
clearable
style="width: 300px"
ref="search"
@on-enter="searchRules"
@on-clear="searchRules"
/>
<Button class="mr10" type="primary" @click="searchRules">搜索</Button>
<Button @click="init">重置</Button>
</div>
<Tabs v-model="routeType" @on-click="changTab">
<TabPane label="基础接口" name="1"></TabPane>
<TabPane label="公共接口" name="0"></TabPane>
</Tabs>
<div class="rule">
<div
class="rule-list"
v-show="!arrs.length || arrs.includes(item.id)"
:class="{ 'select-rule': seletRouteIds.includes(item.id) }"
v-for="(item, index) in routeType == 1 ? foundationList : openList"
:key="index"
@click="selectRule(item)"
>
<div>接口名称:{{ item.real_name }}</div>
<div>请求方式:{{ item.method }}</div>
<div>接口地址:{{ item.rule }}</div>
</div>
</div>
</Modal>
</div>
</template>
<script>
import { mapState } from 'vuex';
import { getTable, menusDetailsApi, isShowApi, editMenus } from '@/api/systemMenus';
import { getTable, menusDetailsApi, isShowApi, editMenus, getRuleList, menusBatch } from '@/api/systemMenus';
import formCreate from '@form-create/iview';
import menusFrom from './components/menusFrom';
export default {
@ -103,6 +146,8 @@ export default {
return {
tabconfig: { children: 'children', reserve: true, accordion: true },
spinShow: false,
ruleModal: false,
searchRule: '',
grid: {
xl: 7,
lg: 7,
@ -121,6 +166,13 @@ export default {
formValidate: {},
titleFrom: '',
modalTitleSs: '',
routeType: '1',
arrs: [],
foundationList: [], // 基础接口列表
openList: [], // 公开接口列表
seletRoute: [], // 选中路由
seletRouteIds: [], // 选中id
menusId: 0, // 选中分类id
};
},
components: { menusFrom, formCreate: formCreate.$form() },
@ -137,6 +189,77 @@ export default {
this.getData();
},
methods: {
init() {
this.searchRule = '';
this.arrs = [];
this.seletRouteIds = [];
this.seletRoute = [];
},
addRouters() {
let data = {
menus: this.seletRoute,
};
menusBatch(data)
.then((res) => {
console.log(res);
this.getData();
})
.catch((res) => {
this.$Message.error(res.msg);
});
},
selectRule(data) {
if (this.seletRouteIds.includes(data.id)) {
let i = this.seletRouteIds.findIndex((e) => e == data.id);
this.seletRouteIds.splice(i, 1);
this.seletRoute.splice(i, 1);
} else {
this.seletRouteIds.push(data.id);
this.seletRoute.push({
menu_name: data.name,
unique_auth: '',
api_url: data.path,
path: this.menusId,
method: data.method,
});
}
},
changTab(name) {
console.log(name);
this.searchRules();
},
// 搜索规则
searchRules() {
if (this.searchRule.trim()) {
this.arrs = [];
let arr = this.routeType == 1 ? this.foundationList : this.openList;
for (var i = 0; i < arr.length; i++) {
if (arr[i].real_name.indexOf(this.searchRule) !== -1) {
this.arrs.push(arr[i].id);
}
}
} else {
this.arrs = [];
}
},
addRoute(row) {
this.menusId = row.id;
this.getRuleList();
},
modalchange() {},
// 获取权限列表
getRuleList() {
getRuleList().then((res) => {
res.data.map((e) => {
if (e.type) {
this.foundationList.push(e);
} else {
this.openList.push(e);
}
});
this.ruleModal = true;
});
},
// 修改规则状态
onchangeIsShow(row) {
let data = {
@ -157,11 +280,7 @@ export default {
this.formValidate = Object.assign({}, this.$options.data().formValidate);
this.getData();
},
selectRule(data) {
this.formValidate.menu_name = data.real_name;
this.formValidate.methods = data.method;
this.formValidate.api_url = data.rule;
},
// 清除表单数据
clearFrom() {
this.formValidate = Object.assign({}, this.$options.data().formValidate);
@ -291,4 +410,52 @@ export default {
background: #fff !important;
}
}
.rule {
display: flex;
flex-wrap: wrap;
max-height: 600px;
overflow-y: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
border-radius: 4px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #ccc;
}
.rule-list {
background-color: #f2f2f2;
width: 32%;
margin: 5px;
border-radius: 3px;
padding: 10px;
color: #333;
cursor: pointer;
transition: all 0.1s;
}
.rule-list:hover {
background-color: #c5d1dd;
}
.rule-list div {
white-space: nowrap;
}
.select-rule {
background-color: #c5d1dd;
}
</style>

View File

@ -9,6 +9,7 @@
</template>
</Input>
<Button class="ml20" type="primary" @click="requestData">请求</Button>
<Button class="ml10 copy-btn" type="success" @click="insertCopy()">复制</Button>
</div>
<div class="params">
<Tabs class="mt10" v-model="paramsType" @on-click="changeTab">
@ -210,7 +211,6 @@
</div>
</div>
<div class="res mt10 mb10" v-if="codes">
<div class="copy-btn"><Button class="mt10 copy-btn" type="primary" @click="insertCopy()">复制</Button></div>
<MonacoEditor :codes="codes" :readOnly="true" />
</div>
</div>
@ -458,7 +458,7 @@ export default {
}
}
}
.copy-btn{
.copy-btn {
display: flex;
justify-content: right;
}

View File

@ -9,6 +9,7 @@
</template>
</Input>
<Button class="ml20" type="primary" @click="requestData">请求</Button>
<Button v-if="codes" class="ml10 copy-btn" type="success" @click="insertCopy()">复制结果</Button>
</div>
<div class="params">
<Tabs class="mt10" v-model="paramsType" @on-click="changeTab">
@ -210,7 +211,6 @@
</div>
</div>
<div class="res mt10 mb10" v-if="codes">
<div class="copy-btn"><Button class="mt10 copy-btn" type="primary" @click="insertCopy()">复制</Button></div>
<MonacoEditor :codes="codes" :readOnly="true" />
</div>
</div>
@ -280,7 +280,7 @@ export default {
console.log(this.$refs.xTable.getTableData().tableData);
console.log(this.filtersData((await this.$refs.xTable.getTableData().tableData) || []));
let url, method, params, body, headers;
url = this.interfaceData.url;
url = this.interfaceData.app_name + '/' + this.interfaceData.path;
method = this.interfaceData.method;
params = this.filtersData((await this.$refs.xTable.getTableData().tableData) || []);
body = this.filtersData((await this.$refs.yTable.getTableData().tableData) || []);
@ -294,7 +294,7 @@ export default {
console.log(url, method, params, body, headers);
requestMethod(url, method, params, body, headers)
.then((res) => {
this.codes = res + '';
this.codes = JSON.stringify(res);
})
.catch((err) => {
this.codes = JSON.stringify(err);

View File

@ -142,7 +142,27 @@
v-model.trim="formValidate.describe"
placeholder="请输入"
/>
<span v-else class="text-area">{{ formValidate.describe || '' }}</span>
<span v-else class="text-area">{{ formValidate.describe || '--' }}</span>
</FormItem>
<FormItem label="所属分类:" prop="name" v-if="isEdit">
<el-cascader
v-model="formValidate.cate_id"
size="small"
:options="formValidate.cate_tree"
:props="{ checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name' }"
clearable
></el-cascader>
</FormItem>
<FormItem label="是否公共:" prop="name">
<Switch v-if="isEdit" v-model="formValidate.type" :true-value="1" :false-value="0">
<template #open>
<span>是</span>
</template>
<template #close>
<span>否</span>
</template>
</Switch>
<span v-else class="text-area">{{ formValidate.type ? '是' : '否' }}</span>
</FormItem>
</Col>
</Row>
@ -409,6 +429,7 @@ import {
routeSave,
interfaceEditName,
routeDel,
routeEdit,
routeCateDel,
} from '@/api/systemBackendRouting';
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list';
@ -558,32 +579,39 @@ export default {
await $table.setActiveCell(data, 'name');
},
getInterfaceList(disk_type) {
routeList()
.then((res) => {
res.data[0].expand = false;
this.treeData = new Tree(res.data);
if (res.data.length) {
if (res.data[0].children && res.data[0].children.length) {
this.onClick(res.data[0].children[0]);
}
}
})
.catch((err) => {
this.$Message.error(err);
});
},
onClick(params) {
console.log(params, 'params');
if (params.method) {
this.isEdit = false;
routeDet(params.id)
try {
routeList()
.then((res) => {
this.formValidate = res.data;
if (res.data.length) {
res.data[0].expand = false;
this.treeData = new Tree(res.data);
if (res.data[0].children && res.data[0].children.length) {
this.onClick(res.data[0].children[0]);
}
}
})
.catch((err) => {
console.log(err);
this.$Message.error(err);
});
} catch (error) {
console.log(error);
}
},
onClick(params) {
try {
if (params.method) {
this.isEdit = false;
routeDet(params.id)
.then((res) => {
this.formValidate = res.data;
})
.catch((err) => {
console.log(err);
this.$Message.error(err);
});
}
} catch (error) {
console.log(error);
}
},
async handleSubmit() {
@ -689,9 +717,11 @@ export default {
this.formValidate.id = 0;
this.isEdit = true;
} else if (name == 2) {
this.value = params.name || '';
this.formValidate.cate_id = params ? params.id : 0;
this.nameModal = true;
// this.value = params.name || '';
// this.formValidate.cate_id = params ? params.id : 0;
// this.nameModal = true;
// this.onEdit(params);
this.$modalForm(routeEdit(params.id, this.app_name)).then(() => this.getInterfaceList());
} else if (name == 3) {
this.onDel(params);
} else if (name == 4) {

View File

@ -3,7 +3,8 @@ import Setting from '@/setting';
import { getCookies, removeCookies } from '@/libs/util';
const service = axios.create({
baseURL: Setting.apiBaseURL,
baseURL: 'https://v5.wuht.net',
// baseURL: location.protocol + '//'+ location.hostname,
timeout: 10000, // 请求超时时间
});
axios.defaults.withCredentials = true; // 携带cookie
@ -11,12 +12,12 @@ axios.defaults.withCredentials = true; // 携带cookie
// 请求拦截器
service.interceptors.request.use(
(config) => {
if (config.kefu) {
let baseUrl = Setting.apiBaseURL.replace(/adminapi/, 'kefuapi');
config.baseURL = baseUrl;
} else {
config.baseURL = 'https://v5.wuht.net/outapi' || Setting.apiBaseURL;
}
// if (config.kefu) {
// let baseUrl = Setting.apiBaseURL.replace(/adminapi/, 'kefuapi');
// config.baseURL = baseUrl;
// } else {
// config.baseURL = 'https://v5.wuht.net/outapi' || Setting.apiBaseURL;
// }
if (config.file) {
config.headers['Content-Type'] = 'multipart/form-data';
}