fix: api配置、应用管理

src/api/system/apiPage.ts

@@ -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);

src/views/system/Apply/Save/components/EditForm.vue

@@ -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%;

src/views/system/Apply/index.vue

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

src/views/system/Platforms/Api/components/ApiDoes.vue

@@ -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') {

src/views/system/Platforms/Api/components/ApiTest.vue

@@ -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({});
+let schema: any = {};
-const editorRef = ref()
+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 =
+    if (!refStr.value) return ''; // schema不是Java中的类的话则不进行解析，直接结束
-        props.selectApi.requestBody.content['application/json'].schema;
+    const schemaName = refStr.value?.split('/').pop() as string;
-    const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
     const type = schema.type || '';
     const tableData = findData(schemaName);
     if (type === 'array') {

src/views/system/Platforms/Api/components/ChooseApi.vue

@@ -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)) {
+        if (props.selectedRowKeys.includes(targetId)) {
-            newKeys = newKeys.filter((id) => id !== record.id);
+            newKeys = newKeys.filter((id) => id !== targetId);
-        } else newKeys.push(record.id);
+        } 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) => {

src/views/system/Platforms/Api/index.vue

@@ -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 activeKey = ref<'does' | 'test'>('does'); 
-const schemas = ref({});
+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[]>([]); // 右侧默认勾选的项
+const selectedKeys = ref<string[]>([]); // 右侧勾选的项
-let selectSourceKeys = ref<string[]>([]);
+const selectSourceKeys = ref<string[]>([]); // 右侧原本勾选的项
+const changedApis = ref({}); // 勾选发生变化的项，以对应的id作为key
+
 init();
 
 function init() {
-    // 右侧默认选中初始化
+    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[])];
-        });
-    } else if (props.mode === 'api') {
-        apiOperations_api().then((resp) => {
-            selectedKeys.value = resp.result as string[];
-            selectSourceKeys.value = [...(resp.result as string[])];
-        });
-    }
     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>

src/views/system/Platforms/Api/typing.d.ts

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