Commit 55414385 by ZhengJie

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

close https://github.com/elunez/eladmin/issues/418
parent b8ef7442
......@@ -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",
......
......@@ -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) {
......
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment