From 406c181493e6ae4ccc1d000e5e8ef86418d3488e Mon Sep 17 00:00:00 2001
From: Ariel <2153899192@qq.com>
Date: Fri, 25 Oct 2024 13:28:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3issue=E4=B8=AD=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=8F=90=E5=87=BA=E7=9A=84:=E5=A6=82=E4=BD=95?=
 =?UTF-8?q?=E4=B8=89=E7=BA=A7=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=9F=E8=BF=99?=
 =?UTF-8?q?=E4=B8=AA=E9=97=AE=E9=A2=98=20=E5=A2=9E=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E4=B8=89=E7=BA=A7=E5=AF=BC=E8=88=AA=E6=A0=8F=E7=9A=84=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E9=80=BB=E8=BE=91,=E6=AF=94=E5=A6=82=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86-=E5=85=AC=E5=8F=B8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E5=AD=90=E5=85=AC=E5=8F=B8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/leftnav.vue   |  49 ++++--
 src/router/index.js          |   4 +-
 src/views/system/SubDept.vue | 331 +++++++++++++++++++++++++++++++++++
 3 files changed, 370 insertions(+), 14 deletions(-)
 create mode 100644 src/views/system/SubDept.vue

diff --git a/src/components/leftnav.vue b/src/components/leftnav.vue
index 624aa3e..17e3b19 100644
--- a/src/components/leftnav.vue
+++ b/src/components/leftnav.vue
@@ -1,21 +1,37 @@
 /**
 * 左边菜单
-*/ 
+*/
 <template>
   <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
     <div class="logobox">
-      <img class="logoimg" src="../assets/img/logo.png" alt="">
+      <img class="logoimg" src="../assets/img/logo.png" alt="logo">
     </div>
+    <!-- 渲染一级菜单 -->
     <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
       <template slot="title">
         <i class="iconfont" :class="menu.icon"></i>
-        <span>{{menu.menuname}}</span>
+        <span>{{ menu.menuname }}</span>
       </template>
-      <el-menu-item-group>
-        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
-          <i class="iconfont" :class="chmenu.icon"></i>
-          <span>{{chmenu.menuname}}</span>
-        </el-menu-item>
+
+      <!-- 调用递归渲染函数，支持多级菜单 -->
+      <el-menu-item-group v-if="menu.menus && menu.menus.length">
+        <template v-for="submenu in menu.menus">
+          <el-menu-item v-if="!submenu.menus || !submenu.menus.length" :index="'/' + submenu.url" :key="submenu.menuid">
+            <i class="iconfont" :class="submenu.icon"></i>
+            <span>{{ submenu.menuname }}</span>
+          </el-menu-item>
+          <!-- 如果存在子菜单，递归调用 -->
+          <el-submenu v-else :index="submenu.menuname" :key="submenu.menuid">
+            <template slot="title">
+              <i class="iconfont" :class="submenu.icon"></i>
+              <span>{{ submenu.menuname }}</span>
+            </template>
+            <el-menu-item v-for="thirdmenu in submenu.menus" :index="'/' + thirdmenu.url" :key="thirdmenu.menuid">
+              <i class="iconfont" :class="thirdmenu.icon"></i>
+              <span>{{ thirdmenu.menuname }}</span>
+            </el-menu-item>
+          </el-submenu>
+        </template>
       </el-menu-item-group>
     </el-submenu>
   </el-menu>
@@ -105,9 +121,18 @@ export default {
               menuid: 74,
               icon: 'icon-cs-manage',
               menuname: '公司管理',
-              hasThird: 'N',
+              hasThird: 'Y', // 表示有子菜单
               url: 'system/Dept',
-              menus: null
+              menus: [
+                {
+                  menuid: 176, //
+                  icon: 'icon-dept-manage',
+                  menuname: '子公司管理',
+                  hasThird: 'N',
+                  url: 'system/Dept/subDept',
+                  menus: null
+                }
+              ]
             },
             {
               menuid: 75,
@@ -173,7 +198,7 @@ export default {
       msg: 'success'
     }
           this.allmenu = res.data
-    
+
     // menu(localStorage.getItem('logintoken'))
     //   .then(res => {
     //     console.log(JSON.stringify(res))
@@ -223,4 +248,4 @@ export default {
 .logoimg {
   height: 40px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 9c0a768..cdab39c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -53,7 +53,7 @@ import statistics from '@/views/charts/statistics';
 // 启用路由
 Vue.use(Router);
 
-// 导出路由 
+// 导出路由
 export default new Router({
     routes: [{
         path: '/',
@@ -176,4 +176,4 @@ export default new Router({
             }
         }]
     }]
-})
\ No newline at end of file
+})
diff --git a/src/views/system/SubDept.vue b/src/views/system/SubDept.vue
new file mode 100644
index 0000000..49699f3
--- /dev/null
+++ b/src/views/system/SubDept.vue
@@ -0,0 +1,331 @@
+/**
+* 系统管理  子公司管理
+*/
+<template>
+  <div>
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>子公司管理</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 搜索筛选 -->
+    <el-form :inline="true" :model="formInline" class="user-search">
+      <el-form-item label="搜索：">
+        <el-input size="small" v-model="formInline.deptName" placeholder="输入部门名称"></el-input>
+      </el-form-item>
+      <el-form-item label="">
+        <el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
+      </el-form-item>
+    </el-form>
+    <!--列表-->
+    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
+      <el-table-column align="center" type="selection" width="60">
+      </el-table-column>
+      <el-table-column sortable prop="deptName" label="部门名称" width="300">
+      </el-table-column>
+      <el-table-column sortable prop="deptNo" label="部门代码" width="300">
+      </el-table-column>
+      <el-table-column sortable prop="editTime" label="修改时间" width="300">
+        <template slot-scope="scope">
+          <div>{{scope.row.editTime|timestampToTime}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column sortable prop="editUser" label="修改人" width="300">
+      </el-table-column>
+      <el-table-column align="center" label="操作" min-width="300">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
+    <!-- 编辑界面 -->
+    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
+      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
+        <el-form-item label="部门名称" prop="deptName">
+          <el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
+        </el-form-item>
+        <el-form-item label="部门代码" prop="deptNo">
+          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入部门代码"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="closeDialog">取消</el-button>
+        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { deptList, deptSave, deptDelete } from '../../api/userMG'
+import Pagination from '../../components/Pagination'
+export default {
+  data() {
+    return {
+      nshow: true, //switch开启
+      fshow: false, //switch关闭
+      loading: false, //是显示加载
+      editFormVisible: false, //控制编辑页面显示与隐藏
+      title: '添加',
+      editForm: {
+        deptId: '',
+        deptName: '',
+        deptNo: '',
+        token: localStorage.getItem('logintoken')
+      },
+      // rules表单验证
+      rules: {
+        deptName: [
+          { required: true, message: '请输入部门名称', trigger: 'blur' }
+        ],
+        deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
+      },
+      formInline: {
+        page: 1,
+        limit: 10,
+        varLable: '',
+        varName: '',
+        token: localStorage.getItem('logintoken')
+      },
+      // 删除部门
+      seletedata: {
+        ids: '',
+        token: localStorage.getItem('logintoken')
+      },
+      userparm: [], //搜索权限
+      listData: [], //用户数据
+      // 分页参数
+      pageparm: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 10
+      }
+    }
+  },
+  // 注册组件
+  components: {
+    Pagination
+  },
+  /**
+   * 数据发生改变
+   */
+
+  /**
+   * 创建完毕
+   */
+  created() {
+    this.getdata(this.formInline)
+  },
+
+  /**
+   * 里面的方法只有被调用才会执行
+   */
+  methods: {
+    // 获取公司列表
+    getdata(parameter) {
+      this.loading = true
+      // 模拟数据
+      let res = {
+        code: 0,
+        msg: null,
+        count: 5,
+        data: [
+          {
+            addUser: null,
+            editUser: null,
+            addTime: 1521062371000,
+            editTime: 1526700200000,
+            deptId: 2,
+            deptName: '子公司公司',
+            deptNo: '1',
+            parentId: 1
+          },
+          {
+            addUser: null,
+            editUser: null,
+            addTime: 1521063247000,
+            editTime: 1526652291000,
+            deptId: 3,
+            deptName: '上海测试',
+            deptNo: '02',
+            parentId: 1
+          },
+          {
+            addUser: null,
+            editUser: null,
+            addTime: 1526349555000,
+            editTime: 1526349565000,
+            deptId: 12,
+            deptName: '1',
+            deptNo: '11',
+            parentId: 1
+          },
+          {
+            addUser: null,
+            editUser: null,
+            addTime: 1526373178000,
+            editTime: 1526373178000,
+            deptId: 13,
+            deptName: '5',
+            deptNo: '5',
+            parentId: 1
+          },
+          {
+            addUser: null,
+            editUser: null,
+            addTime: 1526453107000,
+            editTime: 1526453107000,
+            deptId: 17,
+            deptName: 'v',
+            deptNo: 'v',
+            parentId: 1
+          }
+        ]
+      }
+      this.loading = false
+      this.listData = res.data
+      // 分页赋值
+      this.pageparm.currentPage = this.formInline.page
+      this.pageparm.pageSize = this.formInline.limit
+      this.pageparm.total = res.count
+      // 模拟数据结束
+
+      /***
+       * 调用接口，注释上面模拟数据 取消下面注释
+       */
+      // deptList(parameter)
+      //   .then(res => {
+      //     this.loading = false
+      //     if (res.success == false) {
+      //       this.$message({
+      //         type: 'info',
+      //         message: res.msg
+      //       })
+      //     } else {
+      //       this.listData = res.data
+      //       // 分页赋值
+      //       this.pageparm.currentPage = this.formInline.page
+      //       this.pageparm.pageSize = this.formInline.limit
+      //       this.pageparm.total = res.count
+      //     }
+      //   })
+      //   .catch(err => {
+      //     this.loading = false
+      //     this.$message.error('菜单加载失败，请稍后再试！')
+      //   })
+    },
+    // 分页插件事件
+    callFather(parm) {
+      this.formInline.page = parm.currentPage
+      this.formInline.limit = parm.pageSize
+      this.getdata(this.formInline)
+    },
+    // 搜索事件
+    search() {
+      this.getdata(this.formInline)
+    },
+    //显示编辑界面
+    handleEdit: function(index, row) {
+      this.editFormVisible = true
+      if (row != undefined && row != 'undefined') {
+        this.title = '修改'
+        this.editForm.deptId = row.deptId
+        this.editForm.deptName = row.deptName
+        this.editForm.deptNo = row.deptNo
+      } else {
+        this.title = '添加'
+        this.editForm.deptId = ''
+        this.editForm.deptName = ''
+        this.editForm.deptNo = ''
+      }
+    },
+    // 编辑、增加页面保存方法
+    submitForm(editData) {
+      this.$refs[editData].validate(valid => {
+        if (valid) {
+          deptSave(this.editForm)
+            .then(res => {
+              this.editFormVisible = false
+              this.loading = false
+              if (res.success) {
+                this.getdata(this.formInline)
+                this.$message({
+                  type: 'success',
+                  message: '公司保存成功！'
+                })
+              } else {
+                this.$message({
+                  type: 'info',
+                  message: res.msg
+                })
+              }
+            })
+            .catch(err => {
+              this.editFormVisible = false
+              this.loading = false
+              this.$message.error('公司保存失败，请稍后再试！')
+            })
+        } else {
+          return false
+        }
+      })
+    },
+    // 删除公司
+    deleteUser(index, row) {
+      this.$confirm('确定要删除吗?', '信息', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          deptDelete(row.deptId)
+            .then(res => {
+              if (res.success) {
+                this.$message({
+                  type: 'success',
+                  message: '公司已删除!'
+                })
+                this.getdata(this.formInline)
+              } else {
+                this.$message({
+                  type: 'info',
+                  message: res.msg
+                })
+              }
+            })
+            .catch(err => {
+              this.loading = false
+              this.$message.error('公司删除失败，请稍后再试！')
+            })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    // 关闭编辑、增加弹出框
+    closeDialog() {
+      this.editFormVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user-search {
+  margin-top: 20px;
+}
+.userRole {
+  width: 100%;
+}
+</style>
+
-- 
Gitee