<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="icon-home"></i> 系統管理</el-breadcrumb-item>
<el-breadcrumb-item>資源管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="container-left">
<div class="tree">
<div class="tree-t">菜單列表</div>
<el-tree :data="data" v-loading="listLoading1" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</div>
<div class="container-right">
<div class="tree-t">
二級菜單
</div>
<div class="list-header flex">
<el-button-group>
<el-button type="primary" size="mini" icon="el-icon-plus" @click="editMenus(2, 1)">添加</el-button>
</el-button-group>
</div>
<div class="el-table1">
<el-table v-loading="listLoading" :data="form" stripe style="width: 100%">
<el-table-column prop="menuId" label="id" width="140" align="left"></el-table-column>
<el-table-column prop="menuName" label="菜單名稱" align="center" width="200"></el-table-column>
<el-table-column prop="source" label="路由" align="center" width="200"></el-table-column>
<el-table-column prop="sortValue" label="序號" align="center" width="200"></el-table-column>
<el-table-column prop="statusTXT" label="狀態" align="center"></el-table-column>
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-edit" @click="editMenus(2, 2, scope.row)"></el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="editMenus(2, 3, scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination pagination-footer flex" v-if="form.length">
<div class="pagination-left"></div>
<div class="pagination-right">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30]"
layout="total, sizes, prev, pager, next, jumper"
:total="totalDataNumber">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
<el-dialog :title="title" :visible.sync="editVisible" width="500px">
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="名稱" prop="menuName">
<el-input class="role-box" v-model="editForm.menuName"></el-input>
</el-form-item>
<el-form-item label="圖標" prop="menuIcon" v-if="level === 1">
<el-input class="role-box" v-model="editForm.menuIcon"></el-input>
</el-form-item>
<el-form-item label="路由" prop="source" v-if="level === 2">
<el-input class="role-box" v-model="editForm.source"></el-input>
</el-form-item>
<el-form-item label="序號" prop="sortValue">
<el-input class="role-box" v-model="editForm.sortValue"></el-input>
</el-form-item>
<el-form-item label="狀態選擇">
<el-radio-group v-model="editForm.status">
<el-radio label="1">啓用</el-radio>
<el-radio label="2">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div>
<el-button type="primary" @click="submit('editForm')">確定</el-button>
<el-button @click="editVisible = false">取消</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
<div class="del-dialog-cnt">刪除不可恢復，是否確定刪除？</div>
<span slot="footer" class="dialog-footer">
<el-button @click="delVisible = false">取 消</el-button>
<el-button type="primary" @click="del">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
let validatorSortValue = (rule, value, callback) => {
if (!Number.isInteger(Number(value))) {
return callback(new Error('序號只能是整數'));
} else {
callback();
}
};
let validatorSource = (rule, value, callback) => {
if (!/^[a-zA-Z0-9\-]*$/g.test(value)) {
return callback(new Error('路由只能是英文與數字以及減號'));
} else {
callback();
}
};
let validatorMenuIcon = (rule, value, callback) => {
if (!/^[a-zA-Z][a-zA-Z0-9\-]*$/g.test(value)) {
return callback(new Error('圖標由字母開頭並且只能是英文與數字以及減號'));
} else {
callback();
}
};
return {
listLoading: false,
listLoading1: true,
data: [],
defaultProps: {
children: 'children',
label: 'text'
},
rules: {
},
form: [],
editVisible: false,
editForm: {
menuName: '',
menuIcon: '',
source: '',
sortValue: '',
status: '1'
}
} // return
}, // data
mounted() {
this.getTopMenus();
}, // mounted
methods: {
initForm(formName) {
this.editForm = {
menuName: '',
menuIcon: '',
source: '',
sortValue: '',
status: '1'
};
if (this.$refs[formName]) this.$nextTick(() => this.$refs[formName].clearValidate());
},
handleNodeClick(data) {
this.currentTopData = {...data};
console.log(data)
// this.getSubMenus();
},
editMenus(level, type, itemData) {
this.level = level;
if (this.level === 1) { // 一級菜單
this.topType = type;
if (!this.currentTopData && this.topType !== 1) {
this.$message({
message: '請先選擇一級菜單',
type: 'warning'
});
return;
}
if (this.topType === 1) {
this.title = '添加一級菜單';
this.initForm('editForm');
this.editVisible = true;
} else if (this.topType === 2) {
this.title = '修改一級菜單';
this.initForm('editForm');
this.editForm = this.currentTopData;
this.editVisible = true;
} else if (this.topType === 3) {
this.openEditVisible();
}
} else if (this.level === 2) { // 二級菜單
this.subType = type;
if (!this.currentTopData) {
this.$message({
message: '請先選擇一級菜單',
type: 'warning'
});
return;
}
if (this.subType === 1) {
this.title = '添加二級菜單';
this.initForm('editForm');
this.editVisible = true;
} else if (this.subType === 2) {
this.title = '修改二級菜單';
this.initForm('editForm');
this.currentSubData = {...itemData};
this.editForm = this.currentSubData;
console.log(typeof this.editForm.sortValue);
this.editVisible = true;
} else if (this.subType === 3) {
this.currentSubData = {...itemData};
this.openEditVisible();
}
}
},
getTopMenus() {
this.$http(`${this.$host}/power/getMenuResourceList`, 'post', {isNeedResource: false})
.then((data) => {
let dataList = data.data;
this.data = dataList;
this.listLoading1 = false;
});
// let dataList = [
// {
// menuName: '一級 1',
// children: [
// {
// menuName: '二級 1-1'
// }
// ]
// },
// {
// menuName: '二級 1',
// children: [
// {
// menuName: '二級 1-1'
// }
// ]
// }
// ];
// this.data = dataList;
},
getSubMenus() {
this.$http(`${this.$host}/power/getMenuResourceList`, 'post', {isNeedResource: false})
.then((data) => {
let dataList = data.data.dataList;
for (let i = 0; i < dataList.length; i++) {
if (dataList[i].status === 1) {
dataList[i].statusTXT = '啓用';
} else if (dataList[i].status === 2) {
dataList[i].statusTXT = '禁用';
}
dataList[i].status = dataList[i].status.toString();
}
this.form = dataList;
this.listLoading = false;
})
},
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.level === 1 && this.topType === 1) { // 一級菜單添加操作
let dataObj = {
menuName: this.editForm.menuName,
status: this.editForm.status,
menuIcon: this.editForm.menuIcon,
sortValue: this.editForm.sortValue
};
this.$http(`${this.$host}/menuMgr/addTopMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.editVisible = false;
this.$message.success('添加成功！');
this.currentTopData = '';
this.getTopMenus();
} else {
this.$message.error(data.retMsg);
}
})
} else if (this.level === 1 && this.topType === 2) { // 一級菜單修改操作
let dataObj = {
menuId: this.currentTopData.menuId,
menuName: this.editForm.menuName,
status: this.editForm.status,
menuIcon: this.editForm.menuIcon,
sortValue: this.editForm.sortValue
};
this.$http(`${this.$host}/menuMgr/updateMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.editVisible = false;
this.$message.success('修改成功！');
this.currentTopData = '';
this.getTopMenus();
} else {
this.$message.error(data.retMsg);
}
})
} else if (this.level === 2 && this.subType === 1) { // 二級菜單添加操作
let dataObj = {
fatherId: this.currentTopData.menuId,
menuName: this.editForm.menuName,
source: this.editForm.source,
status: this.editForm.status,
menuIcon: this.editForm.menuIcon,
sortValue: this.editForm.sortValue
};
this.$http(`${this.$host}/menuMgr/addSubMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.editVisible = false;
this.$message.success('添加成功！');
this.currentSubData = '';
this.getSubMenus();
} else {
this.$message.error(data.retMsg);
}
})
} else if (this.level === 2 && this.subType === 2) { // 二級菜單修改操作
let dataObj = {
menuId: this.currentSubData.menuId,
menuName: this.editForm.menuName,
source: this.editForm.source,
status: this.editForm.status,
menuIcon: this.editForm.menuIcon,
sortValue: this.editForm.sortValue
};
this.$http(`${this.$host}/menuMgr/updateSubMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.editVisible = false;
this.$message.success('修改成功！');
this.currentSubData = '';
this.getSubMenus();
} else {
this.$message.error(data.retMsg);
}
})
}
} else {
console.log('menu-management：error submit!!');
return false;
}
});
},
openEditVisible() {
this.delVisible = true;
},
del() {
if (this.level === 1) {
this.delTopMenu();
} else if (this.level === 2) {
this.delSubMenu();
}
},
delTopMenu() {
let dataObj = {
menuId: this.currentTopData.menuId
};
this.$http(`${this.$host}/menuMgr/delTopMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.$message.success('刪除成功');
this.currentTopData = '';
this.getTopMenus();
} else {
this.$message.error(data.retMsg);
}
this.delVisible = false;
})
},
delSubMenu() {
let dataObj = {
menuId: this.currentSubData.menuId
};
this.$http(`${this.$host}/menuMgr/deleteSubMenu`, 'post', dataObj)
.then((data) => {
if (data.retCode === 0) {
this.$message.success('刪除成功');
this.currentSubData = '';
this.getSubMenus();
} else {
this.$message.error(data.retMsg);
}
this.delVisible = false;
})
},
handleSizeChange(val) {
this.rows = val;
this.getSubMenus()
},
handleCurrentChange(val) {
this.page = val;
this.getSubMenus()
},
} // methods
} // export
</script>
<style scoped>
.list-header{
padding-top: 0;
}
.del-dialog-cnt{
font-size: 16px;
text-align: center
}
.role-box{
width: 260px;
}
</style>
