修改弹窗模式调整

src/components/OmageForm/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
- * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-03-24 10:19:53
+ * @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-03-25 18:13:56
  * @Description: kxs files
  * @filePath: 
 -->
@@ -133,9 +133,18 @@ defineExpose(
       :rules="rules"
     >
       <template v-for="(value, key, i) in formData" :key="i">
-        <el-form-item :label="value.label" :prop="key">
+        <el-form-item
+          :label="value.label"
+          :prop="key"
+          v-if="value.isShow !== false"
+        >
           <el-input
-            v-if="value.type === 'input' || value.type === ''"
+            v-if="
+              value.type === 'input' ||
+              value.type === '' ||
+              value.type === null ||
+              value.type === undefined
+            "
             v-model="formState[key]"
             :placeholder="`请输入${value.label}`"
             clearable

src/components/OmeagFormChange/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: Gui
  * @Date: 2023-03-01 19:20:44
- * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-03-24 17:43:19
+ * @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-03-25 16:07:52
  * @Description: kxs files
  * @filePath: 
 -->
@@ -14,9 +14,11 @@ const props = defineProps<{
     type: Object;
     default: () => {};
   };
+  title: string;
   visible: false;
   closeFn: any;
   formsubmit: any;
+  openFunction: any;
 }>();
 // 弹窗是否全屏
 const isFullscreen = ref(false);
@@ -28,9 +30,10 @@ const isFullscreen = ref(false);
       v-model="props.visible"
       width="50%"
       :fullscreen="isFullscreen"
-      title="新增"
+      :title="title || '调整'"
       draggable
       @close="closeFn"
+      @open="openFunction"
     >
       <omega-form
         ref="formRef"

src/components/UploadImg/index.vue

@@ -1,14 +1,15 @@
 <!--
  * @Author: Gui
  * @Date: 2023-05-12 11:36:28
- * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2024-06-20 16:14:29
+ * @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-03-25 18:13:49
  * @Description: kxs files
  * @filePath: 
 -->
 <template lang="pug">
 el-upload(
 ref="uploadRef"
+:class="props.limit && fileList.length >= props.limit ? 'hide' : 'show'"
 v-model:file-list="fileList"
 action="http://oss.kexiaoshuang.com"
 list-type="picture-card"
@@ -18,12 +19,13 @@ list-type="picture-card"
 :on-remove="handleRemove"
 :limit="props.limit"
 )
-  IconifyIconOnline( icon="material-symbols:add-rounded" width="60px" height="60px" style="margin:0 auto;color:#999")
+  IconifyIconOnline( icon="material-symbols:add-rounded" width="60px" height="60px" style="margin:0 auto;color:#999" )
   template(#tip)
-    .el-upload__tip.text-red 最多上传{{props.limit}}张图片
-el-dialog( v-model="dialogVisible" title="图片预览" width="80%" draggable :destroy-on-close="true")
-  div(class="flex justify-center align-middle" )
-    img.preview(w-full :src="dialogImageUrl" alt="Preview Image" style="width:100%;height:100%;")
+    .el-upload__tip.text-red 最多上传{{ props.limit }}张图片
+//- el-dialog( v-model="dialogVisible" title="图片预览" width="80%" draggable :destroy-on-close="true")
+div(class="flex justify-center align-middle dialogImageUrl" v-if='dialogVisible' @click.stop='dialogVisible=false')
+  div(class='imgbox')
+    img.preview(w-full :src="dialogImageUrl" alt="Preview Image" )
 
 el-dialog(v-model="clipPhoto" title="裁剪图片" :destroy-on-close="true" draggable width="30vw")
 
@@ -31,12 +33,12 @@ el-dialog(v-model="clipPhoto" title="裁剪图片" :destroy-on-close="true" drag
     ref="refCropper"
     class="w-[30vw] h-[30vh]"
     :src="selectImg"
-    :options={aspectRatio:aspectRatio}
+    :options={ aspectRatio: aspectRatio }
   )
   template( #footer="")
     .flex
       el-button( @click="clipPhoto = false") 取消 
-      el-button( type="primary" @click="confirmAdd") 确定
+      el-button( type="primary" @click=" confirmAdd ") 确定
 
 </template>
 <script lang="ts" setup>
@@ -46,10 +48,12 @@ import Ossupload from "@/utils/OSSupload";
 import type { UploadProps, UploadUserFile } from "element-plus";
 import { ElMessage } from "element-plus";
 import ReCropper from "@/components/ReCropper";
-
+import { string } from "vue-types";
+const emits = defineEmits(["upok", "removeimg"]);
 type Res = {
   uploadurl?: string; // 上传地址
   url?: string; // 上传地址（+域名）
+  saveurl: string; // 上传URL
 };
 const props = defineProps({
   limit: {
@@ -62,47 +66,27 @@ const props = defineProps({
   },
   callBack: {
     type: Function,
-    default: () => { }
+    default: () => {}
   },
   imgList: {
     type: Object,
     default: []
   },
-
-});
-onMounted(() => {
-  console.log(props.imgList, 12312)
-  if (props.imgList && props.imgList.length > 0) {
-    props.imgList.forEach(item => {
-      fileList.value.push({ name: "1", url: item });
-      UrlList.value.push(item.split(getConfig().UploadUrl + '/')[1]);
-    })
+  image: {
+    type: String,
+    default: ""
   }
-  console.log(fileList.value, 'fileList', UrlList.value)
-})
-// watch(
-//   () => props.imgList,
-//   newValue => {
-//     console.log(newValue)
-//     if (newValue) {
-//       initImg()
-//       newValue.forEach(item => {
-//         fileList.value.push({ name: "1", url: item });
-//         UrlList.value.push(item.split(getConfig().UploadUrl + '/')[1]);
-//       })
-//     } else {
-//       initImg()
-//     }
-//     console.log(fileList.value, 'fileList', UrlList.value)
-//   }
-// );
+});
+onMounted(() => {});
+
 const aspectRatio = ref(1);
 // 文件列表
-const fileList = ref<UploadUserFile[]>([]);
+const fileList: any = ref<UploadUserFile[]>([]);
 // 上传路径列表
 const UrlList = ref<UploadUserFile[]>([]);
 // 图片上传、预览、裁剪
 const dialogImageUrl = ref("");
+const ischange = ref(false);
 // 是否预览
 const dialogVisible = ref(false);
 // 是否裁剪图片
@@ -113,11 +97,40 @@ const selectImg = ref("");
 const cropperImgName = ref("");
 const uploadRef = ref();
 const refCropper = ref();
+//仅监听一张图的有效 仅用于商品新增编辑sku
+watch(
+  () => props.image,
+  (newValue, oldValue) => {
+    console.log(ischange.value);
+    if (ischange.value) {
+      ischange.value = false;
+      return;
+    }
+    if (newValue) {
+      fileList.value = [
+        {
+          name: newValue,
+          url: getConfig().UploadUrl + "/" + newValue,
+          saveurl: newValue
+        }
+      ];
 
+      UrlList.value = [newValue];
+    } else {
+      fileList.value = [];
+      UrlList.value = [];
+    }
+    // console.log('workOrder变化了',newValue,'+',oldValue)
+  },
+  { immediate: true, deep: true }
+);
 const onChange = (file: any) => {
+  console.log(file.raw.type);
   if (
+    file.raw.type == "image/gif" ||
     file.raw.type == "image/webp" ||
     file.raw.type == "image/png" ||
+    file.raw.type == "image/jpg" ||
     file.raw.type == "image/jpeg"
   ) {
     if (file.status == "ready") {
@@ -133,7 +146,7 @@ const onChange = (file: any) => {
     }
   } else {
     ElMessage({
-      message: "仅支持png/jpg/webp 格式的图片文件",
+      message: "仅支持png/jpg/webp/gif/jpeg 格式的图片文件",
       type: "error"
     });
   }
@@ -146,22 +159,37 @@ const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
   dialogVisible.value = true;
 };
 const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
+  console.log(uploadFiles, "-----9999999---");
   fileList.value = uploadFiles;
-  // console.log(uploadFiles, '--删除', uploadFile)
-  let uploadFilesdata = []
+  let uploadFilesdata = [];
   uploadFiles.forEach((item: any) => {
-    uploadFilesdata.push(item.url.split(getConfig().UploadUrl + '/')[1])
-  })
-  UrlList.value = uploadFilesdata
+    uploadFilesdata.push(item.saveurl);
+  });
+  UrlList.value = uploadFilesdata;
+  emits("removeimg"); //方法没细写 只支持单张删除 多张上面的就行 用于商品sku删除
+};
+const initImg = e => {
+  console.log(e, "ttttt");
+  ischange.value = true;
+  if (e) {
+    fileList.value = [];
+    UrlList.value = [];
+    console.log(e);
+    e.split(",").map((item: any) => {
+      UrlList.value.push(item);
+      fileList.value.push({
+        name: item,
+        url: getConfig().UploadUrl + "/" + item,
+        saveurl: item
+      });
+    });
+  } else {
+    fileList.value = [];
+    UrlList.value = [];
+  }
+  console.log(111, getConfig().UploadUrl, fileList.value);
 };
-const initImg = () => {
-
-  fileList.value = []
-  UrlList.value = []
-  // fileList.value.push({ name: cropperImgName.value, url: res.url });
-  // UrlList.value.push(res.uploadurl);
 
-}
 const confirmAdd = (): void => {
   nextTick(() => {
     refCropper.value.cropper.getCroppedCanvas().toBlob(blob => {
@@ -176,11 +204,62 @@ const confirmAdd = (): void => {
 };
 const OssUp = file => {
   Ossupload(file, "KxsAdmin/UploadImg").then((res: Res) => {
-    fileList.value.push({ name: cropperImgName.value, url: res.url });
-    UrlList.value.push(res.uploadurl);
-
-
-    props.callBack(UrlList.value.join(","));
+    console.log(res, "----res------");
+    fileList.value.push({
+      name: cropperImgName.value,
+      url: res.uploadurl,
+      saveurl: "/" + res.saveurl
+    });
+    console.log(cropperImgName.value);
+    UrlList.value.push("/" + res.saveurl);
+    emits("upok", res.saveurl);
+    ischange.value = true;
+    // props.callBack(UrlList.value.join(","));
   });
 };
+defineExpose({
+  initImg,
+  UrlList
+});
 </script>
+<style lang="scss" scoped>
+.hide {
+  position: relative;
+  float: left;
+
+  ::v-deep {
+    .el-upload--picture-card {
+      display: none;
+    }
+
+    .el-upload-list item {
+      border: 0;
+      border-radius: 0;
+      margin: 0 30px 0 0;
+    }
+  }
+}
+
+.dialogImageUrl {
+  position: fixed !important;
+  z-index: 1000;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100vh;
+}
+
+.imgbox {
+  justify-content: center;
+  // align-items: center;
+  display: flex;
+  width: 100%;
+  height: 80vh;
+  overflow: auto;
+}
+</style>

src/utils/importUsed.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: guicheng 1625811865@qq.com
  * @Date: 2024-06-21 11:11:08
- * @LastEditors: guicheng 1625811865@qq.com
- * @LastEditTime: 2025-03-24 17:44:06
+ * @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-03-25 18:53:56
  * @FilePath: /admin-skb/src/utils/importUsed.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -22,6 +22,12 @@ import { type PaginationProps } from "@pureadmin/table";
 import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import omegaFormChange from "@/components/OmeagFormChange/index.vue";
+import {
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
+} from "@/utils/handlePort";
 
 export {
   inject,
@@ -43,5 +49,9 @@ export {
   PaginationProps,
   hasAuth,
   PureTableBar,
-  omegaFormChange
+  omegaFormChange,
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
 };

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

@@ -1,124 +0,0 @@
-<script lang="ts">
-// 声明额外的选项
-export default {
-  name: "Add"
-};
-</script>
-<script setup lang="ts">
-import {
-  onMounted,
-  ref,
-  verification,
-  omegaFormChange
-} from "@/utils/importUsed";
-import { requestSearch, requestAdd } from "@/utils/handlePort";
-onMounted(async () => {
-  groupIdQuery();
-});
-// 组件传参对象
-const props = defineProps<{
-  submit: Function;
-  visible: {
-    type: Boolean;
-    default: false;
-  };
-  width: {
-    type: Number;
-    default: 50;
-  };
-  formData: {
-    id: any;
-    type: any;
-    default: {};
-  };
-  closeFn: any;
-}>();
-
-// 提交函数
-const formsubmit = async data => {
-  requestAdd(
-    {
-      module: "kxsConfigServer",
-      method: "apiInfoadd",
-      params: data
-    },
-    props.closeFn
-  );
-};
-
-//获取分组数据
-const groupIdQuery = async () => {
-  const { status, data }: any = await requestSearch({
-    module: "kxsConfigServer",
-    method: "apiGroupselectList",
-    params: {}
-  });
-  if (status === 1) {
-    formData.value.groupId.options = data.records.map(item => {
-      return { value: item.id, label: item.groupName };
-    });
-  }
-};
-
-const formData = ref({
-  groupId: {
-    label: "分组",
-    type: "select",
-    // 是否多选
-    disposition: { multiple: true },
-    options: [],
-    rules: []
-  },
-  apiName: {
-    label: "接口名称",
-    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: "picker",
-    disposition: {}
-  },
-  apiHost: {
-    label: "接口主机头",
-    rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
-    type: "number",
-    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: {}
-  }
-});
-</script>
-
-<template lang="pug">
-.main
-  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
-</template>

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

@@ -1,112 +0,0 @@
-<script lang="ts">
-// 声明额外的选项
-export default {
-  name: "Edit"
-};
-</script>
-<script setup lang="ts">
-import { requestAdd, requestEdit, requestSearch } from "@/utils/handlePort";
-import {
-  inject,
-  onMounted,
-  reactive,
-  ref,
-  Uploadfile,
-  UploadImg,
-  Editor,
-  useRenderIcon,
-  ElMessage,
-  ElMessageBox,
-  Upload,
-  Close,
-  http,
-  getGroupUrl,
-  RegularVerification,
-  verification,
-  omegaFormChange
-} from "@/utils/importUsed";
-
-const props = defineProps<{
-  visible: {
-    type: Boolean;
-    default: false;
-  };
-  width: {
-    type: Number;
-    default: 50;
-  };
-  columnsData: {
-    id: any;
-    type: any;
-    default: {};
-  };
-  closeFn: any;
-}>();
-
-// 选项卡参数(默认值为列表某项的id)
-const activeId = ref("1");
-// 提交函数
-const submit = async data => {
-  requestEdit(
-    {
-      module: "kxsConfigServer",
-      method: "apiInfosetRouter",
-      params: data
-    },
-    props.closeFn
-  );
-};
-const openVisible = async () => {
-  const { status, data }: any = await requestSearch({
-    module: "kxsConfigServer",
-    method: "apiInfoquery",
-    params: { id: props.columnsData.id }
-  });
-  if (status === 1) {
-    for (const key in formData.value) {
-      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
-        formData.value[key].value = data[key];
-      }
-    }
-  }
-};
-
-// 弹窗是否全屏
-const isFullscreen = ref(false);
-
-const formData = ref({
-  id: {
-    label: "id",
-    value: "",
-    // 是否展示
-    disposition: { isShow: false }
-  },
-  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
-  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
-</template>

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

@@ -1,84 +0,0 @@
-<script lang="ts">
-// 声明额外的选项
-export default {
-  name: "Edit"
-};
-</script>
-<script setup lang="ts">
-import { requestAdd } from "@/utils/handlePort";
-import {
-  inject,
-  onMounted,
-  reactive,
-  ref,
-  Uploadfile,
-  UploadImg,
-  Editor,
-  useRenderIcon,
-  ElMessage,
-  ElMessageBox,
-  Upload,
-  Close,
-  http,
-  getGroupUrl,
-  RegularVerification,
-  verification,
-  omegaFormChange
-} from "@/utils/importUsed";
-
-const props = defineProps<{
-  visible: {
-    type: Boolean;
-    default: false;
-  };
-  width: {
-    type: Number;
-    default: 50;
-  };
-  columnsData: {
-    id: any;
-    type: any;
-    default: {};
-  };
-  closeFn: any;
-}>();
-
-// 提交函数
-const submit = async data => {
-  requestAdd(
-    {
-      module: "kxsConfigServer",
-      method: "apiInfosetVersion",
-      params: data
-    },
-    props.closeFn
-  );
-};
-
-// 获取表单项数据函数
-const openVisible = async () => {
-  //通过表格数据获取参数
-  for (const key in formData.value) {
-    if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
-      formData.value[key].value = props.columnsData[key] || "";
-    }
-  }
-};
-
-// 表单数据
-const formData = ref({
-  version: {
-    label: "版本号",
-    value: "",
-    type: "number",
-    disposition: {},
-    options: [],
-    rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
-  }
-});
-</script>
-
-<template lang="pug">
-.main
-  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
-</template>

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

@@ -1,136 +0,0 @@
-<script lang="ts">
-// 声明额外的选项
-export default {
-  name: "Edit"
-};
-</script>
-<script setup lang="ts">
-import { requestEdit, requestSearch } from "@/utils/handlePort";
-import {
-  inject,
-  onMounted,
-  reactive,
-  ref,
-  Uploadfile,
-  UploadImg,
-  Editor,
-  useRenderIcon,
-  ElMessage,
-  ElMessageBox,
-  Upload,
-  Close,
-  http,
-  getGroupUrl,
-  RegularVerification,
-  verification,
-  omegaFormChange
-} from "@/utils/importUsed";
-onMounted(async () => {
-  groupIdQuery();
-});
-const props = defineProps<{
-  visible: {
-    type: Boolean;
-    default: false;
-  };
-  width: {
-    type: Number;
-    default: 50;
-  };
-  formData: {
-    id: any;
-    type: any;
-    default: {};
-  };
-  closeFn: any;
-}>();
-
-// 提交函数
-const submit = async data => {
-  requestEdit(
-    {
-      module: "kxsConfigServer",
-      method: "apiInfoupdate",
-      params: data
-    },
-    props.closeFn
-  );
-};
-
-//获取分组数据
-const groupIdQuery = async () => {
-  const { status, data }: any = await requestSearch({
-    module: "kxsConfigServer",
-    method: "apiGroupselectList",
-    params: {}
-  });
-  if (status === 1) {
-    formData.value.groupId.options = data.records.map(item => {
-      return { value: item.id, label: item.groupName };
-    });
-  }
-};
-const openVisible = async () => {
-  const { status, data }: any = await requestSearch({
-    module: "kxsConfigServer",
-    method: "apiInfoquery",
-    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];
-      }
-    }
-  }
-};
-
-// 表单数据
-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);
-</script>
-
-<template lang="pug">
-.main
-  omega-form-change(:formData="formData" :visible="visible" :closeFn="closeFn" :formsubmit="formsubmit")
-</template>

src/views/api/apiInfo/hook.tsx

@@ -201,36 +201,7 @@ export function useApiInfo() {
     );
   }
 
-  // 新增
-  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({});
-  function handleUpdate(row) {
-    editUpdateVisible.value = true;
-    // 表格数据赋值
-    editUpdateFormData.value = row;
-  }
-  // 设置请求地址
-  const editSetRouterVisible = ref(false);
-  const editSetRouterFormData = ref({});
-  function handleSetRouter(row) {
-    editSetRouterVisible.value = true;
-    // 表格数据赋值
-    editSetRouterFormData.value = row;
-  }
 
   return {
     form,
@@ -244,18 +215,7 @@ export function useApiInfo() {
     handleSelectionChange,
     ruleFormRef,
     groupIdQuery,
-    handleAdd,
-    addVisible,
-    handleSetVersion,
-    editSetVersionVisible,
-    editSetVersionFormData,
     handleDelete,
-    handleUpdate,
-    editUpdateVisible,
-    editUpdateFormData,
-    handleSetRouter,
-    editSetRouterVisible,
-    editSetRouterFormData,
     formData
   };
 }

src/views/api/apiInfo/index.vue

@@ -8,16 +8,21 @@ export default {
 import { provide, ref } from "vue";
 import { useApiInfo } from "./hook";
 import { http } from "@/utils/http";
-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 {
+  useRenderIcon,
+  hasAuth,
+  PureTableBar,
+  omegaFormChange
+} from "@/utils/importUsed";
 import Search from "@iconify-icons/ep/search";
 import Addicon from "@iconify-icons/ep/document-add";
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import More from "@iconify-icons/ep/more-filled";
+import add from "./option/add";
+import setRouter from "./option/setRouter";
+import setVersion from "./option/setVersion";
+import upload from "./option/upload";
 
 const {
   form,
@@ -30,25 +35,32 @@ const {
   handleCurrentChange,
   handleSelectionChange,
   ruleFormRef,
-  handleAdd,
-  addVisible,
-  handleSetVersion,
-  editSetVersionVisible,
-  editSetVersionFormData,
   handleDelete,
-  handleUpdate,
-  editUpdateVisible,
-  editUpdateFormData,
-  handleSetRouter,
-  editSetRouterVisible,
-  editSetRouterFormData,
   formData
 } = useApiInfo();
-const formsubmit = (type, val) => {
-  form.groupId = val.groupId;
-  form.apiName = val.apiName;
-  onSearch();
-};
+const { addFormData, addFormsubmit, handleAdd, addVisible, addOpenFunction } =
+  add();
+const {
+  setRouterFormData,
+  setRouterVisible,
+  setRouterFormsubmit,
+  handleSetRouter,
+  setRouterOpenFunction
+} = setRouter();
+const {
+  setVersionFormData,
+  setVersionFormsubmit,
+  setVersionVisible,
+  handleSetVersion,
+  setVersionOpenFunction
+} = setVersion();
+const {
+  updateFormData,
+  updateFormsubmit,
+  updateVisible,
+  handleUpdate,
+  updateOpenFunction
+} = upload();
 </script>
 
 <template lang="pug">
@@ -119,11 +131,15 @@ const formsubmit = (type, val) => {
                       :icon="useRenderIcon(EditPen)"
                       v-if="hasAuth(['setRouter'])"
                     ) 设置请求地址
-    //- 操作组件
-    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)")
+    //- formData:表单数据 ｜ visible:是否显示当前组件 ｜ formsubmit:提交函数回调 ｜ closeFn:关闭函数 ｜ openFunction:弹出组件方法
+    //-新增
+    omega-form-change(:formData="addFormData" :visible="addVisible" :formsubmit="addFormsubmit" :closeFn="()=>(addVisible = false)" :openFunction="addOpenFunction")
+    //-routerEdit
+    omega-form-change(:formData="setRouterFormData" :visible="setRouterVisible" :formsubmit="setRouterFormsubmit" :closeFn="()=>(setRouterVisible = false)" :openFunction="setRouterOpenFunction")
+    //-versioEdit
+    omega-form-change(:formData="setVersionFormData" :visible="setVersionVisible" :formsubmit="setVersionFormsubmit" :closeFn="()=>(setVersionVisible = false)" :openFunction="setVersionOpenFunction")
+    //-updateEdit
+    omega-form-change(:formData="updateFormData" :visible="updateVisible" :formsubmit="updateFormsubmit" :closeFn="()=>(updateVisible = false)" :openFunction="updateOpenFunction")
 
                     
 </template>

src/views/api/apiInfo/option/add.ts

@@ -0,0 +1,108 @@
+import {
+  ref,
+  verification,
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
+} from "@/utils/importUsed";
+
+import { useApiInfo } from "../hook";
+const { onSearch } = useApiInfo();
+export default function add() {
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  }
+  const closeFn = () => (addVisible.value = false);
+
+  // 提交函数
+  const addFormsubmit = async data => {
+    requestAdd(
+      {
+        module: "kxsConfigServer",
+        method: "apiInfoadd",
+        params: data
+      },
+      () => {
+        closeFn();
+        onSearch();
+      }
+    );
+  };
+
+  //获取分组数据
+  const addOpenFunction = async () => {
+    const { status, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiGroupselectList",
+      params: {}
+    });
+    if (status === 1) {
+      addFormData.value.groupId.options = data.records.map(item => {
+        return { value: item.id, label: item.groupName };
+      });
+    }
+  };
+
+  const addFormData = ref({
+    groupId: {
+      label: "分组",
+      type: "select",
+      // 是否多选
+      disposition: { multiple: true },
+      options: [],
+      rules: []
+    },
+    apiName: {
+      label: "接口名称",
+      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: "picker",
+      disposition: {}
+    },
+    apiHost: {
+      label: "接口主机头",
+      value: 100,
+      rules: [{ required: true, message: "请输入接口主机头", trigger: "blur" }],
+      type: "number",
+      disposition: {}
+    },
+    apiPort: {
+      label: "接口主机头",
+      value: 10,
+      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: {}
+    }
+  });
+  return { addFormData, addFormsubmit, addVisible, handleAdd, addOpenFunction };
+}

src/views/api/apiInfo/option/setRouter.ts

@@ -0,0 +1,93 @@
+import {
+  ref,
+  verification,
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
+} from "@/utils/importUsed";
+
+import { useApiInfo } from "../hook";
+const { onSearch } = useApiInfo();
+export default function add() {
+  // 设置请求地址
+  const setRouterVisible = ref(false);
+  const setRouterColumns: any = ref({});
+  function handleSetRouter(row) {
+    setRouterVisible.value = true;
+    // 表格数据赋值
+    setRouterColumns.value = row;
+  }
+  const closeFn = () => (setRouterVisible.value = false);
+
+  // 提交函数
+  const setRouterFormsubmit = async data => {
+    requestEdit(
+      {
+        module: "kxsConfigServer",
+        method: "apiInfosetRouter",
+        params: data
+      },
+
+      () => {
+        closeFn();
+        onSearch();
+      }
+    );
+  };
+  const setRouterOpenFunction = async () => {
+    const { status, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiInfoquery",
+      params: { id: setRouterColumns.value.id }
+    });
+    if (status === 1) {
+      for (const key in setRouterFormData.value) {
+        if (
+          Object.prototype.hasOwnProperty.call(setRouterFormData.value, key)
+        ) {
+          setRouterFormData.value[key].value = data[key];
+        }
+      }
+    }
+  };
+
+  const setRouterFormData = ref({
+    id: {
+      label: "id",
+      value: "",
+      type: "",
+      // 是否展示
+      isShow: false
+    },
+    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" }]
+    }
+  });
+  return {
+    setRouterFormData,
+    setRouterVisible,
+    handleSetRouter,
+    setRouterFormsubmit,
+    setRouterOpenFunction
+  };
+}

src/views/api/apiInfo/option/setVersion.ts

@@ -0,0 +1,67 @@
+import {
+  ref,
+  verification,
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
+} from "@/utils/importUsed";
+
+import { useApiInfo } from "../hook";
+const { onSearch } = useApiInfo();
+export default function setVersion() {
+  // 设置版本号
+  const setVersionVisible = ref(false);
+  const setVersionColumns = ref({});
+  function handleSetVersion(row) {
+    setVersionVisible.value = true;
+    // 表格数据赋值
+    setVersionColumns.value = row;
+  }
+  const closeFn = () => (setVersionVisible.value = false);
+
+  /// 提交函数
+  const setVersionFormsubmit = async data => {
+    requestAdd(
+      {
+        module: "kxsConfigServer",
+        method: "apiInfosetVersion",
+        params: data
+      },
+
+      () => {
+        closeFn();
+        onSearch();
+      }
+    );
+  };
+
+  // 获取表单项数据函数
+  const setVersionOpenFunction = async () => {
+    //通过表格数据获取参数
+    for (const key in setVersionFormData.value) {
+      if (Object.prototype.hasOwnProperty.call(setVersionFormData.value, key)) {
+        setVersionFormData.value[key].value = setVersionColumns[key] || "";
+      }
+    }
+  };
+
+  // 表单数据
+  const setVersionFormData = ref({
+    version: {
+      label: "版本号",
+      value: "",
+      type: "number",
+      disposition: {},
+      options: [],
+      rules: [{ required: true, message: "请输入接口名称", trigger: "blur" }]
+    }
+  });
+  return {
+    setVersionFormData,
+    setVersionFormsubmit,
+    setVersionVisible,
+    handleSetVersion,
+    setVersionOpenFunction
+  };
+}

src/views/api/apiInfo/option/upload.ts

@@ -0,0 +1,114 @@
+import {
+  ref,
+  verification,
+  requestSearch,
+  requestAdd,
+  requestDelete,
+  requestEdit
+} from "@/utils/importUsed";
+
+import { useApiInfo } from "../hook";
+const { onSearch } = useApiInfo();
+export default function setVersion() {
+  // 修改
+  const updateVisible = ref(false);
+  const updateColumns: any = ref({});
+  function handleUpdate(row) {
+    updateVisible.value = true;
+    // 表格数据赋值
+    updateColumns.value = row;
+  }
+  const closeFn = () => (updateVisible.value = false);
+  // 提交函数
+  const updateFormsubmit = async data => {
+    requestEdit(
+      {
+        module: "kxsConfigServer",
+        method: "apiInfoupdate",
+        params: data
+      },
+
+      () => {
+        closeFn();
+        onSearch();
+      }
+    );
+  };
+
+  //获取分组数据
+  const groupIdQuery = async () => {
+    const { status, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiGroupselectList",
+      params: {}
+    });
+    if (status === 1) {
+      updateFormData.value.groupId.options = data.records.map(item => {
+        return { value: item.id, label: item.groupName };
+      });
+    }
+  };
+  const updateOpenFunction = async () => {
+    groupIdQuery();
+    const { status, data }: any = await requestSearch({
+      module: "kxsConfigServer",
+      method: "apiInfoquery",
+      params: { id: updateColumns.value.id }
+    });
+    if (status === 1) {
+      for (const key in updateFormData.value) {
+        if (Object.prototype.hasOwnProperty.call(updateFormData.value, key)) {
+          updateFormData.value[key].value = data[key];
+        }
+      }
+    }
+  };
+
+  // 表单数据
+  const updateFormData = 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: {}
+    }
+  });
+  return {
+    updateFormData,
+    updateFormsubmit,
+    updateVisible,
+    handleUpdate,
+    updateOpenFunction
+  };
+}