Skip to content

F
front-backend
Commit 55414385 by ZhengJie
Options

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

close https://github.com/elunez/eladmin/issues/418
parent b8ef7442
Showing with 28 additions and 57 deletions
package.json
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
"url": "https://github.com/elunez/eladmin/issues" "url": "https://github.com/elunez/eladmin/issues"
}, },
"dependencies": { "dependencies": {
"@riophae/vue-treeselect": "0.1.0", "@riophae/vue-treeselect": "0.4.0",
"axios": "0.18.1", "axios": "0.18.1",
"clipboard": "2.0.4", "clipboard": "2.0.4",
"codemirror": "^5.49.2", "codemirror": "^5.49.2",
......
src/views/system/role/index.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</el-form-item> </el-form-item>
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts"> <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
<treeselect <treeselect
v-model="form.depts" v-model="deptDatas"
:load-options="loadDepts" :load-options="loadDepts"
:options="depts" :options="depts"
multiple multiple
...@@ -144,7 +144,7 @@ export default { ...@@ -144,7 +144,7 @@ export default {
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' }, defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
dateScopes: ['全部', '本级', '自定义'], level: 3, dateScopes: ['全部', '本级', '自定义'], level: 3,
currentId: 0, menuLoading: false, showButton: false, currentId: 0, menuLoading: false, showButton: false,
menus: [], menuIds: [], depts: [], menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
permission: { permission: {
add: ['admin', 'roles:add'], add: ['admin', 'roles:add'],
edit: ['admin', 'roles:edit'], edit: ['admin', 'roles:edit'],
...@@ -176,24 +176,24 @@ export default { ...@@ -176,24 +176,24 @@ export default {
[CRUD.HOOK.afterRefresh]() { [CRUD.HOOK.afterRefresh]() {
this.$refs.menu.setCheckedKeys([]) this.$refs.menu.setCheckedKeys([])
}, },
// 编辑前 // 新增前初始化部门信息
[CRUD.HOOK.beforeToAdd]() {
this.deptDatas = []
},
// 编辑前初始化自定义数据权限的部门信息
[CRUD.HOOK.beforeToEdit](crud, form) { [CRUD.HOOK.beforeToEdit](crud, form) {
this.deptDatas = []
if (form.dataScope === '自定义') { if (form.dataScope === '自定义') {
if (form.id == null) { this.getSupDepts(form.depts)
this.getDepts()
} else {
this.getSupDepts(form.depts)
}
} }
const depts = [] const _this = this
form.depts.forEach(function(dept) { form.depts.forEach(function(dept) {
depts.push(dept.id) _this.deptDatas.push(dept.id)
}) })
form.depts = depts
}, },
// 提交前做的操作 // 提交前做的操作
[CRUD.HOOK.afterValidateCU](crud) { [CRUD.HOOK.afterValidateCU](crud) {
if (crud.form.dataScope === '自定义' && crud.form.depts.length === 0) { if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) {
this.$message({ this.$message({
message: '自定义数据权限不能为空', message: '自定义数据权限不能为空',
type: 'warning' type: 'warning'
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
return false return false
} else if (crud.form.dataScope === '自定义') { } else if (crud.form.dataScope === '自定义') {
const depts = [] const depts = []
crud.form.depts.forEach(function(data) { this.deptDatas.forEach(function(data) {
const dept = { id: data } const dept = { id: data }
depts.push(dept) depts.push(dept)
}) })
...@@ -211,19 +211,6 @@ export default { ...@@ -211,19 +211,6 @@ export default {
} }
return true 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) { handleCurrentChange(val) {
if (val) { if (val) {
......
src/views/system/user/index.vue
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</el-form-item> </el-form-item>
<el-form-item label="岗位" prop="jobs"> <el-form-item label="岗位" prop="jobs">
<el-select <el-select
v-model="form.jobs" v-model="jobDatas"
style="width: 178px" style="width: 178px"
multiple multiple
placeholder="请选择" placeholder="请选择"
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
</el-form-item> </el-form-item>
<el-form-item style="margin-bottom: 0;" label="角色" prop="roles"> <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
<el-select <el-select
v-model="form.roles" v-model="roleDatas"
style="width: 437px" style="width: 437px"
multiple multiple
placeholder="请选择" placeholder="请选择"
...@@ -233,6 +233,7 @@ export default { ...@@ -233,6 +233,7 @@ export default {
return { return {
height: document.documentElement.clientHeight - 180 + 'px;', height: document.documentElement.clientHeight - 180 + 'px;',
deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [], deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
jobDatas: [], roleDatas: [], // 多选时使用
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }, defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
permission: { permission: {
add: ['admin', 'user:add'], add: ['admin', 'user:add'],
...@@ -291,25 +292,6 @@ export default { ...@@ -291,25 +292,6 @@ export default {
userJobs.push(job) 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) { deleteTag(value) {
userRoles.forEach(function(data, index) { userRoles.forEach(function(data, index) {
if (data.id === value) { if (data.id === value) {
...@@ -329,27 +311,29 @@ export default { ...@@ -329,27 +311,29 @@ export default {
this.getJobs() this.getJobs()
form.enabled = form.enabled.toString() form.enabled = form.enabled.toString()
}, },
// 打开编辑弹窗前做的操作 // 新增前将多选的值设置为空
[CRUD.HOOK.beforeToAdd]() {
this.jobDatas = []
this.roleDatas = []
},
// 初始化编辑时候的角色与岗位
[CRUD.HOOK.beforeToEdit](crud, form) { [CRUD.HOOK.beforeToEdit](crud, form) {
this.getJobs(this.form.dept.id) this.getJobs(this.form.dept.id)
this.jobDatas = []
this.roleDatas = []
userRoles = [] userRoles = []
userJobs = [] userJobs = []
const roles = [] const _this = this
const jobs = []
form.roles.forEach(function(role, index) { form.roles.forEach(function(role, index) {
roles.push(role.id) _this.roleDatas.push(role.id)
// 初始化编辑时候的角色
const rol = { id: role.id } const rol = { id: role.id }
userRoles.push(rol) userRoles.push(rol)
}) })
form.jobs.forEach(function(job, index) { form.jobs.forEach(function(job, index) {
jobs.push(job.id) _this.jobDatas.push(job.id)
// 初始化编辑时候的岗位
const data = { id: job.id } const data = { id: job.id }
userJobs.push(data) userJobs.push(data)
}) })
form.roles = roles
form.jobs = jobs
}, },
// 提交前做的操作 // 提交前做的操作
[CRUD.HOOK.afterValidateCU](crud) { [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