From 78d85e8aacb66f03cb499a86678499cd9dbfafad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=82=A5=E7=BE=8A?= <1048382248@qq.com>
Date: Fri, 8 Aug 2025 18:32:04 +0800
Subject: [PATCH] =?UTF-8?q?=20=E6=96=B0=E5=A2=9E=20=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2[=E5=BE=85=E5=AE=8C=E5=96=84]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/enum.ts                      |  19 +
 src/api/hTable.ts                    |  31 ++
 src/api/menu.ts                      |  24 ++
 src/components/hTable/hTable.ts      | 182 ++++++++
 src/components/hTable/hTableEdit.vue | 218 ++++++++++
 src/components/hTable/index.vue      | 597 +++++++++++++++++++++++++++
 src/router/modules/home.ts           |  18 +
 src/store/modules/permission.ts      |   1 -
 src/views/menu/index.vue             | 236 +++++++++++
 src/views/school/index.vue           | 120 ++++++
 10 files changed, 1445 insertions(+), 1 deletion(-)
 create mode 100644 src/api/enum.ts
 create mode 100644 src/api/hTable.ts
 create mode 100644 src/api/menu.ts
 create mode 100644 src/components/hTable/hTable.ts
 create mode 100644 src/components/hTable/hTableEdit.vue
 create mode 100644 src/components/hTable/index.vue
 create mode 100644 src/views/menu/index.vue
 create mode 100644 src/views/school/index.vue

diff --git a/src/api/enum.ts b/src/api/enum.ts
new file mode 100644
index 0000000..21e3c72
--- /dev/null
+++ b/src/api/enum.ts
@@ -0,0 +1,19 @@
+import { http } from "@/utils/http";
+import type { Res } from "@/utils/http/types";
+
+/**
+ * @description 获取枚举下拉
+ * @param {string} type 枚举类型 type=StatusEnum
+ * @return {object}
+ */
+export function getenum(type) {
+  return http.request<Res<any>>("get", `public/enum/${type}`);
+}
+/**
+ * @description 获取枚举对象
+ * @param {string} type 枚举类型 type=StatusEnum
+ * @return {object}
+ */
+export function getenumDic(type) {
+  return http.request<Res<any>>("get", `public/enum/${type}/Dic`);
+}
diff --git a/src/api/hTable.ts b/src/api/hTable.ts
new file mode 100644
index 0000000..8839c3b
--- /dev/null
+++ b/src/api/hTable.ts
@@ -0,0 +1,31 @@
+import { http } from "@/utils/http";
+import type { Res } from "@/utils/http/types";
+
+export class hTableAPI {
+  url = "";
+  /** 构造函数  */
+  constructor(url) {
+    this.url = url;
+  }
+  PageList(data = {}) {
+    return http.request<Res<any>>("post", `${this.url}/PageList`, { data });
+  }
+  Info(id, tag = {}) {
+    const pUrl = `${this.url}/${id}`;
+    let getUrl = pUrl;
+    for (const key in tag) {
+      const el = tag[key];
+      getUrl += (getUrl === pUrl ? "?" : "&") + key + "=" + el;
+    }
+    return http.request<Res<any>>("get", getUrl);
+  }
+  edit(data) {
+    return http.request<Res<any>>("post", `${this.url}/Edit`, { data });
+  }
+  delete(data) {
+    return http.request<Res<any>>("post", `${this.url}/Del`, { data });
+  }
+  querycombo(data) {
+    return http.request<Res<any>>("post", `${this.url}/QueryCombo`, { data });
+  }
+}
diff --git a/src/api/menu.ts b/src/api/menu.ts
new file mode 100644
index 0000000..dffe752
--- /dev/null
+++ b/src/api/menu.ts
@@ -0,0 +1,24 @@
+import { http } from "@/utils/http";
+import type { Res } from "@/utils/http/types";
+
+// 定义菜单项接口
+export interface MenuItem {
+  id: number;
+  name: string;
+  path?: string;
+  isButton: boolean;
+  title: string;
+  icon?: string;
+  auths?: string;
+  rank: number;
+  showLink: boolean;
+  parentId: number;
+  children?: MenuItem[];
+}
+/**
+ * @description 获取所有的菜单
+ * @return {object}
+ */
+export function MenuAll() {
+  return http.request<Res<MenuItem[]>>("get", `Menu/All`);
+}
diff --git a/src/components/hTable/hTable.ts b/src/components/hTable/hTable.ts
new file mode 100644
index 0000000..eb1a905
--- /dev/null
+++ b/src/components/hTable/hTable.ts
@@ -0,0 +1,182 @@
+export interface Dialog {
+  /* 对话框是否可见 */
+  visible: boolean;
+  /* 是否显示关闭按钮 */
+  close: boolean;
+  /* 对话框标题 */
+  title: string;
+  /* 对话框宽度 */
+  width: string;
+  /**自定义弹窗数据 */
+  custom: {
+    /* 自定义对话框高度 */
+    height: string;
+    /* 自定义对话框数据 */
+    data: any[];
+    /* 自定义组件路径 */
+    src?: string;
+    /* 自定义配置项 */
+    custom: Record<string, any>;
+    /* 自定义对话框是否可见 */
+    visible: boolean;
+    /* 异步加载组件 */
+    component: any;
+  };
+  edit: {
+    /* 编辑项ID */
+    id: number;
+    /* 编辑对话框标题 */
+    title: string;
+    /* 编辑对话框是否可见 */
+    visible: boolean;
+    row?: any;
+    tagData?: any;
+  };
+}
+
+/* 按钮自定义配置 */
+export interface ButtonCustomConfig {
+  /* 弹出框标题 */
+  title: string;
+  /* 组件路径 */
+  src: string;
+  /* 弹框宽度 */
+  width: string;
+  /* 弹框高度 */
+  height: string;
+}
+
+/* 操作按钮配置 */
+export interface OperationButton {
+  /* 是否为头部按钮 */
+  topBtn: boolean;
+  /* 是否显示 */
+  show?: boolean;
+  /* 按钮文本 */
+  label: string;
+  /* 按钮类型 */
+  btnType: "add" | "edit" | "del" | "custom";
+  /* 按钮样式 */
+  btnStyle?: "success" | "danger";
+  /* 自定义按钮配置 */
+  custom?: ButtonCustomConfig;
+}
+
+/* 字段设置项 */
+export interface FieldSetting {
+  /**map 时Value的取值的属性 */
+  mapValue?: string;
+  /**map 时label的取值的属性 */
+  maplabel?: string;
+  /** 数据源 请求方式 */
+  datasourceStr?: string;
+  /**
+   * 图片地址 获取方式
+   * @param value 当前值
+   * @param row 当前行值
+   * @returns 预期返回有效图片地址url
+   */
+  imgUrl?: (value: any, row: any) => string;
+  /* 数据源 */
+  datasource?: Array<{
+    Value: any;
+    Text: string;
+  }>;
+}
+///* 表格列配置 */
+//export interface TableEditColumn {}
+
+/* 表格列配置 */
+export interface TableColumn {
+  /* 显示标签 */
+  label: string;
+  /* 是否可搜索 */
+  search: boolean;
+  /* 搜索类型 */
+  searchType?:
+    | "Equal"
+    | "NoEqual"
+    | "Like"
+    | "GreaterThan"
+    | "LessThan"
+    | "NoLike";
+  /* 是否允许添加 */
+  add: boolean;
+  /* 是否允许修改 */
+  edit: boolean;
+  /* 列宽度 */
+  width?: string;
+  /* 字段类型 */
+  type?: string;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 编辑时显示列 */
+  editShow?: boolean;
+  rules?: any | Array<any>;
+  /** 显示列 */
+  show?: boolean;
+  /* 字段设置 */
+  setting?: FieldSetting;
+  /* 修改时的编辑值 */
+  valueE?: Array<string> | string;
+  /* 查询值 */
+  value?: Array<string> | string;
+  /** textarea编辑时的行数 */
+  editRows?: number;
+  /**编辑时值发生变化 */
+  change?: () => void;
+  /**列值初始化时 如何获取默认取对应列*/
+  custom?: (row: any) => string;
+}
+
+/* 分页数据 */
+export interface PageData {
+  /* 总条数 */
+  total: number;
+}
+
+/* 搜索条件 */
+export interface SearchConditions {
+  /* 是否显示搜索 */
+  show: boolean;
+  /* 当前页码 */
+  PageIndex: number;
+  /* 每页大小 */
+  PageSize: number;
+  /* 排序字段 */
+  OrderBy: string;
+  /* 默认查询条件 */
+  defaultConditions: any[];
+  /* 查询条件 */
+  Conditions: any[];
+}
+
+/* 表格配置 */
+export interface TableConfig {
+  /* 搜索回调函数 */
+  searchCallback?: (s: SearchConditions) => void;
+  /* 新增/修改回调函数 */
+  editCallback?: (from: any) => void;
+  /* API地址 */
+  apiUrl: string;
+  /* 是否显示选择列 */
+  selectColumn: boolean;
+  /* 搜索配置 */
+  search: SearchConditions;
+  /* 是否显示操作列 */
+  operationColumn: boolean;
+  /* 操作按钮配置 */
+  operationColumnData: OperationButton[];
+  /* 列配置 */
+  column: Record<string, TableColumn>;
+  /* 表格数据 */
+  data: any[];
+  /**显示头部操作按钮 */
+  operationTop?: boolean;
+  /* 分页数据 */
+  pageData: PageData;
+  /* 选中行 */
+  selectRows: any[];
+  /* 是否显示边框 */
+  border: boolean;
+}
diff --git a/src/components/hTable/hTableEdit.vue b/src/components/hTable/hTableEdit.vue
new file mode 100644
index 0000000..f35ec13
--- /dev/null
+++ b/src/components/hTable/hTableEdit.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { onMounted, PropType, ref } from "vue";
+import { hTableAPI } from "@/api/hTable";
+import { TableConfig, TableColumn } from "./hTable";
+import { FormInstance } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+const props = defineProps({
+  //** 传入的表单数据 */
+  id: {
+    type: Number,
+    default: -1
+  },
+  tableData: {
+    type: Object as PropType<TableConfig>,
+    default: null
+  },
+  row: {
+    type: Object,
+    default: null
+  },
+  tagData: {
+    type: Object,
+    default: () => {}
+  }
+});
+const emit = defineEmits(["handlePagedCallback"]);
+const editFormRef = ref<FormInstance>();
+const column: Record<string, TableColumn> = {};
+const editData = ref({
+  frorm: {},
+  isedit: props.id !== -1,
+  table: props.tableData,
+  rules: [
+    {
+      required: true,
+      message: "不能为空",
+      trigger: "blur"
+    }
+  ],
+  formLabelWidth: "120px",
+  size: "small",
+  loading: false
+});
+const Api = new hTableAPI(editData.value.table.apiUrl);
+onMounted(() => {
+  intiColumn();
+  fetchInitData();
+  fetchFormData();
+});
+
+function execute(obj, btn) {
+  return eval(obj);
+}
+function intiColumn() {
+  for (const key in editData.value.table.column) {
+    const element = editData.value.table.column[key];
+    if (editData.value.isedit) {
+      if (element.edit) {
+        column.value[key] = element;
+      }
+    } else {
+      if (element.add) {
+        column.value[key] = element;
+      }
+    }
+  }
+}
+function handlePagedCallback() {
+  emit("handlePagedCallback"); // 传参给父组件
+}
+function handleSubmitForm() {
+  editFormRef.value.validate(valid => {
+    if (!valid) {
+      return;
+    }
+
+    editData.value.loading = true;
+    let form = {};
+    if (editData.value.isedit) {
+      form = props.row;
+    }
+    for (const key in column.value) {
+      const element = column.value[key];
+      if (element.valueE !== null && element.valueE !== "") {
+        form[key] = element.valueE;
+      }
+    }
+    if (editData.value.table.editCallback) {
+      editData.value.table.editCallback(form);
+    }
+    Api.edit(form).then(res => {
+      editData.value.loading = false;
+      if (res.code === 200) {
+        ElMessage.success("操作成功");
+        setTimeout(handlePagedCallback, 0);
+      } else {
+        ElMessage.error(res.message);
+      }
+    });
+  });
+}
+function handleResetForm() {
+  for (const key in column.value) {
+    let item = column.value[key];
+    if (Array.isArray(item.valueE)) {
+      item.valueE = [];
+    } else if (typeof item.valueE === "number") {
+      item.valueE = 0;
+    } else if (typeof item.valueE === "boolean") {
+      item.valueE = false;
+    } else {
+      item.valueE = "";
+    }
+  }
+}
+function fetchInitData() {}
+function fetchFormData() {
+  editData.value.loading = false;
+  handleResetForm();
+  if (editData.value.isedit) {
+    Api.Info(props.id).then(res => {
+      if (res.code === 200) {
+        editData.value.frorm = res.data;
+        for (const key in column.value) {
+          const element = column.value[key];
+          element.valueE = res.data[key];
+        }
+      }
+      editData.value.loading = true;
+    });
+  } else {
+    editData.value.loading = true;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <el-form
+      v-if="editData.loading"
+      ref="editFormRef"
+      :model="editData.table.column"
+      :label-width="editData.formLabelWidth"
+      size="small"
+      clearable
+    >
+      <el-form-item
+        v-for="(o, k, i) in column"
+        v-show="execute(o['editShow'], o)"
+        :key="i"
+        :rules="o.rules"
+        :prop="'' + k + '.valueE'"
+        :label="o.label"
+      >
+        <div v-if="o.type.trim() == 'datetime'">
+          <el-date-picker
+            v-model="o.valueE"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetime"
+            :placeholder="o.label"
+            style="width: 100%"
+            @change="o.change"
+          />
+        </div>
+        <div v-else-if="o.type.trim() == 'dropdown'">
+          <el-select
+            v-model="o.valueE"
+            :multiple="o.multiple"
+            clearable
+            filterable
+            :placeholder="o.label"
+            style="width: 100%"
+            @change="o.change"
+          >
+            <el-option
+              v-for="item in o.setting.datasource"
+              :key="item.Value"
+              autocomplete="off"
+              :label="item[o.setting.maplabel]"
+              :value="item[o.setting.mapValue]"
+            />
+          </el-select>
+        </div>
+        <div v-else-if="o.type.trim() == 'textarea'">
+          <el-input
+            v-model="o.valueE as string"
+            :rows="o.editRows || 4"
+            type="textarea"
+            :placeholder="o.label"
+            @change="o.change"
+          />
+        </div>
+        <div v-else-if="o.type.trim() == 'switch'">
+          <el-switch
+            v-model="o.valueE as string"
+            active-text="启用"
+            inactive-text="禁用"
+            @change="o.change"
+          />
+        </div>
+        <div v-else>
+          <el-input v-model="o.valueE as string" :placeholder="o.label" />
+        </div>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          :loading="!editData.loading"
+          @click="handleSubmitForm()"
+          >立即提交</el-button
+        >
+        <el-button @click="handleResetForm()">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
diff --git a/src/components/hTable/index.vue b/src/components/hTable/index.vue
new file mode 100644
index 0000000..ba33a09
--- /dev/null
+++ b/src/components/hTable/index.vue
@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  getCurrentInstance,
+  onBeforeMount,
+  PropType
+} from "vue";
+
+import { Search } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { defineAsyncComponent, AsyncComponentLoader } from "vue";
+import { Dialog, TableConfig } from "./hTable";
+import hTableEdit from "./hTableEdit.vue";
+import { hTableAPI } from "@/api/hTable";
+import { getenum } from "@/api/enum";
+const props = defineProps({
+  //** 传入的表单数据 */
+  Row: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  },
+  tableConfig: {
+    type: Object as PropType<TableConfig>,
+    default: () => ({})
+  }
+});
+
+const table = ref<TableConfig>(props.tableConfig);
+onBeforeMount(() => {
+  /* 初始化系统配置 */
+  nextTick(async () => {
+    intdata();
+    Api = new hTableAPI(table.value.apiUrl);
+    init.value = true;
+    tableShow.value = true;
+    await fetchInitData();
+    fetchPagedData();
+  });
+});
+onMounted(() => {
+  nextTick(async () => {
+    // appStyle();
+  });
+});
+onUnmounted(() => {});
+// defineExpose({
+//   initTable
+// });
+const tableShow = ref(false);
+let Api: hTableAPI = null;
+const instance = getCurrentInstance();
+
+const init = ref(false);
+const tableHeight = ref(0);
+
+const dialog = ref<Dialog>({
+  visible: false,
+  close: true,
+  title: "",
+  width: "500px", // 弹出层宽度
+  custom: {
+    height: "85vh",
+    data: [],
+    custom: {},
+    component: null, //自定义弹窗的路径
+    visible: false // 弹出层是否显示
+  },
+  edit: {
+    id: -1,
+    title: "", // 弹出层title
+    visible: false // 弹出层是否显示
+  }
+});
+
+const appB = ref<HTMLElement>(null);
+const appB_S = ref<HTMLElement>(null);
+function appStyle() {
+  if (tableHeight.value !== 0) return;
+  tableHeight.value =
+    appB.value.parentElement.parentElement.offsetHeight -
+    145 -
+    appB_S.value.offsetHeight;
+  return tableHeight;
+}
+
+function intdata() {
+  if (!table.value.data) table.value.data = [];
+  if (!table.value.selectRows) table.value.selectRows = [];
+  if (table.value.border == null) table.value.border = true;
+  if (!table.value.pageData) table.value.pageData = { total: 0 };
+  if (table.value.operationTop === undefined) table.value.operationTop = true;
+
+  // 处理 column 的属性
+  for (const key in table.value.column) {
+    const element = table.value.column[key];
+
+    // Vue 3 中直接赋值即可，不需要 $set
+    if (element.valueE === undefined)
+      element.valueE = element.multiple ? [] : "";
+    if (element.value === undefined) element.value = element.multiple ? [] : "";
+    if (!element.type) element.type = "string";
+    if (element.show === undefined) element.show = true;
+    if (element.editShow === undefined) element.editShow = true;
+    if (!element.setting)
+      element.setting = { datasource: [], mapValue: "Value", maplabel: "Text" };
+    if (!element.setting.mapValue) element.setting.mapValue = "Value";
+    if (!element.setting.maplabel) element.setting.maplabel = "Text";
+
+    if (!element.change) element.change = () => {};
+  }
+
+  // 处理 operationColumnData 的属性
+  for (const key in table.value.operationColumnData) {
+    const element = table.value.operationColumnData[key];
+    if (element.show === undefined) element.show = true;
+  }
+}
+
+function rowKeyFun(row) {
+  return row.customId;
+}
+function execute(obj, scope, btn) {
+  if (Object.prototype.toString.call(obj) === "[object Function]")
+    return obj(scope, btn);
+  return eval(obj);
+}
+
+function getOperationColumnWidth() {
+  let hFontSize = getComputedStyle(window.document.documentElement)[
+    "font-size"
+  ].replace("px", "");
+  let defWidth = 10 + 2 + 30;
+
+  let width = eval(
+    table.value.operationColumnData
+      .filter(s => !s.topBtn && s.show)
+      .map(s => defWidth + s.label.length * (hFontSize || 16))
+      .join("+")
+  );
+  width = width < 100 ? 100 : width;
+  width = width > 320 ? 320 : width;
+  return width + "px";
+}
+function getbtnClick(obj, row) {
+  row = row ? [row] : table.value.selectRows;
+  if (obj.btnType === "add") {
+    return handleAdd();
+  } else if (obj.btnType === "edit") {
+    return handleEdit(obj, row);
+  } else if (obj.btnType === "del") {
+    return handleDelete(obj, row);
+  } else if (obj.btnType === "custom") {
+    return handleCustom(obj, row, obj.custom);
+  } else {
+    return obj.click(obj, row, handleReloadPaged);
+  }
+}
+function handleAdd() {
+  dialog.value.edit.id = -1;
+  dialog.value.title = "添加";
+  dialog.value.custom.visible = false;
+  dialog.value.edit.visible = true;
+  dialog.value.visible = true;
+  dialog.value.width = "500px";
+}
+function handleEdit(obj, row) {
+  dialog.value.edit.id = row[0].Id;
+  dialog.value.edit.row = row[0];
+  dialog.value.edit.tagData = obj.tagData;
+  dialog.value.title = obj.label || "修改";
+  dialog.value.edit.visible = true;
+  dialog.value.custom.visible = false;
+  dialog.value.visible = true;
+  dialog.value.width = "500px";
+}
+function handleCustom(obj, row, custom) {
+  dialog.value.custom.data = row || [];
+  dialog.value.custom.custom = custom || [];
+  // 异步加载组件
+  dialog.value.custom.component = defineAsyncComponent({
+    loader: () => import(/* @vite-ignore */ `../${custom.src}.vue`)
+  });
+  dialog.value.width = custom.width;
+  dialog.value.title = custom.title;
+  dialog.value.edit.visible = false;
+  dialog.value.custom.visible = true;
+  if (custom.height !== undefined) {
+    dialog.value.custom.height = custom.height;
+  } else {
+    dialog.value.custom.height = "600px";
+  }
+  dialog.value.visible = true;
+}
+// 删除
+function handleDelete(obj, row) {
+  if (row.length === 0) {
+    ElMessage.warning("未勾选记录");
+    return;
+  }
+  const ids: any[] = [];
+  row.forEach(it => {
+    ids.push(it.Id);
+  });
+  ElMessageBox.confirm("此操作将永久删除勾选记录, 是否继续?").then(() => {
+    Api.delete(ids).then(res => {
+      if (res.code === 200) {
+        handleReloadPaged();
+        ElMessage.success("删除成功");
+      } else {
+        ElMessage.error(res.message);
+      }
+    });
+  });
+}
+// 页面完成回调
+function handleAddCallback() {
+  Api.url = table.value.apiUrl;
+  dialog.value.visible = false;
+  dialog.value.edit.visible = false;
+  dialog.value.custom.visible = false;
+  handleReloadPaged();
+}
+function tableClose() {
+  handleAddCallback();
+}
+function pageSizeChange(o) {
+  table.value.search.PageSize = o;
+  fetchPagedData();
+}
+function pageIndexChange(o) {
+  table.value.search.PageIndex = o - 1;
+  fetchPagedData();
+}
+// 勾选
+function handleSelectionChange(selection) {
+  console.log("selection-change", selection);
+
+  table.value.selectRows = selection;
+}
+// 查询
+function handleReloadPaged(reload = true) {
+  if (
+    table.value.search === undefined ||
+    table.value.search.PageIndex === undefined
+  ) {
+    table.value.search.PageIndex = 0;
+    table.value.search.PageSize = 20;
+  }
+  table.value.search.Conditions = [];
+  for (let name in table.value.column) {
+    if (
+      !table.value.column[name].search ||
+      table.value.column[name].value === undefined ||
+      table.value.column[name].value === null ||
+      table.value.column[name].value === ""
+    ) {
+      continue;
+    }
+    let data: any = { ConditionalType: 0 };
+    if (table.value.column[name].type === "datetime") {
+      // data.CSharpTypeName = 'DateTime'
+      data.ConditionalType = 8; // '2023-10-07%'
+    } else if (table.value.column[name].type === "switch") {
+      data.CSharpTypeName = "Boolean";
+    } else if (table.value.column[name].type === "string") {
+      data.ConditionalType = "Like";
+    }
+    data.FieldName = name.charAt(0).toUpperCase() + name.slice(1);
+    data.FieldValue = table.value.column[name].value;
+
+    if (table.value.column[name].searchType != undefined) {
+      data.ConditionalType = table.value.column[name].searchType || 0;
+    }
+    table.value.search.Conditions.push(data);
+  }
+
+  if (!reload && table.value.search.Conditions.length > 0) {
+    table.value.search.PageIndex = 0;
+  }
+  if (table.value.searchCallback) {
+    table.value.searchCallback(table.value.search);
+  }
+  fetchPagedData();
+}
+// 加载前置数据（如查询条件的下拉选择数据）
+async function fetchInitData() {
+  for (const key in table.value.column) {
+    const element = table.value.column[key];
+    if (element.type === "dropdown") {
+      if (!element.setting.datasource) {
+        // 存在值就不处理
+
+        let rdata = await eval(element.setting.datasourceStr);
+        element.setting.datasource = rdata.data;
+        console.log(key + " " + element.setting.datasourceStr, rdata);
+      }
+    }
+    if (
+      element.custom == undefined &&
+      (element.type === "switch" ||
+        element.type === "dropdown" ||
+        element.type === "string" ||
+        element.type === undefined)
+    ) {
+      element.custom = row => {
+        let sc = element.setting.datasource.find(
+          s => s[element.setting.mapValue] + "" == row[key] + ""
+        );
+        return !sc ? row[key] : sc[element.setting.maplabel];
+      };
+    } else if (element.custom == undefined) {
+      element.custom = row => row[key];
+    }
+  }
+  setTimeout(() => {
+    init.value = true;
+    appStyle();
+  }, 0);
+}
+function showTips(item, value) {
+  if (item.width == undefined) {
+    return false;
+  }
+  return (
+    getByteLen(item.custom(value) + "") * 16 < item.width.replace("px", "")
+  );
+}
+function getByteLen(str) {
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    str.charCodeAt(i) < 256 ? (len += 1) : (len += 2);
+  }
+  return len;
+}
+// 加载分页数据
+function fetchPagedData() {
+  for (const iterator of table.value.search.defaultConditions) {
+    if (!iterator) continue;
+    if (!table.value.search.Conditions.find(s => s == iterator)) {
+      table.value.search.Conditions.push(iterator);
+    }
+  }
+  Api.PageList(table.value.search).then(res => {
+    if (res.code === 200) {
+      table.value.data = res.data.data.map((s, i) => {
+        return { ...s, customId: i };
+      });
+      table.value.pageData = res.data;
+    }
+  });
+}
+</script>
+
+<template>
+  <div v-if="tableShow" ref="appB" class="app-container container-h">
+    <div ref="appB_S" class="search-container1">
+      <!-- 搜索项目 -->
+      <el-form v-if="table.search.show" :inline="true" :model="table.search">
+        <el-form-item
+          v-for="(o, n, i) in table.column"
+          v-show="o.search"
+          :key="i"
+        >
+          <el-date-picker
+            v-if="o.type.trim() == 'datetime'"
+            v-model="o.value"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            type="date"
+            :placeholder="o.label"
+            style="width: 100%"
+          />
+          <el-select
+            v-else-if="o.type.trim() == 'dropdown'"
+            v-model="o.value"
+            :multiple="o.multiple"
+            clearable
+            filterable
+            :placeholder="o.label"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in o.setting.datasource"
+              :key="item.Value"
+              autocomplete="off"
+              :label="item[o.setting.maplabel]"
+              :value="item[o.setting.mapValue]"
+            />
+          </el-select>
+          <el-select
+            v-else-if="o.type.trim() == 'switch'"
+            v-model="o.value"
+            clearable
+            filterable
+            :placeholder="o.label"
+            style="width: 100%"
+          >
+            <el-option autocomplete="off" :label="'启用'" :value="true" />
+            <el-option autocomplete="off" :label="'禁用'" :value="false" />
+          </el-select>
+          <div v-else-if="o.type.trim() == 'img'" v-show="false" />
+          <el-input v-else v-model="o.value as string" :placeholder="o.label" />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            :icon="Search"
+            @click="handleReloadPaged(false)"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div v-if="table.operationTop" class="toolbar-container">
+      <!-- 头部按钮组 -->
+      <el-button
+        v-for="(e, i) in table.operationColumnData.filter(s => s.topBtn)"
+        v-show="execute(e['show'], {}, e)"
+        :key="i"
+        :type="e.btnStyle || 'info'"
+        @click="getbtnClick(e, null)"
+        >{{ e.label }}</el-button>
+    </div>
+    <el-table
+      v-if="init"
+      fit
+      :height="tableHeight"
+      :data="table.data"
+      :border="table.border"
+      :highlight-current-row="true"
+      style="width: 100%"
+      :row-key="rowKeyFun"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column v-if="table.selectColumn" type="selection" width="40" />
+      <el-table-column
+        v-if="
+          table.operationColumn &&
+          table.operationColumnData.filter(s => !s.topBtn).length > 0
+        "
+        label="操作"
+        :width="getOperationColumnWidth()"
+      >
+        <template v-slot="scope">
+          <div class="columnTemplate">
+            <el-button
+              v-for="(e, i) in table.operationColumnData.filter(s => !s.topBtn)"
+              v-show="execute(e['show'], scope, e)"
+              :key="i"
+              class="btn"
+              text
+              :type="e.btnStyle || 'primary'"
+              @click="getbtnClick(e, scope.row)"
+            >
+              {{ e.label }}</el-button
+            >
+          </div>
+          <!-- 行内按钮组 -->
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(item, name, i) of table.column"
+        v-show="item.show"
+        :key="i"
+        :prop="name"
+        :label="item.label"
+        :width="item.width"
+      >
+        <template v-slot="scope">
+          <div class="columnTemplate">
+            <!-- 暂未实现 -->
+            <div v-if="item.type.trim() == 'math'">
+              {{ item.custom(scope.row) }}
+            </div>
+            <!-- <ShowMathJax
+              v-if="item.type.trim() == 'math'"
+              style="zoom: 0.8"
+              :str="item.custom(scope.row)"
+              :divId="'MathJax_' + scope.row.Id"
+            /> -->
+            <el-image
+              v-else-if="item.type.trim() == 'img'"
+              style="width: 300px; height: 100px"
+              fit="fill"
+              :src="item.setting.imgUrl(scope.row[name], scope.row)[0]"
+              :preview-src-list="
+                Array.from(item.setting.imgUrl(scope.row[name], scope.row))
+              "
+            >
+              <template v-slot:error>
+                <div class="image-slot">
+                  {{ item.setting.imgUrl(scope.row[name], scope.row) }}
+                </div>
+              </template>
+            </el-image>
+            <el-tooltip
+              v-else-if="item.type.trim() != 'img'"
+              popper-class="maxWidth600px"
+              :disabled="showTips(item, scope.row)"
+              :content="item.custom(scope.row) + ''"
+              placement="top"
+              effect="light"
+            >
+              <div class="tab_tip" :style="{ width: item.width }">
+                {{ item.custom(scope.row) }}
+              </div>
+            </el-tooltip>
+            <!-- <p ></p> -->
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="display: flex; align-items: center; justify-content: center">
+      <el-pagination
+        :current-page="table.search.PageIndex + 1"
+        :page-sizes="[20, 40, 80, 100]"
+        :page-size="table.search.PageSize"
+        layout="prev, pager, next,sizes, total"
+        :total="table.pageData.total"
+        @size-change="pageSizeChange"
+        @current-change="pageIndexChange"
+      />
+    </div>
+    <div class="dialog-container">
+      <el-dialog
+        v-if="dialog.visible"
+        ref="elDialog"
+        v-model:visible="dialog.visible"
+        :class="dialog.title ? '' : 'noHeader'"
+        :title="dialog.title"
+        :width="dialog.width"
+        :close-on-click-modal="false"
+        :close-on-press-escape="dialog.close"
+        :before-close="tableClose"
+        append-to-body
+      >
+        <hTableEdit
+          v-if="dialog.edit.visible"
+          :id="dialog.edit.id"
+          :data="table"
+          :tagData="dialog.edit.tagData"
+          :row="dialog.edit.row"
+          @handlePagedCallback="handleAddCallback"
+        />
+        />
+        <component
+          :is="dialog.custom.component"
+          v-if="dialog.custom.visible"
+          ref="custom"
+          :style="{ height: 'calc( ' + dialog.custom.height + ' - 84px )' }"
+          :iscomponent="true"
+          :custom="dialog.custom.custom"
+          :CancelCallback="handleAddCallback"
+          :data="dialog.custom.data"
+          @handlePagedCallback="handleAddCallback"
+        />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.columnTemplate .btn {
+  margin-left: 0 !important;
+}
+.columnTemplate {
+  display: flex;
+  gap: 5px;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  align-content: flex-start;
+}
+.sty .tab_tip {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.toolbar-container {
+  padding-bottom: 5px;
+}
+.maxWidth600px {
+  max-width: 600px;
+}
+</style>
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 1cc1a4f..a9172f9 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -20,6 +20,24 @@ export default {
         title: "首页",
         showLink: VITE_HIDE_HOME === "true" ? false : true
       }
+    },
+    {
+      path: "/school",
+      name: "school",
+      component: () => import("@/views/school/index.vue"),
+      meta: {
+        title: "学校",
+        showLink: true
+      }
+    },
+    {
+      path: "/menu",
+      name: "Menu",
+      component: () => import("@/views/menu/index.vue"),
+      meta: {
+        title: "菜单",
+        showLink: true
+      }
     }
   ]
 } satisfies RouteConfigsTable;
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index ca5f8f0..97bc7cd 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -26,7 +26,6 @@ export const usePermissionStore = defineStore("pure-permission", {
   actions: {
     /** 组装整体路由生成的菜单 */
     handleWholeMenus(routes: any[]) {
-      debugger;
       this.wholeMenus = filterNoPermissionTree(
         filterTree(ascending(this.constantMenus.concat(routes)))
       );
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
new file mode 100644
index 0000000..07f3da1
--- /dev/null
+++ b/src/views/menu/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <div style="padding-bottom: 5px;">
+      <el-button type="primary"> 分配权限 </el-button>
+    </div>
+    <el-tree
+      :data="treeData"
+      :props="treeProps"
+      node-key="id"
+      :default-expand-all="true"
+      :highlight-current="true"
+      show-checkbox
+      class="menu-tree"
+    >
+      <template #default="{ node, data }">
+        <div class="menu-node">
+          <i v-if="data.icon" :class="data.icon" class="menu-icon"></i>
+          <span class="menu-title">{{ data.title }}</span>
+          <span class="menu-path" v-if="data.path">{{ data.path }}</span>
+        </div>
+        <div style="display: flex; gap: 6px">
+          <el-button type="success" link @click="() => {}"> 添加 </el-button>
+          <el-button type="primary" link @click="() => {}"> 编辑 </el-button>
+          <el-button type="danger" link @click="() => {}"> 删除 </el-button>
+        </div>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuAll, MenuItem } from "@/api/menu";
+import { ElMessage } from "element-plus";
+import { ref, computed, onMounted } from "vue";
+defineOptions({
+  name: "Menu"
+});
+
+// 模拟从API获取的菜单数据
+const mockMenuData: MenuItem[] = [
+  {
+    id: 1,
+    name: "dashboard",
+    path: "/dashboard",
+    isButton: false,
+    title: "控制台",
+    icon: "el-icon-monitor",
+    rank: 1,
+    showLink: true,
+    parentId: 0
+  },
+  {
+    id: 2,
+    name: "system",
+    path: "/system",
+    isButton: false,
+    title: "系统管理",
+    icon: "el-icon-setting",
+    rank: 2,
+    showLink: true,
+    parentId: 0
+  },
+  {
+    id: 3,
+    name: "user",
+    path: "/system/user",
+    isButton: false,
+    title: "用户管理",
+    icon: "el-icon-user",
+    rank: 1,
+    showLink: true,
+    parentId: 2
+  },
+  {
+    id: 4,
+    name: "role",
+    path: "/system/role",
+    isButton: false,
+    title: "角色管理",
+    icon: "el-icon-s-custom",
+    rank: 2,
+    showLink: true,
+    parentId: 2
+  },
+  {
+    id: 5,
+    name: "createUser",
+    isButton: true,
+    title: "创建用户",
+    rank: 1,
+    showLink: true,
+    parentId: 3
+  }
+];
+
+// 将扁平数据转换为树形结构
+const convertToTree = (menus: MenuItem[]): MenuItem[] => {
+  const menuMap = new Map<number, MenuItem>();
+  const tree: MenuItem[] = [];
+
+  // 创建映射并初始化children
+  menus.forEach(menu => {
+    menuMap.set(menu.id, { ...menu, children: [] });
+  });
+
+  // 构建树形结构
+  menuMap.forEach(menu => {
+    if (menu.parentId === 0) {
+      tree.push(menu);
+    } else {
+      const parent = menuMap.get(menu.parentId);
+      if (parent) {
+        parent.children!.push(menu);
+      }
+    }
+  });
+
+  // 对同级菜单排序
+  const sortChildren = (nodes: MenuItem[]) => {
+    nodes.sort((a, b) => a.rank - b.rank);
+    nodes.forEach(node => {
+      if (node.children && node.children.length > 0) {
+        sortChildren(node.children);
+      }
+    });
+  };
+
+  sortChildren(tree);
+  return tree;
+};
+
+// 树形结构数据
+const treeData = ref<MenuItem[]>([]);
+
+// 树组件配置
+const treeProps = {
+  label: "title",
+  children: "children"
+};
+
+// 模拟API请求
+const fetchMenuData = async (): Promise<MenuItem[]> => {
+  // 实际项目中替换为API调用:
+  // const response = await fetch('/api/menus')
+  // return await response.json()
+
+  // 这里使用模拟数据
+  return new Promise(resolve => {
+    setTimeout(() => resolve(mockMenuData), 300);
+  });
+};
+
+onMounted(async () => {
+  const flatData = await MenuAll();
+  if (flatData.code === 200) {
+    treeData.value = convertToTree(flatData.data);
+  } else {
+    ElMessage.error(flatData.message);
+  }
+});
+</script>
+
+<style scoped>
+.menu-tree {
+  padding: 15px;
+  background: #fff;
+  border-radius: 4px;
+}
+
+.menu-node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5px 0;
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 16px;
+  color: #409eff;
+}
+
+.menu-title {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.menu-path {
+  font-size: 12px;
+  color: #909399;
+  margin-right: 10px;
+  flex-grow: 1;
+}
+.menu-tree {
+  padding: 20px; /* 增加内边距 */
+  background: #fff;
+  border-radius: 4px;
+  font-size: 16px; /* 增大整体字体 */
+}
+
+/* 使用深度选择器修改树节点样式 */
+:deep(.el-tree-node) {
+  margin-bottom: 12px; /* 增加节点间距 */
+}
+
+:deep(.el-tree-node__content) {
+  height: 48px; /* 增加节点高度 */
+  padding: 10px 0; /* 增加垂直内边距 */
+}
+
+.menu-node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0; /* 增加内边距 */
+}
+
+.menu-icon {
+  margin-right: 12px; /* 增加图标右边距 */
+  font-size: 20px; /* 增大图标 */
+  color: #409eff;
+}
+
+.menu-title {
+  font-size: 18px; /* 增大标题字体 */
+  margin-right: 15px; /* 增加右边距 */
+  font-weight: 500; /* 加粗字体 */
+}
+
+.menu-path {
+  font-size: 16px; /* 增大路径字体 */
+  color: #909399;
+  margin-right: 15px; /* 增加右边距 */
+  flex-grow: 1;
+}
+</style>
diff --git a/src/views/school/index.vue b/src/views/school/index.vue
new file mode 100644
index 0000000..902ea25
--- /dev/null
+++ b/src/views/school/index.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import ahTable from "@/components/hTable/index.vue";
+import { TableConfig } from "@/components/hTable/hTable";
+import { onMounted, ref } from "vue";
+defineOptions({
+  name: "School"
+});
+
+onMounted(() => {});
+function searchCallback(data) {
+  let c = data.Conditions.find(s => s.FieldName === "Enable");
+  if (c) {
+    if (c.FieldValue == "true") {
+      c.FieldValue = 1;
+    } else {
+      c.FieldValue = 0;
+    }
+  }
+}
+const table = ref<{ initTable: (config: TableConfig) => void }>(null);
+const tableData: TableConfig = {
+  apiUrl: "School",
+  selectColumn: false, // 列表选择
+  border: false, // 是否显示表格边框
+  searchCallback: searchCallback,
+  search: {
+    // 查询条件
+    show: true,
+    PageIndex: 0,
+    PageSize: 20,
+    OrderBy: "CreateTime", // 排序
+    defaultConditions: [], // 默认查询条件
+    Conditions: []
+  },
+  operationColumn: true, // 显示操作按钮
+  operationColumnData: [
+    {
+      // 操作按钮
+      topBtn: false, // 是头部按钮
+      label: "修改",
+      btnType: "edit" // 按钮类型 add edit del custom
+    },
+    {
+      topBtn: true, // 头部按钮
+      show: true,
+      label: "新增",
+      btnType: "add", // 按钮类型 add edit del custom
+      btnStyle: "success" // topBtn: true才生效 success danger
+    },
+    // {
+    //   topBtn: true, // 头部按钮
+    //   label: "新增学校",
+    //   btnType: "custom", // 按钮类型 add edit del custom
+    //   btnStyle: "success", // topBtn: true才生效 success danger
+    //   custom: {
+    //     // 按钮类型 custom 专用
+    //     title: "新增学校", // 弹出框title
+    //     src: "school/SchoolEdit", // 组件路径
+    //     width: "550px", // 弹框宽度
+    //     height: "300px" // 弹框高度
+    //   }
+    // },
+    {
+      topBtn: false, // 头部按钮
+      show: true,
+      label: "删除",
+      btnType: "del", // 按钮类型 add edit del 不设置则 自定义按钮
+      btnStyle: "danger" // topBtn: true才生效 success danger
+    }
+  ],
+  column: {
+    // 行数据
+    id: {
+      label: "编号",
+      search: true,
+      add: true, // 字段允许添加
+      edit: true, // 字段允许修改
+      width: "150px"
+    },
+    name: {
+      label: "学校名称",
+      width: "300px",
+      search: true,
+      searchType: "Like",
+      add: true, // 字段允许添加
+      edit: true // 字段允许修改
+    },
+    loc: {
+      label: "地区",
+      width: "300px",
+      search: true,
+      custom: row => `${row.pname}-${row.cname}-${row.rname}`,
+      add: true, // 字段允许添加
+      edit: true // 字段允许修改
+    },
+    enable: {
+      label: "启用",
+      type: "dropdown",
+      search: true,
+      add: true, // 字段允许添加
+      edit: true, // 字段允许修改
+      setting: {
+        datasource: [
+          { Value: "true", Text: "√" },
+          { Value: "false", Text: "X" }
+        ]
+      }
+    }
+  },
+  data: [],
+  pageData: {
+    total: 0
+  },
+  selectRows: []
+};
+</script>
+
+<template>
+  <div><ahTable ref="table" :tableConfig="tableData" /></div>
+</template>