form 组件封装使用，apiinfo 调整为新写法

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
   env: {
     node: true
   },
+  plugins: ["pug"],
   globals: {
     // Ref sugar (take 2)
     $: "readonly",
@@ -50,6 +51,10 @@ module.exports = {
     }
   },
   overrides: [
+    {
+      files: ["**/*.pug"],
+      processor: "pug/pug"
+    },
     {
       files: ["*.ts", "*.vue"],
       rules: {
@@ -117,4 +122,4 @@ module.exports = {
       }
     ]
   }
-}
+};

src/components/OmageForm/index.vue

@@ -0,0 +1,200 @@
+<!--
+ * @Author: Gui
+ * @Date: 2023-03-01 19:20:44
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2025-03-12 16:28:04
+ * @Description: kxs files
+ * @filePath: 
+-->
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage } from "element-plus";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: () => {}
+  },
+  refresh: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  formWidth: {
+    type: String,
+    default: "!w-[230px]"
+  },
+  labelWidth: {
+    type: String,
+    default: "100px"
+  },
+  labelPosition: {
+    type: String,
+    default: "left"
+  },
+  searchAll: {
+    type: Boolean,
+    default: true
+  },
+  searchText: {
+    type: String,
+    default: "搜索"
+  }
+});
+// 表单实例
+const formRef = ref();
+// 循环挂载每一个表单值
+const formState = ref({});
+// 传入的搜索方法
+const emit = defineEmits(["search"]);
+// 提交表单
+const onSearch = type => {
+  // 对空值做处理
+  const object = {};
+  for (const key in formState.value) {
+    if (Object.prototype.hasOwnProperty.call(formState.value, key)) {
+      object[key] = formState.value[key] || "";
+    }
+  }
+  if (type === "all") {
+    // all类型表单提交
+    formRef.value.resetFields();
+    emit("search", {}, type);
+  } else {
+    // search类型表单提交并做表单校验
+    formRef.value.validate(async valid => {
+      if (valid) {
+        emit("search", object, type);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整表单信息",
+          type: "error"
+        });
+      }
+    });
+  }
+};
+// 格式化表单校验规则;
+const rules = ref({});
+
+watch(props.formData, () => {
+  for (const key in props.formData) {
+    if (Object.prototype.hasOwnProperty.call(props.formData, key)) {
+      formState.value[key] = props.formData[key]["value"];
+      const rule = props.formData[key]["rules"];
+      if (rule) {
+        rules.value[key] = rule;
+      }
+    }
+  }
+});
+
+// 抛出当前组件表单实例
+defineExpose(
+  new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        return formRef.value?.[prop];
+      },
+      has(_target, prop) {
+        return prop in formRef.value;
+      }
+    }
+  )
+);
+</script>
+
+<template>
+  <div class="bg-bg_color pl-8 pt-4 pr-8">
+    <el-form
+      :inline="true"
+      :model="formState"
+      :label-position="labelPosition"
+      :label-width="labelWidth"
+      class="w-[99/100]"
+      ref="formRef"
+      :rules="rules"
+    >
+      <template v-for="(value, key, i) in formData" :key="i">
+        <el-form-item :label="value.label" :prop="key">
+          <el-input
+            v-if="value.type === 'input' || value.type === ''"
+            v-model="formState[key]"
+            :placeholder="`请输入${value.label}`"
+            clearable
+            :size="size"
+            :class="formWidth"
+          />
+          <el-select
+            v-if="value.type === 'select'"
+            v-model="formState[key]"
+            :placeholder="`请选择${value.label}`"
+            :size="size"
+            :multiple="value.disposition?.multiple || false"
+            clearable
+            :class="formWidth"
+          >
+            <el-option
+              v-for="item in value.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-date-picker
+            v-if="value.type === 'picker'"
+            v-model="formState[key]"
+            :type="value.disposition?.type || 'datetime'"
+            :placeholder="`请选择${value.label}`"
+            :range-separator="value.disposition['range-separator'] || '-'"
+            :start-placeholder="
+              value.disposition['start-placeholder'] || '开始时间'
+            "
+            :end-placeholder="
+              value.disposition['end-placeholder'] || '结束时间'
+            "
+            clearable
+            :class="formWidth"
+          />
+          <el-input-number
+            v-if="value.type === 'number'"
+            v-model="formState[key]"
+            :min="1"
+            :max="10"
+          />
+        </el-form-item>
+      </template>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(Search)"
+          :loading="loading"
+          @click="onSearch('search')"
+          >{{ searchText }}</el-button
+        >
+      </el-form-item>
+      <el-form-item v-if="searchAll">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(Refresh)"
+          :loading="loading"
+          @click="onSearch('all')"
+          >全部</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<style scoped></style>

src/components/OmageTable/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
- * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
- * @LastEditTime: 2025-02-14 15:48:40
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2025-02-21 11:05:36
  * @Description: kxs files
  * @filePath: 
 -->
@@ -58,11 +58,11 @@ const props = defineProps({
   },
   stripe: {
     type: Boolean,
-    default: true
+    default: false
   },
   border: {
     type: Boolean,
-    default: true
+    default: false
   },
   size: {
     type: String,

src/main.ts

@@ -2,7 +2,7 @@
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-02-12 16:45:30
+ * @LastEditTime: 2025-03-12 10:04:48
  * @Description: kxs files
  * @filePath:
  */
@@ -17,8 +17,8 @@ import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
-// import Table from "@pureadmin/table";
 import Table from "@/components/OmageTable/index.vue";
+import Form from "@/components/OmageForm/index.vue";
 import PureDescriptions from "@pureadmin/descriptions";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
@@ -55,7 +55,8 @@ import {
 app.component("IconifyIconOffline", IconifyIconOffline);
 app.component("IconifyIconOnline", IconifyIconOnline);
 app.component("FontIcon", FontIcon);
-app.component("PureTable", Table);
+app.component("OmegaTable", Table);
+app.component("OmegaForm", Form);
 
 // 全局注册按钮级别权限组件
 import { Auth } from "@/components/ReAuth";
@@ -70,7 +71,6 @@ getServerConfig(app).then(async config => {
     .use(MotionPlugin)
     .use(useI18n)
     .use(ElementPlus)
-    // .use(Table)
     .use(PureDescriptions)
     .use(useEcharts);
   app.mount("#app");

src/utils/handlePort.ts

@@ -0,0 +1,117 @@
+import { reactive } from "vue";
+import { ElMessage, ElMessageBox, getGroupUrl, http } from "./importUsed";
+
+let UrlList = reactive(null);
+// 新增
+interface addType {
+  module: string;
+  method: string;
+  params: object;
+}
+const requestAdd = async (row: addType, callback?: Function) => {
+  UrlList = await getGroupUrl();
+  const { status, msg }: any = await http.Request({
+    method: UrlList[row.module][row.method].method,
+    url: UrlList[row.module][row.method].url,
+    params: row.params
+  });
+  if (status === 1) {
+    //业务成功回调
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    // 关闭修改弹窗;
+    callback();
+  } else {
+    //业务失败回调
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  }
+};
+// 删除
+interface deleteType {
+  module: string;
+  method: string;
+  msg: string;
+  id: number | string;
+}
+const requestDelete = async (row: deleteType, callback: Function) => {
+  UrlList = await getGroupUrl();
+  ElMessageBox.confirm(row.msg || "是否删除该项", "提示", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(async () => {
+    const { status, msg }: any = await http.Request({
+      method: UrlList[row.module][row.method].method,
+      url: UrlList[row.module][row.method].url,
+      params: row.id
+    });
+    if (status === 1) {
+      ElMessage({
+        message: "删除成功",
+        type: "success"
+      });
+      callback();
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  });
+};
+// 修改
+interface editType {
+  module: string;
+  method: string;
+  params: object;
+}
+const requestEdit = async (row: editType, callback: Function) => {
+  UrlList = await getGroupUrl();
+  const { status, msg }: any = await http.Request({
+    method: UrlList[row.module][row.method].method,
+    url: UrlList[row.module][row.method].url,
+    params: row.params
+  });
+  if (status === 1) {
+    //业务成功回调
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    // 关闭修改弹窗;
+    callback();
+  } else {
+    //业务失败回调
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  }
+};
+// 查询
+interface searchType {
+  module: string;
+  method: string;
+  params: object;
+  pageSize?: number;
+  pageNum?: number;
+}
+const requestSearch = async (row: searchType) => {
+  UrlList = await getGroupUrl();
+  const { status, msg, data }: any = await http.Request({
+    method: UrlList[row.module][row.method].method,
+    url: UrlList[row.module][row.method].url,
+    params: {
+      ...row.params,
+      pageSize: row.pageSize,
+      pageNum: row.pageNum
+    }
+  });
+  return { status, msg, data };
+};
+export { requestAdd, requestDelete, requestEdit, requestSearch };

src/views/admin/dept/index.vue

@@ -95,7 +95,7 @@ defineExpose({
     template(#buttons)
       el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增部门
     template(v-slot="{ size, checkList }")
-      pure-table(stripe 
+      omega-table(stripe 
         border,
         row-key="id",
         align-whole="center",

src/views/admin/menu/index.vue

@@ -111,7 +111,7 @@ const rules = reactive({
     template(#header)
       el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增菜单
     template(v-slot="{ size, checkList }")
-      pure-table( 
+      omega-table( 
         row-key="id",
         align-whole="center",
         table-layout="auto",

src/views/admin/post/index.vue

@@ -93,7 +93,7 @@ defineExpose({
     template(#buttons)
       el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增岗位
     template(v-slot="{ size, checkList }")
-      pure-table(stripe 
+      omega-table(stripe 
         border,
         row-key="id",
         align-whole="center",

src/views/admin/role/index.vue

@@ -116,7 +116,7 @@ defineExpose({
         //- el-button(v-if="hasAuth(['add'])" type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser" 
         el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增角色
       template(v-slot="{ size, checkList }")
-        pure-table(
+        omega-table(
           stripe 
           border,
           align-whole="center",

src/views/admin/user/index.vue

@@ -129,7 +129,7 @@ defineExpose({
       template(#buttons)
         el-button(type="primary" :icon="useRenderIcon(AddFill)" @click="AddUser") 新增用户
       template(v-slot="{ size, checkList }")
-        pure-table(stripe 
+        omega-table(stripe 
           border,
           align-whole="center",
           table-layout="auto",

src/views/api/apiGroup/index.vue

@@ -8,7 +8,7 @@ export default {
 import { provide } from "vue";
 import { useApiGroup } from "./hook";
 import { http } from "@/utils/http";
-import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed";
 import Add from "./components/add/index.vue";
 import EditUpdate from "./components/update/index.vue";
 import Search from "@iconify-icons/ep/search";
@@ -33,22 +33,20 @@ const {
   handleUpdate,
   editUpdateVisible,
   editUpdateFormData,
-  handleDelete,
-
+  handleDelete
 } = useApiGroup();
 // 关闭添加
 const closeAddVisible = () => {
   onSearch(ruleFormRef.value);
   addVisible.value = false;
-}
-provide('closeAddVisible', closeAddVisible)
+};
+provide("closeAddVisible", closeAddVisible);
 // 关闭修改
 const closeEditUpdateVisible = () => {
   onSearch(ruleFormRef.value);
-  editUpdateVisible.value = false
-}
-provide('closeEditUpdateVisible', closeEditUpdateVisible)
-
+  editUpdateVisible.value = false;
+};
+provide("closeEditUpdateVisible", closeEditUpdateVisible);
 </script>
 
 <template lang="pug">
@@ -81,7 +79,7 @@ provide('closeEditUpdateVisible', closeEditUpdateVisible)
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive
@@ -156,4 +154,4 @@ provide('closeEditUpdateVisible', closeEditUpdateVisible)
 :deep(.el-descriptions__header) {
   margin: 16px 0 !important;
 }
-</style>
+</style>

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

@@ -5,15 +5,11 @@ export default {
 };
 </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)
-// 获取当前板块接口列表
+import { onMounted, ref, useRenderIcon, Close } from "@/utils/importUsed";
+import { requestSearch, requestAdd } from "@/utils/handlePort";
 onMounted(async () => {
-  UrlList = await getGroupUrl(["kxsConfigServer"]);
   groupIdQuery();
-
-})
+});
 // 组件传参对象
 const props = defineProps<{
   submit: Function;
@@ -25,168 +21,98 @@ const props = defineProps<{
     type: Number;
     default: 50;
   };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+  closeFn: any;
 }>();
-// 表单数据
-let UpdateForm = ref({
-  groupId: "", //分组
-  apiName: "", //接口名称
-  apiKey: "", //接口关键字
-  apiHost: "", //接口主机头
-  apiPort: "", //接口端口号
-  apiRouter: "", //接口路由
-  apiMethod: "", //接口请求方式
-
-});
-// 表单实例
-const ruleFormRef = ref()
 
-// 传参选项数据
-// 分组选项数据
-const groupIdOptionList = 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.apiInfoadd.method,
-        url: UrlList.kxsConfigServer.apiInfoadd.url,
-        params: UpdateForm.value
-      });
-      if (status === 1) {
-        //业务成功回调
-        ElMessage({
-          message: "新增成功",
-          type: "success"
-        });
-        UpdateForm.value = {
-                groupId: "", //分组
-      apiName: "", //接口名称
-      apiKey: "", //接口关键字
-      apiHost: "", //接口主机头
-      apiPort: "", //接口端口号
-      apiRouter: "", //接口路由
-      apiMethod: "", //接口请求方式
-
-        };
-        // 关闭新增弹窗;
-        closeVisible()
-      } else {
-        //业务失败回调
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-    } else {
-      //表单校验失败回调
-      ElMessage({
-        message: "请输入完整信息",
-        type: "error"
-      });
-    }
-  })
+const formsubmit = async data => {
+  requestAdd(
+    {
+      module: "kxsConfigServer",
+      method: "apiInfoadd",
+      params: data
+    },
+    props.closeFn
+  );
 };
 
 //获取分组数据
 const groupIdQuery = async () => {
-  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+  const { status, data }: any = await requestSearch({
+    module: "kxsConfigServer",
+    method: "apiGroupselectList",
+    params: {}
+  });
   if (status === 1) {
-    groupIdOptionList.value = data.records;
+    formData.value.groupId.options = data.records.map(item => {
+      return { value: item.id, label: item.groupName };
+    });
   }
 };
 
-
-
-// 表单校验规则
-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: "", //分组
-    apiName: "", //接口名称
-    apiKey: "", //接口关键字
-    apiHost: "", //接口主机头
-    apiPort: "", //接口端口号
-    apiRouter: "", //接口路由
-    apiMethod: "", //接口请求方式
-
-  };
-  closeFn();
-};
-
+const formData = ref({
+  groupId: {
+    label: "分组",
+    type: "select",
+    disposition: {},
+    options: [],
+    rules: []
+  },
+  apiName: {
+    label: "接口名称",
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiKey: {
+    label: "接口关键字",
+    rules: [{ required: true, message: "请输入接口关键字", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiHost: {
+    label: "接口主机头",
+    rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiPort: {
+    label: "接口主机头",
+    rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiRouter: {
+    label: "接口路由",
+    rules: [{ required: true, message: "请输入接口路由", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiMethod: {
+    label: "接口请求方式",
+    rules: [{ required: false }],
+    type: "input",
+    disposition: {}
+  }
+});
 // 弹窗是否全屏
-const isFullscreen = ref(false)
+const isFullscreen = ref(false);
 </script>
 
 <template lang="pug">
 .main
   el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @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",
-          placeholder="请选择分组",
-          clearable,
-        )
-          el-option(:label="item.groupName", :value="item.id" v-for="(item,index) in groupIdOptionList")
-      el-form-item(label='接口名称' prop="apiName")
-        el-input(v-model='UpdateForm.apiName' autocomplete='off'
-          placeholder="请输入接口名称")
-      el-form-item(label='接口关键字' prop="apiKey")
-        el-input(v-model='UpdateForm.apiKey' autocomplete='off'
-          placeholder="请输入接口关键字")
-      el-form-item(label='接口主机头' prop="apiHost")
-        el-input(v-model='UpdateForm.apiHost' autocomplete='off'
-          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'
-          placeholder="请输入接口路由")
-      el-form-item(label='接口请求方式' prop="apiMethod")
-        el-input(v-model='UpdateForm.apiMethod' autocomplete='off'
-          placeholder="请输入接口请求方式")
-
+    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="closeVisible"
+        @click="closeFn"
       ) 关闭
-      el-button(
-        type="primary",
-        :icon="useRenderIcon(Upload)",
-        @click="submit(ruleFormRef)"
-      ) 确认提交
 </template>
 
 <style scoped lang="scss">

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

@@ -5,14 +5,31 @@ export default {
 };
 </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"
+import { requestAdd, requestSearch } from "@/utils/handlePort";
+import {
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  Uploadfile,
+  UploadImg,
+  Editor,
+  useRenderIcon,
+  ElMessage,
+  ElMessageBox,
+  Upload,
+  Close,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification
+} from "@/utils/importUsed";
 // 接口列表实例
-let UrlList = reactive(null)
+let UrlList = reactive(null);
 // 获取当前板块接口列表
 onMounted(async () => {
   UrlList = await getGroupUrl(["kxsConfigServer"]);
-
-})
+});
 const props = defineProps<{
   editVisible: {
     type: Boolean;
@@ -27,132 +44,75 @@ const props = defineProps<{
     type: any;
     default: {};
   };
+  closeFn: any;
 }>();
-// 表单数据
-const UpdateForm: any = ref({
-  apiHost: "", //接口主机头
-  apiPort: "", //接口端口号
-  apiRouter: "", //接口路由
-
-});
-
-// 表单实例
-const ruleFormRef = ref()
 
 // 选项卡参数(默认值为列表某项的id)
-const activeId = ref('1')
+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: "", //接口路由
-
-        };
-        // 关闭修改弹窗;
-        closeSetRouterVisible();
-      } else {
-        //业务失败回调
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-    } else {
-      //表单校验失败回调
-      ElMessage({
-        message: "请输入完整信息",
-        type: "error"
-      });
-    }
-  })
+const submit = async data => {
+  requestAdd(
+    {
+      module: "kxsConfigServer",
+      method: "apiInfosetRouter",
+      params: data
+    },
+    props.closeFn
+  );
 };
-
-
-
-
-// 表单校验规则
-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 }});
+  const { status, data }: any = await requestSearch({
+    module: "kxsConfigServer",
+    method: "apiInfoquery",
+    params: { id: props.formData.id }
+  });
   if (status === 1) {
-    UpdateForm.value = data;
-
+    for (const key in formData.value) {
+      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
+        formData.value[key].value = data[key];
+      }
+    }
   }
 };
-// 关闭弹窗回调函数
-const closeSetRouterVisible = () => {
-  UpdateForm.value = {
-    apiHost: "", //接口主机头
-    apiPort: "", //接口端口号
-    apiRouter: "", //接口路由
-
-  };
-  closeFn();
-};
 
 // 弹窗是否全屏
-const isFullscreen = ref(false)
+const isFullscreen = ref(false);
+
+const formData = ref({
+  apiHost: {
+    label: "接口主机头",
+    value: "",
+    type: "input",
+    disposition: {},
+    options: [],
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
+  },
+  apiPort: {
+    label: "接口端口号",
+    type: "input",
+    disposition: {},
+    options: [],
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
+  },
+  apiRouter: {
+    label: "接口路由",
+    type: "input",
+    disposition: {},
+    options: [],
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
+  }
+});
 </script>
 
 <template lang="pug">
 .main
   el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" 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'
-          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'
-          placeholder="请输入接口路由")
-
+    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)",
-        :loading="loading",
-        @click="closeSetRouterVisible()"
+        @click="closeFn"
       ) 关闭
-      el-button(
-        type="primary",
-        :icon="useRenderIcon(Upload)",
-        @click="submit(ruleFormRef)"
-      ) 确认提交
 </template>
 
 <style scoped lang="scss">

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

@@ -5,14 +5,31 @@ export default {
 };
 </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"
+import { requestAdd } from "@/utils/handlePort";
+import {
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  Uploadfile,
+  UploadImg,
+  Editor,
+  useRenderIcon,
+  ElMessage,
+  ElMessageBox,
+  Upload,
+  Close,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification
+} from "@/utils/importUsed";
 // 接口列表实例
-let UrlList = reactive(null)
+let UrlList = reactive(null);
 // 获取当前板块接口列表
 onMounted(async () => {
   UrlList = await getGroupUrl(["kxsConfigServer"]);
-
-})
+});
 const props = defineProps<{
   editVisible: {
     type: Boolean;
@@ -27,111 +44,63 @@ const props = defineProps<{
     type: any;
     default: {};
   };
+  closeFn: any;
 }>();
-// 表单数据
-const UpdateForm: any = ref({
-  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 = {
-                version: "", //版本号
-
-        };
-        // 关闭修改弹窗;
-        closeSetVersionVisible();
-      } else {
-        //业务失败回调
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-    } else {
-      //表单校验失败回调
-      ElMessage({
-        message: "请输入完整信息",
-        type: "error"
-      });
-    }
-  })
+const submit = async data => {
+  requestAdd(
+    {
+      module: "kxsConfigServer",
+      method: "apiInfosetVersion",
+      params: data
+    },
+    props.closeFn
+  );
 };
 
-
-
-
-// 表单校验规则
-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 }});
+  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;
-
+    for (const key in formData.value) {
+      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
+        formData.value[key].value = data[key] || "";
+      }
+    }
   }
 };
-// 关闭弹窗回调函数
-const closeSetVersionVisible = () => {
-  UpdateForm.value = {
-    version: "", //版本号
 
-  };
-  closeFn();
-};
+// 表单数据
+const formData = ref({
+  version: {
+    label: "版本号",
+    value: "",
+    type: "number",
+    disposition: {},
+    options: [],
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
+  }
+});
 
 // 弹窗是否全屏
-const isFullscreen = ref(false)
+const isFullscreen = ref(false);
 </script>
 
 <template lang="pug">
 .main
   el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeSetVersionVisible" @open="openVisible")
-    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
-      el-form-item(label='版本号' prop="version")
-        el-input-number(v-model='UpdateForm.version' :min="1" :max="1000"
-          placeholder="请输入版本号")
-
+    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)",
-        :loading="loading",
-        @click="closeSetVersionVisible()"
+        @click="closeFn"
       ) 关闭
-      el-button(
-        type="primary",
-        :icon="useRenderIcon(Upload)",
-        @click="submit(ruleFormRef)"
-      ) 确认提交
 </template>
 
 <style scoped lang="scss">

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

@@ -5,15 +5,29 @@ export default {
 };
 </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)
+import { requestEdit, requestSearch } from "@/utils/handlePort";
+import {
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  Uploadfile,
+  UploadImg,
+  Editor,
+  useRenderIcon,
+  ElMessage,
+  ElMessageBox,
+  Upload,
+  Close,
+  http,
+  getGroupUrl,
+  RegularVerification,
+  verification
+} from "@/utils/importUsed";
 // 获取当前板块接口列表
 onMounted(async () => {
-  UrlList = await getGroupUrl(["kxsConfigServer"]);
   groupIdQuery();
-
-})
+});
 const props = defineProps<{
   editVisible: {
     type: Boolean;
@@ -28,175 +42,103 @@ const props = defineProps<{
     type: any;
     default: {};
   };
+  closeFn: any;
 }>();
-// 表单数据
-const UpdateForm: any = ref({
-  groupId: "", //分组
-  apiName: "", //接口名称
-  apiKey: "", //接口关键字
-  apiHost: "", //接口主机头
-  apiPort: "", //接口端口号
-  apiRouter: "", //接口路由
-  apiMethod: "", //接口请求方式
-
-});
-// 分组选项数据
-const groupIdOptionList = ref([]);
-
-// 表单实例
-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.apiInfoupdate.method,
-        url: UrlList.kxsConfigServer.apiInfoupdate.url,
-        params: UpdateForm.value
-      });
-      if (status === 1) {
-        //业务成功回调
-        ElMessage({
-          message: "修改成功",
-          type: "success"
-        });
-        UpdateForm.value = {
-                groupId: "", //分组
-      apiName: "", //接口名称
-      apiKey: "", //接口关键字
-      apiHost: "", //接口主机头
-      apiPort: "", //接口端口号
-      apiRouter: "", //接口路由
-      apiMethod: "", //接口请求方式
-
-        };
-        // 关闭修改弹窗;
-        closeUpdateVisible();
-      } else {
-        //业务失败回调
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-    } else {
-      //表单校验失败回调
-      ElMessage({
-        message: "请输入完整信息",
-        type: "error"
-      });
-    }
-  })
+const submit = async data => {
+  requestEdit(
+    {
+      module: "kxsConfigServer",
+      method: "apiInfoupdate",
+      params: data
+    },
+    props.closeFn
+  );
 };
 
 //获取分组数据
 const groupIdQuery = async () => {
-  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+  const { status, data }: any = await requestSearch({
+    module: "kxsConfigServer",
+    method: "apiGroupselectList",
+    params: {}
+  });
   if (status === 1) {
-    groupIdOptionList.value = data.records;
+    formData.value.groupId.options = data.records.map(item => {
+      return { value: item.id, label: item.groupName };
+    });
   }
 };
-
-
-
-// 表单校验规则
-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 { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfoquery.method, url: UrlList.kxsConfigServer.apiInfoquery.url, params: { id: props.formData.id }});
+  const { status, data }: any = await requestSearch({
+    module: "kxsConfigServer",
+    method: "apiInfoquery",
+    params: { id: props.formData.id }
+  });
   if (status === 1) {
-    UpdateForm.value = data;
-
+    for (const key in formData.value) {
+      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
+        formData.value[key].value = data[key];
+      }
+    }
   }
 };
-// 关闭弹窗回调函数
-const closeUpdateVisible = () => {
-  UpdateForm.value = {
-    groupId: "", //分组
-    apiName: "", //接口名称
-    apiKey: "", //接口关键字
-    apiHost: "", //接口主机头
-    apiPort: "", //接口端口号
-    apiRouter: "", //接口路由
-    apiMethod: "", //接口请求方式
 
-  };
-  closeFn();
-};
+// 表单数据
+const formData = ref({
+  groupId: {
+    label: "分组",
+    type: "select",
+    disposition: {},
+    options: [],
+    rules: []
+  },
+  apiName: {
+    label: "接口名称",
+    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiKey: {
+    label: "接口关键字",
+    rules: [{ required: true, message: "请输入接口关键字", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiHost: {
+    label: "接口主机头",
+    rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiPort: {
+    label: "接口主机头",
+    rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  },
+  apiRouter: {
+    label: "接口路由",
+    rules: [{ required: true, message: "请输入接口路由", trigger: "blur" }],
+    type: "input",
+    disposition: {}
+  }
+});
 
 // 弹窗是否全屏
-const isFullscreen = ref(false)
+const isFullscreen = ref(false);
 </script>
 
 <template lang="pug">
 .main
   el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" 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",
-          placeholder="请选择分组",
-          clearable,
-        )
-          el-option(:label="item.groupName", :value="item.id" v-for="(item,index) in groupIdOptionList")
-      el-form-item(label='接口名称' prop="apiName")
-        el-input(v-model='UpdateForm.apiName' autocomplete='off'
-          placeholder="请输入接口名称")
-      el-form-item(label='接口关键字' prop="apiKey")
-        el-input(v-model='UpdateForm.apiKey' autocomplete='off'
-          placeholder="请输入接口关键字")
-      el-form-item(label='接口主机头' prop="apiHost")
-        el-input(v-model='UpdateForm.apiHost' autocomplete='off'
-          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'
-          placeholder="请输入接口路由")
-      el-form-item(label='接口请求方式' prop="apiMethod")
-        el-input(v-model='UpdateForm.apiMethod' autocomplete='off'
-          placeholder="请输入接口请求方式")
-
+    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)",
-        :loading="loading",
-        @click="closeUpdateVisible()"
+        @click="closeFn"
       ) 关闭
-      el-button(
-        type="primary",
-        :icon="useRenderIcon(Upload)",
-        @click="submit(ruleFormRef)"
-      ) 确认提交
 </template>
 
 <style scoped lang="scss">

src/views/api/apiInfo/hook.tsx

@@ -1,24 +1,43 @@
-import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+import {
+  reactive,
+  onMounted,
+  ref,
+  ElMessage,
+  ElMessageBox,
+  http,
+  PaginationProps
+} from "@/utils/importUsed";
+import { requestSearch, requestDelete } from "@/utils/handlePort";
 // 表单实例
-const ruleFormRef = ref()
+const ruleFormRef = ref();
 export function useApiInfo() {
-  // 接口列表实例
-  let UrlList = reactive(null)
   // 获取当前板块接口列表
   onMounted(async () => {
-    UrlList = await getGroupUrl(["kxsConfigServer"]);
-    onSearch(ruleFormRef.value);
+    onSearch();
     groupIdQuery();
-
   });
-  let form = reactive({
-  groupId:"", //分组
-  apiName:"", //接口名称
+  const form = reactive({
+    groupId: "", //分组
+    apiName: "" //接口名称
+  });
 
+  const formData = ref({
+    groupId: {
+      label: "分组",
+      type: "select",
+      disposition: {},
+      options: [],
+      rules: []
+    },
+    apiName: {
+      label: "接口名称",
+      required: false,
+      type: "input",
+      disposition: {}
+    }
   });
   const dataList = ref([]);
   const loading = ref(false);
-  const dialogAddVisible = ref(false);
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -38,7 +57,7 @@ export function useApiInfo() {
       width: 70,
       hide: ({ checkList }) => !checkList.includes("序号列")
     },
-        {
+    {
       label: "分组名称",
       prop: "apiGroupInfo.groupName",
       minWidth: 200
@@ -95,7 +114,7 @@ export function useApiInfo() {
   function handleSizeChange(val: number) {
     if (typeof val === "number") {
       pagination.pageSize = val;
-      onSearch(ruleFormRef.value);
+      onSearch();
     }
   }
   // 当前页码切换
@@ -103,101 +122,73 @@ export function useApiInfo() {
     console.log(`current page: ${val}`);
     if (typeof val === "number") {
       pagination.currentPage = val;
-      onSearch(ruleFormRef.value);
+      onSearch();
     }
   }
   // 选择表格项
   function handleSelectionChange(val) {
     console.log(`SelectionChange: ${val}`);
-    onSearch(ruleFormRef.value);
+    onSearch();
   }
   // 搜索列表
-  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"
-        });
-      }
-    })
+  async function onSearch() {
+    // 状态调整为加载中
+    loading.value = true;
+    // 调用模块及方法（需动态生成接口）
+    const { status, msg, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiInfolist",
+      params: form,
+      pageSize: pagination.pageSize,
+      pageNum: pagination.currentPage
+    });
+    dataList.value = data.records;
+    pagination.total = data.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
   }
-    // 分组选项数据
-    const groupIdOptionList = ref([]);
   //获取分组数据
   async function groupIdQuery() {
-    const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+    const { status, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiGroupselectList",
+      params: {}
+    });
     if (status === 1) {
-      groupIdOptionList.value = data.records;
+      formData.value.groupId.options = data.records.map(item => {
+        return { value: item.id, label: item.groupName };
+      });
     }
   }
 
-
-
-    // 删除
+  // 删除
   function handleDelete(row) {
-    ElMessageBox.confirm(
-      `是否删除该api接口? `,
-      "提示",
+    requestDelete(
       {
-        confirmButtonText: "删除",
-        cancelButtonText: "取消",
-        type: "warning"
-      }
-    ).then(async () => {
-      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apiInfodelete.method, url: UrlList.kxsConfigServer.apiInfodelete.url, params: row.id });
-      if (status === 1) {
-        ElMessage({
-          message: "删除成功",
-          type: "success"
-        });
-        onSearch(ruleFormRef.value);
-      } else {
-        ElMessageBox.alert(msg, "提示", {
-        confirmButtonText: "关闭",
-        type: "warning"
-      });
-      };
-    })
+        module: "kxsConfigServer",
+        method: "apiInfodelete",
+        msg: "是否删除该api接口?",
+        id: row.id
+      },
+      onSearch
+    );
   }
 
-    // 新增
+  // 新增
   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({});
@@ -205,7 +196,7 @@ export function useApiInfo() {
     editUpdateVisible.value = true;
     // 表格数据赋值
     editUpdateFormData.value = row;
-  };
+  }
   // 设置请求地址
   const editSetRouterVisible = ref(false);
   const editSetRouterFormData = ref({});
@@ -213,7 +204,7 @@ export function useApiInfo() {
     editSetRouterVisible.value = true;
     // 表格数据赋值
     editSetRouterFormData.value = row;
-  };
+  }
 
   return {
     form,
@@ -227,7 +218,6 @@ export function useApiInfo() {
     handleSelectionChange,
     ruleFormRef,
     groupIdQuery,
-    groupIdOptionList,
 
     handleAdd,
     addVisible,
@@ -241,6 +231,6 @@ export function useApiInfo() {
     handleSetRouter,
     editSetRouterVisible,
     editSetRouterFormData,
-
+    formData
   };
 }

src/views/api/apiInfo/index.vue

@@ -5,10 +5,10 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { provide } from "vue";
+import { provide, ref } from "vue";
 import { useApiInfo } from "./hook";
 import { http } from "@/utils/http";
-import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
+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";
@@ -30,7 +30,6 @@ const {
   handleCurrentChange,
   handleSelectionChange,
   ruleFormRef,
-  groupIdOptionList,
   handleAdd,
   addVisible,
   handleSetVersion,
@@ -43,73 +42,27 @@ const {
   handleSetRouter,
   editSetRouterVisible,
   editSetRouterFormData,
-
+  formData
 } = useApiInfo();
-// 关闭添加
-const closeAddVisible = () => {
-  onSearch(ruleFormRef.value);
-  addVisible.value = false;
-}
-provide('closeAddVisible', closeAddVisible)
-// 关闭修改
-const closeEditSetVersionVisible = () => {
-  onSearch(ruleFormRef.value);
-  editSetVersionVisible.value = false
-}
-provide('closeEditSetVersionVisible', closeEditSetVersionVisible)
-// 关闭修改
-const closeEditUpdateVisible = () => {
-  onSearch(ruleFormRef.value);
-  editUpdateVisible.value = false
-}
-provide('closeEditUpdateVisible', closeEditUpdateVisible)
-// 关闭修改
-const closeEditSetRouterVisible = () => {
-  onSearch(ruleFormRef.value);
-  editSetRouterVisible.value = false
-}
-provide('closeEditSetRouterVisible', closeEditSetRouterVisible)
-
+const formsubmit = (type, val) => {
+  console.log("[ val ] >", val);
+  form.groupId = val.groupId;
+  form.apiName = val.apiName;
+  onSearch();
+};
 </script>
 
 <template lang="pug">
 .main
   div
-    //- 搜索表格组件条件
-    el-form.bg-bg_color.pl-8.pt-4.pr-8(
-      label-position="left"
-      label-width="100px"
-      :inline="true",
-      :model="form",
-      class="w-[99/100]"
-      ref="ruleFormRef"
-      :rules="rules"
-    )
-      el-form-item(label="分组", prop="groupId")
-        el-select(
-          v-model="form.groupId",
-          placeholder="请选择分组",
-          clearable,
-        )
-          el-option(:label="item.groupName", :value="item.id" v-for="(item,index) in groupIdOptionList")
-      el-form-item(label='接口名称' prop="apiName")
-        el-input(v-model='form.apiName' autocomplete='off'
-          placeholder="请输入接口名称")
-
-      el-form-item
-        el-button(
-          type="primary",
-          :icon="useRenderIcon(Search)",
-          :loading="loading",
-          @click="onSearch(ruleFormRef)"
-        ) 查询
+    omega-form(ref="formRef" :formData="formData" labelPosition="left" labelWidth="100px" size="default" @search="formsubmit" formWidth="!w-[230px]")
     //- 表格组件
     PureTableBar(title="api接口", @refresh="onSearch(ruleFormRef)" )
       template(#buttons)
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive
@@ -135,7 +88,7 @@ provide('closeEditSetRouterVisible', closeEditSetRouterVisible)
               @click="handleSetVersion(row)"
               :icon="useRenderIcon(Delete)"
               v-if="hasAuth(['setVersion'])"
-            ) 编辑
+            ) 修改版本号
             el-button.reset-margin(
               link
               type="primary"
@@ -168,10 +121,10 @@ provide('closeEditSetRouterVisible', closeEditSetRouterVisible)
                       v-if="hasAuth(['setRouter'])"
                     ) 设置请求地址
 
-    Add(:addVisible="addVisible")
-    EditSetVersion(:editVisible="editSetVersionVisible" :formData="editSetVersionFormData")
-    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
-    EditSetRouter(:editVisible="editSetRouterVisible" :formData="editSetRouterFormData")
+    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)")
 
                     
 </template>
@@ -204,4 +157,4 @@ provide('closeEditSetRouterVisible', closeEditSetRouterVisible)
 :deep(.el-descriptions__header) {
   margin: 16px 0 !important;
 }
-</style>
+</style>

src/views/app/appBottomNavs/index.vue

@@ -87,7 +87,7 @@ provide("closeEditUpdateVisible", closeEditUpdateVisible);
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" ) 同步配置至新版本
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive

src/views/app/appTracking/index.vue

@@ -85,7 +85,7 @@ const {
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" ) 同步配置至新版本
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive

src/views/app/appVersion/index.vue

@@ -87,7 +87,7 @@ provide("closeEditUpdateVisible", closeEditUpdateVisible);
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive

src/views/app/fileUpdateInfo/index.vue

@@ -94,7 +94,7 @@ provide("closeEditUpVersionVisible", closeEditUpVersionVisible);
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdateFile()" v-if="hasAuth(['updateFile'])") 同步文件
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive

src/views/app/pageUpdateInfo/index.vue

@@ -105,7 +105,7 @@ provide("closeEditUpVersionVisible", closeEditUpVersionVisible);
         el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdateTemplate()" v-if="hasAuth(['updateTemplate'])") 同步文件
 
       template(v-slot="{ size, checkList }")
-        pure-table( 
+        omega-table( 
           row-key="id"
           ref="tableRef"
           adaptive