mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-03 03:45:28 +08:00
前端和后端源码,合并到一个git仓库中,方便用户下载,避免前后端不匹配的问题
This commit is contained in:
122
jeecgboot-vue3/src/views/system/menu/DataRuleList.vue
Normal file
122
jeecgboot-vue3/src/views/system/menu/DataRuleList.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据权限规则" :width="adaptiveWidth">
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleCreate"> 新增</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicDrawer>
|
||||
<DataRuleModal @register="registerModal" @success="reload" :permissionId="permissionId" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DataRuleModal from './DataRuleModal.vue';
|
||||
import { dataRuleColumns, dataRuleSearchFormSchema } from './menu.data';
|
||||
import { dataRuleList, deleteRule } from './menu.api';
|
||||
import { ColEx } from '/@/components/Form/src/types';
|
||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||
const permissionId = ref('');
|
||||
const { adaptiveWidth } = useDrawerAdaptiveWidth();
|
||||
//权限规则model
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerDrawer] = useDrawerInner(async (data) => {
|
||||
permissionId.value = data.id;
|
||||
setProps({ searchInfo: { permissionId: unref(permissionId) } });
|
||||
reload();
|
||||
});
|
||||
// 自适应列配置
|
||||
const adaptiveColProps: Partial<ColEx> = {
|
||||
xs: 24, // <576px
|
||||
sm: 24, // ≥576px
|
||||
md: 24, // ≥768px
|
||||
lg: 12, // ≥992px
|
||||
xl: 8, // ≥1200px
|
||||
xxl: 8, // ≥1600px
|
||||
};
|
||||
const [registerTable, { reload, setProps }] = useTable({
|
||||
api: dataRuleList,
|
||||
columns: dataRuleColumns,
|
||||
size: 'small',
|
||||
formConfig: {
|
||||
baseColProps: adaptiveColProps,
|
||||
labelAlign: 'right',
|
||||
labelCol: {
|
||||
offset: 1,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 8,
|
||||
xl: 8,
|
||||
xxl: 8,
|
||||
},
|
||||
wrapperCol: {},
|
||||
schemas: dataRuleSearchFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
},
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
immediate: false,
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteRule({ id: record.id }, reload);
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
54
jeecgboot-vue3/src/views/system/menu/DataRuleModal.vue
Normal file
54
jeecgboot-vue3/src/views/system/menu/DataRuleModal.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="700px" destroyOnClose>
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { dataRuleFormSchema } from './menu.data';
|
||||
import { saveOrUpdateRule } from './menu.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const props = defineProps({ permissionId: String });
|
||||
const isUpdate = ref(true);
|
||||
//表单配置
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
schemas: dataRuleFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
//表单赋值
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
//重置表单
|
||||
await resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
if (unref(isUpdate)) {
|
||||
//表单赋值
|
||||
await setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//设置标题
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));
|
||||
|
||||
//表单提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
values.permissionId = props.permissionId;
|
||||
setModalProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateRule(values, isUpdate.value);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('success');
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
141
jeecgboot-vue3/src/views/system/menu/MenuDrawer.vue
Normal file
141
jeecgboot-vue3/src/views/system/menu/MenuDrawer.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="adaptiveWidth" :title="getTitle" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" class="menuForm" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, useAttrs } from 'vue';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { formSchema, ComponentTypes } from './menu.data';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { list, saveOrUpdateMenu } from './menu.api';
|
||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||
import { useI18n } from "/@/hooks/web/useI18n";
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const { adaptiveWidth } = useDrawerAdaptiveWidth();
|
||||
const attrs = useAttrs();
|
||||
const isUpdate = ref(true);
|
||||
const menuType = ref(0);
|
||||
const isButton = (type) => type === 2;
|
||||
const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
|
||||
labelCol: {
|
||||
md: { span: 4 },
|
||||
sm: { span: 6 },
|
||||
},
|
||||
wrapperCol: {
|
||||
md: { span: 20 },
|
||||
sm: { span: 18 },
|
||||
},
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
await resetFields();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
menuType.value = data?.record?.menuType;
|
||||
|
||||
//获取下拉树信息
|
||||
const treeData = await list();
|
||||
updateSchema([
|
||||
{
|
||||
field: 'parentId',
|
||||
// update-begin--author:liaozhiyang---date:20240306---for:【QQYUN-8379】菜单管理页菜单国际化
|
||||
componentProps: { treeData: translateMenu(treeData, 'name') },
|
||||
// update-end--author:liaozhiyang---date:20240306---for:【QQYUN-8379】菜单管理页菜单国际化
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称',
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
required: !isButton(unref(menuType)),
|
||||
componentProps: {
|
||||
onChange: (e) => onUrlChange(e.target.value),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// 无论新增还是编辑,都可以设置表单值
|
||||
if (typeof data.record === 'object') {
|
||||
let values = { ...data.record };
|
||||
setFieldsValue(values);
|
||||
onUrlChange(values.url);
|
||||
}
|
||||
//按钮类型情况下,编辑时候清除一下地址的校验
|
||||
if (menuType.value == 2) {
|
||||
clearValidate();
|
||||
}
|
||||
//禁用表单
|
||||
setProps({ disabled: !attrs.showFooter });
|
||||
});
|
||||
//获取弹窗标题
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
|
||||
//提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
// iframe兼容
|
||||
if (ComponentTypes.IFrame === values.component) {
|
||||
values.component = values.frameSrc;
|
||||
}
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateMenu(values, unref(isUpdate));
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
/** url 变化时,动态设置组件名称placeholder */
|
||||
function onUrlChange(url) {
|
||||
let placeholder = '';
|
||||
let httpUrl = url;
|
||||
if (url != null && url != '') {
|
||||
if (url.startsWith('/')) {
|
||||
url = url.substring(1);
|
||||
}
|
||||
url = url.replaceAll('/', '-');
|
||||
// 特殊标记
|
||||
url = url.replaceAll(':', '@');
|
||||
placeholder = `${url}`;
|
||||
} else {
|
||||
placeholder = '请输入组件名称';
|
||||
}
|
||||
updateSchema([{ field: 'componentName', componentProps: { placeholder } }]);
|
||||
//update-begin---author:wangshuai ---date:20230204 for:[QQYUN-4058]菜单添加智能化处理------------
|
||||
if (httpUrl != null && httpUrl != '') {
|
||||
if (httpUrl.startsWith('http://') || httpUrl.startsWith('https://')) {
|
||||
setFieldsValue({ component: httpUrl });
|
||||
}
|
||||
}
|
||||
//update-end---author:wangshuai ---date:20230204 for:[QQYUN-4058]菜单添加智能化处理------------
|
||||
}
|
||||
|
||||
/**
|
||||
* 2024-03-06
|
||||
* liaozhiyang
|
||||
* 翻译菜单名称
|
||||
*/
|
||||
function translateMenu(data, key) {
|
||||
if (data?.length) {
|
||||
const { t } = useI18n();
|
||||
data.forEach((item) => {
|
||||
if (item[key]) {
|
||||
if (item[key].includes("t('") && t) {
|
||||
item[key] = new Function('t', `return ${item[key]}`)(t);
|
||||
}
|
||||
}
|
||||
if (item.children?.length) {
|
||||
translateMenu(item.children, key);
|
||||
}
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
</script>
|
||||
259
jeecgboot-vue3/src/views/system/menu/index.vue
Normal file
259
jeecgboot-vue3/src/views/system/menu/index.vue
Normal file
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增菜单</a-button>
|
||||
<a-button type="primary" preIcon="ic:round-expand" @click="expandAll">展开全部</a-button>
|
||||
<a-button type="primary" preIcon="ic:round-compress" @click="collapseAll">折叠全部</a-button>
|
||||
|
||||
<a-dropdown v-if="checkedKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined" />
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button
|
||||
>批量操作
|
||||
<Icon icon="ant-design:down-outlined" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
<MenuDrawer @register="registerDrawer" @success="handleSuccess" :showFooter="showFooter" />
|
||||
<DataRuleList @register="registerDrawer1" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" name="system-menu" setup>
|
||||
import { nextTick, ref } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { useDrawer } from '/@/components/Drawer';
|
||||
import MenuDrawer from './MenuDrawer.vue';
|
||||
import DataRuleList from './DataRuleList.vue';
|
||||
import { columns,searchFormSchema } from './menu.data';
|
||||
import { list, deleteMenu, batchDeleteMenu } from './menu.api';
|
||||
import { useDefIndexStore } from "@/store/modules/defIndex";
|
||||
import { useI18n } from "/@/hooks/web/useI18n";
|
||||
|
||||
const checkedKeys = ref<Array<string | number>>([]);
|
||||
const showFooter = ref(true);
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 自定义菜单名称列渲染
|
||||
columns[0].customRender = function ({text, record}) {
|
||||
const isDefIndex = checkDefIndex(record)
|
||||
if (isDefIndex) {
|
||||
text += '(默认首页)'
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20240306---for:【QQYUN-8379】菜单管理页菜单国际化
|
||||
if (text.includes("t('") && t) {
|
||||
return new Function('t', `return ${text}`)(t);
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20240306---for:【QQYUN-8379】菜单管理页菜单国际化
|
||||
return text
|
||||
}
|
||||
|
||||
// 列表页面公共参数、方法
|
||||
const { prefixCls, tableContext } = useListPage({
|
||||
tableProps: {
|
||||
title: '菜单列表',
|
||||
api: list,
|
||||
columns: columns,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
isTreeTable: true,
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
tableSetting: { fullScreen: true },
|
||||
formConfig: {
|
||||
// update-begin--author:liaozhiyang---date:20230803---for:【QQYUN-5873】查询区域lablel默认居左
|
||||
labelWidth:60,
|
||||
owProps: { gutter: 24 },
|
||||
// update-end--author:liaozhiyang---date:20230803---for:【QQYUN-5873】查询区域lablel默认居左
|
||||
schemas: searchFormSchema,
|
||||
autoAdvancedCol: 4,
|
||||
baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
||||
actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
},
|
||||
},
|
||||
});
|
||||
//注册table数据
|
||||
const [registerTable, { reload, expandAll, collapseAll }] = tableContext;
|
||||
|
||||
/**
|
||||
* 选择列配置
|
||||
*/
|
||||
const rowSelection = {
|
||||
type: 'checkbox',
|
||||
columnWidth: 30,
|
||||
selectedRowKeys: checkedKeys,
|
||||
onChange: onSelectChange,
|
||||
};
|
||||
|
||||
/**
|
||||
* 选择事件
|
||||
*/
|
||||
function onSelectChange(selectedRowKeys: (string | number)[]) {
|
||||
checkedKeys.value = selectedRowKeys;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record) {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record) {
|
||||
showFooter.value = false;
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 添加下级
|
||||
*/
|
||||
function handleAddSub(record) {
|
||||
openDrawer(true, {
|
||||
record: { parentId: record.id, menuType: 1 },
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 数据权限弹窗
|
||||
*/
|
||||
function handleDataRule(record) {
|
||||
openDataRule(true, { id: record.id });
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteMenu({ id: record.id }, reload);
|
||||
}
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDeleteMenu({ ids: checkedKeys.value }, reload);
|
||||
}
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
reload();
|
||||
reloadDefIndex();
|
||||
}
|
||||
|
||||
function onFetchSuccess() {
|
||||
// 演示默认展开所有表项
|
||||
nextTick(expandAll);
|
||||
}
|
||||
|
||||
// --------------- begin 默认首页配置 ------------
|
||||
|
||||
const defIndexStore = useDefIndexStore()
|
||||
|
||||
// 设置默认主页
|
||||
async function handleSetDefIndex(record: Recordable) {
|
||||
defIndexStore.update(record.url, record.component, record.route)
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否为默认主页
|
||||
* @param record
|
||||
*/
|
||||
function checkDefIndex(record: Recordable) {
|
||||
return defIndexStore.check(record.url)
|
||||
}
|
||||
|
||||
// 重新加载默认首页配置
|
||||
function reloadDefIndex() {
|
||||
try {
|
||||
defIndexStore.query();
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
reloadDefIndex()
|
||||
|
||||
// --------------- end 默认首页配置 ------------
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
// {
|
||||
// label: '详情',
|
||||
// onClick: handleDetail.bind(null, record),
|
||||
// },
|
||||
{
|
||||
label: '添加下级',
|
||||
onClick: handleAddSub.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '数据规则',
|
||||
onClick: handleDataRule.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '设为默认首页',
|
||||
onClick: handleSetDefIndex.bind(null, record),
|
||||
ifShow: () => !record.internalOrExternal && record.component && !checkDefIndex(record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
122
jeecgboot-vue3/src/views/system/menu/menu.api.ts
Normal file
122
jeecgboot-vue3/src/views/system/menu/menu.api.ts
Normal file
@ -0,0 +1,122 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
enum Api {
|
||||
list = '/sys/permission/list',
|
||||
save = '/sys/permission/add',
|
||||
edit = '/sys/permission/edit',
|
||||
delete = '/sys/permission/delete',
|
||||
deleteBatch = '/sys/permission/deleteBatch',
|
||||
ruleList = '/sys/permission/queryPermissionRule',
|
||||
ruleSave = '/sys/permission/addPermissionRule',
|
||||
ruleEdit = '/sys/permission/editPermissionRule',
|
||||
ruleDelete = '/sys/permission/deletePermissionRule',
|
||||
checkPermDuplication = '/sys/permission/checkPermDuplication',
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => {
|
||||
return defHttp.get({ url: Api.list, params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除菜单
|
||||
*/
|
||||
export const deleteMenu = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 批量删除菜单
|
||||
* @param params
|
||||
*/
|
||||
export const batchDeleteMenu = (params, handleSuccess) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 保存或者更新菜单
|
||||
* @param params
|
||||
*/
|
||||
export const saveOrUpdateMenu = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
/**
|
||||
* 菜单数据权限列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const dataRuleList = (params) => defHttp.get({ url: Api.ruleList, params });
|
||||
/**
|
||||
* 保存或者更新数据规则
|
||||
* @param params
|
||||
*/
|
||||
export const saveOrUpdateRule = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.ruleEdit : Api.ruleSave;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除数据权限
|
||||
*/
|
||||
export const deleteRule = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.ruleDelete, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 根据code获取字典数值
|
||||
* @param params
|
||||
*/
|
||||
export const ajaxGetDictItems = (params) => defHttp.get({ url: `/sys/dict/getDictItems/${params.code}` });
|
||||
|
||||
/**
|
||||
* 唯一校验
|
||||
* @param params
|
||||
*/
|
||||
export const getCheckPermDuplication = (params) => defHttp.get({ url: Api.checkPermDuplication, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 校验菜单是否存在
|
||||
* @param model
|
||||
* @param schema
|
||||
* @param required
|
||||
*/
|
||||
export const checkPermDuplication=(model, schema, required?)=>{
|
||||
return [
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (!required) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
if (!value && required) {
|
||||
return Promise.reject(`请输入${schema.label}`);
|
||||
}
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
getCheckPermDuplication({
|
||||
id: model.id,
|
||||
url:model.url,
|
||||
alwaysShow:model.alwaysShow
|
||||
}).then((res) => {
|
||||
res.success ? resolve() : reject(res.message || '校验失败');
|
||||
}).catch((err) => {
|
||||
reject(err.message || '验证失败');
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
420
jeecgboot-vue3/src/views/system/menu/menu.data.ts
Normal file
420
jeecgboot-vue3/src/views/system/menu/menu.data.ts
Normal file
@ -0,0 +1,420 @@
|
||||
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 ,checkPermDuplication } from './menu.api';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
|
||||
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,
|
||||
customRender: ({ text }) => {
|
||||
return render.renderDict(text, 'menu_type');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
width: 50,
|
||||
customRender: ({ record }) => {
|
||||
return h(Icon, { icon: record.icon });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
dataIndex: 'component',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '路径',
|
||||
dataIndex: 'url',
|
||||
align: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNo',
|
||||
width: 50,
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'name',
|
||||
label: '菜单名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
label: 'id',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'menuType',
|
||||
label: '菜单类型',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 0,
|
||||
componentProps: ({ formActionType, formModel }) => {
|
||||
return {
|
||||
options: [
|
||||
{ label: '一级菜单', value: 0 },
|
||||
{ label: '子菜单', value: 1 },
|
||||
{ label: '按钮/权限', value: 2 },
|
||||
],
|
||||
onChange: (e) => {
|
||||
const { updateSchema, clearValidate } = formActionType;
|
||||
const label = isButton(e) ? '按钮/权限' : '菜单名称';
|
||||
//清除校验
|
||||
clearValidate();
|
||||
updateSchema([
|
||||
{
|
||||
field: 'name',
|
||||
label: label,
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
required: !isButton(e),
|
||||
},
|
||||
]);
|
||||
//update-begin---author:wangshuai ---date:20220729 for:[VUEN-1834]只有一级菜单,才默认值,子菜单的时候,清空------------
|
||||
if (isMenu(e) && !formModel.id && (formModel.component=='layouts/default/index' || formModel.component=='layouts/RouteView')) {
|
||||
formModel.component = '';
|
||||
}
|
||||
//update-end---author:wangshuai ---date:20220729 for:[VUEN-1834]只有一级菜单,才默认值,子菜单的时候,清空------------
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '菜单名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'parentId',
|
||||
label: '上级菜单',
|
||||
component: 'TreeSelect',
|
||||
required: true,
|
||||
componentProps: {
|
||||
//update-begin---author:wangshuai ---date:20230829 for:replaceFields已过期,使用fieldNames代替------------
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
key: 'id',
|
||||
value: 'id',
|
||||
},
|
||||
//update-end---author:wangshuai ---date:20230829 for:replaceFields已过期,使用fieldNames代替------------
|
||||
dropdownStyle: {
|
||||
maxHeight: '50vh',
|
||||
},
|
||||
getPopupContainer: (node) => node?.parentNode,
|
||||
},
|
||||
ifShow: ({ values }) => !isDir(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
label: '访问路径',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
//update-begin-author:liusq date:2023-06-06 for: [issues/5008]子表数据权限设置不生效
|
||||
ifShow: ({ values }) => !(values.component === ComponentTypes.IFrame && values.internalOrExternal),
|
||||
//update-begin-author:zyf date:2022-11-02 for: 聚合路由允许路径重复
|
||||
dynamicRules: ({ model, schema,values }) => {
|
||||
return checkPermDuplication(model, schema, values.menuType !== 2?true:false);
|
||||
},
|
||||
//update-end-author:zyf date:2022-11-02 for: 聚合路由允许路径重复
|
||||
//update-end-author:liusq date:2022-06-06 for: [issues/5008]子表数据权限设置不生效
|
||||
},
|
||||
{
|
||||
field: 'component',
|
||||
label: '前端组件',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入前端组件',
|
||||
},
|
||||
defaultValue:'layouts/default/index',
|
||||
required: true,
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'componentName',
|
||||
label: '组件名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入组件名称',
|
||||
},
|
||||
helpMessage: [
|
||||
'此处名称应和vue组件的name属性保持一致。',
|
||||
'组件名称不能重复,主要用于路由缓存功能。',
|
||||
'如果组件名称和vue组件的name属性不一致,则会导致路由缓存失效。',
|
||||
'非必填,留空则会根据访问路径自动生成。',
|
||||
],
|
||||
defaultValue: '',
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
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',
|
||||
ifShow: ({ values }) => isDir(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'perms',
|
||||
label: '授权标识',
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => isButton(values.menuType),
|
||||
// dynamicRules: ({ model }) => {
|
||||
// return [
|
||||
// {
|
||||
// required: false,
|
||||
// validator: (_, value) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let params = {
|
||||
// tableName: 'sys_permission',
|
||||
// fieldName: 'perms',
|
||||
// fieldVal: value,
|
||||
// dataId: model.id,
|
||||
// };
|
||||
// duplicateCheck(params)
|
||||
// .then((res) => {
|
||||
// res.success ? resolve() : reject(res.message || '校验失败');
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// reject(err.message || '校验失败');
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
// },
|
||||
},
|
||||
{
|
||||
field: 'permsType',
|
||||
label: '授权策略',
|
||||
component: 'RadioGroup',
|
||||
defaultValue: '1',
|
||||
helpMessage: ['可见/可访问(授权后可见/可访问)', '可编辑(未授权时禁用)'],
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '可见/可访问', value: '1' },
|
||||
{ label: '可编辑', value: '2' },
|
||||
],
|
||||
},
|
||||
ifShow: ({ values }) => isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
defaultValue: '1',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '有效', value: '1' },
|
||||
{ label: '无效', value: '0' },
|
||||
],
|
||||
},
|
||||
ifShow: ({ values }) => isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
label: '菜单图标',
|
||||
component: 'IconPicker',
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'sortNo',
|
||||
label: '排序',
|
||||
component: 'InputNumber',
|
||||
defaultValue: 1,
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'route',
|
||||
label: '是否路由菜单',
|
||||
component: 'Switch',
|
||||
defaultValue: true,
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'hidden',
|
||||
label: '隐藏路由',
|
||||
component: 'Switch',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'hideTab',
|
||||
label: '隐藏Tab',
|
||||
component: 'Switch',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'keepAlive',
|
||||
label: '是否缓存路由',
|
||||
component: 'Switch',
|
||||
defaultValue: false,
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'alwaysShow',
|
||||
label: '聚合路由',
|
||||
component: 'Switch',
|
||||
defaultValue: false,
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
{
|
||||
field: 'internalOrExternal',
|
||||
label: '打开方式',
|
||||
component: 'Switch',
|
||||
defaultValue: false,
|
||||
componentProps: {
|
||||
checkedChildren: '外部',
|
||||
unCheckedChildren: '内部',
|
||||
},
|
||||
ifShow: ({ values }) => !isButton(values.menuType),
|
||||
},
|
||||
];
|
||||
|
||||
export const dataRuleColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'ruleName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '规则字段',
|
||||
dataIndex: 'ruleColumn',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '规则值',
|
||||
dataIndex: 'ruleValue',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
export const dataRuleSearchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'ruleName',
|
||||
label: '规则名称',
|
||||
component: 'Input',
|
||||
// colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: 'ruleValue',
|
||||
label: '规则值',
|
||||
component: 'Input',
|
||||
// colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
export const dataRuleFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: 'id',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'ruleName',
|
||||
label: '规则名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'ruleColumn',
|
||||
label: '规则字段',
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => {
|
||||
const ruleConditions = Array.isArray(values.ruleConditions) ? values.ruleConditions[0] : values.ruleConditions;
|
||||
return ruleConditions !== 'USE_SQL_RULES';
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'ruleConditions',
|
||||
label: '条件规则',
|
||||
required: true,
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: ajaxGetDictItems,
|
||||
params: { code: 'rule_conditions' },
|
||||
labelField: 'text',
|
||||
valueField: 'value',
|
||||
getPopupContainer: (node) => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'ruleValue',
|
||||
label: '规则值',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '1',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '无效', value: '0' },
|
||||
{ label: '有效', value: '1' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user