fix: 部门新增不显示问题

This commit is contained in:
lbw 2023-03-08 15:08:24 +08:00
parent ade034e96d
commit 18c0941817
2 changed files with 105 additions and 115 deletions

View File

@ -124,7 +124,7 @@ const getDeptData = async () => {
depttree().then((res) => { depttree().then((res) => {
parentData.value = []; parentData.value = [];
const dept = { const dept = {
id: '-1', id: '0',
name: '根部门', name: '根部门',
children: [] as any[], children: [] as any[],
}; };

View File

@ -1,129 +1,119 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<div class="mb15"> <div class="mb15">
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef"> <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
<el-form-item :label="$t('sysmenu.name')" prop="menuName"> <el-form-item :label="$t('sysmenu.name')" prop="menuName">
<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" <el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.menuName" />
v-model="state.queryForm.menuName"/> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button @click="getDataList" class="ml10" icon="search" type="primary">
<el-button @click="getDataList" class="ml10" icon="search" type="primary"> {{ $t('common.queryBtn') }}
{{ $t('common.queryBtn') }} </el-button>
</el-button> <el-button @click="onOpenAddMenu" class="ml10" icon="folder-add" type="primary" v-auth="'sys_menu_add'">
<el-button @click="onOpenAddMenu" class="ml10" icon="folder-add" type="primary" {{ $t('common.addBtn') }}
v-auth="'sys_menu_add'"> </el-button>
{{ $t('common.addBtn') }} </el-form-item>
</el-button> </el-form>
</el-form-item> </div>
</el-form> <el-table
</div> :data="state.dataList"
<el-table :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:data="state.dataList" max-height="450"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="path"
border style="width: 100%"
max-height="450" v-loading="state.loading"
row-key="path" >
style="width: 100%" <el-table-column :label="$t('sysmenu.name')" fixed prop="name" show-overflow-tooltip></el-table-column>
v-loading="state.loading" <el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" show-overflow-tooltip></el-table-column>
> <el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip>
<el-table-column :label="$t('sysmenu.name')" fixed prop="name" show-overflow-tooltip></el-table-column> <template #default="scope">
<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" <SvgIcon :name="scope.row.icon" />
show-overflow-tooltip></el-table-column> </template>
<el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip> </el-table-column>
<template #default="scope"> <el-table-column :label="$t('sysmenu.path')" prop="path" show-overflow-tooltip></el-table-column>
<SvgIcon :name="scope.row.icon"/> <el-table-column :label="$t('sysmenu.menuType')" show-overflow-tooltip>
</template> <template #default="scope">
</el-table-column> <el-tag type="success" v-if="scope.row.menuType === '0'">左菜单</el-tag>
<el-table-column :label="$t('sysmenu.path')" prop="path" show-overflow-tooltip></el-table-column> <el-tag type="success" v-if="scope.row.menuType === '2'">顶菜单</el-tag>
<el-table-column :label="$t('sysmenu.menuType')" show-overflow-tooltip> <el-tag type="info" v-if="scope.row.menuType === '1'">按钮</el-tag>
<template #default="scope"> </template>
<el-tag type="success" v-if="scope.row.menuType === '0'">左菜单</el-tag> </el-table-column>
<el-tag type="success" v-if="scope.row.menuType === '2'">顶菜单</el-tag> <el-table-column :label="$t('sysmenu.keepAlive')" show-overflow-tooltip>
<el-tag type="info" v-if="scope.row.menuType === '1'">按钮</el-tag> <template #default="scope">
</template> <el-tag type="info" v-if="scope.row.keepAlive === '0'">关闭</el-tag>
</el-table-column> <el-tag type="success" v-if="scope.row.keepAlive === '1'">开启</el-tag>
<el-table-column :label="$t('sysmenu.keepAlive')" show-overflow-tooltip> </template>
<template #default="scope"> </el-table-column>
<el-tag type="info" v-if="scope.row.keepAlive === '0'">关闭</el-tag> <el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" prop="permission"></el-table-column>
<el-tag type="success" v-if="scope.row.keepAlive === '1'">开启</el-tag> <el-table-column :label="$t('common.action')" show-overflow-tooltip width="200">
</template> <template #default="scope">
</el-table-column> <el-button @click="onOpenAddMenu('add', scope.row)" text type="primary" v-auth="'sys_menu_add'">
<el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" {{ $t('common.addBtn') }}
prop="permission"></el-table-column> </el-button>
<el-table-column :label="$t('common.action')" show-overflow-tooltip width="200"> <el-button @click="onOpenEditMenu('edit', scope.row)" text type="primary" v-auth="'sys_menu_edit'">{{ $t('common.editBtn') }} </el-button>
<template #default="scope">
<el-button @click="onOpenAddMenu('add', scope.row)" text type="primary" v-auth="'sys_menu_add'">
{{ $t('common.addBtn') }}
</el-button>
<el-button @click="onOpenEditMenu('edit', scope.row)" text type="primary"
v-auth="'sys_menu_edit'">{{ $t('common.editBtn') }}
</el-button>
<el-tooltip :content="$t('sysmenu.deleteDisabledTip')" <el-tooltip :content="$t('sysmenu.deleteDisabledTip')" :disabled="!deleteMenuDisabled(scope.row)" placement="top">
:disabled="!deleteMenuDisabled(scope.row)" placement="top">
<span style="margin-left: 12px"> <span style="margin-left: 12px">
<el-button :disabled="deleteMenuDisabled(scope.row)" @click="onTabelRowDel(scope.row)" <el-button :disabled="deleteMenuDisabled(scope.row)" @click="onTabelRowDel(scope.row)" text type="primary" v-auth="'sys_menu_del'">
text
type="primary" v-auth="'sys_menu_del'">
{{ $t('common.delBtn') }} {{ $t('common.delBtn') }}
</el-button> </el-button>
</span> </span>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<MenuDialog @refresh="getDataList()" ref="menuDialogRef"/> <MenuDialog @refresh="getDataList()" ref="menuDialogRef" />
</div> </div>
</template> </template>
<script lang="ts" name="systemMenu" setup> <script lang="ts" name="systemMenu" setup>
import {delObj, pageList} from '/@/api/admin/menu'; import { delObj, pageList } from '/@/api/admin/menu';
import {BasicTableProps, useTable} from '/@/hooks/table'; import { BasicTableProps, useTable } from '/@/hooks/table';
import {useMessage, useMessageBox} from '/@/hooks/message'; import { useMessage, useMessageBox } from '/@/hooks/message';
// //
const MenuDialog = defineAsyncComponent(() => import('./form.vue')); const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
// //
const menuDialogRef = ref(); const menuDialogRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
pageList: pageList, // H pageList: pageList, // H
queryForm: { queryForm: {
menuName: '', menuName: '',
}, },
isPage: false, isPage: false,
}); });
const {getDataList} = useTable(state); const { getDataList } = useTable(state);
// //
const onOpenAddMenu = (type: string, row?: any) => { const onOpenAddMenu = (type: string, row?: any) => {
menuDialogRef.value.openDialog(type, row); menuDialogRef.value.openDialog(type, row);
}; };
// //
const onOpenEditMenu = (type: string, row: any) => { const onOpenEditMenu = (type: string, row: any) => {
menuDialogRef.value.openDialog(type, row); menuDialogRef.value.openDialog(type, row);
}; };
// //
const deleteMenuDisabled = (row: any) => { const deleteMenuDisabled = (row: any) => {
return (row.children || []).length > 0; return (row.children || []).length > 0;
}; };
// //
const onTabelRowDel = (row: any) => { const onTabelRowDel = (row: any) => {
useMessageBox() useMessageBox()
.confirm(`此操作将永久删除:${row.name}`) .confirm(`此操作将永久删除:${row.name}`)
.then(() => { .then(() => {
delObj(row.id) delObj(row.id)
.then(() => { .then(() => {
useMessage().success('删除成功'); useMessage().success('删除成功');
getDataList(); getDataList();
}) })
.catch((err: any) => { .catch((err: any) => {
useMessage().error(err.msg); useMessage().error(err.msg);
}); });
}); });
}; };
</script> </script>