<template>
|
<PageWrapper title="菜单管理" content="这里是菜单的增加删除和修改" contentBackground>
|
<template #footer>
|
<a-tabs default-active-key="detail" v-model:activeKey="currentKey">
|
<a-tab-pane key="detailfirst" tab="BS菜单" />
|
<a-tab-pane key="detailsecond" tab="PDA菜单" />
|
</a-tabs>
|
</template>
|
<div>
|
<div v-if="currentKey == 'detailfirst'">
|
<div class="p-2">
|
<BasicTable
|
@register="registerTable"
|
@fetch-success="onFetchSuccess"
|
@expanded-rows-change="onExpandedRChg"
|
>
|
<template #toolbar>
|
<a-button type="primary" @click="handleCreate('BS 菜单')"> 新增菜单 </a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction
|
:actions="[
|
{
|
icon: 'clarity:note-edit-line',
|
onClick: handleEdit.bind(null, record, 'BS 菜单'),
|
name: '',
|
},
|
{
|
icon: 'ant-design:delete-outlined',
|
color: 'error',
|
popConfirm: {
|
title: '是否确认删除?',
|
placement: 'left',
|
confirm: handleDelete.bind(null, record),
|
},
|
name: '',
|
},
|
]"
|
/>
|
</template>
|
</BasicTable>
|
</div>
|
</div>
|
<div v-if="currentKey == 'detailsecond'">
|
<div class="p-2">
|
<BasicTable
|
@register="registerTableSecond"
|
@fetch-success="onFetchSuccess"
|
@expanded-rows-change="onExpandedRChg"
|
>
|
<template #toolbar>
|
<a-button type="primary" @click="handleCreate('PDA')"> 新增菜单 </a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction
|
:actions="[
|
{
|
icon: 'clarity:note-edit-line',
|
onClick: handleEdit.bind(null, record, 'PDA'),
|
name: '',
|
},
|
{
|
icon: 'ant-design:delete-outlined',
|
color: 'error',
|
popConfirm: {
|
title: '是否确认删除?',
|
placement: 'left',
|
confirm: handleDelete.bind(null, record),
|
},
|
name: '',
|
},
|
]"
|
/>
|
</template>
|
</BasicTable>
|
</div>
|
</div>
|
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
|
</div>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { nextTick, ref, unref } from 'vue';
|
import { PageWrapper } from '/@/components/Page';
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
import { getMenuList, DeleteMenu } from '/@/api/tigerapi/system';
|
import { useDrawer } from '/@/components/Drawer';
|
import MenuDrawer from './MenuDrawer.vue';
|
import { Tabs } from 'ant-design-vue';
|
import { columns, searchFormSchema } from './menu.data';
|
|
const ATabs = ref(Tabs);
|
const ATabPane = ref(Tabs.TabPane);
|
var currentKey = ref('detailfirst');
|
const expandedRowKeys = ref<string[]>([]);
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
const [registerTable, { reload, expandAll, expandRows }] = useTable({
|
// const [registerTable, { reload, expandRows }] = useTable({
|
title: '菜单列表',
|
api: getMenuList,
|
searchInfo: { menuName: 'BS 菜单' },
|
columns,
|
formConfig: {
|
labelWidth: 120,
|
schemas: searchFormSchema,
|
},
|
isTreeTable: true,
|
// pagination: false,
|
// striped: false,
|
useSearchForm: true,
|
showTableSetting: true,
|
// bordered: true,
|
// showIndexColumn: false,
|
// canResize: false,
|
actionColumn: {
|
width: 80,
|
title: '操作',
|
dataIndex: 'action',
|
slots: { customRender: 'action' },
|
fixed: undefined,
|
},
|
rowKey: 'id',
|
});
|
|
const [
|
registerTableSecond,
|
{ reload: reloadSecond, expandAll: expandAllSecond, expandRows: expandRowsSecond },
|
] = useTable({
|
// const [registerTable, { reload, expandRows }] = useTable({
|
title: '菜单列表',
|
api: getMenuList,
|
searchInfo: { menuName: 'PDA' },
|
columns,
|
formConfig: {
|
labelWidth: 120,
|
schemas: searchFormSchema,
|
},
|
isTreeTable: true,
|
// pagination: false,
|
// striped: false,
|
useSearchForm: true,
|
showTableSetting: true,
|
// bordered: true,
|
// showIndexColumn: false,
|
// canResize: false,
|
actionColumn: {
|
width: 80,
|
title: '操作',
|
dataIndex: 'action',
|
slots: { customRender: 'action' },
|
fixed: undefined,
|
},
|
rowKey: 'id',
|
});
|
|
function handleCreate(menuName: string) {
|
openDrawer(true, {
|
isUpdate: false,
|
menuName: menuName,
|
});
|
}
|
|
function handleEdit(record: Recordable, menuName: string) {
|
openDrawer(true, {
|
record,
|
isUpdate: true,
|
menuName: menuName,
|
});
|
}
|
|
function handleDelete(record: Recordable) {
|
console.log(record);
|
//删除菜单
|
const apiAction = DeleteMenu(record);
|
apiAction.then((onfulfilled) => {
|
if (onfulfilled.IsSuccessed) {
|
reloadSecond();
|
reload();
|
}
|
});
|
}
|
|
function handleSuccess(d) {
|
if (d.menuName == 'PDA') {
|
reloadSecond();
|
} else {
|
reload();
|
}
|
nextTick(() => {
|
setTimeout(() => {
|
var tdList = document.querySelectorAll(
|
'.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
|
);
|
for (var i = 0; i < tdList.length; i++) {
|
if (tdList[i].attributes['title'].nodeValue == d.values.menuName) {
|
tdList[i].scrollIntoView();
|
}
|
}
|
}, 1000);
|
// console.log(
|
// document.querySelectorAll(
|
// '.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
|
// )[8].attributes['title'].nodeValue, //[8].attributes['data-row-key'].nodeValue
|
// values.menuName,
|
// );
|
});
|
}
|
|
function onFetchSuccess(record: Recordable) {
|
// 演示默认展开所有表项
|
nextTick(() => {
|
if (expandedRowKeys.value.length == 0) {
|
// expandAll();
|
} else {
|
expandRows(expandedRowKeys.value);
|
}
|
});
|
console.log(record);
|
//nextTick(collapseAll);
|
// expandRows([record.items[1].id]);
|
}
|
|
function onExpandedRChg(record: Recordable) {
|
expandedRowKeys.value = record;
|
console.log(11, record);
|
}
|
</script>
|
