[代码优化](v2.5): 升级treeselect依赖，修复用户编辑，角色编辑时赋值闪动的问题

close https://github.com/elunez/eladmin/issues/418

package.json

@@ -33,7 +33,7 @@
     "url": "https://github.com/elunez/eladmin/issues"
   },
   "dependencies": {
-    "@riophae/vue-treeselect": "0.1.0",
+    "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "^5.49.2",

src/views/system/role/index.vue

@@ -31,7 +31,7 @@
         </el-form-item>
         <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
           <treeselect
-            v-model="form.depts"
+            v-model="deptDatas"
             :load-options="loadDepts"
             :options="depts"
             multiple
@@ -144,7 +144,7 @@ export default {
       defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
       dateScopes: ['全部', '本级', '自定义'], level: 3,
       currentId: 0, menuLoading: false, showButton: false,
-      menus: [], menuIds: [], depts: [],
+      menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
       permission: {
         add: ['admin', 'roles:add'],
         edit: ['admin', 'roles:edit'],
@@ -176,24 +176,24 @@ export default {
     [CRUD.HOOK.afterRefresh]() {
       this.$refs.menu.setCheckedKeys([])
     },
-    // 编辑前
+    // 新增前初始化部门信息
+    [CRUD.HOOK.beforeToAdd]() {
+      this.deptDatas = []
+    },
+    // 编辑前初始化自定义数据权限的部门信息
     [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.deptDatas = []
       if (form.dataScope === '自定义') {
-        if (form.id == null) {
-          this.getDepts()
-        } else {
-          this.getSupDepts(form.depts)
-        }
+        this.getSupDepts(form.depts)
       }
-      const depts = []
+      const _this = this
       form.depts.forEach(function(dept) {
-        depts.push(dept.id)
+        _this.deptDatas.push(dept.id)
       })
-      form.depts = depts
     },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {
-      if (crud.form.dataScope === '自定义' && crud.form.depts.length === 0) {
+      if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) {
         this.$message({
           message: '自定义数据权限不能为空',
           type: 'warning'
@@ -201,7 +201,7 @@ export default {
         return false
       } else if (crud.form.dataScope === '自定义') {
         const depts = []
-        crud.form.depts.forEach(function(data) {
+        this.deptDatas.forEach(function(data) {
           const dept = { id: data }
           depts.push(dept)
         })
@@ -211,19 +211,6 @@ export default {
       }
       return true
     },
-    [CRUD.HOOK.afterAddError](crud) {
-      this.afterErrorMethod(crud)
-    },
-    [CRUD.HOOK.afterEditError](crud) {
-      this.afterErrorMethod(crud)
-    },
-    afterErrorMethod(crud) {
-      const depts = []
-      crud.form.depts.forEach(function(dept) {
-        depts.push(dept.id)
-      })
-      crud.form.depts = depts
-    },
     // 触发单选
     handleCurrentChange(val) {
       if (val) {

src/views/system/user/index.vue

@@ -85,7 +85,7 @@
             </el-form-item>
             <el-form-item label="岗位" prop="jobs">
               <el-select
-                v-model="form.jobs"
+                v-model="jobDatas"
                 style="width: 178px"
                 multiple
                 placeholder="请选择"
@@ -117,7 +117,7 @@
             </el-form-item>
             <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
               <el-select
-                v-model="form.roles"
+                v-model="roleDatas"
                 style="width: 437px"
                 multiple
                 placeholder="请选择"
@@ -233,6 +233,7 @@ export default {
     return {
       height: document.documentElement.clientHeight - 180 + 'px;',
       deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
+      jobDatas: [], roleDatas: [], // 多选时使用
       defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
       permission: {
         add: ['admin', 'user:add'],
@@ -291,25 +292,6 @@ export default {
         userJobs.push(job)
       })
     },
-    [CRUD.HOOK.afterAddError](crud) {
-      this.afterErrorMethod(crud)
-    },
-    [CRUD.HOOK.afterEditError](crud) {
-      this.afterErrorMethod(crud)
-    },
-    afterErrorMethod(crud) {
-      // 恢复select
-      const initRoles = []
-      const initJobs = []
-      userRoles.forEach(function(role, index) {
-        initRoles.push(role.id)
-      })
-      userJobs.forEach(function(job, index) {
-        initJobs.push(job.id)
-      })
-      crud.form.roles = initRoles
-      crud.form.jobs = initJobs
-    },
     deleteTag(value) {
       userRoles.forEach(function(data, index) {
         if (data.id === value) {
@@ -329,27 +311,29 @@ export default {
       this.getJobs()
       form.enabled = form.enabled.toString()
     },
-    // 打开编辑弹窗前做的操作
+    // 新增前将多选的值设置为空
+    [CRUD.HOOK.beforeToAdd]() {
+      this.jobDatas = []
+      this.roleDatas = []
+    },
+    // 初始化编辑时候的角色与岗位
     [CRUD.HOOK.beforeToEdit](crud, form) {
       this.getJobs(this.form.dept.id)
+      this.jobDatas = []
+      this.roleDatas = []
       userRoles = []
       userJobs = []
-      const roles = []
-      const jobs = []
+      const _this = this
       form.roles.forEach(function(role, index) {
-        roles.push(role.id)
-        // 初始化编辑时候的角色
+        _this.roleDatas.push(role.id)
         const rol = { id: role.id }
         userRoles.push(rol)
       })
       form.jobs.forEach(function(job, index) {
-        jobs.push(job.id)
-        // 初始化编辑时候的岗位
+        _this.jobDatas.push(job.id)
         const data = { id: job.id }
         userJobs.push(data)
       })
-      form.roles = roles
-      form.jobs = jobs
     },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {