优化角色授权实现受控联动

zhangmrit · Sep 11, 2019 · 2925986 · 2925986
1 parent eaff3a2
commit 2925986
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 32 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+// import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { AppDeviceEnquire } from '@/utils/mixin'
 // 引用cdn还可以这么写
-// import { locale } from 'ant-design-vue'
-// const zhCN = locale.zh_CN
+import { locales } from 'ant-design-vue'
+const zhCN = locales.zh_CN
 
 export default {
   mixins: [AppDeviceEnquire],

diff --git a/src/mock/index.js b/src/mock/index.js
@@ -1,5 +1,5 @@
 import Mock from 'mockjs2'
-import './hack'
+// import './hack'
 
 // 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
 // if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
@@ -68,7 +68,7 @@ const user = {
           } else {
             reject(new Error('getInfo: roles must be a non-null array !'))
           }
-          console.log(result)
+          // console.log(result)
           commit('SET_NAME', { name: result.userName, welcome: welcome() })
           commit('SET_AVATAR', result.avatar || '/avatar2.jpg')
           resolve(response)

diff --git a/src/views/system/modules/RoleModal.vue b/src/views/system/modules/RoleModal.vue
@@ -80,8 +80,8 @@
         > -->
         <a-tree
           checkable
-          checkStrictly
           v-model="checkedKeys"
+          @check="onCheck"
           :treeData="permissions"
         >
         </a-tree>
@@ -113,8 +113,10 @@ export default {
 
       form: this.$form.createForm(this),
       permissions: [],
-      autoExpandParent: true,
-      checkedKeys: []
+      treeCheck: false,
+      pidSet: null,
+      checkedKeys: [],
+      halfCheckedKeys: []
     }
   },
   created () {
@@ -126,7 +128,13 @@ export default {
       this.edit({ })
     },
     edit (record) {
-      getRolePermIds(record.roleId).then(res => { this.checkedKeys = res || [] })
+      getRolePermIds(record.roleId).then(res => {
+        const pidSet = new Set(res.map(m => m.parentId).filter(id => id > 0))
+        this.pidSet = pidSet
+        // 因为antd 树插件勾选父节点会导致所有子节点选中,所以过滤所有父节点
+        this.checkedKeys = res.map(m => m.menuId).filter(id => !pidSet.has(id))
+        this.treeCheck = false
+      })
       this.mdl = Object.assign({}, record)
       this.visible = true
       this.$nextTick(() => {
@@ -144,8 +152,10 @@ export default {
       this.autoExpandParent = false
     },
     onCheck (checkedKeys, info) {
+      if (!this.treeCheck) this.treeCheck = true
       console.log('onCheck', info)
       this.checkedKeys = checkedKeys
+      this.halfCheckedKeys = info.halfCheckedKeys
     },
     onSelect (selectedKeys, info) {
       console.log('onSelect', info)
@@ -154,15 +164,13 @@ export default {
     loadPermissions () {
       getPermissions().then(res => {
         this.buildtree(res.rows, this.permissions, 0)
-        console.log(this.permissions)
       })
     },
     buildtree (list, permissions, parentId) {
       list.forEach(item => {
         if (item.parentId === parentId) {
           var child = {
-            key: item.menuId + '',
-            value: item.menuId + '',
+            key: item.menuId,
             title: item.menuName,
             children: []
           }
@@ -173,18 +181,19 @@ export default {
     },
     handleOk (e) {
       const _this = this
-      // 触发表单验证
-      if (this.checkedKeys.length === 0) {
+      // 如果没有check过，半选节点是拿不到的，只能通过预先设置的pidSet获取
+      const checkedAll = this.treeCheck ? _this.checkedKeys.concat(_this.halfCheckedKeys) : _this.checkedKeys.concat(Array.from(_this.pidSet))
+      if (!checkedAll.length > 0) {
         _this.$message.warning('请至少选择一个权限')
         return
       }
+      // 触发表单验证
       this.form.validateFields((err, values) => {
         // 验证表单没错误
         if (!err) {
-          values.menuIds = _this.checkedKeys.checked
+          values.menuIds = checkedAll
           _this.confirmLoading = true
           saveRole(Object.assign(values)).then(res => {
-            console.log(res)
             if (res.code === 0) {
               _this.$message.success('保存成功')
               _this.$emit('ok')

diff --git a/vue.config.js b/vue.config.js
@@ -6,14 +6,6 @@ function resolve (dir) {
   return path.join(__dirname, dir)
 }
 
-/**
- * check production or preview(pro.loacg.com only)
- * @returns {boolean}
- */
-function isProd () {
-  return process.env.NODE_ENV === 'production' || process.env.VUE_APP_PREVIEW === 'true'
-}
-
 const assetsCDN = {
   // main.js里引入了对应的less以使 webpack-theme-color-replacer工作
   // https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css
@@ -47,7 +39,7 @@ const prodExternals = {
 // vue.config.js
 const vueConfig = {
   configureWebpack: {
-    externals: isProd() ? prodExternals : {},
+    externals: prodExternals,
     plugins: [
       // Ignore all locale files of moment.js
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -74,12 +66,10 @@ const vueConfig = {
         name: 'assets/[name].[hash:8].[ext]'
       })
     // assets require on cdn
-    if (isProd()) {
-      config.plugin('html').tap(args => {
-        args[0].cdn = assetsCDN
-        return args
-      })
-    }
+    config.plugin('html').tap(args => {
+      args[0].cdn = assetsCDN
+      return args
+    })
   },
 
   css: {
@@ -119,7 +109,7 @@ const vueConfig = {
 }
 
 // 如果你不想在生产环境开启换肤功能，请打开下面注释
-// if (!isProd()) {
+// if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
 // add `ThemeColorReplacer` plugin to webpack plugins
 vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
 // }