feat: 完成用户管理、角色管理、菜单管理、部门管理

2024-09-02 23:26:41 +08:00
parent bc83362b35
commit e886614641
17 changed files with 230 additions and 326 deletions
--- 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; }
    }
 }
--- 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; }
    }
 }
--- 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 } });
 };

--- 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"
                    />
--- 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"
--- 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>
--- 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);
  }

  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();
  }

--- 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) => {
--- 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;
--- 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;
              }
            "
          />
--- 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>
--- 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
 };
--- 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();
--- 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" }
  ]
--- 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;
--- 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: "",
--- 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;