2 changed files with 231 additions and 0 deletions
@ -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…
Reference in new issue