dbsd_kczx/src/views/system/menu/menu.data.ts

394 lines
8.9 KiB
TypeScript
Raw Normal View History

2022-06-10 10:44:44 +08:00
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Icon } from '/@/components/Icon';
import { duplicateCheck } from '../user/user.api';
import { ajaxGetDictItems } from './menu.api';
import { render } from '/@/utils/common/renderUtils';
2022-03-10 09:47:29 +08:00
import { Select } from 'ant-design-vue';
2022-06-10 10:44:44 +08:00
import { rules } from '/@/utils/helper/validator';
2022-03-10 09:47:29 +08:00
const isDir = (type) => type === 0;
const isMenu = (type) => type === 1;
const isButton = (type) => type === 2;
// 定义可选择的组件类型
export enum ComponentTypes {
Default = 'layouts/default/index',
IFrame = 'sys/iframe/FrameBlank',
}
export const columns: BasicColumn[] = [
{
title: '菜单名称',
dataIndex: 'name',
width: 200,
align: 'left',
},
{
title: '菜单类型',
dataIndex: 'menuType',
width: 150,
2022-06-10 10:44:44 +08:00
customRender: ({ text }) => {
return render.renderDict(text, 'menu_type');
},
2022-03-10 09:47:29 +08:00
},
{
title: '图标',
dataIndex: 'icon',
width: 50,
2022-06-10 10:44:44 +08:00
customRender: ({ record }) => {
return h(Icon, { icon: record.icon });
2022-03-10 09:47:29 +08:00
},
},
{
title: '组件',
dataIndex: 'component',
align: 'left',
width: 150,
},
{
title: '路径',
dataIndex: 'url',
align: 'left',
width: 150,
},
{
title: '排序',
dataIndex: 'sortNo',
width: 50,
2022-06-10 10:44:44 +08:00
},
2022-03-10 09:47:29 +08:00
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '菜单名称',
component: 'Input',
2022-06-10 10:44:44 +08:00
colProps: { span: 8 },
},
2022-03-10 09:47:29 +08:00
];
export const formSchema: FormSchema[] = [
{
label: 'id',
field: 'id',
component: 'Input',
2022-06-10 10:44:44 +08:00
show: false,
2022-03-10 09:47:29 +08:00
},
{
field: 'menuType',
label: '菜单类型',
component: 'RadioButtonGroup',
defaultValue: 0,
2022-06-10 10:44:44 +08:00
componentProps: ({ formActionType }) => {
2022-03-10 09:47:29 +08:00
return {
options: [
2022-06-10 10:44:44 +08:00
{ label: '一级菜单', value: 0 },
{ label: '子菜单', value: 1 },
{ label: '按钮/权限', value: 2 },
2022-03-10 09:47:29 +08:00
],
2022-06-10 10:44:44 +08:00
onChange: (e) => {
const { updateSchema, clearValidate } = formActionType;
2022-03-10 09:47:29 +08:00
const label = isButton(e) ? '按钮/权限' : '菜单名称';
//清除校验
clearValidate();
2022-06-10 10:44:44 +08:00
updateSchema([
{
field: 'name',
label: label,
},
{
field: 'url',
required: !isButton(e),
},
]);
},
};
},
2022-03-10 09:47:29 +08:00
},
{
field: 'name',
label: '菜单名称',
component: 'Input',
required: true,
},
{
field: 'parentId',
label: '上级菜单',
component: 'TreeSelect',
required: true,
componentProps: {
replaceFields: {
title: 'name',
key: 'id',
value: 'id',
},
2022-06-10 10:44:44 +08:00
dropdownStyle: {
maxHeight: '50vh',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
getPopupContainer: (node) => node.parentNode,
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isDir(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'url',
label: '访问路径',
component: 'Input',
required: true,
ifShow: ({ values }) => !(values.component === ComponentTypes.IFrame && values.internalOrExternal) && values.menuType !== 2,
2022-06-10 10:44:44 +08:00
dynamicRules: ({ model, schema }) => {
return rules.duplicateCheckRule('sys_permission', 'url', model, schema, true);
},
2022-03-10 09:47:29 +08:00
},
{
field: 'component',
label: '前端组件',
component: 'Input',
componentProps: {
2022-06-10 10:44:44 +08:00
placeholder: '请输入前端组件',
2022-03-10 09:47:29 +08:00
},
required: true,
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'frameSrc',
label: 'Iframe地址',
component: 'Input',
rules: [
{ required: true, message: '请输入Iframe地址' },
{ type: 'url', message: '请输入正确的url地址' },
],
ifShow: ({ values }) => !isButton(values.menuType) && values.component === ComponentTypes.IFrame,
},
{
field: 'redirect',
label: '默认跳转地址',
component: 'Input',
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => isDir(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'perms',
label: '授权标识',
component: 'Input',
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => isButton(values.menuType),
dynamicRules: ({ model }) => {
2022-03-10 09:47:29 +08:00
return [
{
required: false,
validator: (_, value) => {
return new Promise((resolve, reject) => {
let params = {
2022-06-10 10:44:44 +08:00
tableName: 'sys_permission',
fieldName: 'perms',
2022-03-10 09:47:29 +08:00
fieldVal: value,
dataId: model.id,
};
duplicateCheck(params)
.then((res) => {
res.success ? resolve() : reject(res.message || '校验失败');
2022-06-10 10:44:44 +08:00
})
.catch((err) => {
reject(err.message || '校验失败');
});
2022-03-10 09:47:29 +08:00
});
},
},
];
2022-06-10 10:44:44 +08:00
},
2022-03-10 09:47:29 +08:00
},
{
field: 'permsType',
label: '授权策略',
component: 'RadioGroup',
defaultValue: '1',
helpMessage: ['可见/可访问(授权后可见/可访问)', '可编辑(未授权时禁用)'],
componentProps: {
options: [
2022-06-10 10:44:44 +08:00
{ label: '可见/可访问', value: '1' },
{ label: '可编辑', value: '2' },
2022-03-10 09:47:29 +08:00
],
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'status',
label: '状态',
component: 'RadioGroup',
defaultValue: '1',
componentProps: {
options: [
2022-06-10 10:44:44 +08:00
{ label: '有效', value: '1' },
{ label: '无效', value: '0' },
2022-03-10 09:47:29 +08:00
],
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'icon',
label: '菜单图标',
component: 'IconPicker',
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'sortNo',
label: '排序',
component: 'InputNumber',
defaultValue: 1,
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'route',
label: '是否路由菜单',
component: 'Switch',
defaultValue: true,
componentProps: {
2022-06-10 10:44:44 +08:00
checkedChildren: '是',
unCheckedChildren: '否',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'hidden',
label: '隐藏路由',
component: 'Switch',
defaultValue: 0,
componentProps: {
2022-06-10 10:44:44 +08:00
checkedChildren: '是',
unCheckedChildren: '否',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'hideTab',
label: '隐藏Tab',
component: 'Switch',
defaultValue: 0,
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
ifShow: ({ values }) => !isButton(values.menuType),
},
{
field: 'keepAlive',
label: '是否缓存路由',
component: 'Switch',
defaultValue: false,
componentProps: {
2022-06-10 10:44:44 +08:00
checkedChildren: '是',
unCheckedChildren: '否',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'alwaysShow',
label: '聚合路由',
component: 'Switch',
defaultValue: false,
componentProps: {
2022-06-10 10:44:44 +08:00
checkedChildren: '是',
unCheckedChildren: '否',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
2022-03-10 09:47:29 +08:00
},
{
field: 'internalOrExternal',
label: '打开方式',
component: 'Switch',
defaultValue: false,
componentProps: {
2022-06-10 10:44:44 +08:00
checkedChildren: '外部',
unCheckedChildren: '内部',
2022-03-10 09:47:29 +08:00
},
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => !isButton(values.menuType),
},
2022-03-10 09:47:29 +08:00
];
export const dataRuleColumns: BasicColumn[] = [
{
title: '规则名称',
dataIndex: 'ruleName',
width: 150,
},
{
title: '规则字段',
dataIndex: 'ruleColumn',
width: 100,
},
{
title: '规则值',
dataIndex: 'ruleValue',
width: 100,
2022-06-10 10:44:44 +08:00
},
2022-03-10 09:47:29 +08:00
];
export const dataRuleSearchFormSchema: FormSchema[] = [
{
field: 'ruleName',
label: '规则名称',
component: 'Input',
2022-06-10 10:44:44 +08:00
colProps: { span: 6 },
2022-03-10 09:47:29 +08:00
},
{
field: 'ruleValue',
label: '规则值',
component: 'Input',
2022-06-10 10:44:44 +08:00
colProps: { span: 6 },
},
2022-03-10 09:47:29 +08:00
];
export const dataRuleFormSchema: FormSchema[] = [
{
label: 'id',
field: 'id',
component: 'Input',
2022-06-10 10:44:44 +08:00
show: false,
2022-03-10 09:47:29 +08:00
},
{
field: 'ruleName',
label: '规则名称',
component: 'Input',
required: true,
},
{
field: 'ruleColumn',
label: '规则字段',
component: 'Input',
2022-06-10 10:44:44 +08:00
ifShow: ({ values }) => {
return values.ruleConditions !== 'USE_SQL_RULES';
2022-03-10 09:47:29 +08:00
},
},
{
field: 'ruleConditions',
label: '条件规则',
required: true,
component: 'ApiSelect',
componentProps: {
api: ajaxGetDictItems,
2022-06-10 10:44:44 +08:00
params: { code: 'rule_conditions' },
2022-03-10 09:47:29 +08:00
labelField: 'text',
valueField: 'value',
getPopupContainer: (node) => document.body,
},
},
{
field: 'ruleValue',
label: '规则值',
component: 'Input',
required: true,
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: '1',
componentProps: {
options: [
2022-06-10 10:44:44 +08:00
{ label: '无效', value: '0' },
{ label: '有效', value: '1' },
2022-03-10 09:47:29 +08:00
],
2022-06-10 10:44:44 +08:00
},
},
2022-03-10 09:47:29 +08:00
];