测试

src/api/user.ts

@@ -56,6 +56,7 @@ export const getLogin = (data?: object) => {
 };
 /** 获取当前用户树形菜单 */
 export const getUserMenu = () => {
+  console.log(UrlList);
   return http.Request({
     url: UrlList.kxsSys.menugetUserMenu.url,
     method: UrlList.kxsSys.menugetUserMenu.method,

src/utils/getUrl/getUrl.js

@@ -64,7 +64,7 @@ const getURL = () => {
 const getAllPlate = () => {
   return new Promise(async (resolve, reject) => {
     postRequest(
-      "http://test.skbconfig.kexiaoshuang.com/api/apiinfo/groupsforadmin",
+      "http://localhost:5296/noauth/apiinfo/groupsforadmin",
       {
         key: "kxs#2024"
       }
@@ -99,7 +99,7 @@ const getGroupUrl = async (checkPlate = []) => {
       );
     }, 5000);
     postRequest(
-      "http://test.skbconfig.kexiaoshuang.com/api/apiinfo/listforadmin",
+      "http://localhost:5296/noauth/apiinfo/listforadmin",
       parameters
     )
       .then(async res => {

src/views/menuitem/ApiInfo/components/add/index.vue

@@ -5,21 +5,18 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject, ref } from "vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { http } from "@/utils/http";
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
 // 获取当前板块接口列表
-import Upload from "@iconify-icons/ri/upload-2-fill";
-import Close from "@iconify-icons/ri/close-fill";
-// 获取URLLIST
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+  groupIdQuery();
 
+})
+// 组件传参对象
 const props = defineProps<{
-  submit: {
-    type: Function;
-    default: () => {};
-  };
+  submit: Function;
   addVisible: {
     type: Boolean;
     default: false;
@@ -40,22 +37,39 @@ let UpdateForm = ref({
   apiMethod: "", //接口请求方式
 
 });
+// 表单实例
+const ruleFormRef = ref()
+
+// 传参选项数据
 // 分组选项数据
-const groupIdOptionList = ref([])
+const groupIdOptionList = ref([]);
 
 // 选项卡参数(默认值为列表某项的id)
 const activeId = ref('1')
 // 提交函数
-const submit = async () => {
-  const UrlList = await getGroupUrl(['kxsConfigServer']);
-  const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoadd.method, url: UrlList.kxsConfigServer.apiInfoadd.url, params: UpdateForm.value });
-  if (status === 1) {
-    ElMessage({
-      message: "新增成功",
-      type: "success"
-    });
-    UpdateForm.value = {
-      groupId: "", //分组
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsConfigServer.apiInfoadd.method,
+        url: UrlList.kxsConfigServer.apiInfoadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                groupId: "", //分组
       apiName: "", //接口名称
       apiKey: "", //接口关键字
       apiHost: "", //接口主机头
@@ -63,30 +77,61 @@ const submit = async () => {
       apiRouter: "", //接口路由
       apiMethod: "", //接口请求方式
 
-    };
-    closeVisible();
-  } else {
-    ElMessageBox.alert(msg, "提示", {
-      confirmButtonText: "关闭",
-      type: "warning"
-    });
-  };
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
 };
+
 //获取分组数据
-const apiInfoquery = async () => {
-  //通过ID获取表格数据
-  const UrlList = await getGroupUrl(['kxsConfigServer']);
-  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: {} });
+const groupIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
   if (status === 1) {
     groupIdOptionList.value = data.records;
   }
 };
-apiInfoquery();
-const closeFn: any = inject('closeAddVisible');
+
+
+
+// 表单校验规则
+const rules = reactive({
+  apiName: [
+    { required: true, message: '请输入接口名称', trigger: 'blur' },
+  ],
+  apiKey: [
+    { required: true, message: '请输入接口关键字', trigger: 'blur' },
+  ],
+  apiHost: [
+    { required: true, message: '请输入接口主机头', trigger: 'blur' },
+  ],
+  apiPort: [
+    { required: true, message: '请输入接口端口号', trigger: 'blur' },
+  ],
+  apiRouter: [
+    { required: true, message: '请输入接口路由', trigger: 'blur' },
+  ],
+
+})
 // 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
 const closeVisible = () => {
+  // 清空表单项;
   UpdateForm.value = {
-    groupId: "", //分组
+        groupId: "", //分组
     apiName: "", //接口名称
     apiKey: "", //接口关键字
     apiHost: "", //接口主机头
@@ -101,8 +146,8 @@ const closeVisible = () => {
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
-    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
       el-form-item(label="分组", prop="groupId")
         el-select(
           v-model="UpdateForm.groupId",
@@ -132,14 +177,12 @@ const closeVisible = () => {
 
     el-button(
       :icon="useRenderIcon(Close)",
-      :loading="loading",
-      @click="closeVisible()"
+      @click="closeVisible"
     ) 关闭
     el-button(
       type="primary",
       :icon="useRenderIcon(Upload)",
-      :loading="loading",
-      @click="submit"
+      @click="submit(ruleFormRef)"
     ) 确认提交
 </template>
 

src/views/menuitem/ApiInfo/components/setRouter/index.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  apiHost: "", //接口主机头
+  apiPort: "", //接口端口号
+  apiRouter: "", //接口路由
+  id: "", //ID
+
+});
+
+// 表单实例
+const ruleFormRef = ref()
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsConfigServer.apiInfosetRouter.method,
+        url: UrlList.kxsConfigServer.apiInfosetRouter.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                apiHost: "", //接口主机头
+      apiPort: "", //接口端口号
+      apiRouter: "", //接口路由
+      id: "", //ID
+
+        };
+        // 关闭修改弹窗;
+        closeSetRouterVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  apiHost: [
+    { required: true, message: '请输入接口主机头', trigger: 'blur' },
+  ],
+  apiPort: [
+    { required: true, message: '请输入接口端口号', trigger: 'blur' },
+  ],
+  apiRouter: [
+    { required: true, message: '请输入接口路由', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditSetRouterVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoquery.method, url: UrlList.kxsConfigServer.apiInfoquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeSetRouterVisible = () => {
+  UpdateForm.value = {
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+    id: "", //ID
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeSetRouterVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label='接口主机头' prop="apiHost")
+        el-input(v-model='UpdateForm.apiHost' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口主机头")
+      el-form-item(label='接口端口号' prop="apiPort")
+        el-input-number(v-model='UpdateForm.apiPort' :min="1" :max="1000"
+          placeholder="请输入接口端口号")
+      el-form-item(label='接口路由' prop="apiRouter")
+        el-input(v-model='UpdateForm.apiRouter' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口路由")
+      el-form-item(label='ID' prop="id")
+        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
+          placeholder="请输入ID")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeSetRouterVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      @click="submit(ruleFormRef)"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/menuitem/ApiInfo/components/setVersion/index.vue

@@ -0,0 +1,177 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  id: "", //ID
+  version: "", //版本号
+
+});
+
+// 表单实例
+const ruleFormRef = ref()
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsConfigServer.apiInfosetVersion.method,
+        url: UrlList.kxsConfigServer.apiInfosetVersion.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                id: "", //ID
+      version: "", //版本号
+
+        };
+        // 关闭修改弹窗;
+        closeSetVersionVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditSetVersionVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoquery.method, url: UrlList.kxsConfigServer.apiInfoquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeSetVersionVisible = () => {
+  UpdateForm.value = {
+    id: "", //ID
+    version: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeSetVersionVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label='ID' prop="id")
+        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
+          placeholder="请输入ID")
+      el-form-item(label='版本号' prop="version")
+        el-input-number(v-model='UpdateForm.version' :min="1" :max="1000"
+          placeholder="请输入版本号")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeSetVersionVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      @click="submit(ruleFormRef)"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/menuitem/ApiInfo/components/update/index.vue

@@ -5,15 +5,15 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject, ref } from "vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ElMessage, ElMessageBox } from "element-plus";
-import Upload from "@iconify-icons/ri/upload-2-fill"
-import Close from "@iconify-icons/ri/close-fill"
-import { http } from "@/utils/http";
-// 获取URLLIST
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+  groupIdQuery();
 
+})
 const props = defineProps<{
   editVisible: {
     type: Boolean;
@@ -24,12 +24,13 @@ const props = defineProps<{
     default: 50;
   };
   formData: {
-    type: Object;
+    id: any;
+    type: any;
     default: {};
   };
 }>();
 // 表单数据
-let UpdateForm: any = ref({
+const UpdateForm: any = ref({
   groupId: "", //分组
   apiName: "", //接口名称
   apiKey: "", //接口关键字
@@ -41,21 +42,36 @@ let UpdateForm: any = ref({
 
 });
 // 分组选项数据
-let groupIdOptionList = []
+const groupIdOptionList = ref([]);
+
+// 表单实例
+const ruleFormRef = ref()
 
 // 选项卡参数(默认值为列表某项的id)
 const activeId = ref('1')
 // 提交函数
-const submit = async () => {
-  const UrlList = await getGroupUrl(['kxsConfigServer']);
-  const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoupdate.method, url: UrlList.kxsConfigServer.apiInfoupdate.url, params: UpdateForm.value });
-  if (status === 1) {
-    ElMessage({
-      message: "修改成功",
-      type: "success"
-    });
-    UpdateForm.value = {
-      groupId: "", //分组
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsConfigServer.apiInfoupdate.method,
+        url: UrlList.kxsConfigServer.apiInfoupdate.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                groupId: "", //分组
       apiName: "", //接口名称
       apiKey: "", //接口关键字
       apiHost: "", //接口主机头
@@ -64,41 +80,76 @@ const submit = async () => {
       apiMethod: "", //接口请求方式
       id: "", //ID
 
-    };
-    closeVisible();
-  } else {
-    ElMessageBox.alert(msg, "提示", {
-      confirmButtonText: "关闭",
-      type: "warning"
-    });
-  };
+        };
+        // 关闭修改弹窗;
+        closeUpdateVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+//获取分组数据
+const groupIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+  if (status === 1) {
+    groupIdOptionList.value = data.records;
+  }
 };
+
+
+
+// 表单校验规则
+const rules = reactive({
+  apiName: [
+    { required: true, message: '请输入接口名称', trigger: 'blur' },
+  ],
+  apiKey: [
+    { required: true, message: '请输入接口关键字', trigger: 'blur' },
+  ],
+  apiHost: [
+    { required: true, message: '请输入接口主机头', trigger: 'blur' },
+  ],
+  apiPort: [
+    { required: true, message: '请输入接口端口号', trigger: 'blur' },
+  ],
+  apiRouter: [
+    { required: true, message: '请输入接口路由', trigger: 'blur' },
+  ],
+
+})
 // 关闭弹窗回调函数
 const closeFn: any = inject('closeEditUpdateVisible');
 const openVisible = async () => {
   //通过ID获取表格数据
-  const UrlList = await getGroupUrl(['kxsConfigServer']);
-  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoquery.method, url: UrlList.kxsConfigServer.apiInfoquery.url, params: props.formData });
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoquery.method, url: UrlList.kxsConfigServer.apiInfoquery.url, params: { id: props.formData.id }});
   if (status === 1) {
     UpdateForm.value = data;
+
   }
 };
-//获取分组数据
-const apiInfoquery = async () => {
-  //通过ID获取表格数据
-  const UrlList = await getGroupUrl(['kxsConfigServer']);
-  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: {} });
-  if (status === 1) {
-    groupIdOptionList = data.records;
-  }
-};
-apiInfoquery();
 // 关闭弹窗回调函数
-const closeVisible = () => {
+const closeUpdateVisible = () => {
   UpdateForm.value = {
-    groupName: "", //名称
-    groupRemark: "", //说明
-    groupVersion: "", //版本号
+    groupId: "", //分组
+    apiName: "", //接口名称
+    apiKey: "", //接口关键字
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+    apiMethod: "", //接口请求方式
+    id: "", //ID
 
   };
   closeFn();
@@ -107,8 +158,8 @@ const closeVisible = () => {
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
-    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeUpdateVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
       el-form-item(label="分组", prop="groupId")
         el-select(
           v-model="UpdateForm.groupId",
@@ -142,13 +193,12 @@ const closeVisible = () => {
     el-button(
       :icon="useRenderIcon(Close)",
       :loading="loading",
-      @click="closeVisible()"
+      @click="closeUpdateVisible()"
     ) 关闭
     el-button(
       type="primary",
       :icon="useRenderIcon(Upload)",
-      :loading="loading",
-      @click="submit"
+      @click="submit(ruleFormRef)"
     ) 确认提交
 </template>
 

src/views/menuitem/ApiInfo/hook.tsx

@@ -1,17 +1,19 @@
-import { getRoleList } from "@/api/system";
-import { type PaginationProps } from "@pureadmin/table";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { reactive, ref, computed, onMounted } from "vue";
-// 获取URLLIST
-import { getGroupUrl } from "@/utils/getUrl/getUrl"
-import { http } from "@/utils/http";
-// 获取当前板块接口列表
-const UrlList = await getGroupUrl(['kxsConfigServer']);
-
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
 export function useApiInfo() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+    groupIdQuery();
+
+  });
   let form = reactive({
-    groupId: 0, //分组
-    apiName: "", //接口名称
+  groupId:"", //分组
+  apiName:"", //接口名称
 
   });
   const dataList = ref([]);
@@ -36,18 +38,18 @@ export function useApiInfo() {
       width: 70,
       hide: ({ checkList }) => !checkList.includes("序号列")
     },
-    {
-      label: "分组api接口分组",
+        {
+      label: "分组名称",
       prop: "apiGroupInfo.groupName",
       minWidth: 200
     },
     {
-      label: "分组api接口分组",
+      label: "分组说明",
       prop: "apiGroupInfo.groupRemark",
       minWidth: 200
     },
     {
-      label: "分组api接口分组",
+      label: "分组版本号",
       prop: "apiGroupInfo.groupVersion",
       minWidth: 200
     },
@@ -60,59 +62,77 @@ export function useApiInfo() {
     {
       label: "操作",
       fixed: "right",
-      width: 200,
+      width: 120,
       slot: "operation"
     }
   ];
   // 当前页数量切换
   function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-    onSearch()
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
   }
   // 当前页码切换
   function handleCurrentChange(val: number) {
     console.log(`current page: ${val}`);
-    onSearch()
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
   }
   // 选择表格项
   function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-    onSearch()
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
   }
   // 搜索列表
-  async function onSearch(type = 'search') {
-    if (type === 'all') {
-      form.groupId = 0;
-      form.apiName = "";
-
-    }
-    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
-    //   return ElMessage({
-    //     message: "请输入查询条件",
-    //     type: "error"
-    //   });
-    // };
-    loading.value = true;
-    const { status, msg, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfolist.method, url: UrlList.kxsConfigServer.apiInfolist.url, params: { ...form, pageSize: pagination.pageSize, pageNum: pagination.currentPage } });
+  async function onSearch(formEl) {
+    // 表单校验拦截
+    if (!formEl) return
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        //表单校验成功回调
+        console.log('submit!')
+        // 状态调整为加载中
+        loading.value = true;
+        // 调用接口（需动态生成接口）
+        const { status, msg, data }: any = await http.Request({
+          method: UrlList.kxsConfigServer.apiInfolist.method,
+          url: UrlList.kxsConfigServer.apiInfolist.url,
+          params: {
+            ...form,
+            pageSize: pagination.pageSize,
+            pageNum: pagination.currentPage
+          }
+        });
+        dataList.value = data.records;
+        pagination.total = data.total;
+        setTimeout(() => {
+          loading.value = false;
+        }, 500);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整信息",
+          type: "error"
+        });
+      }
+    })
+  }
+    // 分组选项数据
+    const groupIdOptionList = ref([]);
+  //获取分组数据
+  async function groupIdQuery() {
+    const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
     if (status === 1) {
-      dataList.value = data.records;
-      pagination.total = data.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 500);
-    } else {
-      ElMessageBox.alert(msg, "提示", {
-        confirmButtonText: "关闭",
-        type: "warning"
-      });
+      groupIdOptionList.value = data.records;
     }
   }
-  onMounted(() => {
-    onSearch();
-    apiInfoquery();
-  });
 
-  // 删除
+
+
+    // 删除
   function handleDelete(row) {
     ElMessageBox.confirm(
       `是否删除该api接口? `,
@@ -123,28 +143,36 @@ export function useApiInfo() {
         type: "warning"
       }
     ).then(async () => {
-      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfodelete.method, url: UrlList.kxsConfigServer.apiInfodelete.url, params: row.id });
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfodelete.method, url: UrlList.kxsConfigServer.apiInfodelete.url, params: String(row.id) });
       if (status === 1) {
         ElMessage({
           message: "删除成功",
           type: "success"
         });
-        onSearch();
+        onSearch(ruleFormRef);
       } else {
         ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
       };
     })
   }
 
-  // 新增
+    // 新增
   const addVisible = ref(false);
   function handleAdd() {
     addVisible.value = true;
   };
 
+    // 设置版本号
+  const editSetVersionVisible = ref(false);
+  const editSetVersionFormData = ref({});
+  function handleSetVersion(row) {
+    editSetVersionVisible.value = true;
+    // 表格数据赋值
+    editSetVersionFormData.value = row;
+  };
   // 修改
   const editUpdateVisible = ref(false);
   const editUpdateFormData = ref({});
@@ -153,18 +181,13 @@ export function useApiInfo() {
     // 表格数据赋值
     editUpdateFormData.value = row;
   };
-
-  // 分组选项数据
-  const groupIdOptionList = ref([])
-
-  //获取分组数据
-  async function apiInfoquery() {
-    //通过ID获取表格数据
-    const UrlList = await getGroupUrl(['kxsConfigServer']);
-    const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: {} });
-    if (status === 1) {
-      groupIdOptionList.value = data.records;
-    }
+  // 设置请求地址
+  const editSetRouterVisible = ref(false);
+  const editSetRouterFormData = ref({});
+  function handleSetRouter(row) {
+    editSetRouterVisible.value = true;
+    // 表格数据赋值
+    editSetRouterFormData.value = row;
   };
 
   return {
@@ -177,13 +200,22 @@ export function useApiInfo() {
     handleSizeChange,
     handleCurrentChange,
     handleSelectionChange,
+    ruleFormRef,
+    groupIdQuery,
+    groupIdOptionList,
+
     handleAdd,
     addVisible,
+    handleSetVersion,
+    editSetVersionVisible,
+    editSetVersionFormData,
+    handleDelete,
     handleUpdate,
     editUpdateVisible,
     editUpdateFormData,
-    handleDelete,
-    groupIdOptionList
+    handleSetRouter,
+    editSetRouterVisible,
+    editSetRouterFormData,
 
   };
 }

src/views/menuitem/ApiInfo/index.vue

@@ -5,21 +5,19 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { provide, ref } from "vue";
+import { provide } from "vue";
 import { useApiInfo } from "./hook";
 import { http } from "@/utils/http";
-import { hasAuth } from "@/router/utils";
-import { PureTableBar } from "@/components/RePureTableBar";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
 import Add from "./components/add/index.vue";
+import EditSetVersion from "./components/setVersion/index.vue";
 import EditUpdate from "./components/update/index.vue";
+import EditSetRouter from "./components/setRouter/index.vue";
 import Search from "@iconify-icons/ep/search";
-import All from "@iconify-icons/ep/refresh-left";
 import Addicon from "@iconify-icons/ep/document-add";
-// 获取URLLIST
-import { getGroupUrl } from "@/utils/getUrl/getUrl";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
-const formRef = ref();
 const {
   form,
   loading,
@@ -30,41 +28,57 @@ const {
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange,
+  ruleFormRef,
+  groupIdOptionList,
   handleAdd,
   addVisible,
+  handleSetVersion,
+  editSetVersionVisible,
+  editSetVersionFormData,
+  handleDelete,
   handleUpdate,
   editUpdateVisible,
   editUpdateFormData,
-  handleDelete,
-  groupIdOptionList,
+  handleSetRouter,
+  editSetRouterVisible,
+  editSetRouterFormData,
 
 } = useApiInfo();
-
 // 关闭添加
 const closeAddVisible = () => {
   addVisible.value = false
 }
 provide('closeAddVisible', closeAddVisible)
 // 关闭修改
+const closeEditSetVersionVisible = () => {
+  editSetVersionVisible.value = false
+}
+provide('closeEditSetVersionVisible', closeEditSetVersionVisible)
+// 关闭修改
 const closeEditUpdateVisible = () => {
   editUpdateVisible.value = false
 }
 provide('closeEditUpdateVisible', closeEditUpdateVisible)
-
+// 关闭修改
+const closeEditSetRouterVisible = () => {
+  editSetRouterVisible.value = false
+}
+provide('closeEditSetRouterVisible', closeEditSetRouterVisible)
 
 </script>
 
 <template lang="pug">
 .main
   div
+    //- 搜索表格组件条件
     el-form.bg-bg_color.pl-8.pt-4.pr-8(
       label-position="left"
       label-width="100px"
-      ref="formRef",
       :inline="true",
       :model="form",
-      :rules="rules",
       class="w-[99/100]"
+      ref="ruleFormRef"
+      :rules="rules"
     )
       el-form-item(label="分组", prop="groupId")
         el-select(
@@ -83,19 +97,12 @@ provide('closeEditUpdateVisible', closeEditUpdateVisible)
           type="primary",
           :icon="useRenderIcon(Search)",
           :loading="loading",
-          @click="onSearch()"
+          @click="onSearch(ruleFormRef)"
         ) 查询
-      el-form-item
-        el-button(
-          type="primary",
-          :icon="useRenderIcon(All)",
-          :loading="loading",
-          @click="onSearch('all')"
-        ) 全部
     //- 表格组件
     PureTableBar(title="api接口", @refresh="onSearch" )
       template(#buttons)
-        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
 
       template(v-slot="{ size, checkList }")
         pure-table(stripe 
@@ -124,24 +131,40 @@ provide('closeEditUpdateVisible', closeEditUpdateVisible)
                   el-dropdown-menu
                     el-dropdown-item
                       el-button.reset-margin(
-                        link
                         type="primary"
-                        :size="size"
-                        @click="handleUpdate(row)"
+                        size="small"
+                        @click="handleSetVersion(row)"
                         :icon="useRenderIcon(EditPen)"
-                        v-if="hasAuth(['edit'])"
-                      ) 编辑
+                        v-if="hasAuth(['setVersion'])"
+                      ) 设置版本号
                     el-button.reset-margin(
-                      link
                       type="primary"
-                      :size="size"
+                      size="small"
                       @click="handleDelete(row)"
                       :icon="useRenderIcon(Delete)"
                       v-if="hasAuth(['delete'])"
                     ) 删除
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        type="primary"
+                        size="small"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['update'])"
+                      ) 修改
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        type="primary"
+                        size="small"
+                        @click="handleSetRouter(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['setRouter'])"
+                      ) 设置请求地址
 
     Add(:addVisible="addVisible")
+    EditSetVersion(:editVisible="editSetVersionVisible" :formData="editSetVersionFormData")
     EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+    EditSetRouter(:editVisible="editSetRouterVisible" :formData="editSetRouterFormData")
 
                     
 </template>