lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

菜单页面添加新增下级

This commit is contained in:
hbzgyjh 2021-12-20 17:23:59 +08:00
parent ab40d9f046
commit 567c0d4df5
2 changed files with 230 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/security/menu/MenuForm.vue
View File

@ -1,39 +1,20 @@
<template> <template>
<a-modal <a-modal :title="modalTitle" :width="1000" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" :destroyOnClose="true">
:title="modalTitle"
:width="1000"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
:destroyOnClose="true"
>
<a-spin :spinning="formLoading"> <a-spin :spinning="formLoading">
<a-form :form="form" > <a-form :form="form">
<a-form-item v-show="false" > <a-form-item v-show="false">
<a-input v-decorator="['id']" /> <a-input v-decorator="['id']" />
</a-form-item> </a-form-item>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item label="菜单名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
label="菜单名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
hasFeedback
>
<a-input placeholder="请输入菜单名称" v-decorator="['name',{rules: [{required: true, min: 1, message: '请输入菜单名称！'}]}]" /> <a-input placeholder="请输入菜单名称" v-decorator="['name',{rules: [{required: true, min: 1, message: '请输入菜单名称！'}]}]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item style="width: 100%" :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单编号" hasFeedback>
style="width: 100%"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="菜单编号"
hasFeedback
>
<a-input placeholder="请输入菜单编号" v-decorator="['code', {rules: [{required: true, min: 1, message: '请输入菜单编号！'}]}]" /> <a-input placeholder="请输入菜单编号" v-decorator="['code', {rules: [{required: true, min: 1, message: '请输入菜单编号！'}]}]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -41,12 +22,8 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单层级">
:labelCol="labelCol" <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择菜单层级！' }]}]">
:wrapperCol="wrapperCol"
label="菜单层级"
>
<a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择菜单层级！' }]}]" >
<a-radio value="0" @click="meneTypeFunc(0)">目录</a-radio> <a-radio value="0" @click="meneTypeFunc(0)">目录</a-radio>
<a-radio value="1" @click="meneTypeFunc(1)">菜单</a-radio> <a-radio value="1" @click="meneTypeFunc(1)">菜单</a-radio>
<a-radio value="2" @click="meneTypeFunc(2)">按钮</a-radio> <a-radio value="2" @click="meneTypeFunc(2)">按钮</a-radio>
@ -55,25 +32,13 @@
</a-col> </a-col>
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<div v-show="pidShow"> <div v-show="pidShow">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="父级菜单" has-feedback>
:labelCol="labelCol" <a-tree-select v-decorator="['pid', {initialValue: treeSelDefaultValue},{rules: [{ required: true, message: '请选择父级菜单！' }]}]" style="width: 100%" :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }" :treeData="menuTreeData" placeholder="请选择父级菜单" :replaceFields="{
:wrapperCol="wrapperCol"
label="父级菜单"
has-feedback
>
<a-tree-select
v-decorator="['pid', {rules: [{ required: true, message: '请选择父级菜单！' }]}]"
style="width: 100%"
:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
:treeData="menuTreeData"
placeholder="请选择父级菜单"
:replaceFields="{
children:'children', children:'children',
title:'name', title:'name',
key:'id', key:'id',
value:'id' value:'id'
}" }">
>
<span slot="title" slot-scope="{ id }">{{ id }} <span slot="title" slot-scope="{ id }">{{ id }}
</span> </span>
</a-tree-select> </a-tree-select>
@ -82,31 +47,23 @@
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="24" > <a-row :gutter="24">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<div v-show="componentShow"> <div v-show="componentShow">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
:labelCol="labelCol"
:wrapperCol="wrapperCol"
hasFeedback
>
<span slot="label"> <span slot="label">
<a-tooltip title="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe"> <a-tooltip title="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe">
<a-icon type="question-circle-o" /> <a-icon type="question-circle-o" />
</a-tooltip>&nbsp; </a-tooltip>&nbsp;
前端组件 前端组件
</span> </span>
<a-input placeholder="请输入前端组件" :disabled="componentDisabled" prop="component" v-decorator="['component',{rules: [{required: componentRequired, message: '请输入前端组件'}]}]"/><!-- ,{rules: [{required: componentRequired, min: 1, message: '请输入前端组件！'}]} --> <a-input placeholder="请输入前端组件" :disabled="componentDisabled" prop="component" v-decorator="['component',{rules: [{required: componentRequired, message: '请输入前端组件'}]}]" /><!-- ,{rules: [{required: componentRequired, min: 1, message: '请输入前端组件！'}]} -->
</a-form-item> </a-form-item>
</div> </div>
</a-col> </a-col>
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<div v-show="routerShow"> <div v-show="routerShow">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
:labelCol="labelCol"
:wrapperCol="wrapperCol"
hasFeedback
>
<span slot="label"> <span slot="label">
<a-tooltip title="浏览器显示的URL，例：/menu，对应打开页面为菜单页面"> <a-tooltip title="浏览器显示的URL，例：/menu，对应打开页面为菜单页面">
<a-icon type="question-circle-o" /> <a-icon type="question-circle-o" />
@ -117,12 +74,7 @@
</a-form-item> </a-form-item>
</div> </div>
<div v-show="permissionShow"> <div v-show="permissionShow">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限标识" hasFeedback>
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="权限标识"
hasFeedback
>
<a-input placeholder="请输入权限标识" v-decorator="['permission', {rules: [{required: permissionRequired, message: '请输入权限标识！'}]}]" /> <a-input placeholder="请输入权限标识" v-decorator="['permission', {rules: [{required: permissionRequired, message: '请输入权限标识！'}]}]" />
</a-form-item> </a-form-item>
</div> </div>
@ -131,20 +83,12 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否可见">
:labelCol="labelCol" <a-switch id="visible" checkedChildren="是" unCheckedChildren="否" v-decorator="['visible', { valuePropName: 'checked' }]" /><!-- defaultChecked -->
:wrapperCol="wrapperCol"
label="是否可见"
>
<a-switch id="visible" checkedChildren="是" unCheckedChildren="否" v-decorator="['visible', { valuePropName: 'checked' }]"/><!-- defaultChecked -->
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="排序"
>
<a-input-number style="width: 100%" v-decorator="['intCode', { initialValue: 100 }]" :min="1" :max="1000" /> <a-input-number style="width: 100%" v-decorator="['intCode', { initialValue: 100 }]" :min="1" :max="1000" />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -153,12 +97,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="12" :sm="24"> <a-col :md="12" :sm="24">
<a-form-item <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="备注"
hasFeedback
>
<a-input placeholder="请输入备注" v-decorator="['remark']"></a-input> <a-input placeholder="请输入备注" v-decorator="['remark']"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -170,10 +109,10 @@
</template> </template>
<script> <script>
import { menuTree, menuAdd, menuEdit } from '@/api/security/menu' import { menuTree, menuAdd, menuEdit } from '@/api/security/menu'
export default { export default {
data () { data() {
return { return {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
@ -197,13 +136,14 @@
permissionRequired: true, permissionRequired: true,
formLoading: true, formLoading: true,
type: '', type: '',
form: this.$form.createForm(this) form: this.$form.createForm(this),
treeSelDefaultValue: 1,
} }
}, },
methods: { methods: {
// 新增打开页面初始化 // 新增打开页面初始化
add (type) { add(type) {
this.modalTitle = "新增菜单" this.modalTitle = "新增菜单"
this.visible = true this.visible = true
@ -213,6 +153,7 @@
// 默认选中的单选框 // 默认选中的单选框
this.form.getFieldDecorator('visible', { initialValue: true }) this.form.getFieldDecorator('visible', { initialValue: true })
this.treeSelDefaultValue = type;
// 默认加载菜单树 // 默认加载菜单树
this.getMenuTree() this.getMenuTree()
@ -220,7 +161,7 @@
this.formLoading = false this.formLoading = false
}, },
// 编辑打开页面初始化 // 编辑打开页面初始化
edit (record) { edit(record) {
this.modalTitle = "编辑菜单" this.modalTitle = "编辑菜单"
this.visible = true this.visible = true
@ -243,7 +184,7 @@
this.formLoading = false this.formLoading = false
}, },
getMenuTree () { getMenuTree() {
menuTree().then((res) => { menuTree().then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.form.resetFields(`pid`, []) this.form.resetFields(`pid`, [])
@ -264,7 +205,7 @@
/** /**
* 选择菜单类型执行初始化表单变量 * 选择菜单类型执行初始化表单变量
*/ */
meneTypeFunc (type) { meneTypeFunc(type) {
this.type = type this.type = type
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
if (type == '0' || type == '1') { if (type == '0' || type == '1') {
@ -314,7 +255,7 @@
this.form.getFieldDecorator('permission', { initialValue: '' }) this.form.getFieldDecorator('permission', { initialValue: '' })
} }
}, },
handleSubmit () { handleSubmit() {
const { form: { validateFields } } = this const { form: { validateFields } } = this
this.confirmLoading = true this.confirmLoading = true
validateFields((errors, values) => { validateFields((errors, values) => {
@ -357,12 +298,12 @@
} }
}) })
}, },
handleCancel () { handleCancel() {
this.form.resetFields() this.form.resetFields()
this.confirmLoading = false this.confirmLoading = false
this.visible = false this.visible = false
}, },
setMenuItem (record) { setMenuItem(record) {
console.log(record) console.log(record)
this.form.setFieldsValue( this.form.setFieldsValue(
{ {
@ -381,5 +322,5 @@
} }
} }
} }
</script> </script>

11
src/views/security/menu/MenuList.vue
View File

@ -41,8 +41,10 @@
{{ record.type | typeFilter }} {{ record.type | typeFilter }}
</a-tag> </a-tag>
</span> </span>
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record" >
<template> <template>
<a v-if="hasPerm('sys:menu:add') && record.type !== 2" @click="$refs.menuForm.add(record.id)">新增下级</a>
<a-divider type="vertical" v-if="hasPerm('sys:menu:add')" />
<a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a> <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" /> <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
<a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)"> <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
@ -99,8 +101,9 @@ export default {
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'intCode' dataIndex: 'intCode',
} width: '5%',
},
], ],
loadData: parameter => { loadData: parameter => {
return menuList(Object.assign(parameter, this.queryParam)).then((res) => { return menuList(Object.assign(parameter, this.queryParam)).then((res) => {
@ -116,7 +119,7 @@ export default {
this.columns.push({ this.columns.push({
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
width: '150px', width: '180px',
scopedSlots: { customRender: 'action' } scopedSlots: { customRender: 'action' }
}) })
} }