From 8bc7bb7df219edafc9cbf6580dcddbe0900a9a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E9=98=B3?= <2099677008@qq.com>
Date: Mon, 15 Jul 2024 09:32:00 +0800
Subject: [PATCH] front

---
 .../layout/DepartmentController.vue"          | 126 ++++++++
 .../layout/MenuController.vue"                | 270 +++++++++---------
 .../layout/MenuList.vue"                      | 114 ++++++++
 3 files changed, 379 insertions(+), 131 deletions(-)
 create mode 100644 "\345\211\215\347\253\257/layout/DepartmentController.vue"
 create mode 100644 "\345\211\215\347\253\257/layout/MenuList.vue"

diff --git "a/\345\211\215\347\253\257/layout/DepartmentController.vue" "b/\345\211\215\347\253\257/layout/DepartmentController.vue"
new file mode 100644
index 0000000..de30ee9
--- /dev/null
+++ "b/\345\211\215\347\253\257/layout/DepartmentController.vue"
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        row-key="id"
+        border
+        lazy
+        :load="load"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="depName" label="名称" width="244"/>
+      <el-table-column prop="depHead" label="部门负责人" width="160"/>
+      <el-table-column prop="depTelephone" label="部门电话" width="160"/>
+      <el-table-column label="状态" width="140">
+        <template #default="scope">
+          <el-switch
+              v-model="scope.row.status"
+              active-value="正常"
+              inactive-value="停用"
+              
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="160"/>
+      <el-table-column label="操作" width="180" fixed="right">
+        <template #default="scope">
+          <div style="display: flex; align-items: center;">
+            <el-button type="danger" :icon="Plus" size="mini" :style="{ backgroundColor: '#85ce61', borderColor: '#85ce61' }"  title="添加下级节点" />
+            <el-button type="primary" :icon="Edit" size="mini" title="修改"/>
+            <el-button type="danger" :icon="Delete" size="mini"  title="删除" />
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  Plus,
+  Edit,
+  Delete
+ } from '@element-plus/icons-vue'
+
+interface department {
+  id: number
+  depName: string
+  depHead: string
+  depTelephone: string
+  status: string
+  createTime: string
+  hasChildren?: boolean
+  children?: department[]
+  level?: number
+}
+
+const tableData: department[] = [
+  {
+    id: 1,
+    depName: '硅谷集团有限公司',
+    depHead: '张老师',
+    depTelephone: '18866660000',
+    status: '正常',
+    createTime: '2021-05-31 18:05:37',
+    hasChildren: true,
+    level: 0,
+  }
+]
+
+const load = (
+    row: department,
+    treeNode: unknown,
+    resolve: (date: department[]) => void
+) => {
+  
+    if (row.id === 1) {
+      resolve([
+        {
+          id: 5,
+          depName: '北京校区',
+          depHead: '李老师',
+          depTelephone: '19988880000',
+          status: '正常',
+          createTime: '2021-05-31 18:05:37',
+          hasChildren: true, // 保留子集
+          level: 1,
+        },
+      ])
+    } else if (row.id === 5) {
+      resolve([
+        {
+          id: 11,
+          depName: '教学部分',
+          depHead: '王老师',
+          depTelephone: '12087390000',
+          status: '正常',
+          createTime: '2021-05-31 18:05:37',
+          hasChildren: true, // 有子集
+          level: 2,
+        }
+      ])
+    }  else if(row.id === 11){
+      resolve([
+        {
+          id: 35,
+          depName: 'Java学科',
+          depHead: '王老师',
+          depTelephone: '12983729876',
+          status: '正常',
+          createTime: '2022-12-02 14:46:18',
+          hasChildren: false, // 没有有子集
+          level: 3,
+        },
+      ])
+    } 
+}
+
+</script>
+
+<style>
+  .add-div{
+    border:1px solid #EBEEF5;
+    margin: 10px 0;
+  }
+</style>
\ No newline at end of file
diff --git "a/\345\211\215\347\253\257/layout/MenuController.vue" "b/\345\211\215\347\253\257/layout/MenuController.vue"
index 1424069..0a31f92 100644
--- "a/\345\211\215\347\253\257/layout/MenuController.vue"
+++ "b/\345\211\215\347\253\257/layout/MenuController.vue"
@@ -1,122 +1,75 @@
 <template>
-  <div class="app-container">
- 
-    <!-- 工具条 -->
-    <div class="tools-div">
-      <el-button type="success" :icon="Plus" size="mini">添 加</el-button>
+  <div>
+    <div class="add-div">
+      <el-row style="display:flex">
+          <el-button type="primary" :icon="Plus" :style="{ backgroundColor: '#85ce61', borderColor: '#85ce61' }" size="mini">搜索</el-button>
+    </el-row>
     </div>
     <el-table
-      
-      style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
-      row-key="id"
-      border
-      :default-expand-all="false"
-      :tree-props="{children: 'children'}" :data="defaultForm">
- 
-      <el-table-column prop="name" label="菜单名称" width="160"/>
-      <el-table-column label="图标">
-        
-      </el-table-column>
-      <el-table-column prop="perms" label="权限标识" width="160"/>
-      <el-table-column prop="path" label="路由地址" width="120"/>
-      <el-table-column prop="component" label="组件路径" width="160"/>
-      <el-table-column prop="sortValue" label="排序" width="60"/>
+        :data="tableData"
+        style="width: 100%"
+        row-key="id"
+        border
+        lazy
+        :load="load"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="menuName" label="菜单名称" width="160"/>
+      <el-table-column prop="icon" label="图标" width="80"/>
+      <el-table-column prop="permission" label="权限标识" width="160"/>
+      <el-table-column prop="routeAddress" label="路由地址" width="120"/>
+      <el-table-column prop="routePath" label="路由路径" width="160"/>
+      <el-table-column prop="sort" label="排序" width="60"/>
       <el-table-column label="状态" width="80">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-switch
-             disabled="true">
-          </el-switch>
+              v-model="scope.row.status"
+              active-value="正常"
+              inactive-value="停用"
+              
+          />
         </template>
       </el-table-column>
       <el-table-column prop="createTime" label="创建时间" width="160"/>
-      <el-table-column label="操作" width="180" align="center" fixed="right">
-        <template >
-          <el-button type="success"  size="mini"  title="添加下级节点"/>
-          <el-button type="primary" icon="el-icon-edit" size="mini"  title="修改"/>
-          <el-button type="danger" icon="el-icon-delete" size="mini"  title="删除"/>
+      <el-table-column label="操作" width="180" fixed="right">
+        <template #default="scope">
+          <div style="display: flex; align-items: center;">
+            <el-button type="danger" :icon="Plus" size="mini" :style="{ backgroundColor: '#85ce61', borderColor: '#85ce61' }"  title="添加下级节点" />
+            <el-button type="primary" :icon="Edit" size="mini" title="修改"/>
+            <el-button type="danger" :icon="Delete" size="mini"  title="删除" />
+          </div>
         </template>
       </el-table-column>
     </el-table>
- 
-    <el-dialog width="40%" >
-      <el-form ref="dataForm"  label-width="150px" size="small" style="padding-right: 40px;">
-        <el-form-item label="上级部门">
-          <el-input  disabled="true"/>
-        </el-form-item>
-        <el-form-item label="菜单类型" prop="type">
-          <el-radio-group >
-            <el-radio :label="0" >目录</el-radio>
-            <el-radio :label="1" >菜单</el-radio>
-            <el-radio :label="2" >按钮</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="菜单名称" prop="name">
-          <el-input />
-        </el-form-item>
-        <el-form-item label="图标" prop="icon">
-          <el-select  clearable>
-            <el-option  >
-            <span style="float: left;">
-             <i ></i>  <!-- 如果动态显示图标，这里添加判断 -->
-            </span>
-              <span style="padding-left: 6px;"></span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-input-number  controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item prop="path">
-              <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                路由地址
-              </span>
-          <el-input  placeholder="请输入路由地址" />
-        </el-form-item>
-        <el-form-item prop="component" >
-              <span slot="label">
-                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                组件路径
-              </span>
-          <el-input  placeholder="请输入组件路径" />
-        </el-form-item>
-        <el-form-item>
-          <el-input  placeholder="请输入权限标识" maxlength="100" />
-          <span slot="label">
-                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))" placement="top">
-                <i class="el-icon-question"></i>
-                </el-tooltip>
-                权限字符
-              </span>
-        </el-form-item>
-        <el-form-item label="状态" prop="type">
-          <el-radio-group >
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button >取 消</el-button>
-        <el-button type="primary" icon="el-icon-check"  size="small">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
- 
- 
+
 <script lang="ts" setup>
-import { 
-  Plus
- } from "@element-plus/icons-vue";
-const tableData1: User[] = [
+import {
+  Plus,
+  Edit,
+  Delete
+ } from '@element-plus/icons-vue'
+
+interface Menu {
+  id: number
+  menuName: string
+  icon: string
+  permission: string
+  routeAddress: string
+  routePath: string
+  sort: number
+  status: string
+  createTime: string
+  hasChildren?: boolean
+  children?: Menu[]
+  level?: number
+}
+
+const tableData: Menu[] = [
   {
     id: 1,
-    name: '系统管理',
+    menuName: '系统管理',
     icon: 'system',
     permission: 'system',
     routeAddress: 'Layout',
@@ -129,7 +82,7 @@ const tableData1: User[] = [
   },
   {
     id: 2,
-    name: '审批设置',
+    menuName: '审批设置',
     icon: 'processSet',
     permission: 'processSet',
     routeAddress: 'Layout',
@@ -139,32 +92,87 @@ const tableData1: User[] = [
     createTime: '2022-12-01 09:32:46',
     hasChildren: true,
     level: 0,
-  },
-  {
-    id: 3,
-    name: '审批管理',
-    icon: 'processMgr',
-    permission: 'processMgr',
-    routeAddress: 'Layout',
-    routePath: 'Layout',
-    sort: 1,
-    status: '正常',
-    createTime: '2022-12-02 14:48:11',
-    hasChildren: true,
-    level: 0,
-  },
-  {
-    id: 4,
-    name: '公众号菜单',
-    icon: 'wechat',
-    permission: 'wechat',
-    routeAddress: 'Layout',
-    routePath: 'Layout',
-    sort: 1,
-    status: '正常',
-    createTime: '2022-12-13 09:06:58',
-    hasChildren: true,
-    level: 0,
   }
 ]
-</script>
\ No newline at end of file
+
+const load = (
+    row: Menu,
+    treeNode: unknown,
+    resolve: (date: Menu[]) => void
+) => {
+  
+    if (row.id === 1) {
+      resolve([
+        {
+          id: 5,
+          menuName: '用户管理',
+          icon: 'user',
+          permission: '',
+          routeAddress: 'sysUser',
+          routePath: 'system/sysUser/list',
+          sort: 2,
+          status: '正常',
+          createTime: '2021-05-31 18:05:37',
+          hasChildren: true, // 保留子集
+          level: 1,
+        },
+      ])
+    } else if (row.id === 5) {
+      resolve([
+        {
+          id: 11,
+          menuName: '查看',
+          icon: 'user',
+          permission: 'bnt.sysUser.list',
+          routeAddress: '',
+          routePath: '',
+          sort: 1,
+          status: '正常',
+          createTime: '2021-05-31 18:05:37',
+          hasChildren: false, // 修改为没有子集
+          level: 2,
+        }
+      ])
+    }  else if(row.id === 2){
+      resolve([
+        {
+          id: 35,
+          menuName: '审批模板',
+          icon: '',
+          permission: 'processTemplate',
+          routeAddress: 'processSet/processTemplate/list',
+          routePath: '',
+          sort: 2,
+          status: '正常',
+          createTime: '2022-12-02 14:46:18',
+          hasChildren: true, // 有子集
+          level: 3,
+        },
+      ])
+    } else if(row.id === 35){
+      resolve([
+        {
+          id: 39,
+          menuName: '查看',
+          icon: '',
+          permission: 'bnt.processTemplate.list',
+          routeAddress: '',
+          routePath: '',
+          sort:1,
+          status: '正常',
+          createTime: '2022-12-01 09:37:49',
+          hasChildren: false, // 没有子集
+          level: 2,
+        }
+      ])
+    } 
+}
+
+</script>
+
+<style>
+  .add-div{
+    border:1px solid #EBEEF5;
+    margin: 10px 0;
+  }
+</style>
\ No newline at end of file
diff --git "a/\345\211\215\347\253\257/layout/MenuList.vue" "b/\345\211\215\347\253\257/layout/MenuList.vue"
new file mode 100644
index 0000000..abeadb9
--- /dev/null
+++ "b/\345\211\215\347\253\257/layout/MenuList.vue"
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="add-div">
+       <el-row style="display:flex">
+            <button class="el-button-mini">
+                <span>添加</span>
+            </button>
+            <button class="el-button-mini">
+                <span>同步菜单</span>
+            </button>
+            <button class="el-button-mini">
+                <span>删除菜单</span>
+            </button>
+        </el-row>
+    </div>
+    <el-table
+        :data="tableData"
+        style="width: 100%"
+        row-key="id"
+        border
+        lazy
+        :load="load"
+        :tree-props="{ children: 'children',hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="name" label="名称" width="350"/>
+      <el-table-column prop="type" label="类型" width="100"/>
+      <el-table-column prop="URL" label="菜单URL" width="239"/>
+      <el-table-column prop="KEY" label="菜单KEY" width="130"/>
+      <el-table-column prop="sequence" label="排序号" width="70"/>
+      <el-table-column label="操作" width="170" >
+        <template #default="scope">
+          <div style="display: flex; align-items: center;">
+            <button class="el-button">
+                <span>修改</span>
+            </button>
+             <button class="el-button">
+                <span>删除</span>
+            </button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+interface menu {
+  id: number
+  name: string
+  type: string
+  URL: string
+  KEY: String
+  sequence: number
+  hasChildren?: boolean
+  children?: menu[]
+  level?: number
+}
+
+const tableData: menu[] = [
+  {
+    id: 1,
+    name: '审批列表',
+    type: '',
+    URL: '',
+    KEY: '',
+    sequence: 1,
+    hasChildren: true,
+    level: 0,
+  }
+]
+const load = (
+    row: menu,
+    treeNode: unknown,
+    resolve: (date: menu[]) => void) => {
+  
+    if (row.id === 1) {
+      resolve([
+        {
+        id: 2,
+        name: '待处理',
+        type: '链接',
+        URL: '/list/0',
+        KEY: '',
+        sequence: 1,
+        hasChildren: false,
+        level: 1,
+        },
+      ])
+    }
+}
+
+</script>
+
+<style>
+  .add-div{
+    border:1px solid #EBEEF5;
+    margin-top: 10px;
+    padding: 10px;
+  }
+  .el-button{
+    border: none;
+    color: #409eff;
+    padding: auto;
+    margin-left: 10px;
+  }
+  .el-button-mini{
+    font-size: 12px;
+    border-radius: 3px;
+    background: #fff;
+    color: #606266;
+    border: 1px solid #dcdfe6;
+  }
+</style>
\ No newline at end of file
-- 
Gitee