src/components/OmeagFormChange/index.vue

@@ -0,0 +1,96 @@
+<!--
+ * @Author: Gui
+ * @Date: 2023-03-01 19:20:44
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2025-03-24 17:43:19
+ * @Description: kxs files
+ * @filePath: 
+-->
+<script setup lang="ts">
+import { ref, useRenderIcon, Close } from "@/utils/importUsed";
+
+const props = defineProps<{
+  formData: {
+    type: Object;
+    default: () => {};
+  };
+  visible: false;
+  closeFn: any;
+  formsubmit: any;
+}>();
+// 弹窗是否全屏
+const isFullscreen = ref(false);
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="props.visible"
+      width="50%"
+      :fullscreen="isFullscreen"
+      title="新增"
+      draggable
+      @close="closeFn"
+    >
+      <omega-form
+        ref="formRef"
+        :formData="formData"
+        labelPosition="left"
+        labelWidth="100px"
+        size="default"
+        @search="formsubmit"
+        formWidth="!w-[230px]"
+        :searchAll="false"
+        searchText="确认提交"
+      />
+      <div class="flex justify-end">
+        <el-button :icon="useRenderIcon(Close)" @click="closeFn">
+          关闭
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style scoped>
+: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;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/utils/importUsed.ts

@@ -2,7 +2,7 @@
  * @Author: guicheng 1625811865@qq.com
  * @Date: 2024-06-21 11:11:08
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-21 11:55:32
+ * @LastEditTime: 2025-03-24 17:44:06
  * @FilePath: /admin-skb/src/utils/importUsed.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,5 +21,27 @@ import verification, { RegularVerification } from "./rules";
 import { type PaginationProps } from "@pureadmin/table";
 import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
+import omegaFormChange from "@/components/OmeagFormChange/index.vue";
 
-export { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth, PureTableBar }
+export {
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  Uploadfile,
+  UploadImg,
+  Editor,
+  useRenderIcon,
+  ElMessage,
+  ElMessageBox,
+  Upload,
+  Close,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification,
+  PaginationProps,
+  hasAuth,
+  PureTableBar,
+  omegaFormChange
+};

src/views/api/apiInfo/components/add/index.vue

@@ -5,7 +5,12 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { onMounted, ref, useRenderIcon, Close } from "@/utils/importUsed";
+import {
+  onMounted,
+  ref,
+  verification,
+  omegaFormChange
+} from "@/utils/importUsed";
 import { requestSearch, requestAdd } from "@/utils/handlePort";
 onMounted(async () => {
   groupIdQuery();
@@ -13,7 +18,7 @@ onMounted(async () => {
 // 组件传参对象
 const props = defineProps<{
   submit: Function;
-  addVisible: {
+  visible: {
     type: Boolean;
     default: false;
   };
@@ -59,26 +64,37 @@ const formData = ref({
   groupId: {
     label: "分组",
     type: "select",
-    disposition: {},
+    // 是否多选
+    disposition: { multiple: true },
     options: [],
     rules: []
   },
   apiName: {
     label: "接口名称",
-    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
+    rules: [
+      // 必填校验
+      { required: true, message: "请输入接口名称", trigger: "blur" },
+      // 自定义校验
+      {
+        validator: (rule: any, value: any, callback: any) => {
+          verification.verificationName(value, callback);
+        },
+        trigger: "blur"
+      }
+    ],
     type: "input",
     disposition: {}
   },
   apiKey: {
     label: "接口关键字",
     rules: [{ required: true, message: "请输入接口关键字", trigger: "blur" }],
-    type: "input",
+    type: "picker",
     disposition: {}
   },
   apiHost: {
     label: "接口主机头",
     rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
-    type: "input",
+    type: "number",
     disposition: {}
   },
   apiPort: {
@@ -100,61 +116,9 @@ const formData = ref({
     disposition: {}
   }
 });
-// 弹窗是否全屏
-const isFullscreen = ref(false);
 </script>
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeFn")
-    omega-form(ref="formRef" :formData="formData" labelPosition="left" labelWidth="100px" size="default" @search="formsubmit" formWidth="!w-[230px]" :searchAll="false" searchText="确认提交")
-    .flex.justify-end
-      el-button(
-        :icon="useRenderIcon(Close)",
-        @click="closeFn"
-      ) 关闭
+  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
 </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;
-}
-
-.el-select {
-  width: 100%;
-}
-</style>

src/views/api/apiInfo/components/setRouter/index.vue

@@ -5,7 +5,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { requestAdd, requestSearch } from "@/utils/handlePort";
+import { requestAdd, requestEdit, requestSearch } from "@/utils/handlePort";
 import {
   inject,
   onMounted,
@@ -22,16 +22,12 @@ import {
   http,
   getGroupUrl,
   RegularVerification,
-  verification
+  verification,
+  omegaFormChange
 } from "@/utils/importUsed";
-// 接口列表实例
-let UrlList = reactive(null);
-// 获取当前板块接口列表
-onMounted(async () => {
-  UrlList = await getGroupUrl(["kxsConfigServer"]);
-});
+
 const props = defineProps<{
-  editVisible: {
+  visible: {
     type: Boolean;
     default: false;
   };
@@ -39,7 +35,7 @@ const props = defineProps<{
     type: Number;
     default: 50;
   };
-  formData: {
+  columnsData: {
     id: any;
     type: any;
     default: {};
@@ -51,7 +47,7 @@ const props = defineProps<{
 const activeId = ref("1");
 // 提交函数
 const submit = async data => {
-  requestAdd(
+  requestEdit(
     {
       module: "kxsConfigServer",
       method: "apiInfosetRouter",
@@ -64,7 +60,7 @@ const openVisible = async () => {
   const { status, data }: any = await requestSearch({
     module: "kxsConfigServer",
     method: "apiInfoquery",
-    params: { id: props.formData.id }
+    params: { id: props.columnsData.id }
   });
   if (status === 1) {
     for (const key in formData.value) {
@@ -79,6 +75,12 @@ const openVisible = async () => {
 const isFullscreen = ref(false);
 
 const formData = ref({
+  id: {
+    label: "id",
+    value: "",
+    // 是否展示
+    disposition: { isShow: false }
+  },
   apiHost: {
     label: "接口主机头",
     value: "",
@@ -106,55 +108,5 @@ const formData = ref({
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeFn" @open="openVisible")
-    omega-form(ref="formRef" v-if="props.editVisible" :formData="formData" labelPosition="left" labelWidth="100px" size="default" @search="formsubmit" formWidth="!w-[230px]" :searchAll="false" searchText="确认提交")
-    .flex.justify-end
-      el-button(
-        :icon="useRenderIcon(Close)",
-        @click="closeFn"
-      ) 关闭
+  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
 </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;
-}
-
-.el-select {
-  width: 100%;
-}
-</style>

src/views/api/apiInfo/components/setVersion/index.vue

@@ -22,16 +22,12 @@ import {
   http,
   getGroupUrl,
   RegularVerification,
-  verification
+  verification,
+  omegaFormChange
 } from "@/utils/importUsed";
-// 接口列表实例
-let UrlList = reactive(null);
-// 获取当前板块接口列表
-onMounted(async () => {
-  UrlList = await getGroupUrl(["kxsConfigServer"]);
-});
+
 const props = defineProps<{
-  editVisible: {
+  visible: {
     type: Boolean;
     default: false;
   };
@@ -39,7 +35,7 @@ const props = defineProps<{
     type: Number;
     default: 50;
   };
-  formData: {
+  columnsData: {
     id: any;
     type: any;
     default: {};
@@ -61,17 +57,10 @@ const submit = async data => {
 
 // 获取表单项数据函数
 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) {
-    for (const key in formData.value) {
-      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
-        formData.value[key].value = data[key] || "";
-      }
+  //通过表格数据获取参数
+  for (const key in formData.value) {
+    if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
+      formData.value[key].value = props.columnsData[key] || "";
     }
   }
 };
@@ -87,62 +76,9 @@ const formData = ref({
     rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
   }
 });
-
-// 弹窗是否全屏
-const isFullscreen = ref(false);
 </script>
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeFn" @open="openVisible")
-    omega-form(ref="formRef" v-if="props.editVisible" :formData="formData" labelPosition="left" labelWidth="100px" size="default" @search="formsubmit" formWidth="!w-[230px]" :searchAll="false" searchText="确认提交")
-    .flex.justify-end
-      el-button(
-        :icon="useRenderIcon(Close)",
-        @click="closeFn"
-      ) 关闭
+  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
 </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;
-}
-
-.el-select {
-  width: 100%;
-}
-</style>

src/views/api/apiInfo/components/update/index.vue

@@ -22,14 +22,14 @@ import {
   http,
   getGroupUrl,
   RegularVerification,
-  verification
+  verification,
+  omegaFormChange
 } from "@/utils/importUsed";
-// 获取当前板块接口列表
 onMounted(async () => {
   groupIdQuery();
 });
 const props = defineProps<{
-  editVisible: {
+  visible: {
     type: Boolean;
     default: false;
   };
@@ -132,55 +132,5 @@ const isFullscreen = ref(false);
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeFn" @open="openVisible")
-    omega-form(ref="formRef" :formData="formData" labelPosition="left" labelWidth="100px" size="default" @search="formsubmit" formWidth="!w-[230px]" :searchAll="false" searchText="确认提交")
-    .flex.justify-end
-      el-button(
-        :icon="useRenderIcon(Close)",
-        @click="closeFn"
-      ) 关闭
+  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
 </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;
-}
-
-.el-select {
-  width: 100%;
-}
-</style>

src/views/api/apiInfo/hook.tsx

@@ -2,9 +2,6 @@ import {
   reactive,
   onMounted,
   ref,
-  ElMessage,
-  ElMessageBox,
-  http,
   PaginationProps
 } from "@/utils/importUsed";
 import { requestSearch, requestDelete } from "@/utils/handlePort";
@@ -17,10 +14,11 @@ export function useApiInfo() {
     groupIdQuery();
   });
   const form = reactive({
+    // 根据字段生成对象
     groupId: "", //分组
     apiName: "" //接口名称
   });
-
+  // 渲染表单组件和 form 字段相对应
   const formData = ref({
     groupId: {
       label: "分组",
@@ -246,7 +244,6 @@ export function useApiInfo() {
     handleSelectionChange,
     ruleFormRef,
     groupIdQuery,
-
     handleAdd,
     addVisible,
     handleSetVersion,

src/views/api/apiInfo/index.vue

@@ -119,11 +119,11 @@ const formsubmit = (type, val) => {
                       :icon="useRenderIcon(EditPen)"
                       v-if="hasAuth(['setRouter'])"
                     ) 设置请求地址
-
-    Add(:addVisible="addVisible" :closeFn="()=>(addVisible = false)")
-    EditSetVersion(:editVisible="editSetVersionVisible" :formData="editSetVersionFormData" :closeFn="()=>(editSetVersionVisible = false)")
-    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData" :closeFn="()=>(editUpdateVisible = false)")
-    EditSetRouter(:editVisible="editSetRouterVisible" :formData="editSetRouterFormData"  :closeFn="()=>(editSetRouterVisible = false)")
+    //- 操作组件
+    Add(:visible="addVisible" :closeFn="()=>(addVisible = false)")
+    EditSetVersion(:visible="editSetVersionVisible" :columnsData="editSetVersionFormData" :closeFn="()=>(editSetVersionVisible = false)")
+    EditUpdate(:visible="editUpdateVisible" :columnsData="editUpdateFormData" :closeFn="()=>(editUpdateVisible = false)")
+    EditSetRouter(:visible="editSetRouterVisible" :columnsData="editSetRouterFormData"  :closeFn="()=>(editSetRouterVisible = false)")
 
                     
 </template>