mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-13 18:45:06 +08:00
refactor: vue3 axios api ...
This commit is contained in:
@ -195,7 +195,7 @@ onMounted(async () => {
|
||||
<ContentWrap>
|
||||
<div class="mb-10px">
|
||||
<el-button type="primary" v-hasPermi="['system:notice:create']" @click="handleCreate">
|
||||
<Icon icon="el:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
|
@ -1,166 +0,0 @@
|
||||
import { reactive } from 'vue'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
// 修改
|
||||
export const modelSchema = reactive<FormSchema[]>([
|
||||
{
|
||||
label: '上级菜单',
|
||||
field: 'parentId',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单类型',
|
||||
field: 'type',
|
||||
component: 'RadioButton',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '目录',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '菜单',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '按钮',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单图标',
|
||||
field: 'icon',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '菜单名称',
|
||||
field: 'name',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '显示排序',
|
||||
field: 'sort',
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '路由地址',
|
||||
field: 'path',
|
||||
component: 'Input',
|
||||
labelMessage: '访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头'
|
||||
},
|
||||
{
|
||||
label: '组件路径',
|
||||
field: 'component',
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '权限标识',
|
||||
field: 'permission',
|
||||
component: 'Input',
|
||||
labelMessage:
|
||||
'Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission(`system:user:list`)`)'
|
||||
},
|
||||
{
|
||||
label: t('common.status'),
|
||||
field: 'status',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '开启',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择停用时,路由将不会出现在侧边栏,也不能被访问'
|
||||
},
|
||||
{
|
||||
label: '是否显示',
|
||||
field: 'visible',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '显示',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '隐藏',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问'
|
||||
},
|
||||
{
|
||||
label: '是否缓存',
|
||||
field: 'keepAlive',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '缓存',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '不缓存',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
labelMessage: '选择缓存时,则会被 `keep-alive` 缓存,需要匹配组件的 `name` 和路由地址保持一致'
|
||||
}
|
||||
])
|
||||
// 列表
|
||||
export const columns = reactive<TableColumn[]>([
|
||||
{
|
||||
label: '菜单名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
label: '权限标识',
|
||||
field: 'permission',
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '排序',
|
||||
field: 'sort'
|
||||
},
|
||||
{
|
||||
label: t('table.action'),
|
||||
field: 'action',
|
||||
width: '180px'
|
||||
}
|
||||
])
|
@ -1,226 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, unref } from 'vue'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { IconSelect } from '@/components/Icon'
|
||||
import { ElCard, ElMessage, ElMessageBox, ElTree, ElTreeSelect } from 'element-plus'
|
||||
import { columns, modelSchema } from './menu.data'
|
||||
import { Form, FormExpose } from '@/components/Form'
|
||||
import * as MenuApi from '@/api/system/menu'
|
||||
import { MenuVO } from '@/api/system/menu/types'
|
||||
const { t } = useI18n() // 国际化
|
||||
interface Tree {
|
||||
id: number
|
||||
name: string
|
||||
children?: Tree[]
|
||||
}
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
// ========== 创建菜单树结构 ==========
|
||||
const menuOptions = ref([]) // 树形结构
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const getTree = async () => {
|
||||
const res = await MenuApi.listSimpleMenusApi()
|
||||
menuOptions.value = handleTree(res)
|
||||
}
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
// ========== 菜单信息form表单 ==========
|
||||
const loading = ref(false) // 遮罩层
|
||||
const formRef = ref<FormExpose>()
|
||||
const iconModel = ref('ep:user')
|
||||
const menuParentId = ref()
|
||||
const menuStatus = ref('add')
|
||||
const menuTitle = ref('菜单信息')
|
||||
const showEdit = ref(false)
|
||||
// 提交按钮
|
||||
const submitForm = async () => {
|
||||
loading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(formRef)?.formModel as MenuVO
|
||||
data.parentId = menuParentId.value
|
||||
// TODO: 表单提交待完善
|
||||
if (menuStatus.value === 'add') {
|
||||
await MenuApi.createMenuApi(data)
|
||||
} else if (menuStatus.value === 'edit') {
|
||||
await MenuApi.updateMenuApi(data)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
// ========== 按钮列表相关 ==========
|
||||
const tableData = ref([])
|
||||
const tableLoading = ref(false)
|
||||
const onDisabled = ref(true)
|
||||
const tableTitle = ref('按钮信息')
|
||||
// 树点击事件
|
||||
const handleMenuNodeClick = async (data: { [key: string]: any }) => {
|
||||
showEdit.value = true
|
||||
const res = await MenuApi.getMenuApi(data.id)
|
||||
menuTitle.value = res.name + '-菜单信息'
|
||||
tableTitle.value = res.name + '-按钮列表'
|
||||
menuParentId.value = data.id
|
||||
tableData.value = await MenuApi.getMenuListApi({ name: res.name })
|
||||
unref(formRef)?.setValues(res)
|
||||
onDisabled.value = true
|
||||
changeDisabled()
|
||||
}
|
||||
const handleCreate = () => {
|
||||
// 重置表单
|
||||
unref(formRef)?.getElFormRef()?.resetFields()
|
||||
menuParentId.value = 0
|
||||
onDisabled.value = false
|
||||
changeDisabled()
|
||||
}
|
||||
const handleEdit = () => {
|
||||
onDisabled.value = false
|
||||
changeDisabled()
|
||||
}
|
||||
const changeDisabled = () => {
|
||||
unref(formRef)?.setProps({
|
||||
disabled: onDisabled
|
||||
})
|
||||
}
|
||||
// 修改操作
|
||||
const handleUpdate = async (row: MenuVO) => {
|
||||
// 设置数据
|
||||
const res = await MenuApi.getMenuApi(row.id)
|
||||
unref(formRef)?.setValues(res)
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = (row: MenuVO) => {
|
||||
ElMessageBox.confirm(t('common.delDataMessage'), t('common.confirmTitle'), {
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
await MenuApi.deleteMenuApi(row.id)
|
||||
ElMessage.success(t('common.delSuccess'))
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getTree()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-card class="w-1/4 menu" :gutter="12" shadow="always">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>菜单列表</span>
|
||||
<el-button type="primary" v-hasPermi="['system:menu:create']" @click="handleCreate">
|
||||
新增根节点
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <p>菜单列表</p> -->
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
:accordion="true"
|
||||
:data="menuOptions"
|
||||
:props="defaultProps"
|
||||
:highlight-current="true"
|
||||
:filter-method="filterNode"
|
||||
@node-click="handleMenuNodeClick"
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="w-1/2 menu" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ menuTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!showEdit">
|
||||
<span>请从左侧选择菜单</span>
|
||||
</div>
|
||||
<div v-if="showEdit">
|
||||
<Form :loading="loading" :schema="modelSchema" ref="formRef">
|
||||
<template #parentId>
|
||||
<el-tree-select
|
||||
node-key="id"
|
||||
v-model="menuParentId"
|
||||
:props="defaultProps"
|
||||
:data="menuOptions"
|
||||
check-strictly
|
||||
/>
|
||||
</template>
|
||||
<template #icon>
|
||||
<IconSelect v-model="iconModel" />
|
||||
</template>
|
||||
</Form>
|
||||
<el-button
|
||||
v-if="!onDisabled"
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
:loading="loading"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="!onDisabled" :loading="loading" @click="showEdit = false">
|
||||
{{ t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="onDisabled"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleEdit"
|
||||
>
|
||||
{{ t('action.edit') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="w-1/2 menu" style="margin-left: 10px" :gutter="12" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ tableTitle }}</span>
|
||||
<!-- <el-button type="primary">新增根节点</el-button> -->
|
||||
</div>
|
||||
</template>
|
||||
<!-- 列表 -->
|
||||
<Table :loading="tableLoading" :columns="columns" :data="tableData">
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-5px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:menu:delete']"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.menu {
|
||||
height: 1000px;
|
||||
max-height: 1800px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user