Merge pull request #8389 from 1298191366/master

open api功能优化
2025-06-06 15:22:11 +08:00 · 2025-06-06 15:22:11 +08:00 · 7e325f68ca
parent f74da23d06 e279915ba2
commit 7e325f68ca
6 changed files with 209 additions and 95 deletions
--- a/jeecg-boot/jeecg-module-system/jeecg-system-start/src/test/java/org/jeecg/modules/openapi/test/SampleOpenApiTest.java
+++ b/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);
-            System.out.println("[info] 调用成功： " + res.toJSONString());
+            //错误日志判断
+            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"));
+            }
        }

    }
--- a/jeecgboot-vue3/src/views/openapi/OpenApi.data.ts
+++ b/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:'',
    },
--- a/jeecgboot-vue3/src/views/openapi/OpenApiAuth.api.ts
+++ b/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 });

 /**
 * 获取已授权项目的接口
--- a/jeecgboot-vue3/src/views/openapi/components/AuthForm.vue
+++ b/jeecgboot-vue3/src/views/openapi/components/AuthForm.vue
@ -1,60 +1,66 @@
 <template>
  <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
-      <template #detail>
-        <BasicTable @register="registerTable" :rowSelection="rowSelection"> </BasicTable>
-      </template>
-    </JFormContainer>
+    <a-row :span="24" style="margin-bottom: 10px">
+      <a-col :span="12" v-for="item in apiList" @click="handleSelect(item)">
+        <a-card :style="item.checked ? { border: '1px solid #3370ff' } : {}" hoverable class="checkbox-card" :body-style="{ width: '100%', padding: '10px' }">
+          <div class="checkbox-name" style="display: flex; width: 100%; justify-content: space-between">
+            <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 { useMessage } from '/@/hooks/web/useMessage';
-  import { permissionAddFunction, getPermissionList, getApiList } from '../OpenApiAuth.api';
-  import { Form } 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';
+import { computed, defineExpose, defineProps, nextTick, reactive, ref } from "vue";
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getApiList, getPermissionList, permissionAddFunction } from '../OpenApiAuth.api';
+import { Form, Pagination } from 'ant-design-vue';

-  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({
+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) {
-    nextTick(() => {
-      resetFields();
-      //赋值
-      formData.apiAuthId = record.id;
+  async function edit(record) {
+    selectedRowKeys.value = [];
+    selectedRows.value = [];
+    pageNo.value = 1;
+    pageSize.value = 10;
+    apiAuthId.value = record.id;
+    await nextTick(() => {
      // 获取当前已授权的项目
      getPermissionList({ apiAuthId: record.id }).then((res) => {
        if (res.length > 0) {
-          let list =  res;
-          let ids = [];
-          list.forEach((item) => {
+          res.forEach((item) => {
            if(item.ifCheckBox == "1"){
-              selectedRowKeys.value.push(item.id)
-              selectedRows.value.push(item)
-              setSelectedRowKeys(selectedRowKeys.value);
+              selectedRowKeys.value.push(item.id);
+              selectedRows.value.push(item);
            }
-            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;
-    // model.apiIdList = selectedRowKeys.value;
+    let model = {};
    let apiId = ""
    selectedRowKeys.value.forEach((item) => {
      apiId += item +",";
    })
-    model.apiId = apiId;
-    delete model.apiIdList
+    model['apiId'] = apiId;
+    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>
--- a/jeecgboot-vue3/src/views/openapi/components/AuthModal.vue
+++ b/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"
-      placement="right"
-      :width="800"
+      :title="title"
+      :width="600"
      @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-drawer>
+    </a-modal>
  </div>
  <!--  </j-modal>-->
 </template>
--- a/jeecgboot-vue3/src/views/openapi/components/OpenApiModal.vue
+++ b/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>