2
0

fix:角色勾选根节点获取失败问题

This commit is contained in:
TsMask
2024-12-02 16:20:47 +08:00
parent 3f01adb2ad
commit c9f0fbaca5
2 changed files with 30 additions and 20 deletions

View File

@@ -80,10 +80,18 @@ async function init() {
function clearChecks() {
menuIds.value = [];
}
const rootIds = ref([]);
function fnModalTreeChecked(keys: any, info: any ) {
let ids = Array.isArray(keys) ? keys : keys.checked;
// ids = ids.concat(info.halfCheckedKeys);
rootIds.value = info.halfCheckedKeys;
menuIds.value = ids;
}
defineExpose({
clearChecks,
checkedKeys: menuIds,
checkedKeys: ()=> {
return menuIds.value.concat(rootIds.value).concat()
},
tree
});
</script>
@@ -92,13 +100,15 @@ defineExpose({
<div class="border-0.5 border-gray-300 rounded-md p-2 transition-all dark:border-dark-300" hover="border-gray-500">
<SimpleScrollbar>
<ATree
v-model:checked-keys="menuIds"
:selectable="false"
:virtual="false"
:tree-data="tree"
checkable
block-node
/>
:selectable="false"
@check="fnModalTreeChecked"
v-model:checked-keys="menuIds"
:check-strictly="false"
:tree-data="tree"
>
</ATree>
</SimpleScrollbar>
</div>
</template>

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { SimpleScrollbar } from '@sa/materials';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales';
import { enableStatusOptions } from '@/constants/business';
import { doPostRole, doPutRole } from '@/service/api/role';
import {SimpleScrollbar} from '@sa/materials';
import {useAntdForm, useFormRules} from '@/hooks/common/form';
import {$t} from '@/locales';
import {enableStatusOptions} from '@/constants/business';
import {doPostRole, doPutRole} from '@/service/api/role';
import MenuAuth from './menu-auth.vue';
defineOptions({
@@ -32,8 +32,8 @@ const menuAuthRef = ref<InstanceType<typeof MenuAuth> | null>(null);
const authStore = useAuthStore();
const { formRef, validate, resetFields } = useAntdForm();
const { defaultRequiredRule } = useFormRules();
const {formRef, validate, resetFields} = useAntdForm();
const {defaultRequiredRule} = useFormRules();
const title = computed(() => {
const titles: Record<AntDesign.TableOperateType, string> = {
@@ -73,7 +73,7 @@ function handleUpdateModelWhenEdit() {
}
if (props.operateType === 'edit' && props.rowData) {
model.value = { ...props.rowData, menuIds: [] };
model.value = {...props.rowData, menuIds: []};
}
}
@@ -83,9 +83,9 @@ function closeDrawer() {
async function handleSubmit() {
await validate();
const menuIds = transformMenuChildWithRootIds(menuAuthRef.value?.tree || [], model.value.menuIds);
const menuIds = menuAuthRef.value?.checkedKeys();
const { error } = await (props.operateType === 'edit' ? doPutRole : doPostRole)({
const {error} = await (props.operateType === 'edit' ? doPutRole : doPostRole)({
...model.value,
menuIds,
menuCheckStrictly: true
@@ -122,10 +122,10 @@ watch(
<SimpleScrollbar>
<AForm ref="formRef" py-20px pr-20px layout="vertical" :model="model" :rules="rules">
<AFormItem :label="$t('page.manage.role.roleName')" name="roleName">
<AInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
<AInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')"/>
</AFormItem>
<AFormItem :label="$t('page.manage.role.roleCode')" name="roleKey">
<AInput v-model:value="model.roleKey" :placeholder="$t('page.manage.role.form.roleCode')" />
<AInput v-model:value="model.roleKey" :placeholder="$t('page.manage.role.form.roleCode')"/>
</AFormItem>
<AFormItem :label="$t('page.manage.role.roleStatus')" name="status">
<ARadioGroup v-model:value="model.status">
@@ -135,7 +135,7 @@ watch(
</ARadioGroup>
</AFormItem>
<AFormItem :label="$t('page.manage.role.roleDesc')" name="roleDesc">
<AInput v-model:value="model.remark" :placeholder="$t('page.manage.role.form.roleDesc')" />
<AInput v-model:value="model.remark" :placeholder="$t('page.manage.role.form.roleDesc')"/>
</AFormItem>
<AFormItem>