feat: 新增菜单功能

src/api/system/dept.ts

@@ -1,6 +1,7 @@
 import { http } from "@/utils/http";
 
 export interface DeptQuery extends BaseQuery {
+  // TODO 目前不需要这个参数
   deptId?: number;
   parentId?: number;
 }

src/api/system/menu.ts

@@ -0,0 +1,117 @@
+import { http } from "@/utils/http";
+
+export interface MenuQuery {
+  isButton: boolean;
+}
+
+/**
+ * MenuDTO
+ */
+export interface MenuDTO {
+  createTime?: Date;
+  isButton?: number;
+  id?: number;
+  menuName?: string;
+  parentId?: number;
+  menuType: number;
+  menuTypeStr: string;
+  path?: string;
+  permission?: string;
+  routerName?: string;
+  status?: number;
+  statusStr?: string;
+}
+
+/**
+ * MenuDetailDTO
+ */
+export interface MenuDetailDTO extends MenuDTO {
+  meta: MetaDTO;
+  permission?: string;
+}
+
+/**
+ * AddMenuCommand
+ */
+export interface MenuRequest {
+  id: number;
+  parentId: number;
+  menuName: string;
+  routerName?: string;
+  path?: string;
+  permission?: string;
+  status: number;
+  isButton: boolean;
+  menuType: number;
+  meta: MetaDTO;
+}
+
+/**
+ * MetaDTO
+ */
+export interface MetaDTO {
+  auths?: string[];
+  dynamicLevel?: number;
+  extraIcon?: ExtraIconDTO;
+  frameLoading?: boolean;
+  frameSrc?: string;
+  hiddenTag?: boolean;
+  icon?: string;
+  isFrameSrcInternal?: boolean;
+  keepAlive?: boolean;
+  rank?: number;
+  roles?: string[];
+  showLink?: boolean;
+  showParent?: boolean;
+  title?: string;
+  transition?: TransitionDTO;
+}
+
+/**
+ * ExtraIconDTO
+ */
+export interface ExtraIconDTO {
+  name?: string;
+  svg?: boolean;
+}
+
+/**
+ * TransitionDTO
+ */
+export interface TransitionDTO {
+  enterTransition?: string;
+  leaveTransition?: string;
+  name?: string;
+}
+
+/** 获取菜单列表 */
+export const getMenuListApi = (params: MenuQuery) => {
+  return http.request<ResponseData<Array<MenuDTO>>>("get", "/system/menus", {
+    params
+  });
+};
+
+/** 添加菜单 */
+export const addMenuApi = (data: MenuRequest) => {
+  return http.request<ResponseData<void>>("post", "/system/menus", { data });
+};
+
+/** 修改菜单 */
+export const updateMenuApi = (menuId: string, data: MenuRequest) => {
+  return http.request<ResponseData<void>>("put", `/system/menus/${menuId}`, {
+    data
+  });
+};
+
+/** 删除菜单 */
+export const deleteMenuApi = (menuId: string) => {
+  return http.request<ResponseData<void>>("delete", `/system/menus/${menuId}`);
+};
+
+/** 菜单详情 */
+export const getMenuInfoApi = (menuId: string) => {
+  return http.request<ResponseData<MenuDetailDTO>>(
+    "get",
+    `/system/menus/${menuId}`
+  );
+};

src/utils/common.ts

@@ -2,6 +2,7 @@ import { PaginationProps, TableColumn } from "@pureadmin/table";
 import { Sort } from "element-plus";
 import { utils, writeFile } from "xlsx";
 import { message } from "./message";
+import { pinyin } from "pinyin-pro";
 
 export class CommonUtils {
   static getBeginTimeSafely(timeRange: string[]): string {
@@ -126,6 +127,15 @@ export class CommonUtils {
     return paginatedList;
   }
 
+  static toPinyin(chineseStr: string): string {
+    if (chineseStr == null || chineseStr === undefined || chineseStr === "") {
+      return chineseStr;
+    }
+
+    const pinyinStr = pinyin(chineseStr, { toneType: "none" });
+    return pinyinStr.replace(/\s/g, "");
+  }
+
   // 私有构造函数，防止类被实例化
   private constructor() {}
 }

src/utils/tree.ts

@@ -126,6 +126,25 @@ export const appendFieldByUniqueId = (
   return tree;
 };
 
+/**
+ * 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
+ *（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+ * 这个是pure作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
+ * @param treeList
+ * @param field 根据哪个字段来设置disabled
+ * @returns
+ */
+export function setDisabledForTreeOptions(treeList, field) {
+  if (!treeList || !treeList.length) return;
+  const newTreeList = [];
+  for (let i = 0; i < treeList.length; i++) {
+    treeList[i].disabled = treeList[i][field] === 0 ? true : false;
+    setDisabledForTreeOptions(treeList[i].children, field);
+    newTreeList.push(treeList[i]);
+  }
+  return newTreeList;
+}
+
 /**
  * @description 构造树型结构数据
  * @param data 数据源

src/views/monitor/server/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <!-- v-loading指令  可以直接调用Loading动画  -->
   <div class="main" v-loading="loading">
+    <!-- 注意template和div之间 不要加注释  会导致后续的页面渲染空白 -->
+    <!-- v-loading指令  可以直接调用Loading动画  -->
     <el-row :gutter="30">
       <el-col :span="12" class="card-box">
         <el-card>

src/views/system/dept/utils/hook.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
-import { handleTree } from "@/utils/tree";
+import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
 import {
   DeptDTO,
@@ -29,14 +29,14 @@ export function useHook() {
     let filterDataList = [...originalDataList.value];
     if (!isAllEmpty(searchFormParams.deptName)) {
       // 前端搜索部门名称
-      filterDataList = filterDataList.filter(item =>
+      filterDataList = filterDataList.filter((item: DeptDTO) =>
         item.deptName.includes(searchFormParams.deptName)
       );
     }
     if (!isAllEmpty(searchFormParams.status)) {
       // 前端搜索状态
       filterDataList = filterDataList.filter(
-        item => item.status === searchFormParams.status
+        (item: DeptDTO) => item.status === searchFormParams.status
       );
     }
     // 处理成树结构
@@ -109,24 +109,6 @@ export function useHook() {
     originalDataList.value = data;
   }
 
-  /**
-   * 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
-   *（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
-   * 这个是作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
-   * @param treeList
-   * @returns
-   */
-  function setDisabledForTreeOptions(treeList) {
-    if (!treeList || !treeList.length) return;
-    const newTreeList = [];
-    for (let i = 0; i < treeList.length; i++) {
-      treeList[i].disabled = treeList[i].status === 0 ? true : false;
-      setDisabledForTreeOptions(treeList[i].children);
-      newTreeList.push(treeList[i]);
-    }
-    return newTreeList;
-  }
-
   async function handleAdd(row, done) {
     await addDeptApi(row).then(() => {
       message(`您新增了部门:${row.deptName}`, {
@@ -153,7 +135,7 @@ export function useHook() {
 
   async function openDialog(title = "新增", row?: DeptDTO) {
     const { data } = await getDeptListApi();
-    const treeList = setDisabledForTreeOptions(handleTree(data));
+    const treeList = setDisabledForTreeOptions(handleTree(data), "status");
 
     if (title === "编辑") {
       row = (await getDeptInfoApi(row.id + "")).data;

src/views/system/menu/form.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { usePublicHooks } from "../hooks";
+import { MenuRequest } from "@/api/system/menu";
+
+interface FormProps {
+  formInline: MenuRequest;
+  higherMenuOptions: any[];
+}
+
+// TODO 为什么这里设置的rank: 1是不生效的,而hook那边定义的才能生效   到底需不需要 这个withDefaults
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    id: 0,
+    parentId: 0,
+    menuName: "",
+    routerName: "",
+    path: "",
+    status: 1,
+    isButton: undefined,
+    permission: "",
+    menuType: undefined,
+    meta: {}
+  }),
+  higherMenuOptions: () => []
+});
+
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+const newFormInline = ref(props.formInline);
+const deptOptions = ref(props.higherMenuOptions);
+
+const typeName = computed(() => {
+  return newFormInline.value.isButton ? "按钮" : "菜单";
+});
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col>
+        <el-form-item label="父菜单">
+          <el-cascader
+            class="w-full"
+            v-model="newFormInline.parentId"
+            :options="deptOptions"
+            :props="{
+              value: 'id',
+              label: 'menuName',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            placeholder="请选择父菜单（不选则为根目录菜单）"
+          />
+          <!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
+          <!-- <template #default="{ node, data }">
+              <span>{{ data.deptName }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template> -->
+          <!-- </el-cascader> -->
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="类型">
+          <el-radio-group
+            v-model="newFormInline.isButton"
+            :disabled="newFormInline.id !== 0"
+          >
+            <el-radio :label="false">菜单</el-radio>
+            <el-radio :label="true">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </re-col>
+      <template v-if="newFormInline.isButton === false">
+        <re-col :value="24">
+          <el-form-item label="菜单类型">
+            <el-radio-group
+              v-model="newFormInline.menuType"
+              :disabled="newFormInline.id !== 0"
+            >
+              <el-radio :label="1">页面</el-radio>
+              <el-radio :label="2">目录</el-radio>
+              <el-radio :label="3">内嵌Iframe</el-radio>
+              <el-radio :label="4">外链跳转</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </re-col>
+      </template>
+    </el-row>
+
+    <el-row :gutter="30">
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item :label="`${typeName}名称`" prop="menuName">
+          <el-input
+            v-model="newFormInline.menuName"
+            clearable
+            :placeholder="`请输入${typeName}名称`"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="权限标识" prop="permission">
+          <template v-slot:label>
+            <el-tooltip content="这是权限标识" placement="top">
+              <span>权限标识</span>
+            </el-tooltip>
+          </template>
+          <el-input
+            v-model="newFormInline.permission"
+            clearable
+            placeholder="请输入权限标识"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+
+    <el-row v-if="newFormInline.isButton === false" :gutter="30">
+      <template v-if="newFormInline.menuType == 1">
+        <re-col :value="12" :xs="24" :sm="24">
+          <el-form-item label="页面路径" prop="path">
+            <el-input
+              v-model="newFormInline.path"
+              clearable
+              placeholder="请输入前端项目views文件内的页面路径"
+            />
+          </el-form-item>
+        </re-col>
+        <re-col :value="12">
+          <el-form-item label="组件名">
+            <el-input
+              v-model="newFormInline.routerName"
+              clearable
+              placeholder="请输入组件定义的name，defineOptions中的name"
+            />
+          </el-form-item>
+        </re-col>
+      </template>
+      <template v-else-if="newFormInline.menuType == 2">
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item label="路由地址" prop="path">
+            <el-input
+              v-model="newFormInline.path"
+              clearable
+              placeholder="请输入目录的路由地址以/开头"
+            />
+          </el-form-item>
+        </re-col>
+      </template>
+      <template v-else-if="newFormInline.menuType == 3">
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item label="网站地址" prop="meta.frameSrc">
+            <el-input
+              v-model="newFormInline.meta.frameSrc"
+              clearable
+              placeholder="请输入外部网站地址或者内部网站相对地址"
+            />
+          </el-form-item>
+        </re-col>
+      </template>
+
+      <template v-else-if="newFormInline.menuType == 4">
+        <re-col :value="24" :xs="24" :sm="24">
+          <el-form-item label="网站地址" prop="routerName">
+            <!-- 这里需要做拦截处理 -->
+            <el-input
+              v-model="newFormInline.routerName"
+              clearable
+              placeholder="请输入外部网站地址，必须以https://或者http://开头"
+            />
+          </el-form-item>
+        </re-col>
+      </template>
+    </el-row>
+
+    <el-row>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="排序">
+          <el-input-number
+            v-model="newFormInline.meta.rank"
+            :min="0"
+            :max="999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>

src/views/system/menu/index.vue

@@ -1,71 +1,49 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useLoginLogHook } from "./utils/hook";
+import { useHook } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
 import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
-import { useUserStoreHook } from "@/store/modules/user";
+import AddFill from "@iconify-icons/ri/add-circle-line";
-// TODO 这个导入声明好长  看看如何优化
-import { CommonUtils } from "@/utils/common";
 
-/** 组件name最好和菜单表中的router_name一致 */
 defineOptions({
-  name: "SystemOperationLog"
+  name: "SystemMenu"
 });
 
-const loginLogStatusList =
+const formRef = ref();
-  useUserStoreHook().dictionaryList["sysLoginLog.status"];
-
 const tableRef = ref();
-
-const searchFormRef = ref();
 const {
   searchFormParams,
-  pageLoading,
+  loading,
   columns,
   dataList,
-  pagination,
-  timeRange,
-  defaultSort,
-  multipleSelection,
   onSearch,
   resetForm,
-  exportAllExcel,
+  openDialog,
-  getLoginLogList,
+  handleDelete
-  handleDelete,
+} = useHook();
-  handleBulkDelete
-} = useLoginLogHook();
 </script>
 
 <template>
   <div class="main">
-    <!-- 搜索栏 -->
     <el-form
-      ref="searchFormRef"
+      ref="formRef"
       :inline="true"
       :model="searchFormParams"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
-      <el-form-item label="登录IP：" prop="ipAddress">
+      <el-form-item label="菜单名称：" prop="menuName">
         <el-input
-          v-model="searchFormParams.ipAddress"
+          v-model="searchFormParams.menuName"
-          placeholder="请输入IP地址"
+          placeholder="请输入菜单名称"
           clearable
           class="!w-[200px]"
         />
       </el-form-item>
-      <el-form-item label="用户名：" prop="username">
-        <el-input
-          v-model="searchFormParams.username"
-          placeholder="请选择用户名称"
-          clearable
-          class="!w-[200px]"
-        />
-      </el-form-item>
-
       <el-form-item label="状态：" prop="status">
         <el-select
           v-model="searchFormParams.status"
@@ -73,94 +51,72 @@ const {
           clearable
           class="!w-[180px]"
         >
-          <el-option
+          <el-option label="启用" :value="1" />
-            v-for="dict in loginLogStatusList"
+          <el-option label="停用" :value="0" />
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <label class="el-form-item__label is-required font-bold"
-          >登录时间：</label
-        >
-        <!-- TODO 如何消除这个v-model的warning -->
-        <el-date-picker
-          class="!w-[240px]"
-          v-model="timeRange"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           :icon="useRenderIcon(Search)"
-          :loading="pageLoading"
+          :loading="loading"
           @click="onSearch"
         >
           搜索
         </el-button>
-        <el-button
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          :icon="useRenderIcon(Refresh)"
-          @click="resetForm(searchFormRef, tableRef)"
-        >
           重置
         </el-button>
       </el-form-item>
     </el-form>
 
-    <!-- table bar 包裹  table -->
+    <PureTableBar
-    <PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
+      title="菜单列表"
-      <!-- 表格操作栏 -->
+      :columns="columns"
+      :tableRef="tableRef?.getTableRef()"
+      @refresh="onSearch"
+    >
       <template #buttons>
-        <el-button
-          type="danger"
-          :icon="useRenderIcon(Delete)"
-          @click="handleBulkDelete(tableRef)"
-        >
-          批量删除
-        </el-button>
         <el-button
           type="primary"
-          @click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
+          :icon="useRenderIcon(AddFill)"
-          >单页导出</el-button
+          @click="openDialog()"
         >
-        <el-button type="primary" @click="exportAllExcel">全部导出</el-button>
+          新增菜单
+        </el-button>
       </template>
       <template v-slot="{ size, dynamicColumns }">
         <pure-table
-          border
           ref="tableRef"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 32 }"
           align-whole="center"
+          row-key="id"
           showOverflowTooltip
           table-layout="auto"
-          :loading="pageLoading"
+          :loading="loading"
           :size="size"
-          adaptive
           :data="dataList"
           :columns="dynamicColumns"
-          :default-sort="defaultSort"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
           :header-cell-style="{
             background: 'var(--el-table-row-hover-bg-color)',
             color: 'var(--el-text-color-primary)'
           }"
-          @page-size-change="getLoginLogList"
-          @page-current-change="getLoginLogList"
-          @sort-change="getLoginLogList"
-          @selection-change="
-            rows => (multipleSelection = rows.map(item => item.logId))
-          "
         >
           <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('编辑', row)"
+            >
+              编辑
+            </el-button>
+
             <el-popconfirm
-              :title="`是否确认删除编号为${row.logId}的这条日志`"
+              :title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
               @confirm="handleDelete(row)"
             >
               <template #reference>
@@ -182,11 +138,7 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-:deep(.el-dropdown-menu__item i) {
-  margin: 0;
-}
-
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;

src/views/system/menu/utils/hook.tsx

@@ -1,234 +1,251 @@
 import dayjs from "dayjs";
+import editForm from "../form.vue";
+import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { ElMessageBox, Sort } from "element-plus";
+import { transferToStandardRouterData } from "./menuLogic";
 import {
-  getLoginLogListApi,
+  MenuDTO,
-  deleteLoginLogApi,
+  MenuRequest,
-  exportLoginLogExcelApi,
+  getMenuListApi,
-  LoginLogQuery
+  addMenuApi,
-} from "@/api/system/log";
+  deleteMenuApi,
-import { reactive, ref, onMounted, toRaw } from "vue";
+  getMenuInfoApi,
-import { useUserStoreHook } from "@/store/modules/user";
+  updateMenuApi,
-import { CommonUtils } from "@/utils/common";
+  MenuDetailDTO
-import { PaginationProps } from "@pureadmin/table";
+} from "@/api/system/menu";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { reactive, ref, onMounted, h, computed } from "vue";
+import { isAllEmpty } from "@pureadmin/utils";
 
-const loginLogStatusMap =
+export function useHook() {
-  useUserStoreHook().dictionaryMap["sysLoginLog.status"];
+  const searchFormParams = reactive({
-
+    menuName: "",
-export function useLoginLogHook() {
+    status: null
-  const defaultSort: Sort = {
-    prop: "loginTime",
-    order: "descending"
-  };
-
-  const pagination: PaginationProps = {
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  };
-
-  const timeRange = ref([]);
-
-  const searchFormParams = reactive<LoginLogQuery>({
-    ipAddress: undefined,
-    username: undefined,
-    status: undefined,
-    beginTime: undefined,
-    endTime: undefined,
-    timeRangeColumn: defaultSort.prop
   });
 
-  const dataList = ref([]);
+  const formRef = ref();
-  const pageLoading = ref(true);
+
-  const multipleSelection = ref([]);
+  const originalDataList = ref([]);
+  const dataList = computed(() => {
+    let filterDataList = [...originalDataList.value];
+    if (!isAllEmpty(searchFormParams.menuName)) {
+      // 前端搜索菜单名称
+      filterDataList = filterDataList.filter((item: MenuDTO) =>
+        item.menuName.includes(searchFormParams.menuName)
+      );
+    }
+    if (!isAllEmpty(searchFormParams.status)) {
+      // 前端搜索状态
+      filterDataList = filterDataList.filter(
+        (item: MenuDTO) => item.status === searchFormParams.status
+      );
+    }
+    // 处理成树结构
+    return [...handleTree(filterDataList)];
+  });
+  const loading = ref(true);
+  const { tagStyle } = usePublicHooks();
 
   const columns: TableColumnList = [
     {
-      type: "selection",
+      label: "菜单名称",
+      prop: "menuName",
+      width: 200,
       align: "left"
     },
     {
-      label: "日志编号",
+      label: "页面路径",
-      prop: "logId",
+      prop: "path",
-      minWidth: 100
+      minWidth: 170
     },
     {
-      label: "用户名",
+      label: "路由名称",
-      prop: "username",
+      prop: "routerName",
-      minWidth: 120,
+      width: 160,
-      sortable: "custom"
+      align: "center"
-    },
-    {
-      label: "IP地址",
-      prop: "ipAddress",
-      minWidth: 120
-    },
-    {
-      label: "登录地点",
-      prop: "loginLocation",
-      minWidth: 120
-    },
-    {
-      label: "操作系统",
-      prop: "operationSystem",
-      minWidth: 120
-    },
-    {
-      label: "浏览器",
-      prop: "browser",
-      minWidth: 120
     },
     {
       label: "状态",
       prop: "status",
-      minWidth: 120,
+      minWidth: 100,
       cellRenderer: ({ row, props }) => (
-        <el-tag
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
-          size={props.size}
+          {row.status === 1 ? "启用" : "停用"}
-          type={loginLogStatusMap[row.status].cssTag}
-          effect="plain"
-        >
-          {loginLogStatusMap[row.status].label}
         </el-tag>
       )
     },
     {
-      label: "状态名",
+      label: "类型",
-      prop: "statusStr",
+      prop: "isButton",
-      minWidth: 120,
+      minWidth: 100,
-      hide: true
+      formatter: ({ isButton }) => (isButton ? "按钮" : "菜单")
     },
     {
-      label: "登录时间",
+      label: "子类型",
-      minWidth: 160,
+      prop: "menuTypeStr",
-      prop: "loginTime",
+      minWidth: 100
-      sortable: "custom",
+    },
-      formatter: ({ loginTime }) =>
+    {
-        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+      label: "排序",
+      prop: "rank",
+      minWidth: 70
+    },
+    {
+      label: "创建时间",
+      minWidth: 200,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
       fixed: "right",
-      width: 140,
+      width: 240,
       slot: "operation"
     }
   ];
 
-  async function onSearch() {
+  function resetForm(formEl) {
-    // 点击搜索的时候 需要重置分页
-    pagination.currentPage = 1;
-    getLoginLogList();
-  }
-
-  function resetForm(formEl, tableRef) {
     if (!formEl) return;
-    // 清空查询参数
     formEl.resetFields();
-    // 清空排序
-    searchFormParams.orderColumn = undefined;
-    searchFormParams.orderDirection = undefined;
-    // 清空时间查询  TODO  这块有点繁琐  有可以优化的地方吗？
-    // Form组件的resetFields方法无法清除datepicker里面的数据。
-    timeRange.value = [];
-    searchFormParams.beginTime = undefined;
-    searchFormParams.endTime = undefined;
-    tableRef.getTableRef().clearSort();
-    // 重置分页并查询
     onSearch();
   }
 
-  async function getLoginLogList(sort: Sort = defaultSort) {
+  async function onSearch() {
-    pageLoading.value = true;
+    loading.value = true;
-    if (sort != null) {
+    // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
-      CommonUtils.fillSortParams(searchFormParams, sort);
+    const { data } = await getMenuListApi({ isButton: null }).finally(() => {
-    }
+      loading.value = false;
-    CommonUtils.fillPaginationParams(searchFormParams, pagination);
+    });
-    CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
+    originalDataList.value = data;
-
-    const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
-      () => {
-        pageLoading.value = false;
-      }
-    );
-    dataList.value = data.rows;
-    pagination.total = data.total;
   }
 
-  async function exportAllExcel(sort: Sort = defaultSort) {
+  /**
-    if (sort != null) {
+   * 测试用例
-      CommonUtils.fillSortParams(searchFormParams, sort);
+   * 1.添加外链跳转菜单
-    }
+   * 2.添加iframe菜单  外链+内链
-    CommonUtils.fillPaginationParams(searchFormParams, pagination);
+   * 3.添加目录
-    CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
+   * 4.添加一级菜单
-
+   * 5.添加按钮
-    exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
+   * 6.iframe和外链跳转不允许添加按钮
-  }
+   * 7.只允许目录添加子菜单
-
+   * 8.基于目录 测试以上1~5的步骤
-  async function handleDelete(row) {
+   * @param row dialog表单数据
-    await deleteLoginLogApi([row.logId]).then(() => {
+   * @param done
-      message(`您删除了操作编号为${row.logId}的这条数据`, {
+   */
+  async function handleAdd(row, done) {
+    await addMenuApi(row).then(() => {
+      message(`您新增了菜单:${row.menuName}`, {
         type: "success"
       });
+      // 关闭弹框
+      done();
       // 刷新列表
-      getLoginLogList();
+      onSearch();
     });
   }
 
-  async function handleBulkDelete(tableRef) {
+  /**
-    if (multipleSelection.value.length === 0) {
+   * 测试用例
-      message("请选择需要删除的数据", { type: "warning" });
+   * 1.编辑页面/目录/iframe/外链/按钮的数据
-      return;
+   * 2.更换父级菜单
+   * 3.不允许改变类型(会导致逻辑变复杂，比如改变类型需要考虑子节点)
+   * @param row
+   * @param done
+   */
+  async function handleUpdate(row, done) {
+    await updateMenuApi(row.id, row).then(() => {
+      message(`您更新了菜单:${row.menuName}`, {
+        type: "success"
+      });
+      // 关闭弹框
+      done();
+      // 刷新列表
+      onSearch();
+    });
+  }
+
+  async function openDialog(title = "新增", row?: MenuDTO) {
+    // 下拉选项需要排除掉按钮
+    const { data } = await getMenuListApi({ isButton: false });
+    const optionTree = setDisabledForTreeOptions(handleTree(data), "status");
+
+    let meta = undefined;
+    if (title === "编辑") {
+      row = (await getMenuInfoApi(row.id + "")).data;
+      meta = (row as MenuDetailDTO).meta;
     }
 
-    ElMessageBox.confirm(
+    console.log(row);
-      `确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
+
-      "系统提示",
+    // TODO 为什么声明一个formInline变量,把变量填充进去，  再给props.formInline 结果就不生效
-      {
+    addDialog({
-        confirmButtonText: "确定",
+      title: `${title}菜单`,
-        cancelButtonText: "取消",
+      props: {
-        type: "warning",
+        formInline: {
-        dangerouslyUseHTMLString: true,
+          id: row?.id ?? 0,
-        draggable: true
+          parentId: row?.parentId ?? 0,
+          menuName: row?.menuName ?? "",
+          routerName: row?.routerName ?? "",
+          path: row?.path ?? "",
+          isButton: row?.isButton,
+          permission: row?.permission ?? "",
+          menuType: row?.menuType ?? undefined,
+          status: row?.status ?? 1,
+          meta: meta ?? { rank: 0 }
+        },
+        higherMenuOptions: [...optionTree]
+      },
+      width: "60%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as MenuRequest;
+
+        // 将菜单的数据转换为标准的路由数据
+        transferToStandardRouterData(curData, optionTree);
+
+        console.log(curData);
+
+        FormRef.validate(valid => {
+          if (valid) {
+            // 表单规则校验通过
+            if (title === "新增") {
+              handleAdd(curData, done);
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              handleUpdate(curData, done);
+            }
+          }
+        });
       }
-    )
+    });
-      .then(async () => {
+  }
-        await deleteLoginLogApi(multipleSelection.value).then(() => {
+
-          message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
+  async function handleDelete(row) {
-            type: "success"
+    await deleteMenuApi(row.id).then(() => {
-          });
+      message(`您删除了${row.menuName}`, { type: "success" });
-          // 刷新列表
+      // 刷新列表
-          getLoginLogList();
+      onSearch();
-        });
+    });
-      })
-      .catch(() => {
-        message("取消删除", {
-          type: "info"
-        });
-        // 清空checkbox选择的数据
-        tableRef.getTableRef().clearSelection();
-      });
   }
 
   onMounted(() => {
-    getLoginLogList();
+    onSearch();
   });
 
   return {
     searchFormParams,
-    pageLoading,
+    loading,
     columns,
     dataList,
-    pagination,
-    defaultSort,
-    timeRange,
-    multipleSelection,
     onSearch,
-    exportAllExcel,
-    // exportExcel,
-    getLoginLogList,
     resetForm,
-    handleDelete,
+    openDialog,
-    handleBulkDelete
+    handleDelete
   };
 }

src/views/system/menu/utils/menuLogic.ts

@@ -0,0 +1,62 @@
+import { isUrl } from "@pureadmin/utils";
+import { MenuRequest } from "@/api/system/menu";
+import { getNodeByUniqueId } from "@/utils/tree";
+import { CommonUtils } from "@/utils/common";
+
+/**
+ * 因为动态路由的逻辑基本上完全依赖前端
+ * 所以需要将菜单的数据转换为标准的路由数据
+ * @param data
+ * @param menuTree
+ */
+export function transferToStandardRouterData(data: MenuRequest, menuTree: any) {
+  // 将菜单名称赋值给meta.title
+  if (data.menuName && data.meta) {
+    data.meta.title = data.menuName;
+  }
+
+  // 如果是页面和目录的话  path如果没有/开头 就自动加上
+  if (data.menuType == 1 || data.menuType == 2) {
+    if (data.path && !data.path.startsWith("/")) {
+      data.path = `/${data.path}`;
+    }
+  }
+
+  // 如果当前菜单是父菜单的唯一节点  记得将当前菜单的showParent=true
+  const parentMenu = getNodeByUniqueId(menuTree, data.parentId);
+  // 按钮不需要显示父菜单
+  if (parentMenu && !data.isButton) {
+    if (!parentMenu.children || parentMenu.children.length === 0) {
+      data.meta.showParent = true;
+    }
+  }
+
+  // 如果是内嵌iframe的话
+  if (data.menuType == 3) {
+    //检测meta.frameSrc是否是以Http/Https开头的 如果不是的话自动补全
+    if (data.menuType == 3 && data.meta && data.meta.frameSrc) {
+      if (!isUrl(data.meta.frameSrc)) {
+        // 如果链接是/开头  则认为是内部链接, 打上内部链接标记即可
+        if (data.meta.frameSrc.startsWith("/")) {
+          data.meta.isFrameSrcInternal = true;
+        } else {
+          data.meta.frameSrc = `http://${data.meta.frameSrc}`;
+        }
+      }
+    }
+
+    const pinyinStr = CommonUtils.toPinyin(data.menuName);
+    data.path = `/${pinyinStr}IframeLink`;
+    data.routerName = `${pinyinStr}IframeRouter`;
+  }
+
+  // 如果是外链跳转的话 需要自动设置他的path 按照外链跳转的规则 必须设置成/external
+  // 详见https://github.com/pure-admin/vue-pure-admin/issues/664
+  // 这里我们直接以菜单名转拼音的方式生成
+  if (data.meta && data.menuType == 4) {
+    if (!isUrl(data.routerName)) {
+      data.routerName = `http://${data.routerName}`;
+    }
+    data.path = `/external`;
+  }
+}

src/views/system/menu/utils/rule.ts

@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});