|
|
@ -3,7 +3,7 @@ |
|
|
:title="!dataForm.id ? '新增' : '修改'" |
|
|
:title="!dataForm.id ? '新增' : '修改'" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:visible.sync="visible"> |
|
|
:visible.sync="visible"> |
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> |
|
|
|
|
|
|
|
|
<el-form v-loading="dialogLoading" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"> |
|
|
<el-form-item label="角色名称" prop="roleName"> |
|
|
<el-form-item label="角色名称" prop="roleName"> |
|
|
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input> |
|
|
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
@ -16,14 +16,15 @@ |
|
|
:props="menuListTreeProps" |
|
|
:props="menuListTreeProps" |
|
|
node-key="menuId" |
|
|
node-key="menuId" |
|
|
ref="menuListTree" |
|
|
ref="menuListTree" |
|
|
:default-expand-all="true" |
|
|
|
|
|
|
|
|
:default-expand-all="false" |
|
|
|
|
|
:expand-on-click-node="false" |
|
|
show-checkbox> |
|
|
show-checkbox> |
|
|
</el-tree> |
|
|
</el-tree> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<el-button @click="visible = false">取消</el-button> |
|
|
<el-button @click="visible = false">取消</el-button> |
|
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> |
|
|
|
|
|
|
|
|
<el-button type="primary" :disabled="dialogLoading" @click="dataFormSubmit()">确定</el-button> |
|
|
</span> |
|
|
</span> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
</template> |
|
|
</template> |
|
|
@ -34,6 +35,7 @@ |
|
|
data () { |
|
|
data () { |
|
|
return { |
|
|
return { |
|
|
visible: false, |
|
|
visible: false, |
|
|
|
|
|
dialogLoading: false, |
|
|
menuList: [], |
|
|
menuList: [], |
|
|
menuListTreeProps: { |
|
|
menuListTreeProps: { |
|
|
label: 'name', |
|
|
label: 'name', |
|
|
@ -55,36 +57,53 @@ |
|
|
methods: { |
|
|
methods: { |
|
|
init (id) { |
|
|
init (id) { |
|
|
this.dataForm.id = id || 0 |
|
|
this.dataForm.id = id || 0 |
|
|
this.$http({ |
|
|
|
|
|
|
|
|
this.dataForm.roleName = '' |
|
|
|
|
|
this.dataForm.remark = '' |
|
|
|
|
|
this.menuList = [] |
|
|
|
|
|
this.visible = true |
|
|
|
|
|
this.dialogLoading = true |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
if (this.$refs['dataForm']) { |
|
|
|
|
|
this.$refs['dataForm'].clearValidate() |
|
|
|
|
|
} |
|
|
|
|
|
if (this.$refs.menuListTree) { |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys([]) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
const menuPromise = this.$http({ |
|
|
url: this.$http.adornUrl('/sys/menu/list'), |
|
|
url: this.$http.adornUrl('/sys/menu/list'), |
|
|
method: 'get', |
|
|
method: 'get', |
|
|
params: this.$http.adornParams() |
|
|
params: this.$http.adornParams() |
|
|
}).then(({data}) => { |
|
|
|
|
|
this.menuList = treeDataTranslate(data, 'menuId') |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
this.visible = true |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.$refs['dataForm'].resetFields() |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys([]) |
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
const rolePromise = this.dataForm.id |
|
|
|
|
|
? this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
}) |
|
|
}) |
|
|
}).then(() => { |
|
|
|
|
|
if (this.dataForm.id) { |
|
|
|
|
|
this.$http({ |
|
|
|
|
|
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), |
|
|
|
|
|
method: 'get', |
|
|
|
|
|
params: this.$http.adornParams() |
|
|
|
|
|
}).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.dataForm.roleName = data.role.roleName |
|
|
|
|
|
this.dataForm.remark = data.role.remark |
|
|
|
|
|
var idx = data.role.menuIdList.indexOf(this.tempKey) |
|
|
|
|
|
if (idx !== -1) { |
|
|
|
|
|
data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx) |
|
|
|
|
|
} |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys(data.role.menuIdList) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
: Promise.resolve({data: null}) |
|
|
|
|
|
// 并行加载菜单与角色详情,减少弹窗等待时长 - rqrq |
|
|
|
|
|
Promise.all([menuPromise, rolePromise]).then(([menuRes, roleRes]) => { |
|
|
|
|
|
this.menuList = treeDataTranslate(menuRes.data || [], 'menuId') |
|
|
|
|
|
let checkedMenuIds = [] |
|
|
|
|
|
if (this.dataForm.id && roleRes.data && roleRes.data.code === 0) { |
|
|
|
|
|
this.dataForm.roleName = roleRes.data.role.roleName |
|
|
|
|
|
this.dataForm.remark = roleRes.data.role.remark |
|
|
|
|
|
checkedMenuIds = (roleRes.data.role.menuIdList || []).slice() |
|
|
|
|
|
const idx = checkedMenuIds.indexOf(this.tempKey) |
|
|
|
|
|
if (idx !== -1) { |
|
|
|
|
|
checkedMenuIds = checkedMenuIds.slice(0, idx) |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
if (this.$refs.menuListTree) { |
|
|
|
|
|
this.$refs.menuListTree.setCheckedKeys(checkedMenuIds) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
this.$message.error('权限数据加载失败') |
|
|
|
|
|
}).finally(() => { |
|
|
|
|
|
this.dialogLoading = false |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
// 表单提交 |
|
|
// 表单提交 |
|
|
|