修改
This commit is contained in:
parent
d5b0cb36b2
commit
8c8b5a01c3
@ -57,6 +57,6 @@ export function menuUpdate(data:any) {
|
|||||||
export function menuDelete(id) {
|
export function menuDelete(id) {
|
||||||
return http.request({
|
return http.request({
|
||||||
url: '/menu/delete/'+id,
|
url: '/menu/delete/'+id,
|
||||||
method: 'get',
|
method: 'DELETE',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -17,3 +17,50 @@ export function getRoleAllList(params?) {
|
|||||||
params,
|
params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @description: 根据ID获取详情
|
||||||
|
*/
|
||||||
|
export function getRoleDetail(userId) {
|
||||||
|
return http.request({
|
||||||
|
url: '/role/detail/'+userId,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 添加角色
|
||||||
|
*/
|
||||||
|
export function roleAdd(data:any) {
|
||||||
|
return http.request({
|
||||||
|
url: '/role/add',
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 更新角色
|
||||||
|
*/
|
||||||
|
export function roleUpdate(data:any) {
|
||||||
|
return http.request({
|
||||||
|
url: '/role/update',
|
||||||
|
method: 'PUT',
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 删除角色
|
||||||
|
*/
|
||||||
|
export function roleDelete(userId) {
|
||||||
|
return http.request({
|
||||||
|
url: '/role/delete/'+userId,
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @description: 批量删除角色
|
||||||
|
*/
|
||||||
|
export function roleBatchDelete(userId) {
|
||||||
|
return http.request({
|
||||||
|
url: '/role/batchDelete/'+userId,
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -24,7 +24,8 @@ export const routerGenerator = (routerMap, parent?): any[] => {
|
|||||||
title:item.name,
|
title:item.name,
|
||||||
icon:item.icon,
|
icon:item.icon,
|
||||||
sort:item.sort,
|
sort:item.sort,
|
||||||
permissions:item.permission
|
permissions:item.permission,
|
||||||
|
hidden: item.hide?true:false,
|
||||||
}
|
}
|
||||||
const components =''
|
const components =''
|
||||||
const names = /http(s)?:/.test(item.path)?item.path:item.path.replaceAll('/','')
|
const names = /http(s)?:/.test(item.path)?item.path:item.path.replaceAll('/','')
|
||||||
|
|||||||
@ -1,124 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-drawer v-model="isDrawer" :title="props.title" :width="props.width">
|
|
||||||
<el-form
|
|
||||||
:model="formParams"
|
|
||||||
:rules="rules"
|
|
||||||
ref="formRef"
|
|
||||||
label-placement="left"
|
|
||||||
:label-width="100"
|
|
||||||
>
|
|
||||||
<el-form-item label="类型" prop="type">
|
|
||||||
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标题" prop="label">
|
|
||||||
<el-input placeholder="请输入标题" v-model="formParams.label" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="副标题" prop="subtitle">
|
|
||||||
<el-input placeholder="请输入副标题" v-model="formParams.subtitle" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="路径" prop="path">
|
|
||||||
<el-input placeholder="请输入路径" v-model="formParams.path" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="打开方式" prop="openType">
|
|
||||||
<el-radio-group v-model="formParams.openType" name="openType">
|
|
||||||
<el-space>
|
|
||||||
<el-radio :label="1">当前窗口</el-radio>
|
|
||||||
<el-radio :label="2">新窗口</el-radio>
|
|
||||||
</el-space>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单权限" prop="auth">
|
|
||||||
<el-input placeholder="请输入权限，多个权限用，分割" v-model="formParams.auth" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="隐藏侧边栏" prop="hidden">
|
|
||||||
<el-switch v-model="formParams.hidden" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<el-space>
|
|
||||||
<el-button type="primary" :loading="subLoading" @click="formSubmit(formRef)"
|
|
||||||
>提交</el-button
|
|
||||||
>
|
|
||||||
<el-button @click="resetForm(formRef)">重置</el-button>
|
|
||||||
</el-space>
|
|
||||||
</template>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { ElMessage } from 'element-plus';
|
|
||||||
import type { ElForm } from 'element-plus';
|
|
||||||
|
|
||||||
type FormInstance = InstanceType<typeof ElForm>;
|
|
||||||
|
|
||||||
const formRef = ref<FormInstance>();
|
|
||||||
|
|
||||||
const rules = {
|
|
||||||
label: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入标题',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
path: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入路径',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '添加顶级菜单',
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
default: 450,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const formParams = ref({
|
|
||||||
label: '',
|
|
||||||
type: 1,
|
|
||||||
subtitle: '',
|
|
||||||
openType: 1,
|
|
||||||
auth: '',
|
|
||||||
path: '',
|
|
||||||
hidden: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const isDrawer = ref(false);
|
|
||||||
const subLoading = ref(false);
|
|
||||||
|
|
||||||
function openDrawer() {
|
|
||||||
isDrawer.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDrawer() {
|
|
||||||
isDrawer.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formSubmit(formEl: FormInstance | undefined) {
|
|
||||||
if (!formEl) return;
|
|
||||||
formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
ElMessage.error('抱歉，您没有该权限');
|
|
||||||
formEl.resetFields();
|
|
||||||
closeDrawer();
|
|
||||||
} else {
|
|
||||||
ElMessage.error('验证失败，请填写完整信息');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetForm(formEl: FormInstance | undefined) {
|
|
||||||
if (!formEl) return;
|
|
||||||
formEl.resetFields();
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
openDrawer,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -57,7 +57,7 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
label="是否外链"
|
label="是否外链"
|
||||||
prop="target"
|
prop="target"
|
||||||
required
|
v-if="formData.type==0"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<el-radio-group v-model="formData.target">
|
<el-radio-group v-model="formData.target">
|
||||||
@ -65,7 +65,7 @@
|
|||||||
<el-radio :label="0">否</el-radio>
|
<el-radio :label="0">否</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
<div class="form-tips">
|
<div class="form-tips">
|
||||||
选择外链打开，刚新窗口打开页面
|
选择外链，则新窗口打开页面
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -140,11 +140,11 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="formData.type ==0"
|
v-if="formData.type ==0"
|
||||||
label="菜单状态"
|
label="菜单状态"
|
||||||
prop="hide"
|
prop="status"
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<el-radio-group v-model="formData.hide">
|
<el-radio-group v-model="formData.status">
|
||||||
<el-radio :label="0">正常</el-radio>
|
<el-radio :label="0">正常</el-radio>
|
||||||
<el-radio :label="1">停用</el-radio>
|
<el-radio :label="1">停用</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
@ -208,7 +208,7 @@ const querySearch = (queryString: string, cb: any) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
menuId: "",
|
id: "",
|
||||||
//父级id
|
//父级id
|
||||||
parentId: 0,
|
parentId: 0,
|
||||||
//类型
|
//类型
|
||||||
@ -227,6 +227,7 @@ const formData = reactive({
|
|||||||
component: "",
|
component: "",
|
||||||
//是否显示 0=显示， 1=不显示
|
//是否显示 0=显示， 1=不显示
|
||||||
hide: 0,
|
hide: 0,
|
||||||
|
//是否外链 0=不是， 1=是
|
||||||
target:0,
|
target:0,
|
||||||
status:0
|
status:0
|
||||||
});
|
});
|
||||||
@ -285,7 +286,7 @@ onMounted(() => {
|
|||||||
if (props.menuId) {
|
if (props.menuId) {
|
||||||
getDetail()
|
getDetail()
|
||||||
}else{
|
}else{
|
||||||
formData.parentId=props.parentId
|
formData.parentId=props.pid
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,258 +0,0 @@
|
|||||||
<template>
|
|
||||||
<PageWrapper title="菜单权限管理">
|
|
||||||
<el-row :gutter="10" class="mt-3">
|
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
||||||
<el-card shadow="hover" class="border-0" size="small">
|
|
||||||
<template #header>
|
|
||||||
<el-space>
|
|
||||||
<el-dropdown trigger="hover" @command="selectAddMenu">
|
|
||||||
<el-button type="primary" ghost icon-placement="right">
|
|
||||||
添加菜单
|
|
||||||
<div class="flex items-center">
|
|
||||||
<el-icon class="el-input__icon" size="14">
|
|
||||||
<DownOutlined />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item
|
|
||||||
v-for="item in addMenuOptions"
|
|
||||||
:key="item.key"
|
|
||||||
:disabled="item.disabled"
|
|
||||||
:command="item.key"
|
|
||||||
>{{ item.label }}</el-dropdown-item
|
|
||||||
>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<el-button plain icon-placement="left" @click="packHandle">
|
|
||||||
全部{{ expandAllStatus ? '收起' : '展开' }}
|
|
||||||
<el-icon class="el-icon--right" v-if="expandAllStatus"><arrow-up /> </el-icon>
|
|
||||||
<el-icon class="el-icon--right" v-else><arrow-down /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
</el-space>
|
|
||||||
</template>
|
|
||||||
<div class="w-full menu">
|
|
||||||
<el-input type="input" v-model="filterText" placeholder="输入菜单名称搜索">
|
|
||||||
<template #suffix>
|
|
||||||
<el-icon class="cursor-pointer el-input__icon" :size="18">
|
|
||||||
<SearchOutlined />
|
|
||||||
</el-icon>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
<div class="py-3 menu-list" v-loading="loading">
|
|
||||||
<el-tree
|
|
||||||
ref="treeRef"
|
|
||||||
show-checkbox
|
|
||||||
node-key="key"
|
|
||||||
:data="treeData"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
style="max-height: 650px; overflow: hidden"
|
|
||||||
@current-change="currentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="18" :xl="18">
|
|
||||||
<el-card class="border-0" shadow="hover" size="small">
|
|
||||||
<template #header>
|
|
||||||
<el-space>
|
|
||||||
<el-icon class="el-input__icon" size="18">
|
|
||||||
<FormOutlined />
|
|
||||||
</el-icon>
|
|
||||||
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
|
||||||
</el-space>
|
|
||||||
</template>
|
|
||||||
<el-alert type="info" closable> 从菜单列表选择一项后，进行编辑</el-alert>
|
|
||||||
<el-form
|
|
||||||
:model="formParams"
|
|
||||||
:rules="rules"
|
|
||||||
ref="formRef"
|
|
||||||
label-placement="left"
|
|
||||||
:label-width="100"
|
|
||||||
v-if="isEditMenu"
|
|
||||||
class="py-4"
|
|
||||||
>
|
|
||||||
<el-form-item label="类型" prop="type">
|
|
||||||
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标题" prop="label">
|
|
||||||
<el-input placeholder="请输入标题" v-model="formParams.label" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="副标题" prop="subtitle">
|
|
||||||
<el-input placeholder="请输入副标题" v-model="formParams.subtitle" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="路径" prop="path">
|
|
||||||
<el-input placeholder="请输入路径" v-model="formParams.path" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="打开方式" prop="openType">
|
|
||||||
<el-radio-group v-model="formParams.openType" name="openType">
|
|
||||||
<el-radio :label="1">当前窗口</el-radio>
|
|
||||||
<el-radio :label="2">新窗口</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单权限" prop="auth">
|
|
||||||
<el-input placeholder="请输入权限，多个权限用，分割" v-model="formParams.auth" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-space>
|
|
||||||
<el-button type="primary" :loading="subLoading" @click="formSubmit(formRef)"
|
|
||||||
>保存修改</el-button
|
|
||||||
>
|
|
||||||
<el-button @click="resetForm(formRef)">重置</el-button>
|
|
||||||
</el-space>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
|
|
||||||
</PageWrapper>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, watch, unref, reactive, onMounted, computed } from 'vue';
|
|
||||||
import { ElMessage } from 'element-plus';
|
|
||||||
import { DownOutlined, SearchOutlined, FormOutlined } from '@vicons/antd';
|
|
||||||
import { getMenuList } from '@/api/system/menu';
|
|
||||||
import { getTreeItem } from '@/utils';
|
|
||||||
import CreateDrawer from './CreateDrawer.vue';
|
|
||||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
|
||||||
import type { ElForm } from 'element-plus';
|
|
||||||
|
|
||||||
type FormInstance = InstanceType<typeof ElForm>;
|
|
||||||
|
|
||||||
interface Tree {
|
|
||||||
id: number;
|
|
||||||
label: string;
|
|
||||||
children?: Tree[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const formRef = ref<FormInstance>();
|
|
||||||
|
|
||||||
const rules = {
|
|
||||||
label: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入标题',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
path: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入路径',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const createDrawerRef = ref();
|
|
||||||
|
|
||||||
let treeItemKey = ref([]);
|
|
||||||
|
|
||||||
const treeData = ref([]);
|
|
||||||
const treeRef = ref();
|
|
||||||
|
|
||||||
const loading = ref(true);
|
|
||||||
const subLoading = ref(false);
|
|
||||||
const isEditMenu = ref(false);
|
|
||||||
const expandAllStatus = ref(false);
|
|
||||||
const treeItemTitle = ref('');
|
|
||||||
const drawerTitle = ref('');
|
|
||||||
const filterText = ref('');
|
|
||||||
|
|
||||||
watch(filterText, (val) => {
|
|
||||||
treeRef.value!.filter(val);
|
|
||||||
});
|
|
||||||
|
|
||||||
const filterNode = (value: string, data: Tree) => {
|
|
||||||
if (!value) return true;
|
|
||||||
return data.label.includes(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isAddSon = computed(() => {
|
|
||||||
return !treeItemKey.value.length;
|
|
||||||
});
|
|
||||||
|
|
||||||
const addMenuOptions = ref([
|
|
||||||
{
|
|
||||||
label: '添加顶级菜单',
|
|
||||||
key: 'home',
|
|
||||||
disabled: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '添加子菜单',
|
|
||||||
key: 'son',
|
|
||||||
disabled: isAddSon,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const formParams = reactive({
|
|
||||||
type: 1,
|
|
||||||
label: '',
|
|
||||||
subtitle: '',
|
|
||||||
path: '',
|
|
||||||
auth: '',
|
|
||||||
openType: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
function selectAddMenu(key: string) {
|
|
||||||
drawerTitle.value = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${treeItemTitle.value}`;
|
|
||||||
openCreateDrawer();
|
|
||||||
}
|
|
||||||
|
|
||||||
function openCreateDrawer() {
|
|
||||||
const { openDrawer } = createDrawerRef.value;
|
|
||||||
openDrawer();
|
|
||||||
}
|
|
||||||
|
|
||||||
//当前选中节点变化时触发的事件
|
|
||||||
function currentChange(res) {
|
|
||||||
const key = res.key;
|
|
||||||
if (key) {
|
|
||||||
const treeItem = getTreeItem(unref(treeData), key);
|
|
||||||
treeItemKey.value = key;
|
|
||||||
treeItemTitle.value = treeItem.label;
|
|
||||||
Object.assign(formParams, treeItem);
|
|
||||||
isEditMenu.value = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formSubmit(formEl: FormInstance | undefined) {
|
|
||||||
if (!formEl) return;
|
|
||||||
formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
ElMessage.success('抱歉，您没有该权限');
|
|
||||||
} else {
|
|
||||||
ElMessage.error('验证失败，请填写完整信息');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetForm(formEl: FormInstance | undefined) {
|
|
||||||
if (!formEl) return;
|
|
||||||
formEl.resetFields();
|
|
||||||
}
|
|
||||||
|
|
||||||
function packHandle() {
|
|
||||||
if (expandAllStatus.value) {
|
|
||||||
treeNodeExpand(false);
|
|
||||||
expandAllStatus.value = false;
|
|
||||||
} else {
|
|
||||||
treeNodeExpand(true);
|
|
||||||
expandAllStatus.value = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function treeNodeExpand(status) {
|
|
||||||
for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
|
|
||||||
treeRef.value.store._getAllNodes()[i].expanded = status;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const treeMenuList = await getMenuList();
|
|
||||||
const keys = treeMenuList.map((item) => item.key);
|
|
||||||
Object.assign(formParams, keys);
|
|
||||||
treeData.value = treeMenuList;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue
Block a user