Browse Source

表单管理增加注册菜单功能

main
likunming 6 days ago
parent
commit
ef174d9eae
  1. 18
      io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue
  2. 213
      io.sc.platform.lcdp.frontend/src/views/form/SelectMenuDialog.vue

18
io.sc.platform.lcdp.frontend/src/views/form/FormConfig.vue

@ -12,6 +12,7 @@
:viewer="platformGrid.viewer"
:sort-by="['-lastModifyDate']"
></w-grid>
<SelectMenuDialog ref="selectMneuDialogRef"></SelectMenuDialog>
<w-dialog
ref="dialogRef"
:title="dialog.dialogTitle"
@ -1244,6 +1245,7 @@ import { axios, Environment, Tools, PlatformIconEnum, FormTypeEnum, DataTypeEnum
import TemplateFieldGrid from './grid/FieldGrid.vue';
import { newFieldRowFun } from './grid/fieldGrid';
import SelectMenuDialog from './SelectMenuDialog.vue';
const $q = useQuasar();
const platformGridRef = ref();
@ -1265,6 +1267,7 @@ const fieldConfigFormRef = ref();
const fieldQueryConfigFormRef = ref();
const fieldTableConfigFormRef = ref();
const fieldAddConfigFormRef = ref();
const selectMneuDialogRef = ref();
const fieldComeFromValueComputed = computed(() => {
if (mainConfigFormRef.value && !Tools.isEmpty(mainConfigFormRef.value.getFieldValue('fieldComeFrom'))) {
@ -1426,7 +1429,22 @@ const platformGrid = {
onDelete(args.selecteds);
},
},
'separator',
'view',
{
name: 'generateMenu',
label: '注册菜单',
icon: 'widgets',
enableIf: (args) => {
if (args.selected) {
return true;
}
return false;
},
click: (args) => {
selectMneuDialogRef.value.show(args.selected);
},
},
'separator',
],
columns: [

213
io.sc.platform.lcdp.frontend/src/views/form/SelectMenuDialog.vue

@ -0,0 +1,213 @@
<template>
<w-dialog ref="dialogRef" title="选择菜单(只支持增加菜单,配置权限请前往菜单管理)" width="80%" height="80%" body-padding="0px 0px 0px 0px">
<w-grid
ref="gridRef"
title="菜单列表"
:data-url="Environment.apiContextPath('api/system/menu')"
:tree="true"
:checkbox-selection="false"
db-click-operation="addChild"
:tree-icon="
(row) => {
if (row.type === 'SEPARATOR') {
return { name: 'bi-dash-lg' };
} else {
const data = { name: row.icon };
if (row.children) {
data['color'] = 'orange';
}
return data;
}
}
"
:columns="[
{
name: 'titleI18nKey',
label: '菜单名称',
width: 500,
format: (value, row) => {
if (row.type === 'SEPARATOR') {
return `<hr style='width:100px'/>`;
} else {
return $t(value);
}
},
},
{
name: 'type',
label: '菜单类型',
},
{ name: 'order', label: '排序号' },
{
name: 'enable',
label: '是否可用',
format: Formater.enableTag(),
},
]"
:toolbar-actions="[
'refresh',
'expand',
'separator',
{
extend: 'addTop',
label: '新增顶级菜单',
afterClick: (args) => {
const routeQuery = JSON.stringify({ id: data['id'] });
const data_ = {
type: 'ROUTE',
titleI18nKey: data['templateName'],
routeName: 'route.lcdp.form.page',
routeQuery: routeQuery,
};
args.grid.getEditorDialog().setTitle('新增顶级菜单');
args.grid.getEditorForm().setData(data_);
},
},
{
extend: 'addChild',
label: '新增子菜单',
enableIf: (args) => {
if (args.selected && args.selected['type'] === 'GROUP') {
return true;
}
return false;
},
afterClick: (args) => {
const routeQuery = JSON.stringify({ id: data['id'] });
const data_ = {
type: 'ROUTE',
titleI18nKey: data['templateName'],
routeName: 'route.lcdp.form.page',
routeQuery: routeQuery,
};
args.grid.getEditorDialog().setTitle('新增至【' + $t(args.selected['titleI18nKey']) + '】');
args.grid.getEditorForm().setData(data_);
},
},
]"
:editor="{
dialog: {
width: '600px',
},
form: {
colsNum: 1,
fields: [
{ name: 'parent', label: $t('parent'), type: 'w-text', showIf: false },
{
name: 'type',
label: $t('type'),
type: 'w-select',
requiredIf: true,
readOnlyIf: true,
options: Options.enum(MenuTypeEnum),
defaultValue: 'ROUTE',
},
{
name: 'titleI18nKey',
label: $t('system.menu.grid.entity.titleI18nKey'),
type: 'w-text',
requiredIf: true,
showIf: (args: any) => {
return args.form.getFieldValue('type') !== 'SEPARATOR';
},
},
{
name: 'icon',
label: $t('icon'),
type: 'w-icon',
showIf: (args: any) => {
return args.form.getFieldValue('type') !== 'SEPARATOR';
},
},
{ name: 'enable', label: $t('enable'), type: 'w-checkbox', defaultValue: true },
{ name: 'order', label: $t('order'), type: 'w-number' },
{
name: 'asRoot',
label: $t('system.menu.grid.entity.asRoot'),
type: 'w-checkbox',
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'GROUP' && Tools.isUndefinedOrNull(arg.form.getFieldValue('parent'));
},
},
{
name: 'javaScript',
label: $t('system.menu.grid.entity.javaScript'),
type: 'w-textarea',
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'JAVASCRIPT';
},
},
{
name: 'routeName',
label: $t('system.menu.grid.entity.routeName'),
type: 'w-text',
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'ROUTE';
},
},
{
name: 'routeQuery',
label: $t('system.menu.grid.entity.routeQuery'),
type: 'w-code-mirror',
rows: 3,
lang: 'json',
toolbar: false,
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'ROUTE';
},
},
{
name: 'url',
label: $t('url'),
type: 'w-text',
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'URL';
},
},
{
name: 'urlOpenType',
label: $t('system.menu.grid.entity.urlOpenType'),
type: 'w-select',
options: Options.enum(UrlOpenTypeEnum),
defaultValue: 'NEW_WINDOW',
showIf: (arg) => {
return arg.form.getFieldValue('type') === 'URL';
},
},
],
},
}"
@before-editor-data-submit="
(args) => {
args.data.routeQuery = JSON.parse(args.data.routeQuery);
args.callback(args.data, true);
}
"
></w-grid>
</w-dialog>
</template>
<script setup lang="ts">
import { $t, EnumTools, Environment, Formater, Options, Tools } from 'platform-core';
import { ref } from 'vue';
const dialogRef = ref();
const gridRef = ref();
const data = ref({});
const show = (data_) => {
data.value = data_;
dialogRef.value.show();
};
const hide = () => {
dialogRef.value.hide();
};
defineExpose({
show,
hide,
});
const MenuTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.MenuType');
const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
</script>
Loading…
Cancel
Save