修改
This commit is contained in:
parent
d5b0cb36b2
commit
8c8b5a01c3
@ -57,6 +57,6 @@ export function menuUpdate(data:any) {
|
||||
export function menuDelete(id) {
|
||||
return http.request({
|
||||
url: '/menu/delete/'+id,
|
||||
method: 'get',
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
@ -17,3 +17,50 @@ export function getRoleAllList(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,
|
||||
icon:item.icon,
|
||||
sort:item.sort,
|
||||
permissions:item.permission
|
||||
permissions:item.permission,
|
||||
hidden: item.hide?true:false,
|
||||
}
|
||||
const components =''
|
||||
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
|
||||
label="是否外链"
|
||||
prop="target"
|
||||
required
|
||||
v-if="formData.type==0"
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.target">
|
||||
@ -65,7 +65,7 @@
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
选择外链打开，刚新窗口打开页面
|
||||
选择外链，则新窗口打开页面
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -140,11 +140,11 @@
|
||||
<el-form-item
|
||||
v-if="formData.type ==0"
|
||||
label="菜单状态"
|
||||
prop="hide"
|
||||
prop="status"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.hide">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="0">正常</el-radio>
|
||||
<el-radio :label="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
@ -208,7 +208,7 @@ const querySearch = (queryString: string, cb: any) => {
|
||||
};
|
||||
|
||||
const formData = reactive({
|
||||
menuId: "",
|
||||
id: "",
|
||||
//父级id
|
||||
parentId: 0,
|
||||
//类型
|
||||
@ -227,6 +227,7 @@ const formData = reactive({
|
||||
component: "",
|
||||
//是否显示 0=显示， 1=不显示
|
||||
hide: 0,
|
||||
//是否外链 0=不是， 1=是
|
||||
target:0,
|
||||
status:0
|
||||
});
|
||||
@ -285,7 +286,7 @@ onMounted(() => {
|
||||
if (props.menuId) {
|
||||
getDetail()
|
||||
}else{
|
||||
formData.parentId=props.parentId
|
||||
formData.parentId=props.pid
|
||||
}
|
||||
});
|
||||
</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