<script setup lang="ts">
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, nextTick, onMounted, reactive, toRefs, watch } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { downloadByUrl } from '@jnpf/utils';
|
|
import { delMenu, exportMenu, getMenuList } from '#/api/system/menu';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'PermissionMenu' });
|
|
const props = defineProps({
|
isSystem: { type: Boolean, default: true },
|
});
|
|
interface State {
|
listQuery: any;
|
parentId: string;
|
}
|
|
const state = reactive<State>({
|
listQuery: {
|
category: 'Web',
|
keyword: '',
|
type: '',
|
enabledMark: '',
|
},
|
parentId: '',
|
});
|
const { listQuery } = toRefs(state);
|
const { createMessage } = useMessage();
|
const getSearchInfo = computed(() => ({
|
keyword: state.listQuery.keyword,
|
category: state.listQuery.category,
|
enabledMark: state.listQuery.enabledMark,
|
}));
|
const menuTableColumns: BasicColumn[] = [
|
{ title: '菜单名称', dataIndex: 'fullName', width: 260 },
|
{ title: '编码', dataIndex: 'enCode', width: 160 },
|
{ title: '菜单地址', dataIndex: 'urlAddress', minWidth: 200 },
|
{ title: '图标', dataIndex: 'icon', width: 50, align: 'center', slots: { default: 'icon' } },
|
{
|
title: '类型',
|
dataIndex: 'type',
|
width: 90,
|
align: 'center',
|
customRender: ({ record }) => {
|
if (record.type === 1) return '目录';
|
if (record.type === 2) return '页面';
|
if (record.type === 3) return '在线表单';
|
if (record.type === 4) return '字典';
|
if (record.type === 5) return '报表(原)';
|
if (record.type === 10) return '报表';
|
if (record.type === 6) return '大屏';
|
if (record.type === 7) return '外链';
|
if (record.type === 8) return '门户';
|
if (record.type === 9) return '流程';
|
if (record.type === 11) return '表单回传';
|
},
|
},
|
{ title: '排序', dataIndex: 'sortCode', width: 70, align: 'center' },
|
{ title: '状态', dataIndex: 'enabledMark', width: 70, align: 'center', slots: { default: 'enabledMark' } },
|
];
|
const [registerSearchForm, { resetFields }] = useForm({
|
baseColProps: { span: 6 },
|
showActionButtonGroup: true,
|
showAdvancedButton: true,
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'enabledMark',
|
label: '状态',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
options: [
|
{ fullName: '启用', id: 1 },
|
{ fullName: '禁用', id: 0 },
|
],
|
},
|
},
|
],
|
});
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerWebTable, { reload: reloadWebTable }] = useVxeTable({
|
api: getMenuList,
|
immediate: false,
|
isTreeTable: true,
|
pagination: false,
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
const [registerAppTable, { reload: reloadAppTable }] = useVxeTable({
|
api: getMenuList,
|
immediate: false,
|
isTreeTable: true,
|
pagination: false,
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
|
watch(
|
() => state.listQuery.category,
|
() => {
|
nextTick(() => resetFields());
|
},
|
{ deep: true },
|
);
|
|
function init() {
|
state.listQuery.category = 'Web';
|
state.listQuery.keyword = '';
|
nextTick(() => reloadWebTable({ page: 1 }));
|
}
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.id, ''),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
disabled: record.isMain == 1,
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function getDropDownActions(record): ActionItem[] {
|
return record?.type == 1
|
? [{ label: '新建子级', onClick: addOrUpdateHandle.bind(null, '', record.id) }]
|
: [{ label: '导出模板', onClick: handleExportMenu.bind(null, record.id) }];
|
}
|
function handleSubmit(values) {
|
state.listQuery.keyword = values?.keyword || '';
|
state.listQuery.type = values?.type || '';
|
state.listQuery.enabledMark = values?.enabledMark;
|
handleSearch();
|
}
|
function handleReset() {
|
state.listQuery.keyword = '';
|
state.listQuery.type = '';
|
state.listQuery.enabledMark = '';
|
handleSearch();
|
}
|
function handleSearch() {
|
nextTick(() => reloadTable());
|
}
|
function handleDelete(id) {
|
delMenu(id).then((res) => {
|
createMessage.success(res.msg);
|
reloadTable();
|
});
|
}
|
function handleExportMenu(id) {
|
exportMenu(id).then((res) => {
|
downloadByUrl({ url: res.data.url });
|
});
|
}
|
function addOrUpdateHandle(id = '', parentId = '') {
|
openFormModal(true, { id, category: state.listQuery.category, parentId, isSystem: props.isSystem });
|
}
|
function onUploadSuccess() {
|
reloadTable();
|
}
|
function reloadTable() {
|
state.listQuery.category == 'Web' ? reloadWebTable({ page: 1 }) : reloadAppTable({ page: 1 });
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-search-box">
|
<BasicForm class="search-form" @register="registerSearchForm" @submit="handleSubmit" @reset="handleReset" />
|
</div>
|
<div class="jnpf-content-wrapper-content bg-white">
|
<a-tabs v-model:active-key="listQuery.category" class="jnpf-content-wrapper-tabs tabs-contain" destroy-inactive-tab-pane>
|
<a-tab-pane key="Web" tab="Web菜单">
|
<BasicVxeTable @register="registerWebTable" :columns="menuTableColumns" :search-info="getSearchInfo">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
<jnpf-upload-btn
|
url="/api/system/Menu/Actions/Import"
|
:data="{ category: listQuery.category }"
|
@on-success="onUploadSuccess"
|
accept=".bm"
|
type="menu" />
|
</template>
|
<template #icon="{ record }">
|
<i :class="`${record.icon} table-icon`"></i>
|
</template>
|
<template #enabledMark="{ record }">
|
<a-tag :color="record.enabledMark == 1 ? 'success' : 'error'">{{ record.enabledMark == 1 ? '启用' : '禁用' }}</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" :drop-down-actions="getDropDownActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</a-tab-pane>
|
<a-tab-pane key="App" tab="App菜单" v-if="!isSystem">
|
<BasicVxeTable @register="registerAppTable" :columns="menuTableColumns" :search-info="getSearchInfo">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
<jnpf-upload-btn
|
url="/api/system/Menu/Actions/Import"
|
:data="{ category: listQuery.category }"
|
@on-success="onUploadSuccess"
|
accept=".bm"
|
type="menu" />
|
</template>
|
<template #icon="{ record }">
|
<i :class="`${record.icon} table-icon`"></i>
|
</template>
|
<template #enabledMark="{ record }">
|
<a-tag :color="record.enabledMark == 1 ? 'success' : 'error'">{{ record.enabledMark == 1 ? '启用' : '禁用' }}</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" :drop-down-actions="getDropDownActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reloadTable" />
|
</div>
|
</template>
|
