同步新文件

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

@@ -0,0 +1,203 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  groupName: "", //名称
+  groupRemark: "", //说明
+  groupVersion: "", //版本号
+  groupKind: "", //类型
+
+});
+// 表单实例
+const ruleFormRef = ref()
+
+// 传参选项数据
+// 类型选项数据
+const groupKindOptionList = [
+]
+
+// 选项卡参数(默认值为列表某项的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.apiadd.method,
+        url: UrlList.kxsConfigServer.apiadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                groupName: "", //名称
+      groupRemark: "", //说明
+      groupVersion: "", //版本号
+      groupKind: "", //类型
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  groupName: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+  groupVersion: [
+    { required: true, message: '请输入版本号', trigger: 'blur' },
+  ],
+  groupKind: [
+    { required: true, message: '请输入类型', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+    groupKind: "", //类型
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="groupName")
+        el-input(v-model='UpdateForm.groupName' autocomplete='off'
+          placeholder="请输入名称")
+      el-form-item(label='说明' prop="groupRemark")
+        el-input(v-model='UpdateForm.groupRemark' autocomplete='off'
+          placeholder="请输入说明")
+      el-form-item(label='版本号' prop="groupVersion")
+        el-input(v-model='UpdateForm.groupVersion' autocomplete='off'
+          placeholder="请输入版本号")
+      el-form-item(label="类型", prop="groupKind")
+        el-select(
+          v-model="UpdateForm.groupKind",
+          placeholder="请选择类型",
+          clearable,
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in groupKindOptionList")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,213 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  groupName: "", //名称
+  groupRemark: "", //说明
+  groupVersion: "", //版本号
+  groupKind: "", //类型
+
+});
+// 类型选项数据
+const groupKindOptionList = [
+]
+
+// 表单实例
+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.apiupdate.method,
+        url: UrlList.kxsConfigServer.apiupdate.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                groupName: "", //名称
+      groupRemark: "", //说明
+      groupVersion: "", //版本号
+      groupKind: "", //类型
+
+        };
+        // 关闭修改弹窗;
+        closeUpdateVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  groupName: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+  groupVersion: [
+    { required: true, message: '请输入版本号', trigger: 'blur' },
+  ],
+  groupKind: [
+    { required: true, message: '请输入类型', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpdateVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiquery.method, url: UrlList.kxsConfigServer.apiquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeUpdateVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+    groupKind: "", //类型
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="groupName")
+        el-input(v-model='UpdateForm.groupName' autocomplete='off'
+          placeholder="请输入名称")
+      el-form-item(label='说明' prop="groupRemark")
+        el-input(v-model='UpdateForm.groupRemark' autocomplete='off'
+          placeholder="请输入说明")
+      el-form-item(label='版本号' prop="groupVersion")
+        el-input(v-model='UpdateForm.groupVersion' autocomplete='off'
+          placeholder="请输入版本号")
+      el-form-item(label="类型", prop="groupKind")
+        el-select(
+          v-model="UpdateForm.groupKind",
+          placeholder="请选择类型",
+          clearable,
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in groupKindOptionList")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpdateVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/api/apiGroup/hook.tsx

@@ -0,0 +1,171 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useApiGroup() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  groupName:"", //名称
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "名称",
+      prop: "groupName",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.apilist.method,
+          url: UrlList.kxsConfigServer.apilist.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"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该api接口分组? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apidelete.method, url: UrlList.kxsConfigServer.apidelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  function handleUpdate(row) {
+    editUpdateVisible.value = true;
+    // 表格数据赋值
+    editUpdateFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleDelete,
+
+  };
+}

src/views/api/apiGroup/index.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "ApiGroup"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useApiGroup } from "./hook";
+import { http } from "@/utils/http";
+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";
+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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleDelete,
+
+} = useApiGroup();
+// 关闭添加
+const closeAddVisible = () => {
+  onSearch(ruleFormRef.value);
+  addVisible.value = false;
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditUpdateVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdateVisible.value = false
+}
+provide('closeEditUpdateVisible', closeEditUpdateVisible)
+
+</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="groupName")
+        el-input(v-model='form.groupName' autocomplete='off'
+          placeholder="请输入名称")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+
+    Add(:addVisible="addVisible")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+
+                    
+</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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

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

@@ -0,0 +1,234 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+  groupIdQuery();
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+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.apiadd.method,
+        url: UrlList.kxsConfigServer.apiadd.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 groupIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+  if (status === 1) {
+    groupIdOptionList.value = data.records;
+  }
+};
+
+
+
+// 表单校验规则
+const rules = reactive({
+  apiName: [
+    { required: true, message: '请输入接口名称', trigger: 'blur' },
+  ],
+  apiKey: [
+    { required: true, message: '请输入接口关键字', trigger: 'blur' },
+  ],
+  apiHost: [
+    { required: true, message: '请输入接口主机头', trigger: 'blur' },
+  ],
+  apiPort: [
+    { required: true, message: '请输入接口端口号', trigger: 'blur' },
+  ],
+  apiRouter: [
+    { required: true, message: '请输入接口路由', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        groupId: "", //分组
+    apiName: "", //接口名称
+    apiKey: "", //接口关键字
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+    apiMethod: "", //接口请求方式
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="请输入接口请求方式")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,200 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  apiHost: "", //接口主机头
+  apiPort: "", //接口端口号
+  apiRouter: "", //接口路由
+
+});
+
+// 表单实例
+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.apisetRouter.method,
+        url: UrlList.kxsConfigServer.apisetRouter.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 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.apiquery.method, url: UrlList.kxsConfigServer.apiquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeSetRouterVisible = () => {
+  UpdateForm.value = {
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</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="请输入接口路由")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeSetRouterVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,179 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  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.apisetVersion.method,
+        url: UrlList.kxsConfigServer.apisetVersion.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 rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditSetVersionVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiquery.method, url: UrlList.kxsConfigServer.apiquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeSetVersionVisible = () => {
+  UpdateForm.value = {
+    version: "", //版本号
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="请输入版本号")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeSetVersionVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,244 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+  groupIdQuery();
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+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.apiupdate.method,
+        url: UrlList.kxsConfigServer.apiupdate.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 groupIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+  if (status === 1) {
+    groupIdOptionList.value = data.records;
+  }
+};
+
+
+
+// 表单校验规则
+const rules = reactive({
+  apiName: [
+    { required: true, message: '请输入接口名称', trigger: 'blur' },
+  ],
+  apiKey: [
+    { required: true, message: '请输入接口关键字', trigger: 'blur' },
+  ],
+  apiHost: [
+    { required: true, message: '请输入接口主机头', trigger: 'blur' },
+  ],
+  apiPort: [
+    { required: true, message: '请输入接口端口号', trigger: 'blur' },
+  ],
+  apiRouter: [
+    { required: true, message: '请输入接口路由', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpdateVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiquery.method, url: UrlList.kxsConfigServer.apiquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeUpdateVisible = () => {
+  UpdateForm.value = {
+    groupId: "", //分组
+    apiName: "", //接口名称
+    apiKey: "", //接口关键字
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+    apiMethod: "", //接口请求方式
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="请输入接口请求方式")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpdateVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/api/apiInfo/hook.tsx

@@ -0,0 +1,221 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useApiInfo() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+    groupIdQuery();
+
+  });
+  let form = reactive({
+  groupId:"", //分组
+  apiName:"", //接口名称
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "分组名称",
+      prop: "apiGroupInfo.groupName",
+      minWidth: 200
+    },
+    {
+      label: "分组说明",
+      prop: "apiGroupInfo.groupRemark",
+      minWidth: 200
+    },
+    {
+      label: "分组版本号",
+      prop: "apiGroupInfo.groupVersion",
+      minWidth: 200
+    },
+    {
+      label: "接口名称",
+      prop: "apiName",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.apilist.method,
+          url: UrlList.kxsConfigServer.apilist.url,
+          params: {
+            ...form,
+            pageSize: pagination.pageSize,
+            pageNum: pagination.currentPage
+          }
+        });
+        dataList.value = data.records;
+        pagination.total = data.total;
+        setTimeout(() => {
+          loading.value = false;
+        }, 500);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整信息",
+          type: "error"
+        });
+      }
+    })
+  }
+    // 分组选项数据
+    const groupIdOptionList = ref([]);
+  //获取分组数据
+  async function groupIdQuery() {
+    const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.apiGroupselectList.method, url: UrlList.kxsConfigServer.apiGroupselectList.url, params: { } });
+    if (status === 1) {
+      groupIdOptionList.value = data.records;
+    }
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该api接口? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.apidelete.method, url: UrlList.kxsConfigServer.apidelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 设置版本号
+  const editSetVersionVisible = ref(false);
+  const editSetVersionFormData = ref({});
+  function handleSetVersion(row) {
+    editSetVersionVisible.value = true;
+    // 表格数据赋值
+    editSetVersionFormData.value = row;
+  };
+  // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  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,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+    groupIdQuery,
+    groupIdOptionList,
+
+    handleAdd,
+    addVisible,
+    handleSetVersion,
+    editSetVersionVisible,
+    editSetVersionFormData,
+    handleDelete,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleSetRouter,
+    editSetRouterVisible,
+    editSetRouterFormData,
+
+  };
+}

src/views/api/apiInfo/index.vue

@@ -0,0 +1,207 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "ApiInfo"
+};
+</script>
+<script setup lang="ts">
+import { provide } 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 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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  groupIdOptionList,
+  handleAdd,
+  addVisible,
+  handleSetVersion,
+  editSetVersionVisible,
+  editSetVersionFormData,
+  handleDelete,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleSetRouter,
+  editSetRouterVisible,
+  editSetRouterFormData,
+
+} = 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)
+
+</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)"
+        ) 查询
+    //- 表格组件
+    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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleSetVersion(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['setVersion'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(row)"
+                      :icon="useRenderIcon(EditPen)"
+                      v-if="hasAuth(['update'])"
+                    ) 修改
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleSetRouter(row)"
+                      :icon="useRenderIcon(EditPen)"
+                      v-if="hasAuth(['setRouter'])"
+                    ) 设置请求地址
+
+    Add(:addVisible="addVisible")
+    EditSetVersion(:editVisible="editSetVersionVisible" :formData="editSetVersionFormData")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+    EditSetRouter(:editVisible="editSetRouterVisible" :formData="editSetRouterFormData")
+
+                    
+</template>
+
+<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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/app/appBottomNavs/components/add/index.vue

@@ -0,0 +1,307 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  title: "", //标题
+  selectIcon: "", //选中图标
+  normalIcon: "", //未选中图标
+  selectTextColor: "", //选中文字颜色
+  normalTextColor: "", //未选中文字颜色
+  pageName: "", //关联页面文件
+  noPageHint: "", //空页面提示信息
+  backgroudColor: "", //背景色
+  style: "", //按钮样式
+  scrollerAnimationImages: "", //滚动图片
+  pagPath: "", //PAG文件
+  showTitle: "", //是否显示标题
+  pagLocalPath: "", //pag文件路径
+  pagDefaultIcon: "", //pag默认图标
+  iconSize: "", //图标尺寸
+  statusBarColor: "", //状态栏底色
+
+});
+// 表单实例
+const ruleFormRef = ref()
+
+// 传参选项数据
+// 按钮样式选项数据
+const styleOptionList = [
+]
+
+// 选项卡参数(默认值为列表某项的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.appadd.method,
+        url: UrlList.kxsConfigServer.appadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                title: "", //标题
+      selectIcon: "", //选中图标
+      normalIcon: "", //未选中图标
+      selectTextColor: "", //选中文字颜色
+      normalTextColor: "", //未选中文字颜色
+      pageName: "", //关联页面文件
+      noPageHint: "", //空页面提示信息
+      backgroudColor: "", //背景色
+      style: "", //按钮样式
+      scrollerAnimationImages: "", //滚动图片
+      pagPath: "", //PAG文件
+      showTitle: "", //是否显示标题
+      pagLocalPath: "", //pag文件路径
+      pagDefaultIcon: "", //pag默认图标
+      iconSize: "", //图标尺寸
+      statusBarColor: "", //状态栏底色
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+// 上传选中图标回调
+const select_iconCallBack = (url) => {
+  ElMessage({
+    message: `选中图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.select_icon = url;
+}
+// 上传未选中图标回调
+const normal_iconCallBack = (url) => {
+  ElMessage({
+    message: `未选中图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.normal_icon = url;
+}
+// 上传PAG文件回调
+const pag_pathCallBack = (url) => {
+  ElMessage({
+    message: `PAG文件上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_path = url;
+}
+// 上传pag文件路径回调
+const pag_local_pathCallBack = (url) => {
+  ElMessage({
+    message: `pag文件路径上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_local_path = url;
+}
+// 上传pag默认图标回调
+const pag_default_iconCallBack = (url) => {
+  ElMessage({
+    message: `pag默认图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_default_icon = url;
+}
+
+// 表单校验规则
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        title: "", //标题
+    selectIcon: "", //选中图标
+    normalIcon: "", //未选中图标
+    selectTextColor: "", //选中文字颜色
+    normalTextColor: "", //未选中文字颜色
+    pageName: "", //关联页面文件
+    noPageHint: "", //空页面提示信息
+    backgroudColor: "", //背景色
+    style: "", //按钮样式
+    scrollerAnimationImages: "", //滚动图片
+    pagPath: "", //PAG文件
+    showTitle: "", //是否显示标题
+    pagLocalPath: "", //pag文件路径
+    pagDefaultIcon: "", //pag默认图标
+    iconSize: "", //图标尺寸
+    statusBarColor: "", //状态栏底色
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="基本资料" name="1")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='标题' prop="title")
+            el-input(v-model='UpdateForm.title' autocomplete='off'
+              placeholder="请输入标题")
+          el-form-item(label='选中图标' prop="selectIcon")
+            UploadImg(:cropper="true" :callBack="selectIconCallBack")
+          el-form-item(label='未选中图标' prop="normalIcon")
+            UploadImg(:cropper="true" :callBack="normalIconCallBack")
+          el-form-item(label='选中文字颜色' prop="selectTextColor")
+            el-input(v-model='UpdateForm.selectTextColor' autocomplete='off'
+              placeholder="请输入选中文字颜色")
+          el-form-item(label='未选中文字颜色' prop="normalTextColor")
+            el-input(v-model='UpdateForm.normalTextColor' autocomplete='off'
+              placeholder="请输入未选中文字颜色")
+          el-form-item(label='关联页面文件' prop="pageName")
+            el-input(v-model='UpdateForm.pageName' autocomplete='off'
+              placeholder="请输入关联页面文件")
+          el-form-item(label='空页面提示信息' prop="noPageHint")
+            el-input(v-model='UpdateForm.noPageHint' autocomplete='off'
+              placeholder="请输入空页面提示信息")
+          el-form-item(label='背景色' prop="backgroudColor")
+            el-input(v-model='UpdateForm.backgroudColor' autocomplete='off'
+              placeholder="请输入背景色")
+          el-form-item(label="按钮样式", prop="style")
+            el-select(
+              v-model="UpdateForm.style",
+              placeholder="请选择按钮样式",
+              clearable,
+            )
+              el-option(:label="item.label", :value="item.id" v-for="(item,index) in styleOptionList")
+          el-form-item(label='PAG文件' prop="pagPath")
+            el-input(v-model='UpdateForm.pagPath' autocomplete='off' class="!w-[230px]" disabled)
+            Uploadfile(btntext="上传文件" :FilePath="pagPathCallBack")
+      el-tab-pane(label="基本信息" name="2")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='是否显示标题' prop="showTitle")
+            el-switch(v-model="UpdateForm.showTitle")
+          el-form-item(label='pag文件路径' prop="pagLocalPath")
+            el-input(v-model='UpdateForm.pagLocalPath' autocomplete='off' class="!w-[230px]" disabled)
+            Uploadfile(btntext="上传文件" :FilePath="pagLocalPathCallBack")
+          el-form-item(label='pag默认图标' prop="pagDefaultIcon")
+            UploadImg(:cropper="true" :callBack="pagDefaultIconCallBack")
+          el-form-item(label='图标尺寸' prop="iconSize")
+            el-input-number(v-model='UpdateForm.iconSize' :min="1" :max="1000"
+              placeholder="请输入图标尺寸")
+          el-form-item(label='状态栏底色' prop="statusBarColor")
+            el-input(v-model='UpdateForm.statusBarColor' autocomplete='off'
+              placeholder="请输入状态栏底色")
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/appBottomNavs/components/update/index.vue

@@ -0,0 +1,316 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  title: "", //标题
+  selectIcon: "", //选中图标
+  normalIcon: "", //未选中图标
+  selectTextColor: "", //选中文字颜色
+  normalTextColor: "", //未选中文字颜色
+  pageName: "", //关联页面文件
+  noPageHint: "", //空页面提示信息
+  backgroudColor: "", //背景色
+  style: "", //按钮样式
+  scrollerAnimationImages: "", //滚动图片
+  pagPath: "", //PAG文件
+  showTitle: "", //是否显示标题
+  pagLocalPath: "", //pag文件路径
+  pagDefaultIcon: "", //pag默认图标
+  iconSize: "", //图标尺寸
+  statusBarColor: "", //状态栏底色
+
+});
+// 按钮样式选项数据
+const styleOptionList = [
+]
+
+// 表单实例
+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.appupdate.method,
+        url: UrlList.kxsConfigServer.appupdate.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                title: "", //标题
+      selectIcon: "", //选中图标
+      normalIcon: "", //未选中图标
+      selectTextColor: "", //选中文字颜色
+      normalTextColor: "", //未选中文字颜色
+      pageName: "", //关联页面文件
+      noPageHint: "", //空页面提示信息
+      backgroudColor: "", //背景色
+      style: "", //按钮样式
+      scrollerAnimationImages: "", //滚动图片
+      pagPath: "", //PAG文件
+      showTitle: "", //是否显示标题
+      pagLocalPath: "", //pag文件路径
+      pagDefaultIcon: "", //pag默认图标
+      iconSize: "", //图标尺寸
+      statusBarColor: "", //状态栏底色
+
+        };
+        // 关闭修改弹窗;
+        closeUpdateVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+// 上传选中图标回调
+const select_iconCallBack = (url) => {
+  ElMessage({
+    message: `选中图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.select_icon = url;
+}
+// 上传未选中图标回调
+const normal_iconCallBack = (url) => {
+  ElMessage({
+    message: `未选中图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.normal_icon = url;
+}
+// 上传PAG文件回调
+const pag_pathCallBack = (url) => {
+  ElMessage({
+    message: `PAG文件上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_path = url;
+}
+// 上传pag文件路径回调
+const pag_local_pathCallBack = (url) => {
+  ElMessage({
+    message: `pag文件路径上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_local_path = url;
+}
+// 上传pag默认图标回调
+const pag_default_iconCallBack = (url) => {
+  ElMessage({
+    message: `pag默认图标上传成功:${url}`,
+    type: "success"
+  });
+UpdateForm.value.pag_default_icon = url;
+}
+
+// 表单校验规则
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpdateVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.appquery.method, url: UrlList.kxsConfigServer.appquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeUpdateVisible = () => {
+  UpdateForm.value = {
+    title: "", //标题
+    selectIcon: "", //选中图标
+    normalIcon: "", //未选中图标
+    selectTextColor: "", //选中文字颜色
+    normalTextColor: "", //未选中文字颜色
+    pageName: "", //关联页面文件
+    noPageHint: "", //空页面提示信息
+    backgroudColor: "", //背景色
+    style: "", //按钮样式
+    scrollerAnimationImages: "", //滚动图片
+    pagPath: "", //PAG文件
+    showTitle: "", //是否显示标题
+    pagLocalPath: "", //pag文件路径
+    pagDefaultIcon: "", //pag默认图标
+    iconSize: "", //图标尺寸
+    statusBarColor: "", //状态栏底色
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="基本资料" name="1")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='标题' prop="title")
+            el-input(v-model='UpdateForm.title' autocomplete='off'
+              placeholder="请输入标题")
+          el-form-item(label='选中图标' prop="selectIcon")
+            UploadImg(:cropper="true" :callBack="selectIconCallBack")
+          el-form-item(label='未选中图标' prop="normalIcon")
+            UploadImg(:cropper="true" :callBack="normalIconCallBack")
+          el-form-item(label='选中文字颜色' prop="selectTextColor")
+            el-input(v-model='UpdateForm.selectTextColor' autocomplete='off'
+              placeholder="请输入选中文字颜色")
+          el-form-item(label='未选中文字颜色' prop="normalTextColor")
+            el-input(v-model='UpdateForm.normalTextColor' autocomplete='off'
+              placeholder="请输入未选中文字颜色")
+          el-form-item(label='关联页面文件' prop="pageName")
+            el-input(v-model='UpdateForm.pageName' autocomplete='off'
+              placeholder="请输入关联页面文件")
+          el-form-item(label='空页面提示信息' prop="noPageHint")
+            el-input(v-model='UpdateForm.noPageHint' autocomplete='off'
+              placeholder="请输入空页面提示信息")
+          el-form-item(label='背景色' prop="backgroudColor")
+            el-input(v-model='UpdateForm.backgroudColor' autocomplete='off'
+              placeholder="请输入背景色")
+          el-form-item(label="按钮样式", prop="style")
+            el-select(
+              v-model="UpdateForm.style",
+              placeholder="请选择按钮样式",
+              clearable,
+            )
+              el-option(:label="item.label", :value="item.id" v-for="(item,index) in styleOptionList")
+          el-form-item(label='PAG文件' prop="pagPath")
+            el-input(v-model='UpdateForm.pagPath' autocomplete='off' class="!w-[230px]" disabled)
+            Uploadfile(btntext="上传文件" :FilePath="pagPathCallBack")
+      el-tab-pane(label="基本信息" name="2")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='是否显示标题' prop="showTitle")
+            el-switch(v-model="UpdateForm.showTitle")
+          el-form-item(label='pag文件路径' prop="pagLocalPath")
+            el-input(v-model='UpdateForm.pagLocalPath' autocomplete='off' class="!w-[230px]" disabled)
+            Uploadfile(btntext="上传文件" :FilePath="pagLocalPathCallBack")
+          el-form-item(label='pag默认图标' prop="pagDefaultIcon")
+            UploadImg(:cropper="true" :callBack="pagDefaultIconCallBack")
+          el-form-item(label='图标尺寸' prop="iconSize")
+            el-input-number(v-model='UpdateForm.iconSize' :min="1" :max="1000"
+              placeholder="请输入图标尺寸")
+          el-form-item(label='状态栏底色' prop="statusBarColor")
+            el-input(v-model='UpdateForm.statusBarColor' autocomplete='off'
+              placeholder="请输入状态栏底色")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpdateVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/appBottomNavs/hook.tsx

@@ -0,0 +1,171 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useAppBottomNavs() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  kind:"", //分类
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "分类",
+      prop: "kind",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.applist.method,
+          url: UrlList.kxsConfigServer.applist.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"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该app底部导航? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.appdelete.method, url: UrlList.kxsConfigServer.appdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  function handleUpdate(row) {
+    editUpdateVisible.value = true;
+    // 表格数据赋值
+    editUpdateFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleDelete,
+
+  };
+}

src/views/app/appBottomNavs/index.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "AppBottomNavs"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useAppBottomNavs } from "./hook";
+import { http } from "@/utils/http";
+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";
+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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleDelete,
+
+} = useAppBottomNavs();
+// 关闭添加
+const closeAddVisible = () => {
+  onSearch(ruleFormRef.value);
+  addVisible.value = false;
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditUpdateVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdateVisible.value = false
+}
+provide('closeEditUpdateVisible', closeEditUpdateVisible)
+
+</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="kind")
+        el-input(v-model='form.kind' autocomplete='off'
+          placeholder="请输入分类")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="app底部导航", @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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+
+    Add(:addVisible="addVisible")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+
+                    
+</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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/app/appVersion/components/add/index.vue

@@ -0,0 +1,210 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  terminalKind: "", //终端类型
+  versionNum: "", //版本号
+  title: "", //标题
+  info: "", //更新信息
+  confirmText: "", //确定按钮文字
+  cancelText: "", //取消按钮文字
+  downloadUrl: "", //更新地址
+
+});
+// 表单实例
+const ruleFormRef = ref()
+
+// 传参选项数据
+// 终端类型选项数据
+const terminalKindOptionList = [
+]
+
+// 选项卡参数(默认值为列表某项的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.appadd.method,
+        url: UrlList.kxsConfigServer.appadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                terminalKind: "", //终端类型
+      versionNum: "", //版本号
+      title: "", //标题
+      info: "", //更新信息
+      confirmText: "", //确定按钮文字
+      cancelText: "", //取消按钮文字
+      downloadUrl: "", //更新地址
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        terminalKind: "", //终端类型
+    versionNum: "", //版本号
+    title: "", //标题
+    info: "", //更新信息
+    confirmText: "", //确定按钮文字
+    cancelText: "", //取消按钮文字
+    downloadUrl: "", //更新地址
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="terminalKind")
+        el-select(
+          v-model="UpdateForm.terminalKind",
+          placeholder="请选择终端类型",
+          clearable,
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in terminalKindOptionList")
+      el-form-item(label='版本号' prop="versionNum")
+        el-input(v-model='UpdateForm.versionNum' autocomplete='off'
+          placeholder="请输入版本号")
+      el-form-item(label='标题' prop="title")
+        el-input(v-model='UpdateForm.title' autocomplete='off'
+          placeholder="请输入标题")
+      el-form-item(label='确定按钮文字' prop="confirmText")
+        el-input(v-model='UpdateForm.confirmText' autocomplete='off'
+          placeholder="请输入确定按钮文字")
+      el-form-item(label='取消按钮文字' prop="cancelText")
+        el-input(v-model='UpdateForm.cancelText' autocomplete='off'
+          placeholder="请输入取消按钮文字")
+      el-form-item(label='更新地址' prop="downloadUrl")
+        el-input(v-model='UpdateForm.downloadUrl' autocomplete='off'
+          placeholder="请输入更新地址")
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/appVersion/components/update/index.vue

@@ -0,0 +1,223 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  terminalKind: "", //终端类型
+  versionNum: "", //版本号
+  title: "", //标题
+  info: "", //更新信息
+  confirmText: "", //确定按钮文字
+  cancelText: "", //取消按钮文字
+  downloadUrl: "", //更新地址
+
+});
+// 终端类型选项数据
+const terminalKindOptionList = [
+]
+
+// 表单实例
+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.appupdate.method,
+        url: UrlList.kxsConfigServer.appupdate.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                terminalKind: "", //终端类型
+      versionNum: "", //版本号
+      title: "", //标题
+      info: "", //更新信息
+      confirmText: "", //确定按钮文字
+      cancelText: "", //取消按钮文字
+      downloadUrl: "", //更新地址
+
+        };
+        // 关闭修改弹窗;
+        closeUpdateVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpdateVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.appquery.method, url: UrlList.kxsConfigServer.appquery.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeUpdateVisible = () => {
+  UpdateForm.value = {
+    terminalKind: "", //终端类型
+    versionNum: "", //版本号
+    title: "", //标题
+    info: "", //更新信息
+    confirmText: "", //确定按钮文字
+    cancelText: "", //取消按钮文字
+    downloadUrl: "", //更新地址
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="基本资料" name="1")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label="终端类型", prop="terminalKind")
+            el-select(
+              v-model="UpdateForm.terminalKind",
+              placeholder="请选择终端类型",
+              clearable,
+            )
+              el-option(:label="item.label", :value="item.id" v-for="(item,index) in terminalKindOptionList")
+          el-form-item(label='版本号' prop="versionNum")
+            el-input(v-model='UpdateForm.versionNum' autocomplete='off'
+              placeholder="请输入版本号")
+          el-form-item(label='标题' prop="title")
+            el-input(v-model='UpdateForm.title' autocomplete='off'
+              placeholder="请输入标题")
+          el-form-item(label='确定按钮文字' prop="confirmText")
+            el-input(v-model='UpdateForm.confirmText' autocomplete='off'
+              placeholder="请输入确定按钮文字")
+          el-form-item(label='取消按钮文字' prop="cancelText")
+            el-input(v-model='UpdateForm.cancelText' autocomplete='off'
+              placeholder="请输入取消按钮文字")
+          el-form-item(label='更新地址' prop="downloadUrl")
+            el-input(v-model='UpdateForm.downloadUrl' autocomplete='off'
+              placeholder="请输入更新地址")
+      el-tab-pane(label="基本信息" name="2")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpdateVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/appVersion/hook.tsx

@@ -0,0 +1,171 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useAppVersion() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  kind:"", //分类
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "分类",
+      prop: "kind",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.applist.method,
+          url: UrlList.kxsConfigServer.applist.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"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该app版本管理? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.appdelete.method, url: UrlList.kxsConfigServer.appdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  function handleUpdate(row) {
+    editUpdateVisible.value = true;
+    // 表格数据赋值
+    editUpdateFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleDelete,
+
+  };
+}

src/views/app/appVersion/index.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "AppVersion"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useAppVersion } from "./hook";
+import { http } from "@/utils/http";
+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";
+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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleDelete,
+
+} = useAppVersion();
+// 关闭添加
+const closeAddVisible = () => {
+  onSearch(ruleFormRef.value);
+  addVisible.value = false;
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditUpdateVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdateVisible.value = false
+}
+provide('closeEditUpdateVisible', closeEditUpdateVisible)
+
+</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="kind")
+        el-input(v-model='form.kind' autocomplete='off'
+          placeholder="请输入分类")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="app版本管理", @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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+
+    Add(:addVisible="addVisible")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+
+                    
+</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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/app/fileUpdateInfo/components/add/index.vue

@@ -0,0 +1,184 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  versionNum: "", //更新版本
+  path: "", //路径
+  fileName: "", //文件名
+
+});
+// 表单实例
+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.appadd.method,
+        url: UrlList.kxsConfigServer.appadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                versionNum: "", //更新版本
+      path: "", //路径
+      fileName: "", //文件名
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  path: [
+    { required: true, message: '请输入路径', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        versionNum: "", //更新版本
+    path: "", //路径
+    fileName: "", //文件名
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+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="versionNum")
+        el-input-number(v-model='UpdateForm.versionNum' :min="1" :max="1000"
+          placeholder="请输入更新版本")
+      el-form-item(label='路径' prop="path")
+        el-input(v-model='UpdateForm.path' autocomplete='off'
+          placeholder="请输入路径")
+      el-form-item(label='文件名' prop="fileName")
+        el-input(v-model='UpdateForm.fileName' autocomplete='off'
+          placeholder="请输入文件名")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/fileUpdateInfo/components/upVersion/index.vue

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

src/views/app/fileUpdateInfo/components/update/index.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+
+});
+
+// 表单实例
+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.app.method,
+        url: UrlList.kxsConfigServer.app.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+          
+        };
+        // 关闭修改弹窗;
+        closeVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.appupdateFile.method, url: UrlList.kxsConfigServer.appupdateFile.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeVisible" @open="openVisible")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/fileUpdateInfo/hook.tsx

@@ -0,0 +1,182 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useFileUpdateInfo() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  kind:"", //分类
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "分类",
+      prop: "kind",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.applist.method,
+          url: UrlList.kxsConfigServer.applist.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"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该资源文件更新信息? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.appdelete.method, url: UrlList.kxsConfigServer.appdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  function handleUpdate(row) {
+    editUpdateVisible.value = true;
+    // 表格数据赋值
+    editUpdateFormData.value = row;
+  };
+  // 更新版本号
+  const editUpVersionVisible = ref(false);
+  const editUpVersionFormData = ref({});
+  function handleUpVersion(row) {
+    editUpVersionVisible.value = true;
+    // 表格数据赋值
+    editUpVersionFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleDelete,
+    handleUpVersion,
+    editUpVersionVisible,
+    editUpVersionFormData,
+
+  };
+}

src/views/app/fileUpdateInfo/index.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "FileUpdateInfo"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useFileUpdateInfo } from "./hook";
+import { http } from "@/utils/http";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
+import Add from "./components/add/index.vue";
+import EditUpdate from "./components/update/index.vue";
+import EditUpVersion from "./components/upVersion/index.vue";
+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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleDelete,
+  handleUpVersion,
+  editUpVersionVisible,
+  editUpVersionFormData,
+
+} = useFileUpdateInfo();
+// 关闭添加
+const closeAddVisible = () => {
+  onSearch(ruleFormRef.value);
+  addVisible.value = false;
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditUpdateVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdateVisible.value = false
+}
+provide('closeEditUpdateVisible', closeEditUpdateVisible)
+// 关闭修改
+const closeEditUpVersionVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpVersionVisible.value = false
+}
+provide('closeEditUpVersionVisible', closeEditUpVersionVisible)
+
+</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="kind")
+        el-input(v-model='form.kind' autocomplete='off'
+          placeholder="请输入分类")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="资源文件更新信息", @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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpVersion(row)"
+                      :icon="useRenderIcon(EditPen)"
+                      v-if="hasAuth(['upVersion'])"
+                    ) 更新版本号
+
+    Add(:addVisible="addVisible")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+    EditUpVersion(:editVisible="editUpVersionVisible" :formData="editUpVersionFormData")
+
+                    
+</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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/app/pageUpdateInfo/components/add/index.vue

@@ -0,0 +1,293 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  moduleVersion: "", //模板更新版本
+  modulePath: "", //模板路径
+  backgroudColor: "", //背景色
+  textColor: "", //前景色
+  statusBarStyle: "", //苹果状态栏
+  showTitle: "", //是否显示头部
+  title: "", //顶部标题
+  showScrollBar: "", //是否显示滚动条
+  skidFlag: "", //是否侧滑返回
+  leftBtn1: "", //左侧按钮1
+  leftBtn2: "", //左侧按钮2
+  rightBtn1: "", //右侧按钮1
+  rightBtn2: "", //右侧按钮2
+  leftAction1: "", //左侧按钮1点击事件
+  leftAction2: "", //左侧按钮2点击事件
+  rightAction1: "", //右侧按钮1点击事件
+  rightAction2: "", //右侧按钮2点击事件
+  gotoPages: "", //下级页面
+  mustUpdate: "", //是否强制更新
+
+});
+// 表单实例
+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.appadd.method,
+        url: UrlList.kxsConfigServer.appadd.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                moduleVersion: "", //模板更新版本
+      modulePath: "", //模板路径
+      backgroudColor: "", //背景色
+      textColor: "", //前景色
+      statusBarStyle: "", //苹果状态栏
+      showTitle: "", //是否显示头部
+      title: "", //顶部标题
+      showScrollBar: "", //是否显示滚动条
+      skidFlag: "", //是否侧滑返回
+      leftBtn1: "", //左侧按钮1
+      leftBtn2: "", //左侧按钮2
+      rightBtn1: "", //右侧按钮1
+      rightBtn2: "", //右侧按钮2
+      leftAction1: "", //左侧按钮1点击事件
+      leftAction2: "", //左侧按钮2点击事件
+      rightAction1: "", //右侧按钮1点击事件
+      rightAction2: "", //右侧按钮2点击事件
+      gotoPages: "", //下级页面
+      mustUpdate: "", //是否强制更新
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  moduleVersion: [
+    { required: true, message: '请输入模板更新版本', trigger: 'blur' },
+    { validator: (rule: any, value: any, callback: any) => { verification.verificationInteger(value, callback) }, trigger: 'blur' },
+  ],
+  modulePath: [
+    { required: true, message: '请输入模板路径', trigger: 'blur' },
+  ],
+  rightAction2: [
+    { required: true, message: '请输入右侧按钮2点击事件', trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        moduleVersion: "", //模板更新版本
+    modulePath: "", //模板路径
+    backgroudColor: "", //背景色
+    textColor: "", //前景色
+    statusBarStyle: "", //苹果状态栏
+    showTitle: "", //是否显示头部
+    title: "", //顶部标题
+    showScrollBar: "", //是否显示滚动条
+    skidFlag: "", //是否侧滑返回
+    leftBtn1: "", //左侧按钮1
+    leftBtn2: "", //左侧按钮2
+    rightBtn1: "", //右侧按钮1
+    rightBtn2: "", //右侧按钮2
+    leftAction1: "", //左侧按钮1点击事件
+    leftAction2: "", //左侧按钮2点击事件
+    rightAction1: "", //右侧按钮1点击事件
+    rightAction2: "", //右侧按钮2点击事件
+    gotoPages: "", //下级页面
+    mustUpdate: "", //是否强制更新
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+      el-tab-pane(label="基本信息" name="1")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='模板更新版本' prop="moduleVersion")
+            el-input-number(v-model='UpdateForm.moduleVersion' :min="1" :max="1000"
+              placeholder="请输入模板更新版本")
+          el-form-item(label='模板路径' prop="modulePath")
+            el-input(v-model='UpdateForm.modulePath' autocomplete='off'
+              placeholder="请输入模板路径")
+          el-form-item(label='背景色' prop="backgroudColor")
+            el-input(v-model='UpdateForm.backgroudColor' autocomplete='off'
+              placeholder="请输入背景色")
+          el-form-item(label='前景色' prop="textColor")
+            el-input(v-model='UpdateForm.textColor' autocomplete='off'
+              placeholder="请输入前景色")
+          el-form-item(label="苹果状态栏", prop="statusBarStyle")
+            el-select(
+              v-model="UpdateForm.statusBarStyle",
+              placeholder="请选择苹果状态栏",
+              clearable,
+            )
+              el-option(:label="item.label", :value="item.id" v-for="(item,index) in statusBarStyleOptionList")
+          el-form-item(label='是否显示头部' prop="showTitle")
+            el-switch(v-model="UpdateForm.showTitle")
+          el-form-item(label='顶部标题' prop="title")
+            el-input(v-model='UpdateForm.title' autocomplete='off'
+              placeholder="请输入顶部标题")
+          el-form-item(label='是否显示滚动条' prop="showScrollBar")
+            el-switch(v-model="UpdateForm.showScrollBar")
+          el-form-item(label='是否侧滑返回' prop="skidFlag")
+            el-switch(v-model="UpdateForm.skidFlag")
+          el-form-item(label='左侧按钮1' prop="leftBtn1")
+            el-input(v-model='UpdateForm.leftBtn1' autocomplete='off'
+              placeholder="请输入左侧按钮1")
+          el-form-item(label='左侧按钮2' prop="leftBtn2")
+            el-input(v-model='UpdateForm.leftBtn2' autocomplete='off'
+              placeholder="请输入左侧按钮2")
+          el-form-item(label='右侧按钮1' prop="rightBtn1")
+            el-input(v-model='UpdateForm.rightBtn1' autocomplete='off'
+              placeholder="请输入右侧按钮1")
+          el-form-item(label='右侧按钮2' prop="rightBtn2")
+            el-input(v-model='UpdateForm.rightBtn2' autocomplete='off'
+              placeholder="请输入右侧按钮2")
+          el-form-item(label='左侧按钮1点击事件' prop="leftAction1")
+            el-input(v-model='UpdateForm.leftAction1' autocomplete='off'
+              placeholder="请输入左侧按钮1点击事件")
+          el-form-item(label='左侧按钮2点击事件' prop="leftAction2")
+            el-input(v-model='UpdateForm.leftAction2' autocomplete='off'
+              placeholder="请输入左侧按钮2点击事件")
+          el-form-item(label='右侧按钮1点击事件' prop="rightAction1")
+            el-input(v-model='UpdateForm.rightAction1' autocomplete='off'
+              placeholder="请输入右侧按钮1点击事件")
+          el-form-item(label='右侧按钮2点击事件' prop="rightAction2")
+            el-input(v-model='UpdateForm.rightAction2' autocomplete='off'
+              placeholder="请输入右侧按钮2点击事件")
+      el-tab-pane(label="下级页面" name="2")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label="下级页面", prop="gotoPages")
+            el-transfer(v-model="UpdateForm.gotoPages" :data="gotoPagesOptionList")
+      el-tab-pane(label="基本资料" name="3")
+        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+          el-form-item(label='是否强制更新' prop="mustUpdate")
+            el-switch(v-model="UpdateForm.mustUpdate")
+    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        @click="closeVisible"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/pageUpdateInfo/components/upVersion/index.vue

@@ -0,0 +1,183 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  moduleVersion: "", //模板更新版本
+
+});
+
+// 表单实例
+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.appupVersion.method,
+        url: UrlList.kxsConfigServer.appupVersion.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                moduleVersion: "", //模板更新版本
+
+        };
+        // 关闭修改弹窗;
+        closeUpVersionVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+  moduleVersion: [
+    { required: true, message: '请输入模板更新版本', trigger: 'blur' },
+    { validator: (rule: any, value: any, callback: any) => { verification.verificationInteger(value, callback) }, trigger: 'blur' },
+  ],
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditUpVersionVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.appupdateTemplate.method, url: UrlList.kxsConfigServer.appupdateTemplate.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeUpVersionVisible = () => {
+  UpdateForm.value = {
+    moduleVersion: "", //模板更新版本
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeUpVersionVisible" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label='模板更新版本' prop="moduleVersion")
+        el-input-number(v-model='UpdateForm.moduleVersion' :min="1" :max="1000"
+          placeholder="请输入模板更新版本")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeUpVersionVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/pageUpdateInfo/components/update/index.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsConfigServer"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+
+});
+
+// 表单实例
+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.app.method,
+        url: UrlList.kxsConfigServer.app.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+          
+        };
+        // 关闭修改弹窗;
+        closeVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.appupdateTemplate.method, url: UrlList.kxsConfigServer.appupdateTemplate.url, params: { id: props.formData.id }});
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+
+  };
+  closeFn();
+};
+
+// 弹窗是否全屏
+const isFullscreen = ref(false)
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeVisible" @open="openVisible")
+
+    .flex.justify-end
+      el-button(
+        :icon="useRenderIcon(Close)",
+        :loading="loading",
+        @click="closeVisible()"
+      ) 关闭
+      el-button(
+        type="primary",
+        :icon="useRenderIcon(Upload)",
+        @click="submit(ruleFormRef)"
+      ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

src/views/app/pageUpdateInfo/hook.tsx

@@ -0,0 +1,182 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function usePageUpdateInfo() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsConfigServer"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  kind:"", //分类
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "分类",
+      prop: "kind",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  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.applist.method,
+          url: UrlList.kxsConfigServer.applist.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"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该页面模板更新信息? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.appdelete.method, url: UrlList.kxsConfigServer.appdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef.value);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 修改
+  const editUpdateVisible = ref(false);
+  const editUpdateFormData = ref({});
+  function handleUpdate(row) {
+    editUpdateVisible.value = true;
+    // 表格数据赋值
+    editUpdateFormData.value = row;
+  };
+  // 更新版本号码
+  const editUpVersionVisible = ref(false);
+  const editUpVersionFormData = ref({});
+  function handleUpVersion(row) {
+    editUpVersionVisible.value = true;
+    // 表格数据赋值
+    editUpVersionFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editUpdateVisible,
+    editUpdateFormData,
+    handleDelete,
+    handleUpVersion,
+    editUpVersionVisible,
+    editUpVersionFormData,
+
+  };
+}

src/views/app/pageUpdateInfo/index.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "PageUpdateInfo"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { usePageUpdateInfo } from "./hook";
+import { http } from "@/utils/http";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
+import Add from "./components/add/index.vue";
+import EditUpdate from "./components/update/index.vue";
+import EditUpVersion from "./components/upVersion/index.vue";
+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";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editUpdateVisible,
+  editUpdateFormData,
+  handleDelete,
+  handleUpVersion,
+  editUpVersionVisible,
+  editUpVersionFormData,
+
+} = usePageUpdateInfo();
+// 关闭添加
+const closeAddVisible = () => {
+  onSearch(ruleFormRef.value);
+  addVisible.value = false;
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditUpdateVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpdateVisible.value = false
+}
+provide('closeEditUpdateVisible', closeEditUpdateVisible)
+// 关闭修改
+const closeEditUpVersionVisible = () => {
+  onSearch(ruleFormRef.value);
+  editUpVersionVisible.value = false
+}
+provide('closeEditUpVersionVisible', closeEditUpVersionVisible)
+
+</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="kind")
+        el-input(v-model='form.kind' autocomplete='off'
+          placeholder="请输入分类")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="页面模板更新信息", @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( 
+          row-key="id"
+          ref="tableRef"
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )
+          template(#operation="{ row }")
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['update'])"
+            ) 编辑
+            el-button.reset-margin(
+              link
+              type="primary"
+              size="small"
+              @click="handleDelete(row)"
+              :icon="useRenderIcon(Delete)"
+              v-if="hasAuth(['delete'])"
+            ) 删除
+
+            el-dropdown(trigger="click", :hide-on-click="false")
+              el-button.ml-3(class="mt-[2px]" link type='primary' :size='size' :icon='useRenderIcon(More)')
+              template(#dropdown)
+                el-dropdown-menu
+                  el-dropdown-item
+                    el-button.reset-margin.edit-btn(
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpVersion(row)"
+                      :icon="useRenderIcon(EditPen)"
+                      v-if="hasAuth(['upVersion'])"
+                    ) 更新版本号码
+
+    Add(:addVisible="addVisible")
+    EditUpdate(:editVisible="editUpdateVisible" :formData="editUpdateFormData")
+    EditUpVersion(:editVisible="editUpVersionVisible" :formData="editUpVersionFormData")
+
+                    
+</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;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>