上级菜单选择

magic-boot-ui/package.json

@@ -14,7 +14,9 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.24.0",
+    "drag-tree-table": "2.2.0",
     "element-ui": "2.13.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
@@ -32,9 +34,8 @@
     "vue-ueditor-wrap": "^2.5.3",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
-    "xlsx": "^0.17.3",
+    "vxe-table": "v3.4.4",
-    "drag-tree-table": "2.2.0",
+    "xlsx": "^0.17.3"
-    "vxe-table": "v3.4.4"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

magic-boot-ui/src/icons/svg/password.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>

magic-boot-ui/src/views/system/menu/menu-list.vue

@@ -17,6 +17,9 @@
     <pd-dialog ref="menuFormDialog" width="800px" :title="textMap[dialogStatus]" @confirm-click="save()">
       <template #content>
         <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 600px; margin-left:50px;">
+          <el-form-item label="上级菜单" prop="pid">
+            <treeselect v-model="temp.pid" :options="menuTree" />
+          </el-form-item>
           <el-form-item label="菜单名称" prop="name">
             <el-input v-model="temp.name" />
           </el-form-item>
@@ -59,12 +62,15 @@
 
 <script>
 import MenuIcons from './menu-icons'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-  components: { MenuIcons },
+  components: { MenuIcons, Treeselect },
   data() {
     return {
       menuData: [],
+      menuTree: [],
       searchValue: '',
       tableOptions: {
         el: {
@@ -164,6 +170,7 @@ export default {
       listConfigDialogVisible: false,
       formConfigDialogVisible: false,
       rules: {
+        pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
         name: [{ required: true, message: '请输入菜单名称', trigger: 'change' }]
       }
     }
@@ -171,9 +178,67 @@ export default {
   mounted() {
     this.reloadTable()
   },
+  watch: {
+    menuData() {
+      this.menuTree = [{
+        label: '根节点',
+        id: '0',
+        children: this.genMenuTree(this.menuData)
+      }]
+    }
+  },
   methods: {
+    isChildren(children, id) {
+      var result = false
+      for(var i in children) {
+        var chi = children[i]
+        if(chi.id == id){
+          result = true
+        }
+        if(chi.children && children.length > 0){
+          if(this.isChildren(chi.children, id)){
+            result = true
+          }
+        }
+      }
+      return result
+    },
+    queryChildren(children, id) {
+      var result = []
+      for(var i in children){
+        var chi = children[i]
+        if(chi.id == id){
+          if(chi.children && chi.children.length > 0){
+            result = chi.children
+          }
+        }else{
+          var qc = this.queryChildren(chi.children, id)
+          if(qc.length > 0){
+            result = qc
+          }
+        }
+      }
+      return result
+    },
+    genMenuTree(children) {
+      var menuTree = []
+      for(var i in children){
+        var chi = {}
+        chi.label = children[i].name
+        chi.id = children[i].id
+        if(children[i].children && children[i].children.length > 0){
+          chi.children = this.genMenuTree(children[i].children)
+        }
+        menuTree.push(chi)
+      }
+      return menuTree
+    },
     searchMenu() {
-      this.$set(this.tableOptions, 'data', this.recursionSearch(this.$common.copyNew(this.menuData), this.searchValue))
+      if(this.searchValue){
+        this.$set(this.tableOptions, 'data', this.recursionSearch(this.$common.copyNew(this.menuData), this.searchValue))
+      }else{
+        this.$set(this.tableOptions, 'data', this.menuData)
+      }
     },
     recursionSearch(data, text){
       var searchData = []
@@ -241,6 +306,24 @@ export default {
     save() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          if(this.temp.pid == this.temp.id){
+            this.$notify({
+              title: '失败',
+              message: '上级菜单不能选当前菜单',
+              type: 'error',
+              duration: 2000
+            })
+            return
+          }
+          if(this.isChildren(this.queryChildren(this.menuData, this.temp.id), this.temp.pid)){
+            this.$notify({
+              title: '失败',
+              message: '上级菜单不能选当前菜单子级',
+              type: 'error',
+              duration: 2000
+            })
+            return
+          }
           this.temp.isShow = this.temp.isShow === true ? 1 : 0
           this.$post('menu/save', this.temp).then(() => {
             this.reloadTable()
@@ -273,6 +356,7 @@ export default {
           this.temp[t] = row[t]
         }
       }
+      this.temp.name = this.temp.name.replaceAll(/<font.*?>(.*?)<\/font>/g,'$1')
       this.dialogStatus = 'update'
       this.$refs.menuFormDialog.show()
       this.$nextTick(() => {

magic-boot-ui/src/views/system/role/role-list.vue

@@ -16,7 +16,7 @@
 
     <pd-table ref="table" v-bind="tableOptions" />
 
-    <pd-dialog :visible.sync="dialogFormVisible" @confirm-click="save()">
+    <pd-dialog ref="roleFormDialog" @confirm-click="save()">
       <template #content>
         <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
           <el-form-item label="角色名称" prop="name">
@@ -108,7 +108,6 @@ export default {
         name: '',
         menus: []
       },
-      dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
         update: '修改',
@@ -141,7 +140,7 @@ export default {
       this.cancelSelectMenu()
       this.resetTemp()
       this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.$refs.roleFormDialog.show()
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
@@ -157,7 +156,7 @@ export default {
           this.temp.menus = this.selectMenus.join(',')
           this.$post('role/save', this.temp).then((response) => {
             this.reloadTable()
-            this.dialogFormVisible = false
+            this.$refs.roleFormDialog.hide()
             this.$notify({
               title: '成功',
               message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
@@ -188,7 +187,7 @@ export default {
         }
       })
       this.dialogStatus = 'update'
-      this.dialogFormVisible = true
+      this.$refs.roleFormDialog.show()
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })

magic-boot-ui/src/views/system/user/user-list.vue

@@ -126,6 +126,7 @@ export default {
       this.ids = columns.map(it => it['id']).join(',')
     },
     reloadTable() {
+      this.$refs.userFormDialog.hide()
       this.$refs.table.reloadList()
     },
     handleCreate() {