From e8866146415fd1a602619c8e8c7150865dd9522a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Mon, 2 Sep 2024 23:26:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=81=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E3=80=81=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dtos/Dept/DeptCreateInputVo.cs            |   9 +-
 .../Dtos/Dept/DeptUpdateInputVo.cs            |   5 +-
 Yi.Pure.Vue3/src/api/system/post.ts           |   8 +-
 Yi.Pure.Vue3/src/views/login/index.vue        |   5 +-
 Yi.Pure.Vue3/src/views/system/dept/form.vue   |  41 ++-
 Yi.Pure.Vue3/src/views/system/dept/index.vue  |  14 +-
 .../src/views/system/dept/utils/hook.tsx      |  62 ++---
 .../src/views/system/dept/utils/rule.ts       |   3 +-
 .../src/views/system/dept/utils/types.ts      |  12 +-
 Yi.Pure.Vue3/src/views/system/menu/form.vue   | 253 +++++-------------
 Yi.Pure.Vue3/src/views/system/menu/index.vue  |   4 +-
 .../src/views/system/menu/utils/enums.ts      |  43 ++-
 .../src/views/system/menu/utils/hook.tsx      |  61 ++---
 .../src/views/system/menu/utils/rule.ts       |   1 +
 .../src/views/system/menu/utils/types.ts      |  21 +-
 Yi.Pure.Vue3/src/views/system/role/form.vue   |   1 +
 .../src/views/system/role/utils/hook.tsx      |  13 +-
 17 files changed, 230 insertions(+), 326 deletions(-)

diff --git a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptCreateInputVo.cs b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptCreateInputVo.cs
index 0b3b6d7d..b9a8812a 100644
--- a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptCreateInputVo.cs
+++ b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptCreateInputVo.cs
@@ -5,14 +5,11 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Dept
     /// </summary>
     public class DeptCreateInputVo
     {
-        public Guid Id { get; set; }
-        public DateTime CreationTime { get; set; } = DateTime.Now;
-        public Guid? CreatorId { get; set; }
         public bool State { get; set; }
-        public string DeptName { get; set; } = string.Empty;
-        public string DeptCode { get; set; } = string.Empty;
+        public string DeptName { get; set; }
+        public string DeptCode { get; set; } 
         public string? Leader { get; set; }
-        public Guid ParentId { get; set; }
+        public Guid? ParentId { get; set; }=Guid.Empty;
         public string? Remark { get; set; }
     }
 }
diff --git a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptUpdateInputVo.cs b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptUpdateInputVo.cs
index 8b5c9002..bbf808f9 100644
--- a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptUpdateInputVo.cs
+++ b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Dept/DeptUpdateInputVo.cs
@@ -2,14 +2,11 @@ namespace Yi.Framework.Rbac.Application.Contracts.Dtos.Dept
 {
     public class DeptUpdateInputVo
     {
-        public Guid Id { get; set; }
-        public DateTime CreationTime { get; set; } = DateTime.Now;
-        public Guid? CreatorId { get; set; }
         public bool State { get; set; }
         public string DeptName { get; set; } = string.Empty;
         public string DeptCode { get; set; } = string.Empty;
         public string? Leader { get; set; }
-        public Guid ParentId { get; set; }
+        public Guid? ParentId { get; set; }=Guid.Empty;
         public string? Remark { get; set; }
     }
 }
diff --git a/Yi.Pure.Vue3/src/api/system/post.ts b/Yi.Pure.Vue3/src/api/system/post.ts
index 65ecaa7e..3e4d5a84 100644
--- a/Yi.Pure.Vue3/src/api/system/post.ts
+++ b/Yi.Pure.Vue3/src/api/system/post.ts
@@ -7,22 +7,22 @@ export const getList = (data?: object) => {
 };
 
 /** 查询部门详细 */
-export const getDept = id => {
+export const getPost = id => {
   return http.request<Result>("get", `/dept/${id}`, {});
 };
 
 /** 新增部门 */
-export const addDept = data => {
+export const addPost = data => {
   return http.request<Result>("post", `/dept`, { data });
 };
 
 /** 修改部门 */
-export const updateDept = (id, data) => {
+export const updatePost = (id, data) => {
   return http.request<Result>("put", `/dept/${id}`, { data });
 };
 
 /** 删除部门 */
-export const delDept = id => {
+export const delPost = id => {
   return http.request<Result>("delete", `/dept`, { params: { id } });
 };
 
diff --git a/Yi.Pure.Vue3/src/views/login/index.vue b/Yi.Pure.Vue3/src/views/login/index.vue
index d05f0f48..4e01d26d 100644
--- a/Yi.Pure.Vue3/src/views/login/index.vue
+++ b/Yi.Pure.Vue3/src/views/login/index.vue
@@ -243,7 +243,10 @@ getCode();
                   <template v-slot:append>
                     <img
                       :src="codeUrl"
-                      class="login-code-img"
+                      width="120"
+                      height="40"
+                      style="width: 120px; height: 40px"
+                      class="cursor-pointer"
                       alt=""
                       @click="getCode"
                     />
diff --git a/Yi.Pure.Vue3/src/views/system/dept/form.vue b/Yi.Pure.Vue3/src/views/system/dept/form.vue
index 2cec5fcb..2f701b9e 100644
--- a/Yi.Pure.Vue3/src/views/system/dept/form.vue
+++ b/Yi.Pure.Vue3/src/views/system/dept/form.vue
@@ -7,14 +7,16 @@ import { usePublicHooks } from "../hooks";
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
+    id: "",
+    deptCode: "",
     higherDeptOptions: [],
-    parentId: 0,
-    name: "",
-    principal: "",
+    parentId: "00000000-0000-0000-0000-000000000000",
+    deptName: "",
+    leader: "",
     phone: "",
     email: "",
-    sort: 0,
-    status: 1,
+    orderNum: 0,
+    state: true,
     remark: ""
   })
 });
@@ -46,7 +48,7 @@ defineExpose({ getRef });
             :options="newFormInline.higherDeptOptions"
             :props="{
               value: 'id',
-              label: 'name',
+              label: 'deptName',
               emitPath: false,
               checkStrictly: true
             }"
@@ -55,7 +57,7 @@ defineExpose({ getRef });
             placeholder="请选择上级部门"
           >
             <template #default="{ node, data }">
-              <span>{{ data.name }}</span>
+              <span>{{ data.deptName }}</span>
               <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
             </template>
           </el-cascader>
@@ -63,18 +65,29 @@ defineExpose({ getRef });
       </re-col>
 
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="部门名称" prop="name">
+        <el-form-item label="部门名称" prop="deptName">
           <el-input
-            v-model="newFormInline.name"
+            v-model="newFormInline.deptName"
             clearable
             placeholder="请输入部门名称"
           />
         </el-form-item>
       </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门编码" prop="deptCode">
+          <el-input
+            v-model="newFormInline.deptCode"
+            clearable
+            placeholder="请输入部门编码"
+          />
+        </el-form-item>
+      </re-col>
+
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="部门负责人">
           <el-input
-            v-model="newFormInline.principal"
+            v-model="newFormInline.leader"
             clearable
             placeholder="请输入部门负责人"
           />
@@ -103,7 +116,7 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="排序">
           <el-input-number
-            v-model="newFormInline.sort"
+            v-model="newFormInline.orderNum"
             class="!w-full"
             :min="0"
             :max="9999"
@@ -114,10 +127,10 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="部门状态">
           <el-switch
-            v-model="newFormInline.status"
+            v-model="newFormInline.state"
             inline-prompt
-            :active-value="1"
-            :inactive-value="0"
+            :active-value="true"
+            :inactive-value="false"
             active-text="启用"
             inactive-text="停用"
             :style="switchStyle"
diff --git a/Yi.Pure.Vue3/src/views/system/dept/index.vue b/Yi.Pure.Vue3/src/views/system/dept/index.vue
index 917d52e5..a5abbdbf 100644
--- a/Yi.Pure.Vue3/src/views/system/dept/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/dept/index.vue
@@ -38,21 +38,21 @@ const {
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input
-          v-model="form.name"
+          v-model="form.deptName"
           placeholder="请输入部门名称"
           clearable
           class="!w-[180px]"
         />
       </el-form-item>
-      <el-form-item label="状态：" prop="status">
+      <el-form-item label="状态：" prop="state">
         <el-select
-          v-model="form.status"
+          v-model="form.state"
           placeholder="请选择状态"
           clearable
           class="!w-[180px]"
         >
-          <el-option label="启用" :value="1" />
-          <el-option label="停用" :value="0" />
+          <el-option label="启用" :value="true" />
+          <el-option label="停用" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -71,7 +71,7 @@ const {
     </el-form>
 
     <PureTableBar
-      title="部门管理（仅演示，操作后不生效）"
+      title="部门管理"
       :columns="columns"
       :tableRef="tableRef?.getTableRef()"
       @refresh="onSearch"
@@ -127,7 +127,7 @@ const {
               新增
             </el-button>
             <el-popconfirm
-              :title="`是否确认删除部门名称为${row.name}的这条数据`"
+              :title="`是否确认删除部门名称为${row.deptName}的这条数据`"
               @confirm="handleDelete(row)"
             >
               <template #reference>
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx
index 465636a6..31d36ecd 100644
--- a/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx
@@ -2,17 +2,17 @@ import dayjs from "dayjs";
 import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getDeptList } from "@/api/system";
 import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
 import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
+import { addDept, delDept, getDeptList, updateDept } from "@/api/system/dept";
 
 export function useDept() {
   const form = reactive({
-    name: "",
-    status: null
+    deptName: "",
+    state: true
   });
 
   const formRef = ref();
@@ -23,31 +23,31 @@ export function useDept() {
   const columns: TableColumnList = [
     {
       label: "部门名称",
-      prop: "name",
+      prop: "deptName",
       width: 180,
       align: "left"
     },
     {
       label: "排序",
-      prop: "sort",
+      prop: "orderNum",
       minWidth: 70
     },
     {
       label: "状态",
-      prop: "status",
+      prop: "state",
       minWidth: 100,
       cellRenderer: ({ row, props }) => (
-        <el-tag size={props.size} style={tagStyle.value(row.status)}>
-          {row.status === 1 ? "启用" : "停用"}
+        <el-tag size={props.size} style={tagStyle.value(row.state)}>
+          {row.state === true ? "启用" : "停用"}
         </el-tag>
       )
     },
     {
       label: "创建时间",
       minWidth: 200,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+      prop: "creationTime",
+      formatter: ({ creationTime }) =>
+        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "备注",
@@ -74,20 +74,18 @@ export function useDept() {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    const data = (await getDeptList()).data.items; // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
     let newData = data;
-    if (!isAllEmpty(form.name)) {
+    if (!isAllEmpty(form.deptName)) {
       // 前端搜索部门名称
-      newData = newData.filter(item => item.name.includes(form.name));
+      newData = newData.filter(item => item.name.includes(form.deptName));
     }
-    if (!isAllEmpty(form.status)) {
+    if (!isAllEmpty(form.state)) {
       // 前端搜索状态
-      newData = newData.filter(item => item.status === form.status);
+      newData = newData.filter(item => item.state === form.state);
     }
     dataList.value = handleTree(newData); // 处理成树结构
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
+    loading.value = false;
   }
 
   function formatHigherDeptOptions(treeList) {
@@ -107,15 +105,17 @@ export function useDept() {
       title: `${title}部门`,
       props: {
         formInline: {
+          id: row?.id ?? "",
           higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
-          parentId: row?.parentId ?? 0,
-          name: row?.name ?? "",
-          principal: row?.principal ?? "",
+          parentId: row?.parentId ?? "00000000-0000-0000-0000-000000000000",
+          deptName: row?.deptName ?? "",
+          leader: row?.leader ?? "",
           phone: row?.phone ?? "",
           email: row?.email ?? "",
-          sort: row?.sort ?? 0,
-          status: row?.status ?? 1,
-          remark: row?.remark ?? ""
+          orderNum: row?.orderNum ?? 0,
+          state: row?.state ?? true,
+          remark: row?.remark ?? "",
+          deptCode: row?.deptCode ?? ""
         }
       },
       width: "40%",
@@ -128,21 +128,22 @@ export function useDept() {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;
         function chores() {
-          message(`您${title}了部门名称为${curData.name}的这条数据`, {
+          message(`您${title}了部门名称为${curData.deptName}的这条数据`, {
             type: "success"
           });
           done(); // 关闭弹框
           onSearch(); // 刷新表格数据
         }
-        FormRef.validate(valid => {
+        FormRef.validate(async valid => {
           if (valid) {
-            console.log("curData", curData);
             // 表单规则校验通过
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
+              await addDept(curData);
               chores();
             } else {
               // 实际开发先调用修改接口，再进行下面操作
+              await updateDept(row.id, curData);
               chores();
             }
           }
@@ -151,8 +152,9 @@ export function useDept() {
     });
   }
 
-  function handleDelete(row) {
-    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
+  async function handleDelete(row) {
+    await delDept([row.id]);
+    message(`您删除了部门名称为${row.deptName}的这条数据`, { type: "success" });
     onSearch();
   }
 
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts
index b20bf673..2a902a3f 100644
--- a/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts
@@ -4,7 +4,8 @@ import { isPhone, isEmail } from "@pureadmin/utils";
 
 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  deptName: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  deptCode: [{ required: true, message: "部门编码为必填项", trigger: "blur" }],
   phone: [
     {
       validator: (rule, value, callback) => {
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts b/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts
index 7547d6ba..b01d91aa 100644
--- a/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts
@@ -1,13 +1,15 @@
 interface FormItemProps {
+  id: string;
   higherDeptOptions: Record<string, unknown>[];
-  parentId: number;
-  name: string;
-  principal: string;
+  parentId: string;
+  deptName: string;
+  leader: string;
   phone: string | number;
   email: string;
-  sort: number;
-  status: number;
+  orderNum: number;
+  state: boolean;
   remark: string;
+  deptCode: string;
 }
 interface FormProps {
   formInline: FormItemProps;
diff --git a/Yi.Pure.Vue3/src/views/system/menu/form.vue b/Yi.Pure.Vue3/src/views/system/menu/form.vue
index f08f31f3..bdb8f918 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/form.vue
+++ b/Yi.Pure.Vue3/src/views/system/menu/form.vue
@@ -14,33 +14,25 @@ import {
   keepAliveOptions,
   hiddenTagOptions,
   showParentOptions,
-  frameLoadingOptions
+  frameLoadingOptions,
+  isLinkOptions,
+  stateOptions
 } from "./utils/enums";
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
     menuType: 0,
     higherMenuOptions: [],
-    parentId: 0,
+    parentId: "00000000-0000-0000-0000-000000000000",
     menuName: "",
-    name: "",
     router: "",
     component: "",
-    orderNum: 99,
-    redirect: "",
+    orderNum: 0,
     icon: "",
-    extraIcon: "",
-    enterTransition: "",
-    leaveTransition: "",
-    activePath: "",
     permissionCode: "",
-    frameSrc: "",
-    frameLoading: true,
-    keepAlive: false,
-    hiddenTag: false,
-    fixedTag: false,
     isShow: true,
-    showParent: false
+    isLink: false,
+    state: true
   })
 });
 
@@ -67,6 +59,7 @@ defineExpose({ getRef });
           <Segmented
             v-model="newFormInline.menuType"
             :options="menuTypeOptions"
+            @change="changeSegmented"
           />
         </el-form-item>
       </re-col>
@@ -79,7 +72,7 @@ defineExpose({ getRef });
             :options="newFormInline.higherMenuOptions"
             :props="{
               value: 'id',
-              label: 'title',
+              label: 'menuName',
               emitPath: false,
               checkStrictly: true
             }"
@@ -94,9 +87,18 @@ defineExpose({ getRef });
           </el-cascader>
         </el-form-item>
       </re-col>
-
+      <re-col
+        v-show="newFormInline.menuType !== 2"
+        :value="24"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="菜单图标">
+          <IconSelect v-model="newFormInline.icon" class="w-full" />
+        </el-form-item>
+      </re-col>
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="菜单名称" prop="title">
+        <el-form-item label="菜单名称" prop="menuName">
           <el-input
             v-model="newFormInline.menuName"
             clearable
@@ -104,27 +106,40 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
-        <el-form-item label="路由名称" prop="name">
-          <el-input
-            v-model="newFormInline.name"
-            clearable
-            placeholder="请输入路由名称"
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="菜单排序" prop="orderNum">
+          <el-input-number
+            v-model="newFormInline.orderNum"
+            class="!w-full"
+            :min="1"
+            :max="9999"
+            controls-position="right"
           />
         </el-form-item>
       </re-col>
 
-      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
-        <el-form-item label="路由路径" prop="router">
-          <el-input
-            v-model="newFormInline.router"
-            clearable
-            placeholder="请输入路由路径"
+      <re-col
+        v-show="newFormInline.menuType !== 2"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="是否为外链">
+          <Segmented
+            :modelValue="newFormInline.isLink ? false : true"
+            :options="isLinkOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.isLink = value;
+              }
+            "
           />
         </el-form-item>
       </re-col>
+
       <re-col
-        v-show="newFormInline.menuType === 0"
+        v-show="newFormInline.menuType === 1"
         :value="12"
         :xs="24"
         :sm="24"
@@ -137,94 +152,21 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-
-      <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="菜单排序">
-          <el-input-number
-            v-model="newFormInline.rank"
-            class="!w-full"
-            :min="1"
-            :max="9999"
-            controls-position="right"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col
-        v-show="newFormInline.menuType === 0"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="路由重定向">
+      <re-col v-if="newFormInline.menuType !== 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="路由路径" prop="router">
           <el-input
-            v-model="newFormInline.redirect"
+            v-model="newFormInline.router"
             clearable
-            placeholder="请输入默认跳转地址"
+            placeholder="请输入路由路径"
           />
         </el-form-item>
       </re-col>
 
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="菜单图标">
-          <IconSelect v-model="newFormInline.icon" class="w-full" />
-        </el-form-item>
-      </re-col>
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="右侧图标">
-          <el-input
-            v-model="newFormInline.extraIcon"
-            clearable
-            placeholder="菜单名称右侧的额外图标"
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
-        <el-form-item label="进场动画">
-          <ReAnimateSelector
-            v-model="newFormInline.enterTransition"
-            placeholder="请选择页面进场加载动画"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
-        <el-form-item label="离场动画">
-          <ReAnimateSelector
-            v-model="newFormInline.leaveTransition"
-            placeholder="请选择页面离场加载动画"
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col
-        v-show="newFormInline.menuType === 0"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="菜单激活">
-          <el-input
-            v-model="newFormInline.activePath"
-            clearable
-            placeholder="请输入需要激活的菜单"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col v-if="newFormInline.menuType === 3" :value="12" :xs="24" :sm="24">
+      <re-col v-if="newFormInline.menuType !== 0" :value="12" :xs="24" :sm="24">
         <!-- 按钮级别权限设置 -->
-        <el-form-item label="权限标识" prop="orderNum">
+        <el-form-item label="权限标识" prop="permissionCode">
           <el-input
-            v-model="newFormInline.orderNum"
+            v-model="newFormInline.permissionCode"
             clearable
             placeholder="请输入权限标识"
           />
@@ -232,41 +174,12 @@ defineExpose({ getRef });
       </re-col>
 
       <re-col
-        v-show="newFormInline.menuType === 1"
+        v-show="newFormInline.menuType !== 'Component'"
         :value="12"
         :xs="24"
         :sm="24"
       >
-        <!-- iframe -->
-        <el-form-item label="链接地址">
-          <el-input
-            v-model="newFormInline.frameSrc"
-            clearable
-            placeholder="请输入 iframe 链接地址"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col v-if="newFormInline.menuType === 1" :value="12" :xs="24" :sm="24">
-        <el-form-item label="加载动画">
-          <Segmented
-            :modelValue="newFormInline.frameLoading ? 0 : 1"
-            :options="frameLoadingOptions"
-            @change="
-              ({ option: { value } }) => {
-                newFormInline.frameLoading = value;
-              }
-            "
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="菜单">
+        <el-form-item label="是否显示">
           <Segmented
             :modelValue="newFormInline.isShow ? false : true"
             :options="showLinkOptions"
@@ -278,60 +191,14 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="父级菜单">
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="是否启用">
           <Segmented
-            :modelValue="newFormInline.showParent ? 0 : 1"
-            :options="showParentOptions"
+            :modelValue="newFormInline.state ? false : true"
+            :options="stateOptions"
             @change="
               ({ option: { value } }) => {
-                newFormInline.showParent = value;
-              }
-            "
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
-        <el-form-item label="缓存页面">
-          <Segmented
-            :modelValue="newFormInline.keepAlive ? 0 : 1"
-            :options="keepAliveOptions"
-            @change="
-              ({ option: { value } }) => {
-                newFormInline.keepAlive = value;
-              }
-            "
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
-        <el-form-item label="标签页">
-          <Segmented
-            :modelValue="newFormInline.hiddenTag ? 1 : 0"
-            :options="hiddenTagOptions"
-            @change="
-              ({ option: { value } }) => {
-                newFormInline.hiddenTag = value;
-              }
-            "
-          />
-        </el-form-item>
-      </re-col>
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
-        <el-form-item label="固定标签页">
-          <Segmented
-            :modelValue="newFormInline.fixedTag ? 0 : 1"
-            :options="fixedTagOptions"
-            @change="
-              ({ option: { value } }) => {
-                newFormInline.fixedTag = value;
+                newFormInline.state = value;
               }
             "
           />
diff --git a/Yi.Pure.Vue3/src/views/system/menu/index.vue b/Yi.Pure.Vue3/src/views/system/menu/index.vue
index f6620de3..4b6445e2 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/menu/index.vue
@@ -61,7 +61,7 @@ const {
     </el-form>
 
     <PureTableBar
-      title="菜单管理（仅演示，操作后不生效）"
+      title="菜单管理"
       :columns="columns"
       :isExpandAll="false"
       :tableRef="tableRef?.getTableRef()"
@@ -118,7 +118,7 @@ const {
               新增
             </el-button>
             <el-popconfirm
-              :title="`是否确认删除菜单名称为${transformI18n(row.title)}的这条数据${row?.children?.length > 0 ? '。注意下级菜单也会一并删除，请谨慎操作' : ''}`"
+              :title="`是否确认删除菜单名称为${transformI18n(row.menuName)}的这条数据${row?.children?.length > 0 ? '。注意下级菜单也会一并删除，请谨慎操作' : ''}`"
               @confirm="handleDelete(row)"
             >
               <template #reference>
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
index 4466b61d..53aa0572 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
@@ -2,23 +2,42 @@ import type { OptionsType } from "@/components/ReSegmented";
 
 const menuTypeOptions: Array<OptionsType> = [
   {
-    label: "菜单",
-    value: 0
+    label: "目录",
+    value: "Catalogue"
   },
   {
-    label: "iframe",
-    value: 1
+    label: "菜单",
+    value: "Menu"
+  },
+  {
+    label: "组件",
+    value: "Component"
+  }
+];
+const stateOptions: Array<OptionsType> = [
+  {
+    label: "启用",
+    tip: "启用菜单",
+    value: true
+  },
+  {
+    label: "禁用",
+    tip: "禁用菜单",
+    value: false
+  }
+];
+const isLinkOptions: Array<OptionsType> = [
+  {
+    label: "非外链",
+    tip: "使用本地路由",
+    value: false
   },
   {
     label: "外链",
-    value: 2
-  },
-  {
-    label: "按钮",
-    value: 3
+    tip: "链接到其他地址",
+    value: true
   }
 ];
-
 const showLinkOptions: Array<OptionsType> = [
   {
     label: "显示",
@@ -104,5 +123,7 @@ export {
   keepAliveOptions,
   hiddenTagOptions,
   showParentOptions,
-  frameLoadingOptions
+  frameLoadingOptions,
+  isLinkOptions,
+  stateOptions
 };
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
index 52b110ba..b08faea9 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
@@ -1,13 +1,14 @@
 import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getListMenu } from "@/api/system/menu";
+import { addMenu, delMenu, getListMenu, updateMenu } from "@/api/system/menu";
 import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
+import { menuTypeOptions } from "@/views/system/menu/utils/enums";
 
 export function useMenu() {
   const form = reactive({
@@ -18,16 +19,14 @@ export function useMenu() {
   const dataList = ref([]);
   const loading = ref(true);
 
-  const getMenuType = (type, text = false) => {
+  const getMenuType = (type: string, text = false) => {
     switch (type) {
-      case 0:
-        return text ? "菜单" : "primary";
-      case 1:
-        return text ? "iframe" : "warning";
-      case 2:
-        return text ? "外链" : "danger";
-      case 3:
-        return text ? "按钮" : "info";
+      case "Catalogue":
+        return text ? "目录" : "primary";
+      case "Menu":
+        return text ? "菜单" : "warning";
+      case "Component":
+        return text ? "组件" : "info";
     }
   };
 
@@ -129,33 +128,33 @@ export function useMenu() {
     return newTreeList;
   }
 
-  function openDialog(title = "新增", row?: FormItemProps) {
+  async function openDialog(title = "新增", row?: FormItemProps) {
+    // let data: any = null;
+    // if (title == "修改") {
+    //   data = await getMenu(row.id);
+    // }
     addDialog({
       title: `${title}菜单`,
       props: {
         formInline: {
-          menuType: row?.menuType ?? 0,
+          menuName: row?.menuName ?? "",
+          menuType:
+            row?.menuType == undefined
+              ? 0
+              : menuTypeOptions.findIndex(
+                  option => option.value === row?.menuType
+                ),
           higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
+          id: row?.id ?? "00000000-0000-0000-0000-000000000000",
           parentId: row?.parentId ?? 0,
-          title: row?.menuName ?? "",
-          name: row?.name ?? "",
           router: row?.router ?? "",
           component: row?.component ?? "",
-          orderNum: row?.orderNum ?? 99,
-          redirect: row?.redirect ?? "",
+          orderNum: row?.orderNum ?? 0,
           icon: row?.icon ?? "",
-          extraIcon: row?.extraIcon ?? "",
-          enterTransition: row?.enterTransition ?? "",
-          leaveTransition: row?.leaveTransition ?? "",
-          activePath: row?.activePath ?? "",
           permissionCode: row?.permissionCode ?? "",
-          frameSrc: row?.frameSrc ?? "",
-          frameLoading: row?.frameLoading ?? true,
-          keepAlive: row?.keepAlive ?? false,
-          hiddenTag: row?.hiddenTag ?? false,
-          fixedTag: row?.fixedTag ?? false,
           showLink: row?.isShow ?? true,
-          showParent: row?.showParent ?? false
+          isLink: row?.isLink ?? false,
+          state: row?.state ?? true
         }
       },
       width: "45%",
@@ -177,15 +176,16 @@ export function useMenu() {
           done(); // 关闭弹框
           onSearch(); // 刷新表格数据
         }
-        FormRef.validate(valid => {
+        FormRef.validate(async valid => {
           if (valid) {
-            console.log("curData", curData);
             // 表单规则校验通过
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
+              await addMenu(curData);
               chores();
             } else {
               // 实际开发先调用修改接口，再进行下面操作
+              await updateMenu(row.id, curData);
               chores();
             }
           }
@@ -194,8 +194,9 @@ export function useMenu() {
     });
   }
 
-  function handleDelete(row) {
-    message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
+  async function handleDelete(row) {
+    await delMenu([row.id]);
+    message(`您删除了菜单名称为${transformI18n(row.menuName)}的这条数据`, {
       type: "success"
     });
     onSearch();
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
index c167256e..b5623f51 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
@@ -6,6 +6,7 @@ export const formRules = reactive(<FormRules>{
   menuName: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
   name: [{ required: true, message: "路由名称为必填项", trigger: "blur" }],
   router: [{ required: true, message: "路由路径为必填项", trigger: "blur" }],
+  orderNum: [{ required: true, message: "菜单排序为必填项", trigger: "blur" }],
   permissionCode: [
     { required: true, message: "权限标识为必填项", trigger: "blur" }
   ]
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
index 2af85424..a3fdf2ea 100644
--- a/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
@@ -1,27 +1,18 @@
 interface FormItemProps {
-  /** 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）*/
-  menuType: number;
+  /** 菜单类型（0目录、1代表菜单、2代表组件*/
+  id?: string;
+  menuType: number | string;
   higherMenuOptions: Record<string, unknown>[];
-  parentId: number;
+  parentId: string;
   menuName: string;
-  name: string;
   router: string;
   component: string;
   orderNum: number;
-  redirect: string;
   icon: string;
-  extraIcon: string;
-  enterTransition: string;
-  leaveTransition: string;
-  activePath: string;
   permissionCode: string;
-  frameSrc: string;
-  frameLoading: boolean;
-  keepAlive: boolean;
-  hiddenTag: boolean;
-  fixedTag: boolean;
   isShow: boolean;
-  showParent: boolean;
+  isLink: boolean;
+  state: boolean;
 }
 interface FormProps {
   formInline: FormItemProps;
diff --git a/Yi.Pure.Vue3/src/views/system/role/form.vue b/Yi.Pure.Vue3/src/views/system/role/form.vue
index b3a6c6d1..6d6062d6 100644
--- a/Yi.Pure.Vue3/src/views/system/role/form.vue
+++ b/Yi.Pure.Vue3/src/views/system/role/form.vue
@@ -5,6 +5,7 @@ import { FormProps } from "./utils/types";
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
+    id: "",
     roleName: "",
     roleCode: "",
     remark: "",
diff --git a/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
index 315b1bd2..75d21ea4 100644
--- a/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
@@ -21,7 +21,16 @@ import {
 } from "@/api/system/role";
 import { getMenuOption } from "@/api/system/menu";
 
-import {type Ref, reactive, ref, onMounted, h, toRaw, watch, nextTick} from "vue";
+import {
+  type Ref,
+  reactive,
+  ref,
+  onMounted,
+  h,
+  toRaw,
+  watch,
+  nextTick
+} from "vue";
 
 export function useRole(treeRef: Ref) {
   const form = reactive({
@@ -44,7 +53,6 @@ export function useRole(treeRef: Ref) {
   const isExpandAll = ref(false);
   const isSelectAll = ref(false);
   const { switchStyle } = usePublicHooks();
-  let currentRoleData: any = {};
   const treeProps = {
     value: "id",
     label: "menuName",
@@ -246,7 +254,6 @@ export function useRole(treeRef: Ref) {
       nextTick(async () => {
         treeRef.value.setCheckedKeys(curRow.value.menuIds);
       });
-
     } else {
       curRow.value = null;
       isShow.value = false;