mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-24 04:54:58 +08:00
菜单管理
This commit is contained in:
zhaoyz
parent
198b34f732
commit
15c9b35f1b
|
|
@ -0,0 +1,55 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
const getMenuTreeUrl = "/admin/menu/tree";
|
||||
const menuUrl = "/admin/menu";
|
||||
|
||||
export function getMenuTree(menuName?: string, parent?: string, type?: string) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const params: any = [];
|
||||
if (parent) {
|
||||
params.push("parent=" + parent);
|
||||
}
|
||||
if (menuName) {
|
||||
params.push("menuName=" + menuName);
|
||||
}
|
||||
if (type) {
|
||||
params.push("type=" + type);
|
||||
}
|
||||
request.get(getMenuTreeUrl + (params.length > 0 ? "?" + params.join("&") : ""))
|
||||
.then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function saveMenu(menu: any) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.post(menuUrl, menu).then((res: any) => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function updateMenu(menu: any) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.put(menuUrl, menu).then((res: any) => {
|
||||
resolve(res);
|
||||
}).catch(err => {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteById(id: string) {
|
||||
return new Promise((resolve) => {
|
||||
request.delete(menuUrl + "/" + id).then((res: any) => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
resolve(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@ function getLogList() {
|
|||
logManageApi.getPage(0, 100).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
activities.value = res.data.records;
|
||||
console.log(activities.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@ const userInfo = useLoginStore().getlogin()
|
|||
const hospitals = ref([] as any)
|
||||
getHospitalsData().then((res: any) => {
|
||||
hospitals.value = res
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
const menus = [] as any
|
||||
|
|
|
|||
|
|
@ -1,165 +1,199 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="formData.type" :disabled="type === 'edit'">
|
||||
<el-radio label="菜单" border>菜单</el-radio>
|
||||
<el-radio label="按钮" border>按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级菜单" prop="fatherMenu">
|
||||
<el-select v-model="formData.fatherMenu" placeholder="请选择上级菜单" clearable>
|
||||
<el-option v-for="item in fatherMenuOption" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="formData.menuName" placeholder="请输入菜单名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<i :class="formData.icon" style="font-size: 26px;margin: 0 10px;"></i>
|
||||
<el-button @click="isIconDialog = true">选择图标</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由" prop="route">
|
||||
<el-input v-model="formData.route" placeholder="请输入路由"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="order">
|
||||
<el-input class="number-input" v-model="formData.order" type="number" input-style="text-align: center;" @change="numberInputChange">
|
||||
<template #prepend>
|
||||
<el-button text icon="Minus" :disabled="formData.order <= 1" @click="formData.order--" />
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button text icon="Plus" @click="formData.order++" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示" prop="isShow">
|
||||
<el-radio-group v-model="formData.isShow">
|
||||
<el-radio :label="true" border>是</el-radio>
|
||||
<el-radio :label="false" border>否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="formData.menuType" :disabled="type === 'edit'">
|
||||
<el-radio label="0" border>菜单</el-radio>
|
||||
<el-radio label="1" border v-if="formData.parentId != -1">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级菜单" prop="parentName">
|
||||
<!-- <el-select v-model="formData.parentMenu" placeholder="请选择上级菜单" clearable>
|
||||
<el-option v-for="item in parentMenu" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>-->
|
||||
<el-input v-model="formData.parentName" readonly placeholder="请输入菜单名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入菜单名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<i :class="formData.icon" style="font-size: 26px;margin: 0 10px;"></i>
|
||||
<el-button @click="isIconDialog = true">选择图标</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由" prop="route">
|
||||
<el-input v-model="formData.path" placeholder="请输入路由"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="order">
|
||||
<el-input class="number-input" v-model="formData.sortOrder"
|
||||
type="number" input-style="text-align: center;"
|
||||
@change="numberInputChange">
|
||||
<template #prepend>
|
||||
<el-button text icon="Minus" :disabled="formData.sortOrder <= 1"
|
||||
@click="formData.sortOrder--"/>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button text icon="Plus" @click="formData.sortOrder++"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示" prop="visible">
|
||||
<el-radio-group v-model="formData.visible">
|
||||
<el-radio label="1" border>是</el-radio>
|
||||
<el-radio label="0" border>否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<div style="text-align: right;padding-top: 0;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div style="text-align: right;padding-top: 0;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-dialog v-model="isIconDialog" title="选择图标" top="20vh" width="25%">
|
||||
<div class="iconfont-box">
|
||||
<div class="iconfont-item" v-for="item in iconfont.glyphs" :key="item.font_class" @click="iconClick(item)">
|
||||
<i :class="'icon-' + item.font_class"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="isIconDialog" title="选择图标" top="20vh" width="25%">
|
||||
<div class="iconfont-box">
|
||||
<div class="iconfont-item" v-for="item in iconfont.glyphs"
|
||||
:key="item.font_class" @click="iconClick(item)">
|
||||
<i :class="'icon-' + item.font_class"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import iconfont from "@/assets/font/iconfont.json";
|
||||
import * as menuApi from "@/api/menu";
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const emit = defineEmits(['close', "saveOrUpdateEvent"])
|
||||
const props = defineProps({
|
||||
type: String
|
||||
type: String
|
||||
})
|
||||
defineExpose({
|
||||
resetData,
|
||||
})
|
||||
|
||||
const fatherMenuOption = [
|
||||
{ label: '权限管理', value: '权限管理' },
|
||||
{ label: '患者管理', value: '患者管理' },
|
||||
]
|
||||
const rules = reactive({
|
||||
menuName: [
|
||||
{ required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] },
|
||||
],
|
||||
route: [
|
||||
{ required: true, message: '请输入路由地址', trigger: ['blur', 'change'] },
|
||||
]
|
||||
name: [
|
||||
{required: true, message: '请输入菜单名称', trigger: ['blur', 'change']},
|
||||
],
|
||||
path: [
|
||||
{required: true, message: '请输入路由地址', trigger: ['blur', 'change']},
|
||||
]
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const isIconDialog = ref(false)
|
||||
const formData = ref({} as any)
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
resetData()
|
||||
// console.log(iconfont.glyphs)
|
||||
resetData()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
resetData,
|
||||
})
|
||||
function close() {
|
||||
emit('close')
|
||||
emit('close')
|
||||
}
|
||||
function resetData() {
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
type: '菜单',
|
||||
fatherMenu: '',
|
||||
menuName: '',
|
||||
icon: '',
|
||||
route: '',
|
||||
order: 1,
|
||||
isShow: true
|
||||
}
|
||||
|
||||
function resetData(menu?: any, form?: any) {
|
||||
formRef.value.resetFields()
|
||||
if (form) {
|
||||
formData.value = {
|
||||
menuId: form.id,
|
||||
menuType: form.menuType,
|
||||
parentName: form.parentName,
|
||||
parentId: form.parentId,
|
||||
name: form.name,
|
||||
icon: form.meta.icon,
|
||||
path: form.path,
|
||||
sortOrder: form.sortOrder,
|
||||
visible: form.visible
|
||||
}
|
||||
|
||||
} else {
|
||||
formData.value = {
|
||||
menuId: '',
|
||||
menuType: '0',
|
||||
parentName: menu ? menu.name : "无",
|
||||
parentId: menu ? menu.id : "-1",
|
||||
name: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 1,
|
||||
visible: "1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const numberInputChange = (e: any) => {
|
||||
if(!Number(e)) {
|
||||
formData.value.order = 1
|
||||
}
|
||||
if (!Number(e)) {
|
||||
formData.value.sortOrder = 1
|
||||
}
|
||||
}
|
||||
const iconClick = (e: any) => {
|
||||
formData.value.icon = 'icon-' + e.font_class
|
||||
isIconDialog.value = false
|
||||
formData.value.icon = 'icon-' + e.font_class
|
||||
isIconDialog.value = false
|
||||
}
|
||||
const saveData = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功！')
|
||||
close()
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
const form = Object.assign({}, formData.value);
|
||||
if (form.menuId) {
|
||||
menuApi.updateMenu(form).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success("修改成功");
|
||||
emit("saveOrUpdateEvent");
|
||||
} else {
|
||||
ElMessage.error("修改失败");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
menuApi.saveMenu(form).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success('保存成功！');
|
||||
emit("saveOrUpdateEvent");
|
||||
} else {
|
||||
ElMessage.error("保存失败");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
// text-align: justify;
|
||||
// text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
// text-align: justify;
|
||||
// text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
.iconfont-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
}
|
||||
&:focus, &:active {
|
||||
background: rgba($main-color, .2);
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.iconfont-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
}
|
||||
|
||||
&:focus, &:active {
|
||||
background: rgba($main-color, .2);
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,126 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="roleMark">
|
||||
<el-input v-model="formData.roleMark" placeholder="请输入角色标识" :disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述" prop="roleRemark">
|
||||
<el-input v-model="formData.roleRemark" type="textarea" :rows="3" placeholder="请输入角色描述"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" prop="dataPermissions">
|
||||
<el-select v-model="formData.dataPermissions" placeholder="请选择角色">
|
||||
<el-option v-for="item in dataPermissionsOption" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="roleMark">
|
||||
<el-input v-model="formData.roleMark" placeholder="请输入角色标识" :disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述" prop="roleRemark">
|
||||
<el-input v-model="formData.roleRemark" type="textarea" :rows="3" placeholder="请输入角色描述"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" prop="dataPermissions">
|
||||
<!-- <el-select v-model="formData.dataPermissions" placeholder="请选择角色">
|
||||
<el-option v-for="item in dataPermissionsOption" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>-->
|
||||
<div class="tree-container">
|
||||
<el-tree ref="treeRef" :key="treeKey" :props="treeProps" :data="treeData" :default-expanded-keys="expandedKey"
|
||||
node-key="id"
|
||||
show-checkbox @check-change="checkChange"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="text-align: right;padding-top: 0;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div style="text-align: right;padding-top: 0;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import {getMenuData} from '@/static-data/menu'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const props = defineProps({
|
||||
type: String
|
||||
type: String
|
||||
})
|
||||
|
||||
const dataPermissionsOption = [
|
||||
{ label: '全部', value: '全部' },
|
||||
{label: '全部', value: '全部'},
|
||||
]
|
||||
const rules = reactive({
|
||||
roleName: [
|
||||
{ required: true, message: '请输入角色名称', trigger: ['blur', 'change'] },
|
||||
],
|
||||
roleMark: [
|
||||
{ required: true, message: '请输入角色标识', trigger: ['blur', 'change'] },
|
||||
],
|
||||
dataPermissions: [
|
||||
{ required: true, message: '请选择数据权限', trigger: ['blur', 'change'] },
|
||||
]
|
||||
roleName: [
|
||||
{required: true, message: '请输入角色名称', trigger: ['blur', 'change']},
|
||||
],
|
||||
roleMark: [
|
||||
{required: true, message: '请输入角色标识', trigger: ['blur', 'change']},
|
||||
],
|
||||
dataPermissions: [
|
||||
{required: true, message: '请选择数据权限', trigger: ['blur', 'change']},
|
||||
]
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const formData = ref({
|
||||
id: '',
|
||||
roleName: '',
|
||||
roleMark: '',
|
||||
roleRemark: '',
|
||||
dataPermissions: '',
|
||||
id: '',
|
||||
roleName: '',
|
||||
roleMark: '',
|
||||
roleRemark: '',
|
||||
dataPermissions: '',
|
||||
} as any)
|
||||
const treeProps = {
|
||||
label: 'menuName',
|
||||
children: 'children'
|
||||
}
|
||||
const treeData = ref()
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
resetData()
|
||||
resetData()
|
||||
treeData.value = getMenuData()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
resetData,
|
||||
formData,
|
||||
resetData,
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
roleName: '',
|
||||
roleMark: '',
|
||||
roleRemark: '',
|
||||
dataPermissions: '',
|
||||
}
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
roleName: '',
|
||||
roleMark: '',
|
||||
roleRemark: '',
|
||||
dataPermissions: '',
|
||||
}
|
||||
}
|
||||
|
||||
const saveData = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功！')
|
||||
close()
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功！')
|
||||
close()
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
// text-align: justify;
|
||||
// text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
// text-align: justify;
|
||||
// text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,133 +1,164 @@
|
|||
<template>
|
||||
<div class="table-page">
|
||||
<div class="search-part" v-show="isSearch">
|
||||
<div class="search-cell">
|
||||
<span class="label">菜单名称</span>
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称"></el-input>
|
||||
</div>
|
||||
<el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
|
||||
<el-button icon="Refresh" @click="queryParams = {}">重置</el-button>
|
||||
</div>
|
||||
<div class="button-part" style="justify-content: space-between;">
|
||||
<div>
|
||||
<el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
|
||||
<el-button @click="expandTable">展开/折叠</el-button>
|
||||
</div>
|
||||
<TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="initData()"></TableAbility>
|
||||
</div>
|
||||
<div class="table-part">
|
||||
<el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
|
||||
@row-click="tableRowClick">
|
||||
<el-table-column property="menuName" label="菜单名称" width="180" align="center" />
|
||||
<el-table-column property="order" label="排序" width="80" align="center" />
|
||||
<el-table-column label="图标" width="80" align="center">
|
||||
<template #default="scope"><i class="main-color f20" :class="scope.row.icon"></i></template>
|
||||
</el-table-column>
|
||||
<el-table-column property="route" label="路由" width="260" align="center" />
|
||||
<el-table-column property="type" label="类型" width="180" align="center" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<span @click.stop>
|
||||
<el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
|
||||
<el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-part">
|
||||
<CommonPagination :total="100" @paginationChange="paginationChange" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
|
||||
<MenuForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" />
|
||||
</el-dialog>
|
||||
<div class="table-page">
|
||||
<div class="search-part" v-show="isSearch">
|
||||
<div class="search-cell">
|
||||
<span class="label">菜单名称</span>
|
||||
<el-input v-model="queryParams" placeholder="请输入菜单名称"></el-input>
|
||||
</div>
|
||||
<el-button type="primary" icon="Search" @click="searchList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
<div class="button-part" style="justify-content: space-between;">
|
||||
<div>
|
||||
<el-button type="primary" icon="FirstAidKit" @click="addData()">新增</el-button>
|
||||
<el-button @click="expandTable">展开/折叠</el-button>
|
||||
</div>
|
||||
<TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="initData()"></TableAbility>
|
||||
</div>
|
||||
<div class="table-part">
|
||||
<el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
|
||||
@row-click="tableRowClick">
|
||||
<el-table-column property="name" label="菜单名称" width="180" align="center"/>
|
||||
<el-table-column property="sortOrder" label="排序" width="80" align="center"/>
|
||||
<el-table-column label="图标" width="80" align="center">
|
||||
<template #default="scope"><i class="main-color f20" :class="scope.row.meta.icon"></i></template>
|
||||
</el-table-column>
|
||||
<el-table-column property="path" label="路由" width="260" align="center"/>
|
||||
<el-table-column property="menuType" label="类型" width="180" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<div @click.stop>
|
||||
<el-button link icon="EditPen" @click="addData(scope.row)">新建下级</el-button>
|
||||
<el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
|
||||
<el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
|
||||
<MenuForm ref="menuFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'"
|
||||
@save-or-update-event="formSaveUpdateEvent" @close="isFormDialog = false"/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tableRemoveRow, exportData } from '@/utils/table-util'
|
||||
import { getMenuData } from '@/static-data/menu'
|
||||
import CommonPagination from '@/components/common-pagination.vue'
|
||||
import {onMounted, ref} from 'vue'
|
||||
import MenuForm from './form/menu-form.vue'
|
||||
import * as menuApi from "@/api/menu";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
let isExpand = false // 表格展开状态
|
||||
|
||||
const tableRef = ref()
|
||||
const doctorFormRef = ref()
|
||||
const menuFormRef = ref()
|
||||
const isSearch = ref(true)
|
||||
const loading = ref(true)
|
||||
const isFormDialog = ref(false)
|
||||
const formDialogTitle = ref('')
|
||||
const queryParams = ref({
|
||||
menuName: ''
|
||||
} as any)
|
||||
const queryParams = ref('')
|
||||
const tableData = ref([] as any)
|
||||
|
||||
initData()
|
||||
onMounted(() => {
|
||||
initData();
|
||||
})
|
||||
|
||||
function initData() {
|
||||
loading.value = true
|
||||
tableData.value = []
|
||||
setTimeout(() => {
|
||||
tableData.value = getMenuData()
|
||||
loading.value = false
|
||||
}, 200);
|
||||
loading.value = true;
|
||||
tableData.value = [];
|
||||
getMenuTree();
|
||||
}
|
||||
|
||||
function searchList() {
|
||||
loading.value = true;
|
||||
tableData.value = [];
|
||||
getMenuTree(queryParams.value)
|
||||
}
|
||||
|
||||
function resetSearch() {
|
||||
queryParams.value = '';
|
||||
initData();
|
||||
}
|
||||
|
||||
function getMenuTree(name?: string) {
|
||||
menuApi.getMenuTree(name).then((res: any) => {
|
||||
tableData.value = res.data;
|
||||
updateMenuTree(res.data, tableData.value);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMenuTree(source: any[], target: any[]) {
|
||||
target.forEach((row: any) => {
|
||||
});
|
||||
}
|
||||
|
||||
const queryData = (e: any) => {
|
||||
loading.value = true
|
||||
tableData.value = []
|
||||
setTimeout(() => {
|
||||
while (tableData.value.length < 10) {
|
||||
tableData.value.push({
|
||||
id: tableData.value.length,
|
||||
menuName: e.menuName,
|
||||
order: tableData.value.length + 1,
|
||||
icon: 'icon-shouye-zhihui',
|
||||
route: '/permissions-manage',
|
||||
type: '菜单',
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}, 200);
|
||||
loading.value = true
|
||||
tableData.value = []
|
||||
setTimeout(() => {
|
||||
while (tableData.value.length < 10) {
|
||||
tableData.value.push({
|
||||
id: tableData.value.length,
|
||||
menuName: e.menuName,
|
||||
order: tableData.value.length + 1,
|
||||
icon: 'icon-shouye-zhihui',
|
||||
route: '/permissions-manage',
|
||||
type: '菜单',
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
}, 200);
|
||||
}
|
||||
const addData = () => {
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '添加'
|
||||
setTimeout(() => {
|
||||
doctorFormRef.value.resetData()
|
||||
}, 0)
|
||||
const addData = (menu?: any) => {
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '添加'
|
||||
setTimeout(() => {
|
||||
menuFormRef.value.resetData(menu)
|
||||
}, 0)
|
||||
}
|
||||
const expandTable = () => {
|
||||
isExpand = !isExpand
|
||||
tableData.value.forEach((row: any) => {
|
||||
tableRef.value.toggleRowExpansion(row, isExpand)
|
||||
})
|
||||
isExpand = !isExpand
|
||||
tableData.value.forEach((row: any) => {
|
||||
tableRef.value.toggleRowExpansion(row, isExpand)
|
||||
})
|
||||
}
|
||||
const removeData = (e?: any) => {
|
||||
const selectRow = e || tableRef.value.getSelectionRows()
|
||||
tableRemoveRow({ data: selectRow }, (res: boolean) => {
|
||||
if (res) {
|
||||
// console.log('调用删除', selectRow)
|
||||
}
|
||||
})
|
||||
ElMessageBox.confirm(
|
||||
'是否删除？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
menuApi.deleteById(e.id).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success("删除成功");
|
||||
initData();
|
||||
} else {
|
||||
ElMessage.error(res.msg ? res.msg : "删除失败");
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const editData = (e: any) => {
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '修改'
|
||||
setTimeout(() => {
|
||||
doctorFormRef.value.resetData()
|
||||
doctorFormRef.value.formData = JSON.parse(JSON.stringify(e))
|
||||
}, 0)
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '修改'
|
||||
setTimeout(() => {
|
||||
menuFormRef.value.resetData(null, JSON.parse(JSON.stringify(e)))
|
||||
}, 0)
|
||||
}
|
||||
const tableRowClick = (row: any) => {
|
||||
tableRef.value.toggleRowExpansion(row)
|
||||
tableRef.value.toggleRowExpansion(row)
|
||||
}
|
||||
const paginationChange = (page: number, size: number) => {
|
||||
|
||||
function formSaveUpdateEvent() {
|
||||
isFormDialog.value = false;
|
||||
initData();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="search-part" v-show="isSearch">
|
||||
<div class="search-cell">
|
||||
<span class="label">角色名称</span>
|
||||
<el-input v-model="queryParams.roleName" placeholder="请输入角色名称"></el-input>
|
||||
<el-input v-model="queryParams" placeholder="请输入角色名称"></el-input>
|
||||
</div>
|
||||
<el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
|
||||
<el-button icon="Refresh" @click="queryParams = {}">重置</el-button>
|
||||
|
|
@ -51,10 +51,9 @@
|
|||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
import { tableRemoveRow, exportData } from '@/utils/table-util'
|
||||
import {ref} from 'vue'
|
||||
import {dateFormater} from '@/utils/date-util'
|
||||
import {exportData, tableRemoveRow} from '@/utils/table-util'
|
||||
import CommonPagination from '@/components/common-pagination.vue'
|
||||
import RoleForm from './form/role-form.vue'
|
||||
import ImportDialog from '@/components/import-dialog.vue'
|
||||
|
|
@ -68,9 +67,7 @@ const isSearch = ref(true)
|
|||
const loading = ref(true)
|
||||
const isFormDialog = ref(false)
|
||||
const formDialogTitle = ref('')
|
||||
const queryParams = ref({
|
||||
roleName: ''
|
||||
} as any)
|
||||
const queryParams = ref("")
|
||||
const tableData = ref([] as any)
|
||||
|
||||
queryData({ roleName: '测试' })
|
||||
|
|
@ -127,6 +124,7 @@ const editData = (e: any) => {
|
|||
const tableRowClick = (row: any) => {
|
||||
tableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
|
||||
const paginationChange = (page: number, size: number) => {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
//target: 'http://192.168.137.235:9999', // 目标服务器地址
|
||||
target: 'http://192.168.1.110:9999', // 目标服务器地址
|
||||
target: 'http://localhost:9999', // 目标服务器地址
|
||||
ws: true, // 是否启用 WebSocket
|
||||
changeOrigin: true, // 是否修改请求头中的 Origin 字段
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
'/socket.io': {
|
||||
//target: 'ws://192.168.137.235:9999',
|
||||
target: 'ws://192.168.1.110:9999',
|
||||
target: 'ws://localhost:9999',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/socket.io/, ''),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user