fix: 🧩 菜单管理可以搜索,添加操作只显示新增按钮

This commit is contained in:
Bunny 2024-10-06 15:14:21 +08:00
parent 5c8ff76a4a
commit 1910e2a1bb
13 changed files with 38 additions and 35 deletions

View File

@ -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;
}, },
/** /**

View File

@ -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') }}

View File

@ -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 }">

View File

@ -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 }">

View File

@ -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">

View File

@ -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,

View File

@ -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

View File

@ -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();
/** /**
* *

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -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">