Merge pull request #8389 from 1298191366/master

open api功能优化

jeecg-boot/jeecg-module-system/jeecg-system-start/src/test/java/org/jeecg/modules/openapi/test/SampleOpenApiTest.java

@@ -41,7 +41,17 @@ public class SampleOpenApiTest {
 
             // 解析JSON响应
             JSONObject res = JSON.parseObject(responseBody);
+            //错误日志判断
+            if(res.containsKey("success")){
+                Boolean success = res.getBoolean("success");
+                if(success){
                     System.out.println("[info] 调用成功： " + res.toJSONString());  
+                }else{
+                    System.out.println("[error] 调用失败： " + res.getString("message"));
+                }
+            }else{
+                System.out.println("[error] 调用失败： " + res.getString("message"));
+            }
         }
 
     }

jeecgboot-vue3/src/views/openapi/OpenApi.data.ts

@@ -67,6 +67,11 @@ export const formSchema: FormSchema[] = [
           ];
      },
   },
+  {
+    label: '原始地址',
+    field: 'originUrl',
+    component: 'Input',
+  },
   {
     label: '请求方法',
     field: 'requestMethod',
@@ -127,11 +132,6 @@ export const formSchema: FormSchema[] = [
     component:"Input",
     field: 'body'
   },
-  {
-    label: '原始地址',
-    field: 'originUrl',
-    component: 'Input',
-  },
   {
     label: '删除标识',
     field: 'delFlag',
@@ -252,7 +252,6 @@ export const openApiHeaderJVxeColumns: JVxeColumn[] = [
       title: '备注',
       key: 'note',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },
@@ -297,7 +296,6 @@ export const openApiParamJVxeColumns: JVxeColumn[] = [
       title: '备注',
       key: 'note',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },

jeecgboot-vue3/src/views/openapi/OpenApiAuth.api.ts

@@ -97,7 +97,7 @@ export const saveOrUpdate = (params, isUpdate) => {
  * 全部权限列表接口
  * @param params
  */
-export const getApiList = (params) => defHttp.get({ url: Api.apiList, params });
+export const getApiList = (params) => defHttp.get({ url: Api.apiList, params }, { isTransformResponse: false });
 
 /**
  * 获取已授权项目的接口

jeecgboot-vue3/src/views/openapi/components/AuthForm.vue

@@ -1,60 +1,66 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <a-row :span="24" style="margin-bottom: 10px">
-      <template #detail>
+      <a-col :span="12" v-for="item in apiList" @click="handleSelect(item)">
-        <BasicTable @register="registerTable" :rowSelection="rowSelection"> </BasicTable>
+        <a-card :style="item.checked ? { border: '1px solid #3370ff' } : {}" hoverable class="checkbox-card" :body-style="{ width: '100%', padding: '10px' }">
-      </template>
+          <div class="checkbox-name" style="display: flex; width: 100%; justify-content: space-between">
-    </JFormContainer>
+            <span>接口名称: {{ item.name }}</span>
+            <a-checkbox v-model:checked="item.checked" @click.stop class="quantum-checker" @change="(e) => handleChange(e, item)"> </a-checkbox>
+          </div>
+          <div class="checkbox-name" style="margin-top: 4px">
+            请求方式: <span>{{item.requestMethod}}</span>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="apiList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+    />
   </a-spin>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineExpose, nextTick, defineProps, computed } from 'vue';
+import { computed, defineExpose, defineProps, nextTick, reactive, ref } from "vue";
 import { useMessage } from '/@/hooks/web/useMessage';
-  import { permissionAddFunction, getPermissionList, getApiList } from '../OpenApiAuth.api';
+import { getApiList, getPermissionList, permissionAddFunction } from '../OpenApiAuth.api';
-  import { Form } from 'ant-design-vue';
+import { Form, Pagination } from 'ant-design-vue';
-  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
-  import { BasicTable } from '@/components/Table';
-  import { useListPage } from '@/hooks/system/useListPage';
-  import { columns } from '@/views/openapi/OpenApi.data';
-
-  const queryParam = reactive<any>({});
-  //注册table数据
-  const { tableContext } = useListPage({
-    tableProps: {
-      title: '授权',
-      api: getApiList,
-      columns,
-      canResize: false,
-      useSearchForm: false,
-
-      beforeFetch: async (params) => {
-        return Object.assign(params, queryParam);
-      },
-    },
-  });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource,setSelectedRowKeys }, { rowSelection, selectedRowKeys,selectedRows }] =
-    tableContext;
 
 const props = defineProps({
     formDisabled: { type: Boolean, default: false },
     formData: { type: Object, default: () => ({}) },
     formBpm: { type: Boolean, default: true },
   });
-  const formRef = ref();
   const useForm = Form.useForm;
   const emit = defineEmits(['register', 'ok']);
-  const formData = reactive<Record<string, any>>({
-    apiAuthId: '',
-    apiIdList: [],
-  });
   const { createMessage } = useMessage();
-  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
-  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
   const confirmLoading = ref<boolean>(false);
+  //认证ID
+  const apiAuthId = ref<string>('');
   //表单验证
   const validatorRules = reactive({});
-  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+  //api列表
+  const apiList = ref<any>([]);
+  //选中的值
+  const selectedRowKeys = ref<any>([]);
+  //选中的数据
+  const selectedRows = ref<any>([]);
+  //当前页数
+  const pageNo = ref<number>(1);
+  //每页条数
+  const pageSize = ref<number>(10);
+  //总条数
+  const total = ref<number>(0);
+  //可选择的页数
+  const pageSizeOptions = ref<any>(['10', '20', '30']);
 
   // 表单禁用
   const disabled = computed(() => {
@@ -68,6 +74,25 @@
     return props.formDisabled;
   });
 
+  /**
+   * 加载数据
+   */
+  function reload() {
+    getApiList({ pageNo: pageNo.value, pageSize: pageSize.value, column: 'createTime', order: 'desc'}).then((res)=>{
+      if (res.success) {
+        for (const item of res.result.records) {
+          item.checked = false;
+        }
+        apiList.value = res.result.records;
+        total.value = res.result.total;
+        setChecked();
+      } else {
+        apiList.value = [];
+        total.value = 0;
+      }
+    });
+  }
+  
   /**
    * 新增
    */
@@ -78,28 +103,27 @@
   /**
    * 编辑
    */
-  function edit(record) {
+  async function edit(record) {
-    nextTick(() => {
+    selectedRowKeys.value = [];
-      resetFields();
+    selectedRows.value = [];
-      //赋值
+    pageNo.value = 1;
-      formData.apiAuthId = record.id;
+    pageSize.value = 10;
+    apiAuthId.value = record.id;
+    await nextTick(() => {
       // 获取当前已授权的项目
       getPermissionList({ apiAuthId: record.id }).then((res) => {
         if (res.length > 0) {
-          let list =  res;
+          res.forEach((item) => {
-          let ids = [];
-          list.forEach((item) => {
             if(item.ifCheckBox == "1"){
-              selectedRowKeys.value.push(item.id)
+              selectedRowKeys.value.push(item.id);
-              selectedRows.value.push(item)
+              selectedRows.value.push(item);
-              setSelectedRowKeys(selectedRowKeys.value);
-            }
-            ids.push(item.apiId);
-          });
-          // selectedRowKeys.value = ids;
-          formData.apiIdList = ids;
             }
           });
+          //设置选中
+          setChecked();
+        }
+      });
+      reload();
     });
   }
 
@@ -107,30 +131,15 @@
    * 提交数据
    */
   async function submitForm() {
-    // if(selectedRowKeys.value.length === 0)
-    //   return emit('ok');
-    try {
-      // 触发表单验证
-      await validate();
-    } catch ({ errorFields }) {
-      if (errorFields) {
-        const firstField = errorFields[0];
-        if (firstField) {
-          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
-        }
-      }
-      return Promise.reject(errorFields);
-    }
     confirmLoading.value = true;
     //时间格式化
-    let model = formData;
+    let model = {};
-    // model.apiIdList = selectedRowKeys.value;
     let apiId = ""
     selectedRowKeys.value.forEach((item) => {
       apiId += item +",";
     })
-    model.apiId = apiId;
+    model['apiId'] = apiId;
-    delete model.apiIdList
+    model['apiAuthId'] = apiAuthId.value;
     await permissionAddFunction(model)
       .then((res) => {
         if (res.success) {
@@ -148,6 +157,79 @@
   const cleanData = () => {
     selectedRows.value = []
     selectedRowKeys.value = []
+  };
+
+  /**
+   * 复选框选中事件
+   * @param item
+   */
+  function handleSelect(item) {
+    let id = item.id;
+    const target = apiList.value.find((item) => item.id === id);
+    if (target) {
+      target.checked = !target.checked;
+    }
+    //存放选中的知识库的id
+    if (!selectedRowKeys.value || selectedRowKeys.value.length == 0) {
+      selectedRowKeys.value.push(id);
+      selectedRows.value.push(item);
+      return;
+    }
+    let findIndex = selectedRowKeys.value.findIndex((item) => item === id);
+    if (findIndex === -1) {
+      selectedRowKeys.value.push(id);
+      selectedRows.value.push(item);
+    } else {
+      selectedRowKeys.value.splice(findIndex, 1);
+      selectedRows.value.splice(findIndex, 1);
+    }
+  }
+
+  /**
+   * 复选框选中事件
+   *
+   * @param e
+   * @param item
+   */
+  function handleChange(e, item: any) {
+    if (e.target.checked) {
+      selectedRowKeys.value.push(item.id);
+      selectedRows.value.push(item);
+    } else {
+      let findIndex = selectedRowKeys.value.findIndex((val) => val === item.id);
+      if (findIndex != -1) {
+        selectedRowKeys.value.splice(findIndex, 1);
+        selectedRows.value.splice(findIndex, 1);
+      }
+    }
+  }
+
+  /**
+   * 分页改变事件
+   * @param page
+   * @param current
+   */
+  function handlePageChange(page, current) {
+    pageNo.value = page;
+    pageSize.value = current;
+    reload();
+  }
+
+  /**
+   * 设置选装状态
+   */
+  function setChecked() {
+    if (apiList.value && apiList.value.length > 0){
+      let value = selectedRowKeys.value.join(',');
+      apiList.value = apiList.value.map((item) => {
+        if (value.indexOf(item.id) !== -1) {
+          item.checked = true;
+        } else {
+          item.checked = false;
+        }
+        return item;
+      });
+    }
   }
 
   defineExpose({
@@ -162,4 +244,28 @@
   .antd-modal-form {
     padding: 14px;
   }
+  .list-footer {
+    position: absolute;
+    bottom: -22px;
+    right: 10px;
+    text-align: center;
+  }
+  .checkbox-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+  .checkbox-img {
+    width: 30px;
+    height: 30px;
+  }
+  .checkbox-name {
+    margin-left: 4px;
+    font-size: 13px;
+  }
+  .use-select {
+    color: #646a73;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+  }
 </style>

jeecgboot-vue3/src/views/openapi/components/AuthModal.vue

@@ -1,20 +1,20 @@
 <template>
   <!--  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">-->
   <div style="position: relative;">
-    <a-drawer
+    <a-modal
       v-model:open="authDrawerOpen"
       class="custom-class"
       root-class-name="root-class-name"
       :root-style="{ color: 'blue' }"
+      :body-style="{ padding: '20px' }"
       style="color: red"
-      title="Basic Drawer"
+      :title="title"
-      placement="right"
+      :width="600"
-      :width="800"
       @after-open-change="authDrawerOpenChange"
+      @ok="handleOk"
     >
       <AuthForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></AuthForm>
-      <a-button type="primary" style="position: absolute;bottom: 2%;right: 2%" @click="handleOk">确定</a-button>
+    </a-modal>
-    </a-drawer>
   </div>
   <!--  </j-modal>-->
 </template>

jeecgboot-vue3/src/views/openapi/components/OpenApiModal.vue

@@ -1,39 +1,39 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="'80%'" @ok="handleSubmit">
+  <BasicModal :bodyStyle="{ padding: '20px' }" v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" width="80%" @ok="handleSubmit">
     <a-row :gutter="24">
-      <a-col :span="12">
+      <a-col :span="10">
         <BasicForm @register="registerForm" ref="formRef" name="OpenApiForm" />
       </a-col>
-      <a-col :span="12">
+      <a-col :span="14">
         <a-row :gutter="24">
-          <a-col :span="24">
+          <a-col :span="24" style="margin-top: -0.6em">
             <JVxeTable
               keep-source
-              resizable
               ref="openApiHeader"
               :loading="openApiHeaderTable.loading"
               :columns="openApiHeaderTable.columns"
               :dataSource="openApiHeaderTable.dataSource"
-              :height="340"
+              :height="240"
               :disabled="formDisabled"
               :rowNumber="true"
               :rowSelection="true"
               :toolbar="true"
+              size="mini"
             />
           </a-col>
           <a-col :span="24">
             <JVxeTable
               keep-source
-              resizable
               ref="openApiParam"
               :loading="openApiParamTable.loading"
               :columns="openApiParamTable.columns"
               :dataSource="openApiParamTable.dataSource"
-              :height="340"
+              :height="240"
               :disabled="formDisabled"
               :rowNumber="true"
               :rowSelection="true"
               :toolbar="true"
+              size="mini"
             />
           </a-col>
         </a-row>