kuailexs/x-springboot-ui
1
0
Fork 0
mirror of https://github.com/yzcheng90/x-springboot-ui synced 2025-11-05 06:26:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

temp submit

Browse Source
This commit is contained in:
yzcheng90
2023-08-15 18:28:44 +08:00
parent 9d0e82638d
commit 4386c98741
1 changed files with 507 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/menu/index.vue
View File

@@ -2,16 +2,16 @@
<div class="system-menu-container layout-pd">
<el-card shadow="hover">
<div class="system-menu-search mb15">
<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10">
<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"></el-input>
<el-button size="default" type="primary" class="ml10" @click="fetchData">
<el-icon>
<ele-Search />
<ele-Search/>
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit()">
<el-icon>
<ele-FolderAdd />
<ele-FolderAdd/>
</el-icon>
新增菜单
</el-button>
@@ -34,11 +34,6 @@
<span>{{ scope.row.component }}</span>
</template>
</el-table-column>
<el-table-column label="权限标识" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.meta.roles }}</span>
</template>
</el-table-column>
<el-table-column label="排序" show-overflow-tooltip width="80">
<template #default="scope">
{{ scope.row.orderSort }}
@@ -47,7 +42,8 @@
<el-table-column label="操作" show-overflow-tooltip width="240">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('add')">新增</el-button>
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">修改
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
@@ -60,38 +56,39 @@
<el-form-item label="上级菜单">
<el-cascader
:options="state.menuData"
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
:props="{ value: 'menuId', label: 'title' }"
placeholder="请选择上级菜单"
clearable
class="w100"
v-model="state.ruleForm.menuSuperior"
v-model="state.menuSelectData"
@change="selectMenuChange"
>
<template #default="{ node, data }">
<span>{{ data.title }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单名称">
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx"
clearable></el-input>
</el-form-item>
</el-col>
<template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由名称">
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="路由路径">
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="重定向">
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -115,7 +112,8 @@
:key="item.label"
:name="'name'+ index"
:label="item.label">
<i v-for="item in item.list" :key="item" :class="item" @click="setIcon(item)" style="font-size:20px"></i>
<i v-for="item in item.list" :key="item" :class="item"
@click="setIcon(item)" style="font-size:20px"></i>
</el-tab-pane>
</el-tabs>
</div>
@@ -124,10 +122,11 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="组件路径">
<el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
<el-input v-model="state.ruleForm.component" placeholder="组件路径"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="链接地址">
<el-input
v-model="state.ruleForm.meta.isLink"
@@ -138,25 +137,11 @@
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
<el-option label="admin" value="admin"></el-option>
<el-option label="common" value="common"></el-option>
</el-select>
</el-form-item>
</el-col>
</template>
<template v-if="state.ruleForm.menuType === 'btn'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="权限标识">
<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
</el-form-item>
</el-col>
</template>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="菜单排序">
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right"
placeholder="请输入排序" class="w100"/>
</el-form-item>
</el-col>
<template>
@@ -186,7 +171,8 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="是否外链">
<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe">
<el-radio-group v-model="state.ruleForm.isLink"
:disabled="state.ruleForm.meta.isIframe">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
@@ -214,8 +200,8 @@
</template>
<script>
import { useMenuApi } from '@/api/menu';
import { Message, MessageBox } from 'element-ui';
import {useMenuApi} from '@/api/menu';
import {Message, MessageBox} from 'element-ui';
export default {
name: "menuList",
@@ -239,7 +225,7 @@ export default {
submitTxt: '',
},
ruleForm: {
menuSuperior: [], // 上级菜单
menuPid: '', // 上级菜单
menuType: 'menu', // 菜单类型
name: '', // 路由名称
component: '', // 组件路径
@@ -258,7 +244,8 @@ export default {
roles: '', // 权限标识，取角色管理
}
},
menuData:[]
menuData: [],
menuSelectData: []
},
activeName: '0',
iconList: [
@@ -381,30 +368,53 @@ export default {
}
},
methods: {
selectMenuChange(value) {
console.log(value)
this.menuSelectData = value
this.state.ruleForm.menuPid = value[value.length - 1];
},
popoverShow() {
this.$nextTick(()=>{
this.$nextTick(() => {
this.activeName = '0'
})
},
setIcon(icon) {
this.state.ruleForm.meta.icon = icon;
},
getTreeData(data) {
if (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children && data[i].children.length < 1) {
// children若为空数组，则将children设为undefined
data[i].children = undefined;
} else {
// children若不为空数组，则继续 递归调用 本方法
this.getTreeData(data[i].children);
}
}
return data;
}
},
fetchData() {
this.state.tableData.loading = true
useMenuApi().list(this.state.tableData.param).then(response => {
this.state.tableData.data = response.data
this.state.menuData = response.data
this.state.menuData = this.getTreeData(response.data)
this.state.tableData.loading = false
})
},
onOpenAddOrEdit(type,row){
onOpenAddOrEdit(type, row) {
if (type === 'edit') {
this.state.ruleForm = row;
this.state.dialog.title = '修改菜单';
this.state.dialog.submitTxt = '修 改';
// 回显父级菜单
this.state.menuSelectData = [];
let menuIds = this.findMenuIds([], row.menuId, this.state.menuData);
console.log("3:", menuIds);
} else {
this.state.ruleForm = {
menuSuperior: [], // 上级菜单
menuPid: '', // 上级菜单
menuType: 'menu', // 菜单类型
name: '', // 路由名称
component: '', // 组件路径
@@ -428,19 +438,36 @@ export default {
}
this.state.dialog.isShowDialog = true;
},
onRowDel(row){
findMenuIds(result, menuId, data) {
if(data){
for (let i = 0; i < data.length; i++) {
const menu = data[i];
if(menu){
if (menu.menuId === menuId) {
result.push(menu.menuId);
break;
} else if (menu.children && menu.children.length > 0) {
this.findMenuIds(menuId, menu.children);
}
}
}
}
return result;
},
onRowDel(row) {
MessageBox.confirm(`此操作将永久删除名称：“${row.title}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
this.deleteInfo(row);
}).catch(() => {});
}).catch(() => {
});
},
onSelectIframeChange(){
if (this.state.ruleForm.meta.isIframe){
onSelectIframeChange() {
if (this.state.ruleForm.meta.isIframe) {
this.state.state.ruleForm.isLink = true;
}else{
} else {
this.state.state.ruleForm.isLink = false;
}
},
@@ -454,14 +481,14 @@ export default {
this.state.tableData.param.current = current
this.fetchData()
},
closeDialog(){
closeDialog() {
this.state.dialog.isShowDialog = false;
},
onCancel(){
onCancel() {
this.closeDialog();
},
onSubmit(){
onSubmit() {
console.log(this.state.ruleForm)
},
deleteInfo(row) {
let param = {
@@ -475,13 +502,11 @@ export default {
})
},
},
computed: {
computed: {},
created() {
},
created(){
},
mounted(){
mounted() {
this.fetchData()
}
}