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

This reverts commit 424c197f95.

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) {
@@ -359,13 +343,13 @@ export default {
           type: 'warning'
         })
         return false
-      } else if (crud.form.jobs.length === 0) {
+      } else if (this.jobDatas.length === 0) {
         this.$message({
           message: '岗位不能为空',
           type: 'warning'
         })
         return false
-      } else if (crud.form.roles.length === 0) {
+      } else if (this.roleDatas.length === 0) {
         this.$message({
           message: '角色不能为空',
           type: 'warning'
@@ -491,7 +475,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
     height: 30px;
     line-height: 30px;
   }