144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<MenuTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editMenu" />
|
|
<BasicTable
|
|
class="w-3/4 xl:w-4/5"
|
|
@register="registerTable"
|
|
@fetch-success="onFetchSuccess"
|
|
:searchInfo="searchInfo"
|
|
>
|
|
<template #toolbar>
|
|
<!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
|
|
<PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
|
|
</template>
|
|
</BasicTable>
|
|
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, nextTick, ref } from 'vue';
|
|
|
|
import { BasicTable, useTable } from '@/components/Table';
|
|
import { getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { useDrawer } from '@/components/Drawer';
|
|
|
|
import { MenuTree } from './page';
|
|
import { MenuDrawer } from './page';
|
|
|
|
import { columns, searchFormSchema } from './menu.data';
|
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createConfirm, createMessage } = useMessage();
|
|
defineOptions({ name: 'MenuManagement' });
|
|
const searchInfo = reactive<Recordable>({});
|
|
|
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
title: '按钮列表',
|
|
api: getButtonList,
|
|
columns,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
isTreeTable: true,
|
|
striped: false,
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
showIndexColumn: false,
|
|
rowSelection: {
|
|
//多选框
|
|
// type: 'checkbox',
|
|
type: 'radio',
|
|
},
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
const childRef = ref<any>();
|
|
function handleCreate() {
|
|
openDrawer(true, {
|
|
isUpdate: false,
|
|
});
|
|
}
|
|
|
|
function handleEdit() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个按钮进行编辑');
|
|
}
|
|
const record = rows[0];
|
|
record.type = '2';
|
|
openDrawer(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
async function editMenu(node) {
|
|
var query = {
|
|
id: node.id,
|
|
};
|
|
const record = await getMenuDetail(query);
|
|
record.type = '1';
|
|
openDrawer(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
function handleSelect(ModuleId = '') {
|
|
searchInfo.ModuleId = ModuleId;
|
|
clearSelectedRowKeys();
|
|
reload();
|
|
}
|
|
async function handleDelete() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个按钮进行删除');
|
|
}
|
|
const query = [rows[0].id];
|
|
createConfirm({
|
|
iconType: 'info',
|
|
title: '删除',
|
|
content: '确定要删除当前按钮吗',
|
|
onOk: async () => {
|
|
const data = await deleteButton(query);
|
|
if (data) {
|
|
reload();
|
|
return createMessage.success('成功');
|
|
} else {
|
|
return createMessage.error('失败');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
function handleSuccess() {
|
|
childRef.value.fetch();
|
|
clearSelectedRowKeys();
|
|
reload();
|
|
}
|
|
|
|
function onFetchSuccess() {
|
|
// 演示默认展开所有表项
|
|
nextTick(expandAll);
|
|
}
|
|
function onBtnClicked(domId) {
|
|
switch (domId) {
|
|
case 'btnAdd':
|
|
handleCreate();
|
|
break;
|
|
case 'btnEdit':
|
|
handleEdit();
|
|
break;
|
|
case 'btnDelete':
|
|
handleDelete();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|