<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-3
|
描述：权限管理-添加菜单&权限
|
-->
|
<el-dialog title="添加菜单&权限" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
|
<el-form size="small" :model="formData" :rules="formRules" ref="form">
|
<!--菜单名称-->
|
<el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
|
<el-input v-model="formData.name" autocomplete="off" placeholder="请输入菜单名称"></el-input>
|
</el-form-item>
|
<!--类型-->
|
<el-form-item label="类型" prop="name" :label-width="formLabelWidth">
|
<el-radio-group v-model="formData.is_route">
|
<el-radio :label="1">页面</el-radio>
|
<el-radio :label="0">按钮</el-radio>
|
<el-radio :label="2">独立单页面</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--上级菜单-->
|
<el-form-item label="上级菜单" prop="parent_id" :label-width="formLabelWidth">
|
<el-cascader size="small" v-model="parentsVal" :options="accessList" :props="propsParam" @change="handleChange"></el-cascader>
|
</el-form-item>
|
<!--路径-->
|
<el-form-item label="路径" prop="path" :label-width="formLabelWidth">
|
<el-input v-model="formData.path" autocomplete="off" placeholder="请输入组件文件路径"></el-input>
|
<p>提示：对应前端给的文件路径，例如：/index/index</p>
|
</el-form-item>
|
<!--图标-->
|
<el-form-item label="图标" :label-width="formLabelWidth">
|
<el-input v-model="formData.icon" autocomplete="off" placeholder="请输入icon"></el-input>
|
<p>提示：请选择系统提供的图标</p>
|
</el-form-item>
|
<!--是否是菜单-->
|
<el-form-item label="是否是菜单" :label-width="formLabelWidth" v-if="formData.is_route==1">
|
<el-radio-group v-model="formData.is_menu">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--是否显示-->
|
<el-form-item label="是否显示" :label-width="formLabelWidth">
|
<el-radio-group v-model="formData.is_show">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--重定向-->
|
<el-form-item label="重定向" :label-width="formLabelWidth" v-if="formData.is_route == 1">
|
<el-input v-model="formData.redirect_name" autocomplete="off" placeholder="请输入重定向地址"></el-input>
|
</el-form-item>
|
<!--备注-->
|
<el-form-item label="备注" prop="sort" :label-width="formLabelWidth">
|
<el-input v-model="formData.remark" placeholder="请输入备注" type="textarea"></el-input>
|
</el-form-item>
|
<!--排序-->
|
<el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
|
<el-input v-model="formData.sort" placeholder="请输入排序" type="number"></el-input>
|
</el-form-item>
|
</el-form>
|
<!--操作按钮-->
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible">取 消</el-button>
|
<el-button type="primary" @click="onSubmit()" :disabled="loading">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import AccessApi from '@/api/access.js';
|
import { deepClone,formatModel } from '@/utils/base.js';
|
export default {
|
data() {
|
return {
|
/*是否加载中*/
|
loading: false,
|
/*form表单数据对象*/
|
formData: {
|
/*菜单名称*/
|
name: '',
|
/*路由地址*/
|
path: '',
|
/*组件名*/
|
views: '',
|
/*别名*/
|
alias: '',
|
/*图标*/
|
icon: '',
|
/*是否是菜单*/
|
is_menu: 0,
|
/*是否是路由*/
|
is_route: 1,
|
/*是否显示*/
|
is_show: 1,
|
/*排序*/
|
sort: 1,
|
/*父集ID*/
|
parent_id: 0
|
},
|
/*验证规则*/
|
formRules: {
|
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
|
path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
|
views: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
|
alias: [{ required: true, message: '请输入别名', trigger: 'blur' }]
|
},
|
/*当前父集ID*/
|
parentsVal: [],
|
/*菜单列表*/
|
accessList: [],
|
/*排序*/
|
srot: '1',
|
/*左边长度*/
|
formLabelWidth: '120px',
|
/*是否显示*/
|
dialogVisible: false,
|
/*展示数据*/
|
propsParam: {
|
label: 'name',
|
value: 'access_id',
|
checkStrictly: true
|
}
|
};
|
},
|
props: {
|
open_add: Boolean,
|
add_type: String,
|
rawData: Array,
|
selectModel: Object
|
},
|
created() {
|
|
this.dialogVisible = this.open_add;
|
this.accessList = deepClone(this.rawData);
|
this.accessList.unshift({ name: '顶级菜单', access_id: 0 });
|
if (this.add_type == 'copy') {
|
this.formData =formatModel(this.formData,this.selectModel);
|
this.findParentsID(this.accessList);
|
} else if (this.add_type == 'child') {
|
this.formData.parent_id = this.selectModel.access_id;
|
this.findParentsID(this.accessList);
|
}
|
},
|
methods: {
|
/*选择菜单*/
|
handleChange(e) {},
|
|
/*查找父集id*/
|
findParentsID(list){
|
let flag=false;
|
for(let i=0;i<list.length;i++){
|
let item=list[i];
|
if(item.access_id==this.formData.parent_id){
|
this.parentsVal.unshift(item.access_id);
|
flag=true;
|
break;
|
}else{
|
let children=item.children;
|
if(typeof children!='undefined'&&children.length>0){
|
if(this.findParentsID(children)){
|
this.parentsVal.unshift(item.access_id);
|
flag=true;
|
break;
|
}
|
}
|
}
|
}
|
return flag;
|
},
|
|
/*添加菜单*/
|
onSubmit() {
|
let self = this;
|
let params = this.formData;
|
if (self.parentsVal.length > 0) {
|
params.parent_id = self.parentsVal[self.parentsVal.length - 1];
|
}
|
self.$refs.form.validate(valid => {
|
if (valid) {
|
self.loading = true;
|
AccessApi.supplieraddpAccess(params, true)
|
.then(res => {
|
if (res.code == 1) {
|
self.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
self.dialogFormVisible(true);
|
self.loading = false;
|
}
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
}
|
});
|
},
|
|
/*关闭弹窗*/
|
dialogFormVisible(e) {
|
if (e) {
|
this.$emit('closeDialog', {
|
type: 'success',
|
openDialog: false
|
});
|
} else {
|
this.$emit('closeDialog', {
|
type: 'error',
|
openDialog: false
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style></style>
|
