<template>
|
<div class="p-4">
|
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
<template #tableTitle>
|
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增菜单</a-button>
|
<a-button type="primary" preIcon="ic:round-expand" @click="expandAll">展开全部</a-button>
|
<a-button type="primary" preIcon="ic:round-compress" @click="collapseAll">折叠全部</a-button>
|
|
<a-dropdown v-if="checkedKeys.length > 0">
|
<template #overlay>
|
<a-menu>
|
<a-menu-item key="1" @click="batchHandleDelete">
|
<Icon icon="ant-design:delete-outlined" />
|
删除
|
</a-menu-item>
|
</a-menu>
|
</template>
|
<a-button
|
>批量操作
|
<Icon icon="ant-design:down-outlined" />
|
</a-button>
|
</a-dropdown>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
</template>
|
</BasicTable>
|
<MenuDrawer @register="registerDrawer" @success="handleSuccess" :showFooter="showFooter" />
|
<DataRuleList @register="registerDrawer1" />
|
</div>
|
</template>
|
<script lang="ts" name="system-menu" setup>
|
import { nextTick, ref } from 'vue';
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
import { useListPage } from '/@/hooks/system/useListPage';
|
import { useDrawer } from '/@/components/Drawer';
|
import MenuDrawer from './MenuDrawer.vue';
|
import DataRuleList from './DataRuleList.vue';
|
import { columns,searchFormSchema } from './menu.data';
|
import { list, deleteMenu, batchDeleteMenu } from './menu.api';
|
|
const checkedKeys = ref<Array<string | number>>([]);
|
const showFooter = ref(true);
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
|
// 列表页面公共参数、方法
|
const { prefixCls, tableContext } = useListPage({
|
tableProps: {
|
title: '菜单列表',
|
api: list,
|
columns: columns,
|
size: 'small',
|
pagination: false,
|
isTreeTable: true,
|
striped: true,
|
useSearchForm: true,
|
showTableSetting: true,
|
bordered: true,
|
showIndexColumn: false,
|
tableSetting: { fullScreen: true },
|
formConfig: {
|
schemas: searchFormSchema,
|
autoAdvancedCol: 4,
|
baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
},
|
actionColumn: {
|
width: 120,
|
},
|
},
|
});
|
//注册table数据
|
const [registerTable, { reload, expandAll, collapseAll }] = tableContext;
|
|
/**
|
* 选择列配置
|
*/
|
const rowSelection = {
|
type: 'checkbox',
|
columnWidth: 30,
|
selectedRowKeys: checkedKeys,
|
onChange: onSelectChange,
|
};
|
|
/**
|
* 选择事件
|
*/
|
function onSelectChange(selectedRowKeys: (string | number)[]) {
|
checkedKeys.value = selectedRowKeys;
|
}
|
|
/**
|
* 新增
|
*/
|
function handleCreate() {
|
showFooter.value = true;
|
openDrawer(true, {
|
isUpdate: false,
|
});
|
}
|
|
/**
|
* 编辑
|
*/
|
function handleEdit(record) {
|
showFooter.value = true;
|
openDrawer(true, {
|
record,
|
isUpdate: true,
|
});
|
}
|
/**
|
* 详情
|
*/
|
function handleDetail(record) {
|
showFooter.value = false;
|
openDrawer(true, {
|
record,
|
isUpdate: true,
|
});
|
}
|
/**
|
* 添加下级
|
*/
|
function handleAddSub(record) {
|
openDrawer(true, {
|
record: { parentId: record.id, menuType: 1 },
|
isUpdate: false,
|
});
|
}
|
/**
|
* 数据权限弹窗
|
*/
|
function handleDataRule(record) {
|
openDataRule(true, { id: record.id });
|
}
|
|
/**
|
* 删除
|
*/
|
async function handleDelete(record) {
|
await deleteMenu({ id: record.id }, reload);
|
}
|
/**
|
* 批量删除事件
|
*/
|
async function batchHandleDelete() {
|
await batchDeleteMenu({ ids: checkedKeys.value }, reload);
|
}
|
/**
|
* 成功回调
|
*/
|
function handleSuccess() {
|
reload();
|
}
|
|
function onFetchSuccess() {
|
// 演示默认展开所有表项
|
nextTick(expandAll);
|
}
|
|
/**
|
* 操作栏
|
*/
|
function getTableAction(record) {
|
return [
|
{
|
label: '编辑',
|
onClick: handleEdit.bind(null, record),
|
},
|
];
|
}
|
|
/**
|
* 下拉操作栏
|
*/
|
function getDropDownAction(record) {
|
return [
|
// {
|
// label: '详情',
|
// onClick: handleDetail.bind(null, record),
|
// },
|
{
|
label: '添加下级',
|
onClick: handleAddSub.bind(null, record),
|
},
|
{
|
label: '数据规则',
|
onClick: handleDataRule.bind(null, record),
|
},
|
{
|
label: '删除',
|
color: 'error',
|
popConfirm: {
|
title: '是否确认删除',
|
confirm: handleDelete.bind(null, record),
|
},
|
},
|
];
|
}
|
</script>
|
