mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-11-12 04:58:42 +08:00
feat: 新增菜单管理
This commit is contained in:
250
src/views/system/menu/AddMenuModal.vue
Normal file
250
src/views/system/menu/AddMenuModal.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
:modal-style="{ maxWidth: '625px' }"
|
||||
:body-style="{ maxHeight: '70vh' }"
|
||||
width="90%"
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="formRules" auto-label-width>
|
||||
<a-form-item label="菜单类型" field="type">
|
||||
<a-radio-group v-model="form.type" type="button" :disabled="isUpdate" @change="onChangeType">
|
||||
<a-radio :value="1">目录</a-radio>
|
||||
<a-radio :value="2">菜单</a-radio>
|
||||
<a-radio :value="3">按钮</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级菜单" field="parentId">
|
||||
<a-tree-select
|
||||
v-model="form.parentId"
|
||||
placeholder="请选择上级菜单"
|
||||
allow-clear
|
||||
allow-search
|
||||
:data="(menuSelectTree as any)"
|
||||
:fallback-option="false"
|
||||
:fieldNames="{
|
||||
key: 'id',
|
||||
title: 'title',
|
||||
children: 'children'
|
||||
}"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="[1, 2].includes(form.type)" label="菜单图标" field="icon">
|
||||
<GiIconSelector v-model="form.icon" />
|
||||
</a-form-item>
|
||||
<a-form-item label="菜单标题" field="title">
|
||||
<a-input v-model.trim="form.title" placeholder="请输入菜单标题" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="[1, 2].includes(form.type)" label="路由地址" field="path">
|
||||
<a-input v-model.trim="form.path" placeholder="请输入路由地址" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="重定向" field="redirect">
|
||||
<a-input v-model.trim="form.redirect" placeholder="请输入重定向地址" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="组件名称" field="name">
|
||||
<a-input v-model.trim="form.name" placeholder="请输入组件名称" allow-clear />
|
||||
<template #extra>
|
||||
<div v-if="routeName">
|
||||
<span>建议组件名称：</span>
|
||||
<a-tag>{{ routeName }}</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label="组件路径" field="component" v-if="form.type === 2">
|
||||
<a-input
|
||||
v-if="form.isExternal"
|
||||
v-model.trim="form.component"
|
||||
placeholder="请输入组件路径"
|
||||
allow-clear
|
||||
/>
|
||||
<a-input v-else v-model.trim="form.component" placeholder="请输入组件路径" allow-clear>
|
||||
<template #prepend>@/views/</template>
|
||||
<template #append>.vue</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="form.type === 3" label="权限标识" field="permission">
|
||||
<a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
|
||||
</a-form-item>
|
||||
<a-row :gutter="16" v-if="[1, 2].includes(form.type)">
|
||||
<a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
|
||||
<a-form-item label="是否外链" field="isExternalUrl" v-if="[1, 2].includes(form.type)">
|
||||
<a-switch
|
||||
v-model="form.isExternal"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
checked-text="是"
|
||||
unchecked-text="否"
|
||||
type="round"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
|
||||
<a-form-item label="是否隐藏" field="hidden">
|
||||
<a-switch
|
||||
v-model="form.isHidden"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
checked-text="是"
|
||||
unchecked-text="否"
|
||||
type="round"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
|
||||
<a-form-item label="是否缓存" field="keepAlive">
|
||||
<a-switch
|
||||
v-model="form.isCache"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
checked-text="是"
|
||||
unchecked-text="否"
|
||||
type="round"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="菜单排序" field="sort">
|
||||
<a-input-number v-model="form.sort" placeholder="请输入菜单排序" :min="1" mode="button" style="width: 150px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" field="status">
|
||||
<a-switch
|
||||
v-model="form.status"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
checked-text="启用"
|
||||
unchecked-text="禁用"
|
||||
type="round"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMenu, addMenu, updateMenu, type MenuResp } from '@/apis'
|
||||
import { Message, type FormInstance } from '@arco-design/web-vue'
|
||||
import type { MenuForm } from './type'
|
||||
import { useForm } from '@/hooks'
|
||||
import { filterTree, transformPathToName } from '@/utils'
|
||||
import { mapTree } from 'xe-utils'
|
||||
|
||||
interface Props {
|
||||
menus: MenuResp[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
menus: () => []
|
||||
})
|
||||
|
||||
// 转换为菜单树
|
||||
const menuSelectTree = computed(() => {
|
||||
const menus = JSON.parse(JSON.stringify(props.menus)) as MenuResp[]
|
||||
const data = filterTree(menus, (i) => [1, 2].includes(i.type))
|
||||
return mapTree(data, (i) => ({
|
||||
id: i.id,
|
||||
title: i.title,
|
||||
children: i.children
|
||||
}))
|
||||
})
|
||||
|
||||
const dataId = ref('')
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改菜单' : '新增菜单'))
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
const rules: FormInstance['rules'] = {
|
||||
parentId: [{ required: true, message: '请选择上级菜单' }],
|
||||
title: [{ required: true, message: '请输入菜单标题' }],
|
||||
path: [{ required: true, message: '请输入路由地址' }],
|
||||
name: [{ required: true, message: '请输入组件名称' }],
|
||||
component: [{ required: true, message: '请输入组件路径' }],
|
||||
permission: [{ required: true, message: '请输入权限标识' }]
|
||||
}
|
||||
|
||||
const { form, resetForm } = useForm<MenuForm>({
|
||||
type: 1,
|
||||
icon: '',
|
||||
title: '',
|
||||
sort: 999,
|
||||
permission: '',
|
||||
path: '',
|
||||
name: '',
|
||||
component: '',
|
||||
redirect: '',
|
||||
isExternal: false,
|
||||
isCache: false,
|
||||
isHidden: false,
|
||||
parentId: '',
|
||||
status: 1
|
||||
})
|
||||
const routeName = computed(() => transformPathToName(form.path))
|
||||
const formRules = computed(() => {
|
||||
if ([1, 2].includes(form.type)) {
|
||||
const { title, name, path } = rules
|
||||
return { title, name, path } as FormInstance['rules']
|
||||
}
|
||||
if (form.type === 3) {
|
||||
const { parentId, title, permission } = rules
|
||||
return { parentId, title, permission } as FormInstance['rules']
|
||||
}
|
||||
})
|
||||
|
||||
// 切换类型清除校验
|
||||
const onChangeType = () => {
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const visible = ref(false)
|
||||
// 新增
|
||||
const onAdd = (id?: string) => {
|
||||
reset()
|
||||
form.parentId = id
|
||||
dataId.value = ''
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = async (id: string) => {
|
||||
reset()
|
||||
dataId.value = id
|
||||
const res = await getMenu(id)
|
||||
Object.assign(form, res.data)
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return false
|
||||
if (isUpdate.value) {
|
||||
await updateMenu(form, dataId.value)
|
||||
Message.success('修改成功')
|
||||
} else {
|
||||
await addMenu(form)
|
||||
Message.success('新增成功')
|
||||
}
|
||||
emit('save-success')
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
|
||||
defineExpose({ onAdd, onUpdate })
|
||||
</script>
|
||||
186
src/views/system/menu/index.vue
Normal file
186
src/views/system/menu/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="gi_page">
|
||||
<a-card title="菜单管理" class="general-card">
|
||||
<GiTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
|
||||
:pagination="false"
|
||||
:disabledColumnKeys="['title']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #expand-icon="{ expanded }">
|
||||
<IconDown v-if="expanded" />
|
||||
<IconRight v-else />
|
||||
</template>
|
||||
<template #custom-left>
|
||||
<a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
|
||||
<template #prefix><icon-search /></template>
|
||||
</a-input>
|
||||
<a-select
|
||||
v-model="queryForm.status"
|
||||
:options="DisEnableStatusList"
|
||||
placeholder="请选择状态"
|
||||
allow-clear
|
||||
style="width: 150px"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</template>
|
||||
<template #custom-right>
|
||||
<a-button type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<span>新增</span>
|
||||
</a-button>
|
||||
<a-tooltip content="展开/折叠">
|
||||
<a-button @click="onExpanded">
|
||||
<template #icon>
|
||||
<icon-list v-if="!isExpanded" />
|
||||
<icon-mind-mapping v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #title="{ record }">
|
||||
<GiSvgIcon :name="record.icon" :size="15" />
|
||||
<span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
|
||||
</template>
|
||||
<template #type="{ record }">
|
||||
<a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
|
||||
<a-tag v-if="record.type === 2" color="green">菜单</a-tag>
|
||||
<a-tag v-if="record.type === 3">按钮</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #isExternal="{ record }">
|
||||
<a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isHidden="{ record }">
|
||||
<a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #isCache="{ record }">
|
||||
<a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
|
||||
<a-tag v-else color="red" size="small">否</a-tag>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<template #split>
|
||||
<a-divider direction="vertical" :margin="0" />
|
||||
</template>
|
||||
<a-link @click="onUpdate(record)">修改</a-link>
|
||||
<a-link v-if="[1, 2].includes(record.type)" @click="onAdd(record.id)">新增</a-link>
|
||||
<a-popconfirm
|
||||
type="warning"
|
||||
content="是否确定删除该条数据？"
|
||||
:ok-button-props="{ status: 'danger' }"
|
||||
@ok="onDelete(record)"
|
||||
>
|
||||
<a-link status="danger">删除</a-link>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
</a-card>
|
||||
|
||||
<AddMenuModal ref="AddMenuModalRef" :menus="dataList" @save-success="search"></AddMenuModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { listMenu, deleteMenu, type MenuResp, type MenuQuery } from '@/apis'
|
||||
import { Message, type TableInstance } from '@arco-design/web-vue'
|
||||
import type GiTable from '@/components/GiTable/index.vue'
|
||||
import AddMenuModal from './AddMenuModal.vue'
|
||||
import { DisEnableStatusList } from '@/constant/common'
|
||||
import { isMobile } from '@/utils'
|
||||
|
||||
defineOptions({ name: 'Menu' })
|
||||
|
||||
const columns: TableInstance['columns'] = [
|
||||
{ title: '菜单标题', dataIndex: 'title', slotName: 'title', width: 170, fixed: !isMobile() ? 'left' : undefined },
|
||||
{ title: '类型', slotName: 'type', align: 'center' },
|
||||
{ title: '状态', slotName: 'status', align: 'center' },
|
||||
{ title: '排序', dataIndex: 'sort', align: 'center', show: false },
|
||||
{ title: '路由地址', dataIndex: 'path', ellipsis: true, tooltip: true },
|
||||
{ title: '组件名称', dataIndex: 'name', ellipsis: true, tooltip: true },
|
||||
{ title: '组件路径', dataIndex: 'component', width: 180, ellipsis: true, tooltip: true },
|
||||
{ title: '权限标识', dataIndex: 'permission', width: 180, ellipsis: true, tooltip: true },
|
||||
{ title: '外链', slotName: 'isExternal', align: 'center' },
|
||||
{ title: '隐藏', slotName: 'isHidden', align: 'center' },
|
||||
{ title: '缓存', slotName: 'isCache', align: 'center' },
|
||||
{ title: '创建人', dataIndex: 'createUserString', show: false, ellipsis: true, tooltip: true },
|
||||
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
||||
{ title: '修改人', dataIndex: 'updateUserString', show: false, ellipsis: true, tooltip: true },
|
||||
{ title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
|
||||
{ title: '操作', slotName: 'action', width: 180, align: 'center', fixed: !isMobile() ? 'right' : undefined }
|
||||
]
|
||||
|
||||
const queryForm = reactive({
|
||||
title: undefined,
|
||||
status: undefined,
|
||||
sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
|
||||
})
|
||||
|
||||
const dataList = ref<MenuResp[]>([])
|
||||
const loading = ref(false)
|
||||
// 查询列表数据
|
||||
const getDataList = async (query: MenuQuery = { ...queryForm }) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await listMenu(query)
|
||||
dataList.value = res.data
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const search = () => {
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.title = undefined
|
||||
queryForm.status = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = async (item: MenuResp) => {
|
||||
await deleteMenu(item.id)
|
||||
Message.success('删除成功')
|
||||
search()
|
||||
}
|
||||
|
||||
const isExpanded = ref(false)
|
||||
const tableRef = ref<InstanceType<typeof GiTable>>()
|
||||
// 展开/折叠
|
||||
const onExpanded = () => {
|
||||
isExpanded.value = !isExpanded.value
|
||||
tableRef.value?.tableRef?.expandAll(isExpanded.value)
|
||||
}
|
||||
|
||||
const AddMenuModalRef = ref<InstanceType<typeof AddMenuModal>>()
|
||||
// 新增
|
||||
const onAdd = (id?: string) => {
|
||||
AddMenuModalRef.value?.onAdd(id)
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (item: MenuResp) => {
|
||||
AddMenuModalRef.value?.onUpdate(item.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
16
src/views/system/menu/type.ts
Normal file
16
src/views/system/menu/type.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export interface MenuForm {
|
||||
type: 1 | 2 | 3
|
||||
icon: string
|
||||
title: string
|
||||
sort: number
|
||||
permission: string
|
||||
path: string
|
||||
name: string
|
||||
component: string
|
||||
redirect: string
|
||||
isExternal: boolean
|
||||
isCache: boolean
|
||||
isHidden: boolean
|
||||
parentId: string
|
||||
status: 1 | 0
|
||||
}
|
||||
Reference in New Issue
Block a user