修复角色权限要保存两次
This commit is contained in:
Mrtangl
parent
de7972fa00
commit
dd1be368da
|
|
@ -48,7 +48,7 @@
|
|||
icon="ArrowRight"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'menuName'
|
||||
label: 'menuName',
|
||||
}"
|
||||
empty-text=""
|
||||
show-checkbox
|
||||
|
|
@ -65,213 +65,212 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
|
||||
import {
|
||||
apiConfigGetMenu,
|
||||
apiConfigGetAuth,
|
||||
apiRoleAdd,
|
||||
apiRoleEdit,
|
||||
apiRoleDetail
|
||||
} from '@/api/auth'
|
||||
import { ElInput, ElForm } from 'element-plus'
|
||||
import FooterBtns from '@/components/footer-btns/index.vue'
|
||||
import { useAdmin } from '@/core/hooks/app'
|
||||
import { flatten } from '@/utils/util'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { defineComponent, reactive, onMounted, Ref, ref, toRefs } from 'vue'
|
||||
import { apiConfigGetMenu, apiConfigGetAuth, apiRoleAdd, apiRoleEdit, apiRoleDetail } from '@/api/auth'
|
||||
import { ElInput, ElForm } from 'element-plus'
|
||||
import FooterBtns from '@/components/footer-btns/index.vue'
|
||||
import { useAdmin } from '@/core/hooks/app'
|
||||
import { flatten } from '@/utils/util'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FooterBtns
|
||||
},
|
||||
setup() {
|
||||
const { route, router } = useAdmin()
|
||||
const formRef: Ref<typeof ElForm | null> = ref(null)
|
||||
const treeRef: Ref<typeof ElForm | null> = ref(null)
|
||||
const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FooterBtns,
|
||||
},
|
||||
setup() {
|
||||
const { route, router } = useAdmin()
|
||||
const formRef: Ref<typeof ElForm | null> = ref(null)
|
||||
const treeRef: Ref<typeof ElForm | null> = ref(null)
|
||||
const id: Ref<Number | null> = ref(null) // 当前编辑角色ID
|
||||
|
||||
// 表单数据
|
||||
const { formData, menu } = toRefs(
|
||||
reactive({
|
||||
formData: {
|
||||
name: '', // 角色名称
|
||||
remark: '', // 备注
|
||||
menus: [], // 权限，就选中的菜单id
|
||||
isDisable: 0,
|
||||
sort: '',
|
||||
menuIds: '' // 菜单ID数组,逗号隔开
|
||||
},
|
||||
// 表单数据
|
||||
const { formData, menu } = toRefs(
|
||||
reactive({
|
||||
formData: {
|
||||
name: '', // 角色名称
|
||||
remark: '', // 备注
|
||||
menus: [], // 权限，就选中的菜单id
|
||||
isDisable: 0,
|
||||
sort: '',
|
||||
menuIds: '', // 菜单ID数组,逗号隔开
|
||||
},
|
||||
|
||||
menu: {
|
||||
permissionsTree: [], // 菜单
|
||||
allAuthKeys: [] // 菜单全部的id
|
||||
menu: {
|
||||
permissionsTree: [], // 菜单
|
||||
allAuthKeys: [], // 菜单全部的id
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
// 表单验证
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入角色名称',
|
||||
trigger: ['blur'],
|
||||
pattern: /(^[^\s]*$)/, // 不能输入空格
|
||||
},
|
||||
],
|
||||
sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入排序',
|
||||
trigger: 'blur',
|
||||
pattern: /(^[0-9]\d*$)/,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// 确定提交
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
|
||||
id.value ? roleEdit() : roleAdd()
|
||||
})
|
||||
}
|
||||
|
||||
const getMenu = () => {
|
||||
apiConfigGetMenu()
|
||||
.then((res: any) => {
|
||||
// 获取菜单
|
||||
menu.value.permissionsTree = res
|
||||
console.log('res', res)
|
||||
|
||||
// 数组扁平化
|
||||
const menuFlatten = flatten(res, [], 'children')
|
||||
// console.log(menuFlatten)
|
||||
// 获取菜单全部 id
|
||||
menu.value.allAuthKeys = menuFlatten.map((item: any) => item.id) as never
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 添加角色
|
||||
const roleAdd = () => {
|
||||
// 选择中的权限id字符串
|
||||
formData.value.menus.length == 0
|
||||
? (formData.value.menuIds = '')
|
||||
: (formData.value.menuIds = formData.value.menus.join(','))
|
||||
|
||||
apiRoleAdd({ ...formData.value })
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
}, 500)
|
||||
ElMessage({ type: 'success', message: '保存成功' })
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
// 编辑角色
|
||||
const roleEdit = () => {
|
||||
// 选择中的权限id字符串
|
||||
formData.value.menus.length == 0
|
||||
? (formData.value.menuIds = '')
|
||||
: (formData.value.menuIds = formData.value.menus.join(','))
|
||||
|
||||
apiRoleEdit({
|
||||
...formData.value,
|
||||
id: id.value,
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
}, 500)
|
||||
ElMessage({ type: 'success', message: '保存成功' })
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 角色详情
|
||||
const roleDetail = () => {
|
||||
apiRoleDetail({
|
||||
id: id.value,
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
|
||||
formData.value = res
|
||||
|
||||
treeRef.value?.setCheckedKeys(res.menus)
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 权限树触发函数
|
||||
const handlePermissionsCheckChange = (data: any, checked: boolean) => {
|
||||
console.log(data)
|
||||
if (!data.id) {
|
||||
return
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
// 表单验证
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入角色名称',
|
||||
trigger: ['blur'],
|
||||
pattern: /(^[^\s]*$)/ // 不能输入空格
|
||||
}
|
||||
],
|
||||
sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入排序',
|
||||
trigger: 'blur',
|
||||
pattern: /(^[0-9]\d*$)/
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 确定提交
|
||||
const onSubmit = () => {
|
||||
formRef.value?.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
const index = formData.value.menus.findIndex((item) => item == data.id)
|
||||
if (checked) {
|
||||
index == -1 && (formData.value.menus as any).push(data.id)
|
||||
return
|
||||
}
|
||||
|
||||
id.value ? roleEdit() : roleAdd()
|
||||
if (index != -1) {
|
||||
formData.value.menus.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
const allSelect = () => {
|
||||
treeRef.value?.setCheckedKeys(menu.value.allAuthKeys)
|
||||
}
|
||||
|
||||
// 全不选
|
||||
const close = () => {
|
||||
treeRef.value?.setCheckedKeys([])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const query: any = route.query
|
||||
if (query.id) {
|
||||
id.value = query.id * 1
|
||||
roleDetail()
|
||||
}
|
||||
|
||||
getMenu()
|
||||
})
|
||||
}
|
||||
|
||||
const getMenu = () => {
|
||||
apiConfigGetMenu()
|
||||
.then((res: any) => {
|
||||
// 获取菜单
|
||||
menu.value.permissionsTree = res
|
||||
console.log('res', res)
|
||||
|
||||
// 数组扁平化
|
||||
const menuFlatten = flatten(res, [], 'children')
|
||||
// console.log(menuFlatten)
|
||||
// 获取菜单全部 id
|
||||
menu.value.allAuthKeys = menuFlatten.map((item: any) => item.id) as never
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 添加角色
|
||||
const roleAdd = () => {
|
||||
apiRoleAdd({ ...formData.value })
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
}, 500)
|
||||
ElMessage({ type: 'success', message: '保存成功' })
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
// 编辑角色
|
||||
const roleEdit = () => {
|
||||
// 选择中的权限id字符串
|
||||
formData.value.menus.length == 0
|
||||
? (formData.value.menuIds = '')
|
||||
: (formData.value.menuIds = formData.value.menus.join(','))
|
||||
|
||||
apiRoleEdit({
|
||||
...formData.value,
|
||||
id: id.value
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
setTimeout(() => {
|
||||
router.back()
|
||||
}, 500)
|
||||
ElMessage({ type: 'success', message: '保存成功' })
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 角色详情
|
||||
const roleDetail = () => {
|
||||
apiRoleDetail({
|
||||
id: id.value
|
||||
})
|
||||
.then((res: any) => {
|
||||
console.log('res', res)
|
||||
|
||||
formData.value = res
|
||||
|
||||
treeRef.value?.setCheckedKeys(res.menus)
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 权限树触发函数
|
||||
const handlePermissionsCheckChange = (data: any, checked: boolean) => {
|
||||
console.log(data)
|
||||
if (!data.id) {
|
||||
return
|
||||
return {
|
||||
id,
|
||||
formData,
|
||||
menu,
|
||||
formRef,
|
||||
treeRef,
|
||||
rules,
|
||||
getMenu,
|
||||
roleAdd,
|
||||
roleEdit,
|
||||
roleDetail,
|
||||
onSubmit,
|
||||
handlePermissionsCheckChange,
|
||||
close,
|
||||
allSelect,
|
||||
}
|
||||
const index = formData.value.menus.findIndex(item => item == data.id)
|
||||
if (checked) {
|
||||
index == -1 && (formData.value.menus as any).push(data.id)
|
||||
return
|
||||
}
|
||||
|
||||
if (index != -1) {
|
||||
formData.value.menus.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
const allSelect = () => {
|
||||
treeRef.value?.setCheckedKeys(menu.value.allAuthKeys)
|
||||
}
|
||||
|
||||
// 全不选
|
||||
const close = () => {
|
||||
treeRef.value?.setCheckedKeys([])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const query: any = route.query
|
||||
if (query.id) {
|
||||
id.value = query.id * 1
|
||||
roleDetail()
|
||||
}
|
||||
|
||||
getMenu()
|
||||
})
|
||||
|
||||
return {
|
||||
id,
|
||||
formData,
|
||||
menu,
|
||||
formRef,
|
||||
treeRef,
|
||||
rules,
|
||||
getMenu,
|
||||
roleAdd,
|
||||
roleEdit,
|
||||
roleDetail,
|
||||
onSubmit,
|
||||
handlePermissionsCheckChange,
|
||||
close,
|
||||
allSelect
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.role-edit {
|
||||
:deep .el-textarea {
|
||||
width: 340px;
|
||||
.role-edit {
|
||||
:deep .el-textarea {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue