测试

src/router/modules/template.ts

@@ -18,12 +18,30 @@ export default {
   },
   children: [
     {
-      path: "/Template/ApiGroup/index",
-      name: "Template",
-      component: () => import("@/views/Template/ApiGroup/index.vue"),
+      path: "/Template/SysUser/index",
+      name: "SysUser",
+      component: () => import("@/views/Template/SysUser/index.vue"),
       meta: {
         icon: "role",
-        title: 'api分组'
+        title: '用户管理'
+      }
+    },
+    {
+      path: "/Template/SysRole/index",
+      name: "SysRole",
+      component: () => import("@/views/Template/SysRole/index.vue"),
+      meta: {
+        icon: "role",
+        title: '角色管理'
+      }
+    },
+    {
+      path: "/Template/SysMenu/index",
+      name: "SysMenu",
+      component: () => import("@/views/Template/SysMenu/index.vue"),
+      meta: {
+        icon: "role",
+        title: '菜单管理'
       }
     }
   ]

src/utils/getUrl/getUrl.js

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

src/views/Template/ApiGroup/components/add/index.vue

@@ -34,15 +34,21 @@ let UpdateForm = ref({
   groupName: "", //名称
   groupRemark: "", //说明
   groupVersion: "", //版本号
+  groupKind: "", //类型
 
 });
+// 类型选项数据
+const groupKindOptionList = [
+  { Id: '0', label: '客户端' },
+  { Id: '1', label: '后台' },
+]
 
 // 选项卡参数(默认值为列表某项的id)
 const activeId = ref('1')
 // 提交函数
 const submit = async () => {
   const UrlList = await getGroupUrl(['KxsConfigServer']);
-  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiGroupadd.method, url: UrlList.KxsConfigServer.ApiGroupadd.url, params: UpdateForm.value });
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiGroupadd.method, url: UrlList.KxsConfigServer.ApiGroupadd.url, params: UpdateForm.value});
   if (status === 1) {
     ElMessage({
       message: "新增成功",
@@ -52,6 +58,7 @@ const submit = async () => {
       groupName: "", //名称
       groupRemark: "", //说明
       groupVersion: "", //版本号
+      groupKind: "", //类型
 
     };
     closeVisible();
@@ -69,6 +76,7 @@ const closeVisible = () => {
     groupName: "", //名称
     groupRemark: "", //说明
     groupVersion: "", //版本号
+    groupKind: "", //类型
 
   };
   closeFn();
@@ -88,6 +96,14 @@ const closeVisible = () => {
       el-form-item(label='版本号' prop="groupVersion")
         el-input(v-model='UpdateForm.groupVersion' autocomplete='off' class="!w-[230px]"
           placeholder="请输入版本号")
+      el-form-item(label="类型", prop="groupKind")
+        el-select(
+          v-model="UpdateForm.groupKind",
+          placeholder="请选择类型",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in groupKindOptionList")
 
     el-button(
       :icon="useRenderIcon(Close)",

src/views/Template/ApiGroup/components/edit/index.vue

@@ -34,15 +34,21 @@ let UpdateForm: any = ref({
   groupRemark: "", //说明
   groupVersion: "", //版本号
   id: "", //ID
+  groupKind: "", //类型
 
 });
+// 类型选项数据
+const groupKindOptionList = [
+  { Id: '0', label: '客户端' },
+  { Id: '1', label: '后台' },
+]
 
 // 选项卡参数(默认值为列表某项的id)
 const activeId = ref('1')
 // 提交函数
 const submit = async () => {
   const UrlList = await getGroupUrl(['KxsConfigServer']);
-  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiGroupupdate.method, url: UrlList.KxsConfigServer.ApiGroupupdate.url, params: UpdateForm.value });
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiGroupupdate.method, url: UrlList.KxsConfigServer.ApiGroupupdate.url, params: UpdateForm.value});
   if (status === 1) {
     ElMessage({
       message: "修改成功",
@@ -53,6 +59,7 @@ const submit = async () => {
       groupRemark: "", //说明
       groupVersion: "", //版本号
       id: "", //ID
+      groupKind: "", //类型
 
     };
     closeVisible();
@@ -68,11 +75,7 @@ const closeFn: any = inject('closeEditVisible');
 const openVisible = async () => {
   //通过ID获取表格数据
   const UrlList = await getGroupUrl(['KxsConfigServer']);
-  const { status, data }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiGroupquery.method, url: UrlList.KxsConfigServer.ApiGroupquery.url, params: props.formData });
-  ElMessageBox.alert(JSON.stringify(data), "提示", {
-    confirmButtonText: "关闭",
-    type: "warning"
-  });
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.ApiGroupquery.method, url: UrlList.KxsConfigServer.ApiGroupquery.url, params: props.formData});
   if (status === 1) {
     UpdateForm.value = data;
   }
@@ -105,6 +108,14 @@ const closeVisible = () => {
       el-form-item(label='ID' prop="id")
         el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
           placeholder="请输入ID")
+      el-form-item(label="类型", prop="groupKind")
+        el-select(
+          v-model="UpdateForm.groupKind",
+          placeholder="请选择类型",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in groupKindOptionList")
 
     el-button(
       :icon="useRenderIcon(Close)",

src/views/Template/ApiGroup/index.vue

@@ -118,6 +118,7 @@ provide('closeEditVisible', closeEditVisible)
                         :size="size"
                         @click="handleUpdate(row)"
                         :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
                       ) 编辑
                     el-button.reset-margin(
                       link
@@ -125,6 +126,7 @@ provide('closeEditVisible', closeEditVisible)
                       :size="size"
                       @click="handleDelete(row)"
                       :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
                     ) 删除
 
     Add(:addVisible="addVisible")

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

@@ -0,0 +1,174 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  groupId: "", //分组
+  apiName: "", //接口名称
+  apiKey: "", //接口关键字
+  apiHost: "", //接口主机头
+  apiPort: "", //接口端口号
+  apiRouter: "", //接口路由
+  apiMethod: "", //接口请求方式
+
+});
+// 分组选项数据
+const groupIdOptionList = []
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiInfoadd.method, url: UrlList.KxsConfigServer.ApiInfoadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      groupId: "", //分组
+      apiName: "", //接口名称
+      apiKey: "", //接口关键字
+      apiHost: "", //接口主机头
+      apiPort: "", //接口端口号
+      apiRouter: "", //接口路由
+      apiMethod: "", //接口请求方式
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupId: "", //分组
+    apiName: "", //接口名称
+    apiKey: "", //接口关键字
+    apiHost: "", //接口主机头
+    apiPort: "", //接口端口号
+    apiRouter: "", //接口路由
+    apiMethod: "", //接口请求方式
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label="分组", prop="groupId")
+        el-select(
+          v-model="UpdateForm.groupId",
+          placeholder="请选择分组",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in groupIdOptionList")
+      el-form-item(label='接口名称' prop="apiName")
+        el-input(v-model='UpdateForm.apiName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口名称")
+      el-form-item(label='接口关键字' prop="apiKey")
+        el-input(v-model='UpdateForm.apiKey' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口关键字")
+      el-form-item(label='接口主机头' prop="apiHost")
+        el-input(v-model='UpdateForm.apiHost' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口主机头")
+      el-form-item(label='接口端口号' prop="apiPort")
+        el-input-number(v-model='UpdateForm.apiPort' :min="1" :max="1000"
+          placeholder="请输入接口端口号")
+      el-form-item(label='接口路由' prop="apiRouter")
+        el-input(v-model='UpdateForm.apiRouter' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口路由")
+      el-form-item(label='接口请求方式' prop="apiMethod")
+        el-input(v-model='UpdateForm.apiMethod' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口请求方式")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/ApiInfo/components/edit/index.vue

@@ -0,0 +1,183 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  groupId: "", //分组
+  apiName: "", //接口名称
+  apiKey: "", //接口关键字
+  apiHost: "", //接口主机头
+  apiPort: "", //接口端口号
+  apiRouter: "", //接口路由
+  apiMethod: "", //接口请求方式
+  id: "", //ID
+
+});
+// 分组选项数据
+const groupIdOptionList = []
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiInfoupdate.method, url: UrlList.KxsConfigServer.ApiInfoupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      groupId: "", //分组
+      apiName: "", //接口名称
+      apiKey: "", //接口关键字
+      apiHost: "", //接口主机头
+      apiPort: "", //接口端口号
+      apiRouter: "", //接口路由
+      apiMethod: "", //接口请求方式
+      id: "", //ID
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.ApiInfoquery.method, url: UrlList.KxsConfigServer.ApiInfoquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label="分组", prop="groupId")
+        el-select(
+          v-model="UpdateForm.groupId",
+          placeholder="请选择分组",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in groupIdOptionList")
+      el-form-item(label='接口名称' prop="apiName")
+        el-input(v-model='UpdateForm.apiName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口名称")
+      el-form-item(label='接口关键字' prop="apiKey")
+        el-input(v-model='UpdateForm.apiKey' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口关键字")
+      el-form-item(label='接口主机头' prop="apiHost")
+        el-input(v-model='UpdateForm.apiHost' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口主机头")
+      el-form-item(label='接口端口号' prop="apiPort")
+        el-input-number(v-model='UpdateForm.apiPort' :min="1" :max="1000"
+          placeholder="请输入接口端口号")
+      el-form-item(label='接口路由' prop="apiRouter")
+        el-input(v-model='UpdateForm.apiRouter' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口路由")
+      el-form-item(label='接口请求方式' prop="apiMethod")
+        el-input(v-model='UpdateForm.apiMethod' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口请求方式")
+      el-form-item(label='ID' prop="id")
+        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
+          placeholder="请输入ID")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/ApiInfo/hook.tsx

@@ -0,0 +1,164 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useApiInfo() {
+  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: "groupId",
+      minWidth: 200
+    },
+    {
+      label: "接口名称",
+      prop: "apiName",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.groupId = "";
+   form.apiName = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiInfolist.method, url: UrlList.KxsConfigServer.ApiInfolist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该api接口? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.ApiInfodelete.method, url: UrlList.KxsConfigServer.ApiInfodelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/ApiInfo/index.vue

@@ -0,0 +1,176 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "ApiInfo"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useApiInfo } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useApiInfo();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+// 分组选项数据
+const groupIdOptionList = []
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label="分组", prop="groupId")
+        el-select(
+          v-model="form.groupId",
+          placeholder="请选择分组",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.Id" v-for="(item,index) in groupIdOptionList")
+      el-form-item(label='接口名称' prop="apiName")
+        el-input(v-model='form.apiName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入接口名称")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="api接口", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysDict/components/add/index.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  dictType: "", //字典类型
+  description: "", //描述
+  remarks: "", //备注信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictadd.method, url: UrlList.KxsConfigServer.SysDictadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      dictType: "", //字典类型
+      description: "", //描述
+      remarks: "", //备注信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    dictType: "", //字典类型
+    description: "", //描述
+    remarks: "", //备注信息
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='字典类型' prop="dictType")
+        el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典类型")
+      el-form-item(label='描述' prop="description")
+        el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入描述")
+      el-form-item(label='备注信息' prop="remarks")
+        el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入备注信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysDict/components/edit/index.vue

@@ -0,0 +1,156 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  id: "", //编号
+  dictType: "", //字典类型
+  description: "", //描述
+  remarks: "", //备注信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictupdate.method, url: UrlList.KxsConfigServer.SysDictupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      id: "", //编号
+      dictType: "", //字典类型
+      description: "", //描述
+      remarks: "", //备注信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysDictquery.method, url: UrlList.KxsConfigServer.SysDictquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='编号' prop="id")
+        el-input(v-model='UpdateForm.id' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入编号")
+      el-form-item(label='字典类型' prop="dictType")
+        el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典类型")
+      el-form-item(label='描述' prop="description")
+        el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入描述")
+      el-form-item(label='备注信息' prop="remarks")
+        el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入备注信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysDict/hook.tsx

@@ -0,0 +1,164 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysDict() {
+  let form = reactive({
+      dictType:"", //字典类型
+  description:"", //描述
+
+  });
+  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: "dictType",
+      minWidth: 200
+    },
+    {
+      label: "描述",
+      prop: "description",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.dictType = "";
+   form.description = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictlist.method, url: UrlList.KxsConfigServer.SysDictlist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该字典表? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictdelete.method, url: UrlList.KxsConfigServer.SysDictdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysDict/index.vue

@@ -0,0 +1,169 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysDict"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysDict } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysDict();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='字典类型' prop="dictType")
+        el-input(v-model='form.dictType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典类型")
+      el-form-item(label='描述' prop="description")
+        el-input(v-model='form.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入描述")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="字典表", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysDictItem/components/add/index.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  dictId: "", //字典ID
+  itemValue: "", //字典项值
+  label: "", //字典项名称
+  dictType: "", //字典类型
+  description: "", //字典项描述
+  sortOrder: "", //排序（升序）
+  remarks: "", //备注信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictItemadd.method, url: UrlList.KxsConfigServer.SysDictItemadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      dictId: "", //字典ID
+      itemValue: "", //字典项值
+      label: "", //字典项名称
+      dictType: "", //字典类型
+      description: "", //字典项描述
+      sortOrder: "", //排序（升序）
+      remarks: "", //备注信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    dictId: "", //字典ID
+    itemValue: "", //字典项值
+    label: "", //字典项名称
+    dictType: "", //字典类型
+    description: "", //字典项描述
+    sortOrder: "", //排序（升序）
+    remarks: "", //备注信息
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='字典ID' prop="dictId")
+        el-input(v-model='UpdateForm.dictId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典ID")
+      el-form-item(label='字典项值' prop="itemValue")
+        el-input(v-model='UpdateForm.itemValue' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项值")
+      el-form-item(label='字典项名称' prop="label")
+        el-input(v-model='UpdateForm.label' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项名称")
+      el-form-item(label='字典类型' prop="dictType")
+        el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典类型")
+      el-form-item(label='字典项描述' prop="description")
+        el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项描述")
+      el-form-item(label='排序（升序）' prop="sortOrder")
+        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入排序（升序）")
+      el-form-item(label='备注信息' prop="remarks")
+        el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入备注信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysDictItem/components/edit/index.vue

@@ -0,0 +1,176 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  id: "", //编号
+  dictId: "", //字典ID
+  itemValue: "", //字典项值
+  label: "", //字典项名称
+  dictType: "", //字典类型
+  description: "", //字典项描述
+  sortOrder: "", //排序（升序）
+  remarks: "", //备注信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictItemupdate.method, url: UrlList.KxsConfigServer.SysDictItemupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      id: "", //编号
+      dictId: "", //字典ID
+      itemValue: "", //字典项值
+      label: "", //字典项名称
+      dictType: "", //字典类型
+      description: "", //字典项描述
+      sortOrder: "", //排序（升序）
+      remarks: "", //备注信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysDictItemquery.method, url: UrlList.KxsConfigServer.SysDictItemquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='编号' prop="id")
+        el-input(v-model='UpdateForm.id' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入编号")
+      el-form-item(label='字典ID' prop="dictId")
+        el-input(v-model='UpdateForm.dictId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典ID")
+      el-form-item(label='字典项值' prop="itemValue")
+        el-input(v-model='UpdateForm.itemValue' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项值")
+      el-form-item(label='字典项名称' prop="label")
+        el-input(v-model='UpdateForm.label' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项名称")
+      el-form-item(label='字典类型' prop="dictType")
+        el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典类型")
+      el-form-item(label='字典项描述' prop="description")
+        el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项描述")
+      el-form-item(label='排序（升序）' prop="sortOrder")
+        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入排序（升序）")
+      el-form-item(label='备注信息' prop="remarks")
+        el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入备注信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysDictItem/hook.tsx

@@ -0,0 +1,171 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysDictItem() {
+  let form = reactive({
+      dictId:"", //字典ID
+  label:"", //字典项名称
+  description:"", //字典项描述
+
+  });
+  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: "字典ID",
+      prop: "dictId",
+      minWidth: 200
+    },
+    {
+      label: "字典项名称",
+      prop: "label",
+      minWidth: 200
+    },
+    {
+      label: "字典项描述",
+      prop: "description",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.dictId = "";
+   form.label = "";
+   form.description = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictItemlist.method, url: UrlList.KxsConfigServer.SysDictItemlist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该字典项? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysDictItemdelete.method, url: UrlList.KxsConfigServer.SysDictItemdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysDictItem/index.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysDictItem"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysDictItem } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysDictItem();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='字典ID' prop="dictId")
+        el-input(v-model='form.dictId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典ID")
+      el-form-item(label='字典项名称' prop="label")
+        el-input(v-model='form.label' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项名称")
+      el-form-item(label='字典项描述' prop="description")
+        el-input(v-model='form.description' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入字典项描述")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="字典项", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysLog/components/add/index.vue

@@ -0,0 +1,209 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  logType: "", //日志类型
+  title: "", //日志标题
+  serviceId: "", //服务ID
+  createBy: "", //创建人
+  updateBy: "", //修改人
+  createTime: "", //创建时间
+  updateTime: "", //更新时间
+  remoteAddr: "", //远程地址
+  userAgent: "", //用户代理
+  requestUri: "", //请求URI
+  method: "", //请求方法
+  params: "", //请求参数
+  time: "", //执行时间
+  delFlag: "", //删除标志
+  exception: "", //异常信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysLogadd.method, url: UrlList.KxsConfigServer.SysLogadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      logType: "", //日志类型
+      title: "", //日志标题
+      serviceId: "", //服务ID
+      createBy: "", //创建人
+      updateBy: "", //修改人
+      createTime: "", //创建时间
+      updateTime: "", //更新时间
+      remoteAddr: "", //远程地址
+      userAgent: "", //用户代理
+      requestUri: "", //请求URI
+      method: "", //请求方法
+      params: "", //请求参数
+      time: "", //执行时间
+      delFlag: "", //删除标志
+      exception: "", //异常信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    logType: "", //日志类型
+    title: "", //日志标题
+    serviceId: "", //服务ID
+    createBy: "", //创建人
+    updateBy: "", //修改人
+    createTime: "", //创建时间
+    updateTime: "", //更新时间
+    remoteAddr: "", //远程地址
+    userAgent: "", //用户代理
+    requestUri: "", //请求URI
+    method: "", //请求方法
+    params: "", //请求参数
+    time: "", //执行时间
+    delFlag: "", //删除标志
+    exception: "", //异常信息
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='日志类型' prop="logType")
+        el-input(v-model='UpdateForm.logType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入日志类型")
+      el-form-item(label='日志标题' prop="title")
+        el-input(v-model='UpdateForm.title' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入日志标题")
+      el-form-item(label='服务ID' prop="serviceId")
+        el-input(v-model='UpdateForm.serviceId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入服务ID")
+      el-form-item(label='创建人' prop="createBy")
+        el-input(v-model='UpdateForm.createBy' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入创建人")
+      el-form-item(label='修改人' prop="updateBy")
+        el-input(v-model='UpdateForm.updateBy' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入修改人")
+      el-form-item(label='远程地址' prop="remoteAddr")
+        el-input(v-model='UpdateForm.remoteAddr' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入远程地址")
+      el-form-item(label='用户代理' prop="userAgent")
+        el-input(v-model='UpdateForm.userAgent' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入用户代理")
+      el-form-item(label='请求URI' prop="requestUri")
+        el-input(v-model='UpdateForm.requestUri' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求URI")
+      el-form-item(label='请求方法' prop="method")
+        el-input(v-model='UpdateForm.method' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求方法")
+      el-form-item(label='请求参数' prop="params")
+        el-input(v-model='UpdateForm.params' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求参数")
+      el-form-item(label='执行时间' prop="time")
+        el-input(v-model='UpdateForm.time' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入执行时间")
+      el-form-item(label='删除标志' prop="delFlag")
+        el-input(v-model='UpdateForm.delFlag' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入删除标志")
+      el-form-item(label='异常信息' prop="exception")
+        el-input(v-model='UpdateForm.exception' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入异常信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysLog/components/edit/index.vue

@@ -0,0 +1,210 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  id: "", //编号
+  logType: "", //日志类型
+  title: "", //日志标题
+  serviceId: "", //服务ID
+  createBy: "", //创建人
+  updateBy: "", //修改人
+  createTime: "", //创建时间
+  updateTime: "", //更新时间
+  remoteAddr: "", //远程地址
+  userAgent: "", //用户代理
+  requestUri: "", //请求URI
+  method: "", //请求方法
+  params: "", //请求参数
+  time: "", //执行时间
+  delFlag: "", //删除标志
+  exception: "", //异常信息
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysLogupdate.method, url: UrlList.KxsConfigServer.SysLogupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      id: "", //编号
+      logType: "", //日志类型
+      title: "", //日志标题
+      serviceId: "", //服务ID
+      createBy: "", //创建人
+      updateBy: "", //修改人
+      createTime: "", //创建时间
+      updateTime: "", //更新时间
+      remoteAddr: "", //远程地址
+      userAgent: "", //用户代理
+      requestUri: "", //请求URI
+      method: "", //请求方法
+      params: "", //请求参数
+      time: "", //执行时间
+      delFlag: "", //删除标志
+      exception: "", //异常信息
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysLogquery.method, url: UrlList.KxsConfigServer.SysLogquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='编号' prop="id")
+        el-input(v-model='UpdateForm.id' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入编号")
+      el-form-item(label='日志类型' prop="logType")
+        el-input(v-model='UpdateForm.logType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入日志类型")
+      el-form-item(label='日志标题' prop="title")
+        el-input(v-model='UpdateForm.title' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入日志标题")
+      el-form-item(label='服务ID' prop="serviceId")
+        el-input(v-model='UpdateForm.serviceId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入服务ID")
+      el-form-item(label='创建人' prop="createBy")
+        el-input(v-model='UpdateForm.createBy' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入创建人")
+      el-form-item(label='修改人' prop="updateBy")
+        el-input(v-model='UpdateForm.updateBy' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入修改人")
+      el-form-item(label='远程地址' prop="remoteAddr")
+        el-input(v-model='UpdateForm.remoteAddr' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入远程地址")
+      el-form-item(label='用户代理' prop="userAgent")
+        el-input(v-model='UpdateForm.userAgent' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入用户代理")
+      el-form-item(label='请求URI' prop="requestUri")
+        el-input(v-model='UpdateForm.requestUri' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求URI")
+      el-form-item(label='请求方法' prop="method")
+        el-input(v-model='UpdateForm.method' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求方法")
+      el-form-item(label='请求参数' prop="params")
+        el-input(v-model='UpdateForm.params' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入请求参数")
+      el-form-item(label='执行时间' prop="time")
+        el-input(v-model='UpdateForm.time' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入执行时间")
+      el-form-item(label='删除标志' prop="delFlag")
+        el-input(v-model='UpdateForm.delFlag' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入删除标志")
+      el-form-item(label='异常信息' prop="exception")
+        el-input(v-model='UpdateForm.exception' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入异常信息")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysLog/hook.tsx

@@ -0,0 +1,164 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysLog() {
+  let form = reactive({
+      createBy:"", //创建人
+  createTime:"", //创建时间
+
+  });
+  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: "createBy",
+      minWidth: 200
+    },
+    {
+      label: "创建时间",
+      prop: "createTime",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.createBy = "";
+   form.createTime = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysLoglist.method, url: UrlList.KxsConfigServer.SysLoglist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该日志表? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysLogdelete.method, url: UrlList.KxsConfigServer.SysLogdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysLog/index.vue

@@ -0,0 +1,166 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysLog"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysLog } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysLog();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='创建人' prop="createBy")
+        el-input(v-model='form.createBy' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入创建人")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="日志表", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysMenu/components/add/index.vue

@@ -0,0 +1,191 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  name: "", //菜单名称
+  enName: "", //英文名称
+  permission: "", //权限标识
+  path: "", //路由路径
+  parentId: "", //父菜单ID
+  icon: "", //菜单图标
+  visible: "", //是否可见，0隐藏，1显示
+  sortOrder: "", //排序值，越小越靠前
+  keepAlive: "", //是否缓存，0否，1是
+  embedded: "", //是否内嵌，0否，1是
+  menuType: "", //菜单类型，0目录，1菜单，2按钮
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysMenuadd.method, url: UrlList.KxsConfigServer.SysMenuadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      name: "", //菜单名称
+      enName: "", //英文名称
+      permission: "", //权限标识
+      path: "", //路由路径
+      parentId: "", //父菜单ID
+      icon: "", //菜单图标
+      visible: "", //是否可见，0隐藏，1显示
+      sortOrder: "", //排序值，越小越靠前
+      keepAlive: "", //是否缓存，0否，1是
+      embedded: "", //是否内嵌，0否，1是
+      menuType: "", //菜单类型，0目录，1菜单，2按钮
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    name: "", //菜单名称
+    enName: "", //英文名称
+    permission: "", //权限标识
+    path: "", //路由路径
+    parentId: "", //父菜单ID
+    icon: "", //菜单图标
+    visible: "", //是否可见，0隐藏，1显示
+    sortOrder: "", //排序值，越小越靠前
+    keepAlive: "", //是否缓存，0否，1是
+    embedded: "", //是否内嵌，0否，1是
+    menuType: "", //菜单类型，0目录，1菜单，2按钮
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='菜单名称' prop="name")
+        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单名称")
+      el-form-item(label='英文名称' prop="enName")
+        el-input(v-model='UpdateForm.enName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入英文名称")
+      el-form-item(label='权限标识' prop="permission")
+        el-input(v-model='UpdateForm.permission' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入权限标识")
+      el-form-item(label='路由路径' prop="path")
+        el-input(v-model='UpdateForm.path' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入路由路径")
+      el-form-item(label='父菜单ID' prop="parentId")
+        el-input(v-model='UpdateForm.parentId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入父菜单ID")
+      el-form-item(label='菜单图标' prop="icon")
+        el-input(v-model='UpdateForm.icon' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单图标")
+      el-form-item(label='是否可见，0隐藏，1显示' prop="visible")
+        el-input(v-model='UpdateForm.visible' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否可见，0隐藏，1显示")
+      el-form-item(label='排序值，越小越靠前' prop="sortOrder")
+        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入排序值，越小越靠前")
+      el-form-item(label='是否缓存，0否，1是' prop="keepAlive")
+        el-input(v-model='UpdateForm.keepAlive' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否缓存，0否，1是")
+      el-form-item(label='是否内嵌，0否，1是' prop="embedded")
+        el-input(v-model='UpdateForm.embedded' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否内嵌，0否，1是")
+      el-form-item(label='菜单类型，0目录，1菜单，2按钮' prop="menuType")
+        el-input(v-model='UpdateForm.menuType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单类型，0目录，1菜单，2按钮")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysMenu/components/edit/index.vue

@@ -0,0 +1,191 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  name: "", //菜单名称
+  enName: "", //英文名称
+  permission: "", //权限标识
+  path: "", //路由路径
+  parentId: "", //父菜单ID
+  icon: "", //菜单图标
+  visible: "", //是否可见，0隐藏，1显示
+  sortOrder: "", //排序值，越小越靠前
+  keepAlive: "", //是否缓存，0否，1是
+  embedded: "", //是否内嵌，0否，1是
+  menuType: "", //菜单类型，0目录，1菜单，2按钮
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysMenuupdate.method, url: UrlList.KxsConfigServer.SysMenuupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      name: "", //菜单名称
+      enName: "", //英文名称
+      permission: "", //权限标识
+      path: "", //路由路径
+      parentId: "", //父菜单ID
+      icon: "", //菜单图标
+      visible: "", //是否可见，0隐藏，1显示
+      sortOrder: "", //排序值，越小越靠前
+      keepAlive: "", //是否缓存，0否，1是
+      embedded: "", //是否内嵌，0否，1是
+      menuType: "", //菜单类型，0目录，1菜单，2按钮
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysMenuquery.method, url: UrlList.KxsConfigServer.SysMenuquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='菜单名称' prop="name")
+        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单名称")
+      el-form-item(label='英文名称' prop="enName")
+        el-input(v-model='UpdateForm.enName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入英文名称")
+      el-form-item(label='权限标识' prop="permission")
+        el-input(v-model='UpdateForm.permission' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入权限标识")
+      el-form-item(label='路由路径' prop="path")
+        el-input(v-model='UpdateForm.path' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入路由路径")
+      el-form-item(label='父菜单ID' prop="parentId")
+        el-input(v-model='UpdateForm.parentId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入父菜单ID")
+      el-form-item(label='菜单图标' prop="icon")
+        el-input(v-model='UpdateForm.icon' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单图标")
+      el-form-item(label='是否可见，0隐藏，1显示' prop="visible")
+        el-input(v-model='UpdateForm.visible' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否可见，0隐藏，1显示")
+      el-form-item(label='排序值，越小越靠前' prop="sortOrder")
+        el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入排序值，越小越靠前")
+      el-form-item(label='是否缓存，0否，1是' prop="keepAlive")
+        el-input(v-model='UpdateForm.keepAlive' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否缓存，0否，1是")
+      el-form-item(label='是否内嵌，0否，1是' prop="embedded")
+        el-input(v-model='UpdateForm.embedded' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入是否内嵌，0否，1是")
+      el-form-item(label='菜单类型，0目录，1菜单，2按钮' prop="menuType")
+        el-input(v-model='UpdateForm.menuType' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单类型，0目录，1菜单，2按钮")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysMenu/hook.tsx

@@ -0,0 +1,164 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysMenu() {
+  let form = reactive({
+      name:"", //菜单名称
+  enName:"", //英文名称
+
+  });
+  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: "name",
+      minWidth: 200
+    },
+    {
+      label: "英文名称",
+      prop: "enName",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.name = "";
+   form.enName = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysMenulist.method, url: UrlList.KxsConfigServer.SysMenulist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该菜单权限表? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysMenudelete.method, url: UrlList.KxsConfigServer.SysMenudelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysMenu/index.vue

@@ -0,0 +1,169 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysMenu"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysMenu } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysMenu();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='菜单名称' prop="name")
+        el-input(v-model='form.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入菜单名称")
+      el-form-item(label='英文名称' prop="enName")
+        el-input(v-model='form.enName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入英文名称")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="菜单权限表", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysRole/components/add/index.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  roleName: "", //角色名称
+  roleCode: "", //角色编码
+  roleDesc: "", //角色描述
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysRoleadd.method, url: UrlList.KxsConfigServer.SysRoleadd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      roleName: "", //角色名称
+      roleCode: "", //角色编码
+      roleDesc: "", //角色描述
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    roleName: "", //角色名称
+    roleCode: "", //角色编码
+    roleDesc: "", //角色描述
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='角色名称' prop="roleName")
+        el-input(v-model='UpdateForm.roleName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色名称")
+      el-form-item(label='角色编码' prop="roleCode")
+        el-input(v-model='UpdateForm.roleCode' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色编码")
+      el-form-item(label='角色描述' prop="roleDesc")
+        el-input(v-model='UpdateForm.roleDesc' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色描述")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysRole/components/edit/index.vue

@@ -0,0 +1,151 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  roleName: "", //角色名称
+  roleCode: "", //角色编码
+  roleDesc: "", //角色描述
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysRoleupdate.method, url: UrlList.KxsConfigServer.SysRoleupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      roleName: "", //角色名称
+      roleCode: "", //角色编码
+      roleDesc: "", //角色描述
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysRolequery.method, url: UrlList.KxsConfigServer.SysRolequery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='角色名称' prop="roleName")
+        el-input(v-model='UpdateForm.roleName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色名称")
+      el-form-item(label='角色编码' prop="roleCode")
+        el-input(v-model='UpdateForm.roleCode' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色编码")
+      el-form-item(label='角色描述' prop="roleDesc")
+        el-input(v-model='UpdateForm.roleDesc' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色描述")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysRole/hook.tsx

@@ -0,0 +1,157 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysRole() {
+  let form = reactive({
+      roleName:"", //角色名称
+
+  });
+  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: "roleName",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.roleName = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysRolelist.method, url: UrlList.KxsConfigServer.SysRolelist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该系统角色表? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysRoledelete.method, url: UrlList.KxsConfigServer.SysRoledelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysRole/index.vue

@@ -0,0 +1,166 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysRole"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysRole } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysRole();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='角色名称' prop="roleName")
+        el-input(v-model='form.roleName' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入角色名称")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="系统角色表", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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/Template/SysUser/components/add/index.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+import Upload from "@iconify-icons/ri/upload-2-fill";
+import Close from "@iconify-icons/ri/close-fill";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  submit: {
+    type: Function;
+    default: () => {};
+  };
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  username: "", //用户名
+  password: "", //密码
+  salt: "", //盐值
+  phone: "", //电话号码
+  avatar: "", //头像
+  nickname: "", //昵称
+  name: "", //姓名
+  email: "", //邮箱地址
+  deptId: "", //所属部门ID
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysUseradd.method, url: UrlList.KxsConfigServer.SysUseradd.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "新增成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      username: "", //用户名
+      password: "", //密码
+      salt: "", //盐值
+      phone: "", //电话号码
+      avatar: "", //头像
+      nickname: "", //昵称
+      name: "", //姓名
+      email: "", //邮箱地址
+      deptId: "", //所属部门ID
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+const closeFn: any = inject('closeAddVisible');
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    username: "", //用户名
+    password: "", //密码
+    salt: "", //盐值
+    phone: "", //电话号码
+    avatar: "", //头像
+    nickname: "", //昵称
+    name: "", //姓名
+    email: "", //邮箱地址
+    deptId: "", //所属部门ID
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='用户名' prop="username")
+        el-input(v-model='UpdateForm.username' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入用户名")
+      el-form-item(label='密码' prop="password")
+        el-input(v-model='UpdateForm.password' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入密码")
+      el-form-item(label='盐值' prop="salt")
+        el-input(v-model='UpdateForm.salt' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入盐值")
+      el-form-item(label='电话号码' prop="phone")
+        el-input(v-model='UpdateForm.phone' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入电话号码")
+      el-form-item(label='头像' prop="avatar")
+        el-input(v-model='UpdateForm.avatar' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入头像")
+      el-form-item(label='昵称' prop="nickname")
+        el-input(v-model='UpdateForm.nickname' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入昵称")
+      el-form-item(label='姓名' prop="name")
+        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入姓名")
+      el-form-item(label='邮箱地址' prop="email")
+        el-input(v-model='UpdateForm.email' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入邮箱地址")
+      el-form-item(label='所属部门ID' prop="deptId")
+        el-input(v-model='UpdateForm.deptId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入所属部门ID")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysUser/components/edit/index.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+import { http } from "@/utils/http";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl";
+
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  username: "", //用户名
+  password: "", //密码
+  salt: "", //盐值
+  phone: "", //电话号码
+  avatar: "", //头像
+  nickname: "", //昵称
+  name: "", //姓名
+  email: "", //邮箱地址
+  deptId: "", //所属部门ID
+
+});
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysUserupdate.method, url: UrlList.KxsConfigServer.SysUserupdate.url, params: UpdateForm.value});
+  if (status === 1) {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      username: "", //用户名
+      password: "", //密码
+      salt: "", //盐值
+      phone: "", //电话号码
+      avatar: "", //头像
+      nickname: "", //昵称
+      name: "", //姓名
+      email: "", //邮箱地址
+      deptId: "", //所属部门ID
+
+    };
+    closeVisible();
+  } else {
+    ElMessageBox.alert(msg, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const UrlList = await getGroupUrl(['KxsConfigServer']);
+  const { status, data }: any = await http.Request({method: UrlList.KxsConfigServer.SysUserquery.method, url: UrlList.KxsConfigServer.SysUserquery.url, params: props.formData});
+  if (status === 1) {
+    UpdateForm.value = data;
+  }
+};
+// 关闭弹窗回调函数
+const closeVisible = () => {
+  UpdateForm.value = {
+    groupName: "", //名称
+    groupRemark: "", //说明
+    groupVersion: "", //版本号
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" label-width="100px")
+      el-form-item(label='用户名' prop="username")
+        el-input(v-model='UpdateForm.username' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入用户名")
+      el-form-item(label='密码' prop="password")
+        el-input(v-model='UpdateForm.password' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入密码")
+      el-form-item(label='盐值' prop="salt")
+        el-input(v-model='UpdateForm.salt' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入盐值")
+      el-form-item(label='电话号码' prop="phone")
+        el-input(v-model='UpdateForm.phone' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入电话号码")
+      el-form-item(label='头像' prop="avatar")
+        el-input(v-model='UpdateForm.avatar' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入头像")
+      el-form-item(label='昵称' prop="nickname")
+        el-input(v-model='UpdateForm.nickname' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入昵称")
+      el-form-item(label='姓名' prop="name")
+        el-input(v-model='UpdateForm.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入姓名")
+      el-form-item(label='邮箱地址' prop="email")
+        el-input(v-model='UpdateForm.email' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入邮箱地址")
+      el-form-item(label='所属部门ID' prop="deptId")
+        el-input(v-model='UpdateForm.deptId' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入所属部门ID")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      :loading="loading",
+      @click="submit"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/Template/SysUser/hook.tsx

@@ -0,0 +1,178 @@
+import { getRoleList } from "@/api/system";
+import { type PaginationProps } from "@pureadmin/table";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, ref, computed, onMounted } from "vue";
+// 获取URLLIST
+import { getGroupUrl } from "@/utils/getUrl/getUrl"
+import { http } from "@/utils/http";
+// 获取当前板块接口列表
+const UrlList = await getGroupUrl(['KxsConfigServer']);
+
+export function useSysUser() {
+  let form = reactive({
+      username:"", //用户名
+  phone:"", //电话号码
+  nickname:"", //昵称
+  name:"", //姓名
+
+  });
+  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: "username",
+      minWidth: 200
+    },
+    {
+      label: "电话号码",
+      prop: "phone",
+      minWidth: 200
+    },
+    {
+      label: "昵称",
+      prop: "nickname",
+      minWidth: 200
+    },
+    {
+      label: "姓名",
+      prop: "name",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 200,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+    onSearch()
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    onSearch()
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+    onSearch()
+  }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type === 'all') {
+         form.username = "";
+   form.phone = "";
+   form.nickname = "";
+   form.name = "";
+
+    }
+    // if (type == 'search' && !Object.values(form).some(item => !!item)) {
+    //   return ElMessage({
+    //     message: "请输入查询条件",
+    //     type: "error"
+    //   });
+    // };
+    loading.value = true;
+    const { status, msg, data }: any = await http.Request({ method: UrlList.KxsConfigServer.SysUserlist.method, url: UrlList.KxsConfigServer.SysUserlist.url, params: { ...form, PageSize: pagination.pageSize, PageNum: pagination.currentPage }});
+    if (status === 1) {
+      dataList.value = data.result;
+      pagination.total = data.totalNum;
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+    }
+  }
+  onMounted(() => {
+    onSearch();
+  });
+
+  // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该用户表? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.KxsConfigServer.SysUserdelete.method, url: UrlList.KxsConfigServer.SysUserdelete.url, params: row.id });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch();
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+  // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+  // 修改
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    handleAdd,
+    addVisible,
+    handleUpdate,
+    editVisible,
+    editFormData,
+    handleDelete,
+
+  };
+}

src/views/Template/SysUser/index.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "SysUser"
+};
+</script>
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { useSysUser } from "./hook";
+import { hasAuth } from "@/router/utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Add from "./components/add/index.vue";
+import Edit from "./components/edit/index.vue";
+import Search from "@iconify-icons/ep/search";
+import All from "@iconify-icons/ep/refresh-left";
+import Addicon from "@iconify-icons/ep/document-add";
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  handleAdd,
+  addVisible,
+  handleUpdate,
+  editVisible,
+  editFormData,
+  handleDelete,
+
+} = useSysUser();
+
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
+}
+provide('closeEditVisible', closeEditVisible)
+
+
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      ref="formRef",
+      :inline="true",
+      :model="form",
+      :rules="rules",
+      class="w-[99/100]"
+    )
+      el-form-item(label='用户名' prop="username")
+        el-input(v-model='form.username' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入用户名")
+      el-form-item(label='电话号码' prop="phone")
+        el-input(v-model='form.phone' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入电话号码")
+      el-form-item(label='昵称' prop="nickname")
+        el-input(v-model='form.nickname' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入昵称")
+      el-form-item(label='姓名' prop="name")
+        el-input(v-model='form.name' autocomplete='off' class="!w-[230px]"
+          placeholder="请输入姓名")
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch()"
+        ) 查询
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(All)",
+          :loading="loading",
+          @click="onSearch('all')"
+        ) 全部
+    //- 表格组件
+    PureTableBar(title="用户表", @refresh="onSearch" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          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 }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        link
+                        type="primary"
+                        :size="size"
+                        @click="handleUpdate(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['edit'])"
+                      ) 编辑
+                    el-button.reset-margin(
+                      link
+                      type="primary"
+                      :size="size"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
+
+                    
+</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>