0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: api配置、应用管理

This commit is contained in:
easy 2023-03-14 16:04:23 +08:00
parent 0103cba6f7
commit 557c41afb6
8 changed files with 124 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/system/apiPage.ts
View File

@ -23,4 +23,13 @@ export const addOperations_api = (data:object) => server.patch(`/application/ope
/**
* 删除可授权的接口ID
*/
export const delOperations_api = (data:object) => server.remove(`/application/operations/_batch`,{},{data});
export const delOperations_api = (data:object) => server.remove(`/application/operations/_batch`,{},{data});
/**
* 赋权-选中/取消选中api
* @param id
* @param type
* @param data
* @returns
*/
export const updateOperations_api = (code:string,type:'_add'| '_delete', data: object) => server.post(`/application/${code}/grant/${type}`, data);

15
src/views/system/Apply/Save/components/EditForm.vue
View File

@ -1738,7 +1738,6 @@ function changeBackUpload(info: UploadChangeParam<UploadFile<any>>) {
if (info.file.status === 'uploading') {
form.uploadLoading = true;
} else if (info.file.status === 'done') {
console.log(info);
info.file.url = info.file.response?.result;
form.uploadLoading = false;
@ -1749,9 +1748,6 @@ function changeBackUpload(info: UploadChangeParam<UploadFile<any>>) {
message.error('logo上传失败，请稍后再试');
}
}
function test(...args: any[]) {
console.log('test:', args);
}
function clearNullProp(obj: object) {
if (typeof obj !== 'object') return;
for (const prop in obj) {
@ -1799,6 +1795,17 @@ function clearNullProp(obj: object) {
padding: 0 15px;
box-sizing: content-box;
margin-right: 20px;
color: #000;
&.ant-radio-button-wrapper-disabled {
opacity: .5;
}
&.ant-radio-button-wrapper-checked {
background-color: #fff;
border: 1px solid #1d39c4;
opacity: 1;
}
> :last-child {
width: 100%;

2
src/views/system/Apply/index.vue
View File

@ -271,6 +271,8 @@ const columns = [
dataIndex: 'action',
key: 'action',
scopedSlots: true,
width:'200px',
fixed:'right'
},
];
const queryParams = ref({});

4
src/views/system/Platforms/Api/components/ApiDoes.vue
View File

@ -148,7 +148,9 @@ const requestCard = reactive<tableCardType>({
return (requestCard.tableData = props.selectApi.parameters);
const schema =
props.selectApi.requestBody.content['application/json'].schema;
const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
const _ref = schema.$ref || schema?.items?.$ref;
if(!_ref) return; // schema不是Java中的类的话则不进行解析，直接结束
const schemaName = _ref?.split('/').pop();
const type = schema.type || '';
const tableData = findData(schemaName);
if (type === 'array') {

26
src/views/system/Platforms/Api/components/ApiTest.vue
View File

@ -95,6 +95,7 @@
</j-button>
</div>
<MonacoEditor
v-if="refStr"
v-model:modelValue="requestBody.code"
style="height: 300px; width: 100%"
theme="vs"
@ -125,6 +126,8 @@ const props = defineProps<{
selectApi: apiDetailsType;
schemas: any;
}>();
const responsesContent = ref({});
const editorRef = ref();
const formRef = ref<FormInstance>();
const requestBody = reactive({
tableColumns: [
@ -178,8 +181,16 @@ const paramsTable = computed(() => {
return requestBody.params.paramsTable.slice(startIndex, endIndex);
});
const responsesContent = ref({});
const editorRef = ref()
let schema: any = {};
const refStr = ref('');
const init = () => {
if (!props.selectApi.requestBody) return;
schema = props.selectApi.requestBody.content['application/json'].schema;
refStr.value = schema.$ref || schema?.items?.$ref;
};
init();
const send = () => {
if (paramsTable.value.length)
formRef.value &&
@ -210,10 +221,10 @@ const _send = () => {
...urlParams,
};
server[methodObj[methodName]](url, params).then((resp: any) => {
if (Object.keys(params).length === 0){
// 如果用户没填写参数且有body的情况下，给用户展示请求示例
if (Object.keys(params).length === 0 && refStr.value) {
requestBody.code = JSON.stringify(getDefaultParams());
editorRef.value?.editorFormat()
editorRef.value?.editorFormat();
}
responsesContent.value = resp;
});
@ -224,9 +235,8 @@ const _send = () => {
*/
function getDefaultParams() {
if (!props.selectApi.requestBody) return {};
const schema =
props.selectApi.requestBody.content['application/json'].schema;
const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
if (!refStr.value) return ''; // schema不是Java中的类的话则不进行解析，直接结束
const schemaName = refStr.value?.split('/').pop() as string;
const type = schema.type || '';
const tableData = findData(schemaName);
if (type === 'array') {

58
src/views/system/Platforms/Api/components/ChooseApi.vue
View File

@ -11,7 +11,7 @@
<template #url="slotProps">
<span
style="color: #1d39c4; cursor: pointer"
@click="jump(slotProps)"
@click="emits('update:clickApi', slotProps)"
>{{ slotProps.url }}</span
>
</template>
@ -25,18 +25,28 @@
</template>
<script setup lang="ts">
import { addOperations_api, delOperations_api } from '@/api/system/apiPage';
import {
addOperations_api,
delOperations_api,
updateOperations_api,
} from '@/api/system/apiPage';
import { message } from 'ant-design-vue';
import { modeType } from '../typing';
const emits = defineEmits(['update:clickApi', 'update:selectedRowKeys']);
const emits = defineEmits([
'refresh',
'update:clickApi',
'update:selectedRowKeys',
'update:changedApis',
]);
const props = defineProps<{
tableData: any[];
clickApi: any;
selectedRowKeys: string[];
sourceKeys: string[];
mode: modeType;
changedApis: any; // 产生变化的api项
}>();
const code = useRoute().query.code as string;
const columns = [
{
title: 'API',
@ -52,13 +62,20 @@ const columns = [
];
const rowSelection = {
onSelect: (record: any) => {
const targetId = record.id;
let newKeys = [...props.selectedRowKeys];
if (props.selectedRowKeys.includes(record.id)) {
newKeys = newKeys.filter((id) => id !== record.id);
} else newKeys.push(record.id);
if (props.selectedRowKeys.includes(targetId)) {
newKeys = newKeys.filter((id) => id !== targetId);
} else newKeys.push(targetId);
emits('update:selectedRowKeys', newKeys);
if (props.mode === 'appManger') {
emits('update:changedApis', {
...props.changedApis,
[record.id]: record,
});
}
},
selectedRowKeys: ref<string[]>([]),
};
@ -73,13 +90,30 @@ const save = () => {
removeKeys.length &&
delOperations_api(removeKeys)
.finally(() => addOperations_api(addKeys))
.then(() => message.success('操作成功'));
.then(() => {
message.success('操作成功');
emits('refresh')
});
} else if (props.mode === 'appManger') {
const removeItems = removeKeys.map((key) => ({
id: key,
permissions: props.changedApis[key]?.security,
}));
const addItems = addKeys.map((key) => ({
id: key,
permissions: props.changedApis[key]?.security,
}));
Promise.all([
updateOperations_api(code, '_delete', { operations: removeItems }),
updateOperations_api(code, '_add', { operations: addItems }),
]).then((resps) => {
if (resps[0].status === 200 && resps[1].status === 200) {
message.success('操作成功');
emits('refresh');
}
});
}
};
const jump = (row: any) => {
emits('update:clickApi', row);
};
watch(
() => props.selectedRowKeys,
(n) => {

49
src/views/system/Platforms/Api/index.vue
View File

@ -16,7 +16,6 @@
@select="treeSelect"
:mode="props.mode"
:has-home="props.hasHome"
:filter-array="treeFilter"
:code="props.code"
/>
</j-col>
@ -26,10 +25,12 @@
<ChooseApi
v-show="!selectedApi.url"
v-model:click-api="selectedApi"
:table-data="tableData"
v-model:selectedRowKeys="selectedKeys"
v-model:changedApis="changedApis"
:table-data="tableData"
:source-keys="selectSourceKeys"
:mode="props.mode"
@refresh="getSelectKeys"
/>
<div
@ -82,9 +83,8 @@ const props = defineProps<{
hasHome?: boolean;
code?: string;
}>();
const showHome = ref<boolean>(Boolean(props.hasHome));
const showHome = ref<boolean>(Boolean(props.hasHome)); // 是否展示home页面
const tableData = ref([]);
const treeFilter = ref([]);
const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
if (node.key === 'home') return (showHome.value = true);
schemas.value = nodeSchemas;
@ -109,8 +109,8 @@ const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
tableData.value = table;
};
const activeKey = ref<'does' | 'test'>('does');
const schemas = ref({});
const activeKey = ref<'does' | 'test'>('does');
const schemas = ref({}); // 对应一级api相关的类
const initSelectedApi: apiDetailsType = {
url: '',
method: '',
@ -121,23 +121,14 @@ const initSelectedApi: apiDetailsType = {
};
const selectedApi = ref<apiDetailsType>(initSelectedApi);
const selectedKeys = ref<string[]>([]); // 右侧默认勾选的项
let selectSourceKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]); // 右侧勾选的项
const selectSourceKeys = ref<string[]>([]); // 右侧原本勾选的项
const changedApis = ref({}); // 勾选发生变化的项，以对应的id作为key
init();
function init() {
// 右侧默认选中初始化
if (props.mode === 'appManger') {
getApiGranted_api(props.code as string).then((resp) => {
selectedKeys.value = resp.result as string[];
selectSourceKeys.value = [...(resp.result as string[])];
});
} else if (props.mode === 'api') {
apiOperations_api().then((resp) => {
selectedKeys.value = resp.result as string[];
selectSourceKeys.value = [...(resp.result as string[])];
});
}
getSelectKeys();
watch(tableData, () => {
activeKey.value = 'does';
selectedApi.value = initSelectedApi;
@ -147,6 +138,24 @@ function init() {
() => (activeKey.value = 'does'),
);
}
/**
* 右侧api选中项
*/
function getSelectKeys() {
if (props.mode === 'appManger') {
getApiGranted_api(props.code as string).then((resp) => {
selectedKeys.value = resp.result as string[];
selectSourceKeys.value = [...(resp.result as string[])];
changedApis.value = {};
});
} else if (props.mode === 'api') {
apiOperations_api().then((resp) => {
selectedKeys.value = resp.result as string[];
selectSourceKeys.value = [...(resp.result as string[])];
});
}
}
</script>
<style lang="less" scoped>

6
src/views/system/Platforms/Api/typing.d.ts vendored
View File

@ -24,5 +24,9 @@ export type apiDetailsType = {
responses:object;
description?:string;
}
/**
* api: api配置
* appManger： 应用管理-赋权
* home：应用管理-查看菜单，第三方首页
*/
export type modeType = 'api'| 'appManger' | 'home'