3 changed files with 192 additions and 2 deletions
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<Dialog v-model="dialogVisible" title="菜单权限"> |
|||
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px"> |
|||
<el-form-item label="岗位名称"> |
|||
<el-tag>{{ formData.name }}</el-tag> |
|||
</el-form-item> |
|||
<el-form-item label="菜单权限"> |
|||
<el-card class="cardHeight"> |
|||
<template #header> |
|||
全选/全不选: |
|||
<el-switch |
|||
v-model="treeNodeAll" |
|||
active-text="是" |
|||
inactive-text="否" |
|||
inline-prompt |
|||
@change="handleCheckedTreeNodeAll" |
|||
/> |
|||
全部展开/折叠: |
|||
<el-switch |
|||
v-model="menuExpand" |
|||
active-text="展开" |
|||
inactive-text="折叠" |
|||
inline-prompt |
|||
@change="handleCheckedTreeExpand" |
|||
/> |
|||
</template> |
|||
<el-tree |
|||
ref="treeRef" |
|||
:data="areaOptions" |
|||
:props="defaultProps" |
|||
empty-text="加载中，请稍候" |
|||
node-key="id" |
|||
show-checkbox |
|||
/> |
|||
</el-card> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { defaultProps, handleTree } from '@/utils/tree' |
|||
// import * as RoleApi from '@/api/system/role' |
|||
// import * as MenuApi from '@/api/system/menu' |
|||
// import * as PermissionApi from '@/api/system/permission' |
|||
import * as PostApi from '@/api/system/post' |
|||
|
|||
defineOptions({ name: 'SystemRoleAssignMenuForm' }) |
|||
|
|||
const { t } = useI18n() // 国际化 |
|||
const message = useMessage() // 消息弹窗 |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|||
const formData = reactive({ |
|||
id: 0, |
|||
name: '', |
|||
code: '', |
|||
menuIds: [] |
|||
}) |
|||
const formRef = ref() // 表单 Ref |
|||
const areaOptions = ref<any[]>([]) // 菜单树形结构 |
|||
const menuExpand = ref(false) // 展开/折叠 |
|||
const treeRef = ref() // 菜单树组件 Ref |
|||
const treeNodeAll = ref(false) // 全选/全不选 |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = async (row: any) => { |
|||
dialogVisible.value = true |
|||
resetForm() |
|||
// 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点 |
|||
areaOptions.value = await PostApi.getPostAreaTreeList() |
|||
// menuOptions.value = handleTree(await MenuApi.getSimpleMenusList()) |
|||
// 设置数据 |
|||
formData.id = row.id |
|||
formData.name = row.name |
|||
formData.code = row.code |
|||
formLoading.value = true |
|||
try { |
|||
formData.value.menuIds = await PostApi.getByPostId(row.id) |
|||
// 设置选中 |
|||
formData.value.menuIds.forEach((menuId: number) => { |
|||
treeRef.value.setChecked(menuId, true, false) |
|||
}) |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} |
|||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|||
|
|||
/** 提交表单 */ |
|||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
|||
const submitForm = async () => { |
|||
// 校验表单 |
|||
if (!formRef) return |
|||
const valid = await formRef.value.validate() |
|||
if (!valid) return |
|||
// 提交请求 |
|||
formLoading.value = true |
|||
try { |
|||
// const data = { |
|||
// roleId: formData.id, |
|||
// menuIds: [ |
|||
// ...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点 |
|||
// ...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点 |
|||
// ] |
|||
// } |
|||
let array = treeRef.value.getCheckedNodes(false).filter(item => item.id).map(item => { |
|||
return { |
|||
postId:formData.id, |
|||
locationId:item.id, |
|||
locationCode:item.code, |
|||
} |
|||
}) |
|||
console.log(888, array) |
|||
await PostApi.updatePostLocation(array) |
|||
message.success(t('common.updateSuccess')) |
|||
dialogVisible.value = false |
|||
// 发送操作成功的事件 |
|||
emit('success') |
|||
} finally { |
|||
formLoading.value = false |
|||
} |
|||
} |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
// 重置选项 |
|||
treeNodeAll.value = false |
|||
menuExpand.value = false |
|||
// 重置表单 |
|||
formData.value = { |
|||
id: 0, |
|||
name: '', |
|||
code: '', |
|||
menuIds: [] |
|||
} |
|||
treeRef.value?.setCheckedNodes([]) |
|||
formRef.value?.resetFields() |
|||
} |
|||
|
|||
/** 全选/全不选 */ |
|||
const handleCheckedTreeNodeAll = () => { |
|||
treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : []) |
|||
} |
|||
|
|||
/** 展开/折叠全部 */ |
|||
const handleCheckedTreeExpand = () => { |
|||
const nodes = treeRef.value?.store.nodesMap |
|||
for (let node in nodes) { |
|||
if (nodes[node].expanded === menuExpand.value) { |
|||
continue |
|||
} |
|||
nodes[node].expanded = menuExpand.value |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.cardHeight { |
|||
width: 100%; |
|||
max-height: 400px; |
|||
overflow-y: scroll; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue