<el-dialog
v-if="formOpen"
:visible.sync="formOpen"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="(form.id==undefined?'添加':'编辑')+'菜单'"
>
<el-form ref="form" :model="form" label-width="80px" :rules="formRules">
<el-form-item label="菜单类型" prop="permissionType">
<el-radio v-model="form.permissionType" label="folder" border>目录</el-radio>
<el-radio v-model="form.permissionType" label="menu" border>菜单</el-radio>
<el-radio v-model="form.permissionType" label="button" border>按钮</el-radio>
</el-form-item>
<el-form-item label="上级菜单" prop="pid">
<treeselect
v-model="form.pid"
:multiple="false"
:options="menuTreeList"
:normalizer="menuTreeSelectNormalizer"
placeholder="请选择上级菜单"
loading-text="正在加载。。。"
clear-value-text="清空选中的值"
no-results-text="没有找到结果。。。"
no-options-text="暂无数据"
:default-expand-level="Infinity"
/>
</el-form-item>
<el-form-item label="菜单名称" prop="permissionName">
<el-input
v-model="form.permissionName"
placeholder="请输入菜单名称"
/>
</el-form-item>
<el-form-item label="权限代码" prop="permissionCode">
<el-input
v-model="form.permissionCode"
placeholder="请输入权限代码"
/>
</el-form-item>
<el-form-item v-if="form.permissionType=='menu'" label="组件地址" prop="component">
<el-input
v-model="form.component"
placeholder="请输入组件地址"
/>
</el-form-item>
<el-form-item label="菜单链接" prop="permissionUrl">
<el-input
v-model="form.permissionUrl"
placeholder=""
/>
</el-form-item>
<el-form-item label="菜单图标" prop="permissionIcon">
<el-input
v-model="form.permissionIcon"
placeholder=""
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" label="排序" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio v-model="form.status" label="1" border>启用</el-radio>
<el-radio v-model="form.status" label="2" border>停用</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleFormSubmit">确 定</el-button>
<el-button @click="handleFormClose">取 消</el-button>
</div>
</el-dialog>
重置表单的方法
// 表单重置
export function resetForm(refName) {
if (this.$refs[ refName ]) {
this.$nextTick(() => {
this.$refs[ refName ].resetFields()
})
}
}
调用this.resetForm('form')无效,上次的表单数据还在
====补充
<template>
<div class="permission-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增
</el-button>
</el-col>
</el-row>
<el-table
ref="menuList"
border
row-key="id"
:data="menuList"
default-expand-all
:tree-props="{children: 'childList'}"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
>
<el-table-column
label="菜单名称"
header-align="center"
prop="permissionName"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="菜单类型" align="center" prop="permissionUrl" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-tag
:type="scope.row.permissionType === 'folder' ? 'info' : (scope.row.permissionType === 'menu' ? 'success' : 'primary')"
disable-transitions>
{{scope.row.permissionType === 'folder' ? '目录' : (scope.row.permissionType === 'menu' ? '菜单' : '按钮')}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="权限代码" align="center" prop="permissionCode" :show-overflow-tooltip="true" />
<el-table-column label="菜单链接" align="center" prop="permissionUrl" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" prop="createTime" width="170" align="center" />
<el-table-column label="操作" width="260" align="center">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
<el-button type="text" icon="el-icon-plus" size="mini" @click="handleAdd(scope.row)">新增下级</el-button>
<el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 用户表单 -->
<el-dialog
v-if="formOpen"
:visible.sync="formOpen"
center
@close="reset"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="(form.id==undefined?'添加':'编辑')+'菜单'"
>
<el-form ref="form" :model="form" label-width="80px" :rules="formRules">
<el-form-item label="菜单类型" prop="permissionType">
<el-radio v-model="form.permissionType" label="folder" border>目录</el-radio>
<el-radio v-model="form.permissionType" label="menu" border>菜单</el-radio>
<el-radio v-model="form.permissionType" label="button" border>按钮</el-radio>
</el-form-item>
<el-form-item label="上级菜单" prop="pid">
<treeselect
v-model="form.pid"
:multiple="false"
:options="menuTreeList"
:normalizer="menuTreeSelectNormalizer"
placeholder="请选择上级菜单"
loading-text="正在加载。。。"
clear-value-text="清空选中的值"
no-results-text="没有找到结果。。。"
no-options-text="暂无数据"
:default-expand-level="Infinity"
/>
</el-form-item>
<el-form-item label="菜单名称" prop="permissionName">
<el-input
v-model="form.permissionName"
placeholder="请输入菜单名称"
/>
</el-form-item>
<el-form-item label="权限代码" prop="permissionCode">
<el-input
v-model="form.permissionCode"
placeholder="请输入权限代码"
/>
</el-form-item>
<el-form-item v-if="form.permissionType=='menu'" label="组件地址" prop="component">
<el-input
v-model="form.component"
placeholder="请输入组件地址"
/>
</el-form-item>
<el-form-item label="菜单链接" prop="permissionUrl">
<el-input
v-model="form.permissionUrl"
placeholder=""
/>
</el-form-item>
<el-form-item label="菜单图标" prop="permissionIcon">
<el-input
v-model="form.permissionIcon"
placeholder=""
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" label="排序" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio v-model="form.status" label="1" border>启用</el-radio>
<el-radio v-model="form.status" label="2" border>停用</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleFormSubmit">确 定</el-button>
<el-button @click="handleFormClose">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { addMenu, deleteMenuById, getMenuById, getMenuList, updateMenu } from '@/api/menu'
export default {
name: 'Menu',
components: {
Treeselect
},
data() {
return {
formOpen: false,
form: {
id: undefined,
pid: '0',
permissionName: undefined,
permissionCode: undefined,
component: undefined,
permissionType: undefined,
permissionUrl: undefined,
permissionIcon: undefined,
sort: 1,
status: '1'
},
formRules: {
permissionName: [{
required: true, message: '请输入菜单名称!', trigger: 'blur'
}],
permissionType: [{
required: true, message: '请选择菜单类型!', trigger: 'blur'
}]
},
menuList: [],
menuTreeList: [],
menuTreeSelectNormalizer(node) {
return {
id: node.id,
label: node.permissionName,
children: node.childList
}
},
queryParams: {}
}
},
created() {
},
mounted() {
this.getMenuList()
},
methods: {
reset() {
// this.form = Object.assign({}, this.form, this.$options.data().form)
this.resetForm('form')
},
handleAdd(row) {
// this.$nextTick(() => {
// console.log('打开窗口:' + this.$refs[ 'form' ])
// })
this.formOpen = true
this.getMenuTreeList()
console.log('打开窗口:')
console.log(this.$refs[ 'form' ])
console.log(this.form)
this.reset()
if (row.id != undefined) {
// this.form.pid = row.id
this.form.pid = row.id
}
},
handleUpdate(row) {
this.formOpen = true
this.getMenuTreeList()
this.reset()
getMenuById(row.id).then((data) => {
this.$nextTick(() => {
this.form = data
})
}).catch((data) => {
this.msgError('菜单信息获取失败!')
})
},
handleDelete(row) {
if (row.childList != undefined && row.childList.length > 0) {
this.msgError('该部门有子菜单,请先删除子菜单!')
return
}
this.$confirm('是否确认删除菜单【' + row.permissionName + '】?操作无法撤销!', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenuById(row.id).then(() => {
this.msgSuccess('删除成功!')
this.getMenuList()
}).catch(() => {
this.msgError('删除失败!')
})
})
},
handleFormSubmit() {
this.$refs[ 'form' ].validate(valid => {
if (valid) {
if (this.form.id == undefined) {
addMenu(this.form).then((data) => {
this.msgSuccess('添加成功!')
this.formOpen = false
this.getMenuList()
}).catch(() => {
this.msgError('添加失败!')
})
} else {
updateMenu(this.form).then((data) => {
this.msgSuccess('修改成功!')
this.formOpen = false
this.getMenuList()
}).catch(() => {
this.msgError('修改失败!')
})
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…