fix: 🧩 菜单管理可以搜索,添加操作只显示新增按钮
This commit is contained in:
parent
5c8ff76a4a
commit
1910e2a1bb
|
@ -2,12 +2,14 @@ import { defineStore } from 'pinia';
|
||||||
import { storeMessage } from '@/utils/message';
|
import { storeMessage } from '@/utils/message';
|
||||||
import { handleTree } from '@/utils/tree';
|
import { handleTree } from '@/utils/tree';
|
||||||
import { fetchAddMenu, fetchAssignRolesToRouter, fetchDeletedMenuByIds, fetchGetMenusList, fetchGetRoleListByRouterId, fetchUpdateMenu } from '@/api/v1/menu';
|
import { fetchAddMenu, fetchAssignRolesToRouter, fetchDeletedMenuByIds, fetchGetMenusList, fetchGetRoleListByRouterId, fetchUpdateMenu } from '@/api/v1/menu';
|
||||||
|
import { isAllEmpty } from '@pureadmin/utils';
|
||||||
|
import { $t } from '@/plugins/i18n';
|
||||||
|
|
||||||
export const userMenuStore = defineStore('menuStore', {
|
export const userMenuStore = defineStore('menuStore', {
|
||||||
state() {
|
state() {
|
||||||
return {
|
return {
|
||||||
datalist: [],
|
datalist: [],
|
||||||
form: { title: undefined, visible: undefined },
|
form: { title: undefined },
|
||||||
loading: false,
|
loading: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -17,14 +19,17 @@ export const userMenuStore = defineStore('menuStore', {
|
||||||
* * 获取菜单列表
|
* * 获取菜单列表
|
||||||
*/
|
*/
|
||||||
async getMenuList() {
|
async getMenuList() {
|
||||||
const data = { ...this.pagination, ...this.form };
|
const result = await fetchGetMenusList({ ...this.pagination });
|
||||||
const result = await fetchGetMenusList(data);
|
if (result.code !== 200) return false;
|
||||||
|
|
||||||
if (result.code === 200) {
|
// 前端搜索菜单名称
|
||||||
this.datalist = handleTree(result.data as any);
|
const title = this.form.title;
|
||||||
return true;
|
let newData = result.data;
|
||||||
|
if (!isAllEmpty(title)) {
|
||||||
|
newData = newData.filter(item => $t(item.title).includes(title));
|
||||||
}
|
}
|
||||||
return false;
|
this.datalist = handleTree(newData);
|
||||||
|
return true;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -78,7 +78,7 @@ onMounted(() => {
|
||||||
<PureTableBar :columns="columns" :title="$t('multilingual_management')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('multilingual_management')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<!-- 添加多语言 -->
|
<!-- 添加多语言 -->
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_multilingual') }} </el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
|
||||||
<!-- 批量删除按钮 -->
|
<!-- 批量删除按钮 -->
|
||||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||||
{{ $t('delete_batches') }}
|
{{ $t('delete_batches') }}
|
||||||
|
|
|
@ -44,9 +44,9 @@ onMounted(() => {
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<PureTableBar :columns="columns" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('i18n_type')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言类型</el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot="{ size, dynamicColumns }">
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
|
|
@ -110,7 +110,7 @@ onMounted(() => {
|
||||||
|
|
||||||
<PureTableBar :columns="columns" title="用户信息" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" title="用户信息" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') + $t('adminUser') }} </el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot="{ size, dynamicColumns }">
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
|
|
@ -75,9 +75,9 @@ onMounted(() => {
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<PureTableBar :columns="columns" title="部门管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('dept')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加部门</el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
|
||||||
|
|
||||||
<!-- 批量删除按钮 -->
|
<!-- 批量删除按钮 -->
|
||||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||||
|
@ -116,7 +116,7 @@ onMounted(() => {
|
||||||
|
|
||||||
<template #operation="{ row }">
|
<template #operation="{ row }">
|
||||||
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
|
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
|
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> {{ $t('add_new') }} </el-button>
|
||||||
<el-popconfirm :title="`是否确认删除 ${row.deptName}数据`" @confirm="onDelete(row)">
|
<el-popconfirm :title="`是否确认删除 ${row.deptName}数据`" @confirm="onDelete(row)">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
|
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
|
||||||
|
|
|
@ -22,13 +22,13 @@ export async function onSearch() {
|
||||||
/**
|
/**
|
||||||
* * 添加部门
|
* * 添加部门
|
||||||
*/
|
*/
|
||||||
export function onAdd() {
|
export function onAdd(parentId: number = 0) {
|
||||||
addDialog({
|
addDialog({
|
||||||
title: `${$t('add_new')}${$t('dept')}`,
|
title: `${$t('add_new')}${$t('dept')}`,
|
||||||
width: '30%',
|
width: '30%',
|
||||||
props: {
|
props: {
|
||||||
formInline: {
|
formInline: {
|
||||||
parentId: undefined,
|
parentId,
|
||||||
managerId: undefined,
|
managerId: undefined,
|
||||||
deptName: undefined,
|
deptName: undefined,
|
||||||
summary: undefined,
|
summary: undefined,
|
||||||
|
|
|
@ -6,8 +6,7 @@ import Delete from '@iconify-icons/ep/delete';
|
||||||
import EditPen from '@iconify-icons/ep/edit-pen';
|
import EditPen from '@iconify-icons/ep/edit-pen';
|
||||||
import Refresh from '@iconify-icons/ep/refresh';
|
import Refresh from '@iconify-icons/ep/refresh';
|
||||||
import AddFill from '@iconify-icons/ri/add-circle-line';
|
import AddFill from '@iconify-icons/ri/add-circle-line';
|
||||||
import { assignRolesToRouter, handleDelete, onAdd, onSearch, onUpdate, resetForm } from '@/views/system/menu/utils/hooks';
|
import { assignRolesToRouter, handleDelete, onAdd, onSearch, onUpdate } from '@/views/system/menu/utils/hooks';
|
||||||
import form from '@/views/system/menu/form.vue';
|
|
||||||
import PureTable from '@pureadmin/table';
|
import PureTable from '@pureadmin/table';
|
||||||
import { columns } from '@/views/system/menu/utils/columns';
|
import { columns } from '@/views/system/menu/utils/columns';
|
||||||
import { userMenuStore } from '@/store/system/menu';
|
import { userMenuStore } from '@/store/system/menu';
|
||||||
|
@ -17,6 +16,7 @@ import More from '@iconify-icons/ep/more-filled';
|
||||||
import { tableSelectButtonClass } from '@/enums/baseConstant';
|
import { tableSelectButtonClass } from '@/enums/baseConstant';
|
||||||
import Upload from '@iconify-icons/ri/upload-line';
|
import Upload from '@iconify-icons/ri/upload-line';
|
||||||
import { messageBox } from '@/utils/message';
|
import { messageBox } from '@/utils/message';
|
||||||
|
import { FormInstance } from 'element-plus';
|
||||||
|
|
||||||
const formRef = ref();
|
const formRef = ref();
|
||||||
const tableRef = ref();
|
const tableRef = ref();
|
||||||
|
@ -55,7 +55,7 @@ const onchangeVisible = async (row: any) => {
|
||||||
* 表单重置
|
* 表单重置
|
||||||
* @param formEl
|
* @param formEl
|
||||||
*/
|
*/
|
||||||
const resetForm = async (formEl: any) => {
|
const resetForm = async (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
formEl.resetFields();
|
formEl.resetFields();
|
||||||
await onSearch();
|
await onSearch();
|
||||||
|
@ -68,18 +68,18 @@ onMounted(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
|
<el-form ref="formRef" :inline="true" :model="routerStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
|
||||||
<el-form-item label="菜单名称" prop="title">
|
<el-form-item label="菜单名称" prop="title">
|
||||||
<el-input v-model="routerStore.form.title" class="!w-[180px]" clearable placeholder="输入菜单名称" />
|
<el-input v-model="routerStore.form.title" class="!w-[180px]" clearable placeholder="输入菜单名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button :icon="useRenderIcon('ri:search-line')" :loading="routerStore.loading" type="primary" @click="onSearch"> 搜索 </el-button>
|
<el-button :icon="useRenderIcon('ri:search-line')" :loading="routerStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
|
||||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置</el-button>
|
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> 新增菜单</el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot="{ size, dynamicColumns }">
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
<pure-table
|
<pure-table
|
||||||
|
|
|
@ -3,14 +3,13 @@ import { $t } from '@/plugins/i18n';
|
||||||
import { addDialog } from '@/components/BaseDialog/index';
|
import { addDialog } from '@/components/BaseDialog/index';
|
||||||
import { h, ref } from 'vue';
|
import { h, ref } from 'vue';
|
||||||
import type { FormItemProps } from './types';
|
import type { FormItemProps } from './types';
|
||||||
|
|
||||||
import { cloneDeep, deviceDetection } from '@pureadmin/utils';
|
import { cloneDeep, deviceDetection } from '@pureadmin/utils';
|
||||||
import { userMenuStore } from '@/store/system/menu';
|
import { userMenuStore } from '@/store/system/menu';
|
||||||
import AssignRouterToRole from '@/views/system/menu/assign-router-to-role.vue';
|
import AssignRouterToRole from '@/views/system/menu/assign-router-to-role.vue';
|
||||||
|
|
||||||
const menuStore = userMenuStore();
|
const menuStore = userMenuStore();
|
||||||
const assignRouterToRolesRef = ref();
|
const assignRouterToRolesRef = ref();
|
||||||
export const formRef = ref();
|
const formRef = ref();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 标签栏菜单类型匹配
|
* 标签栏菜单类型匹配
|
||||||
|
|
|
@ -73,11 +73,9 @@ onMounted(() => {
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<PureTableBar :columns="columns" title="系统菜单图标" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('menuIcon')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd">
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
|
||||||
{{ $t('add_new') + $t('menuIcon_iconName') }}
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<!-- 批量删除按钮 -->
|
<!-- 批量删除按钮 -->
|
||||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||||
|
|
|
@ -83,7 +83,7 @@ onMounted(() => {
|
||||||
<PureTableBar :columns="columns" :title="$t('power')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('power')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<!-- 添加权限按钮 -->
|
<!-- 添加权限按钮 -->
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') + $t('power') }} </el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
|
||||||
|
|
||||||
<!-- 批量删除按钮 -->
|
<!-- 批量删除按钮 -->
|
||||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||||
|
@ -123,7 +123,7 @@ onMounted(() => {
|
||||||
<template #operation="{ row }">
|
<template #operation="{ row }">
|
||||||
<!-- 修改 -->
|
<!-- 修改 -->
|
||||||
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
|
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
|
||||||
|
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> {{ $t('add_new') }} </el-button>
|
||||||
<!-- 删除 -->
|
<!-- 删除 -->
|
||||||
<el-popconfirm :title="`是否确认删除 ${row.powerName}数据`" @confirm="onDelete(row)">
|
<el-popconfirm :title="`是否确认删除 ${row.powerName}数据`" @confirm="onDelete(row)">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
|
|
|
@ -26,6 +26,7 @@ defineExpose({ formRef });
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
|
||||||
|
{{ form.parentId }}
|
||||||
<el-form-item :label="$t('power_parentId')" prop="parentId">
|
<el-form-item :label="$t('power_parentId')" prop="parentId">
|
||||||
<el-input v-model="form.parentId" autocomplete="off" type="text" />
|
<el-input v-model="form.parentId" autocomplete="off" type="text" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
|
@ -22,13 +22,13 @@ export async function onSearch() {
|
||||||
/**
|
/**
|
||||||
* * 添加权限
|
* * 添加权限
|
||||||
*/
|
*/
|
||||||
export function onAdd() {
|
export function onAdd(parentId = 0) {
|
||||||
addDialog({
|
addDialog({
|
||||||
title: `${$t('add_new')}${$t('power')}`,
|
title: `${$t('add_new')}${$t('power')}`,
|
||||||
width: '30%',
|
width: '30%',
|
||||||
props: {
|
props: {
|
||||||
formInline: {
|
formInline: {
|
||||||
parentId: undefined,
|
parentId,
|
||||||
powerCode: undefined,
|
powerCode: undefined,
|
||||||
powerName: undefined,
|
powerName: undefined,
|
||||||
requestUrl: undefined,
|
requestUrl: undefined,
|
||||||
|
|
|
@ -72,9 +72,9 @@ onMounted(() => {
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<PureTableBar :columns="columns" title="角色" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
<PureTableBar :columns="columns" :title="$t('role')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') + $t('role_roleCode') }} </el-button>
|
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
|
||||||
|
|
||||||
<!-- 批量删除按钮 -->
|
<!-- 批量删除按钮 -->
|
||||||
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
|
||||||
|
|
Loading…
Reference in New Issue