334 lines
8.6 KiB
Vue
334 lines
8.6 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button type="primary" icon="el-icon-plus" @click="addDept"></el-button>
|
|
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="right-panel-search">
|
|
<el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable ref="table" :apiObj="apiObj" :params="params" row-key="id" @selection-change="selectionChange"
|
|
hidePagination>
|
|
<el-table-column type="selection" width="50"></el-table-column>
|
|
<el-table-column label="#" type="index" width="50"></el-table-column>
|
|
<el-table-column label="菜单名称" prop="name" min-width="200"></el-table-column>
|
|
<el-table-column label="类型" prop="type" min-width="200">
|
|
<template #default="scope">
|
|
<span>{{types[scope.row.type]}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="代号" prop="codes" min-width="200"></el-table-column>
|
|
<el-table-column label="排序" prop="sort" min-width="200"></el-table-column>
|
|
<el-table-column label="操作" fixed="right" align="center" width="200">
|
|
<template #default="scope">
|
|
<el-button text type="primary" size="small" @click="editMenu(scope.row, scope.$index)">编辑</el-button>
|
|
<el-divider direction="vertical"></el-divider>
|
|
<el-button text type="danger" size="small" @click="delMenu(scope.row.id)">删除</el-button>
|
|
<!--<el-popconfirm title="确定删除吗？" @confirm="delMenu(scope.row, scope.$index)">
|
|
<template #reference>
|
|
<el-button type="text" size="small">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>-->
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
|
|
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="right">
|
|
<el-form-item label="类型" prop="type">
|
|
<el-radio-group v-model="addForm.type">
|
|
<el-radio :label="10">目录</el-radio>
|
|
<el-radio :label="20">菜单</el-radio>
|
|
<el-radio :label="30">按钮</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="名称" prop="name">
|
|
<el-input v-model="addForm.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="标识">
|
|
<el-input v-model="codes" clearable style="width: 90%;"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="父级">
|
|
<el-cascader
|
|
v-model="addForm.parent"
|
|
:options="group"
|
|
:props="groupsProps"
|
|
:show-all-levels="false"
|
|
clearable
|
|
style="width: 100%"
|
|
@change="handleChange"
|
|
></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="排序">
|
|
<el-input-number v-model="addForm.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="limitedVisible=false">取 消</el-button>
|
|
<el-button type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'dept',
|
|
data() {
|
|
return {
|
|
dialog: {
|
|
save: false,
|
|
permission: false
|
|
},
|
|
apiObj: this.$API.system.permission.list,
|
|
selection: [],
|
|
search: {
|
|
keyword: null
|
|
},
|
|
params: {
|
|
page: 0
|
|
},
|
|
isSaving: false,
|
|
codesLimited: false,
|
|
limitedVisible: false,
|
|
type: "add",
|
|
codes:'',
|
|
titleMap: {
|
|
add: '新增',
|
|
edit: '编辑',
|
|
},
|
|
|
|
//表单数据
|
|
addForm: {
|
|
id: "",
|
|
name: "",
|
|
codes:[],
|
|
type: 10,
|
|
sort: 1,
|
|
parent: null,
|
|
},
|
|
//验证规则
|
|
rules: {
|
|
name: [
|
|
{required: true, message: '请输入名称'}
|
|
],
|
|
type: [
|
|
{required: true, message: '请选择类型'}
|
|
],
|
|
},
|
|
types:{
|
|
10:'目录',
|
|
20:'菜单',
|
|
30:'按钮',
|
|
},
|
|
groupsProps: {
|
|
value: "id",
|
|
multiple: false,
|
|
checkStrictly: true,
|
|
},
|
|
group: [],
|
|
permList: [],
|
|
permCodes: [],
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.getGroup();
|
|
this.getPermCodes();
|
|
},
|
|
methods: {
|
|
getPermCodes(){
|
|
this.permCodes = this.$API.system.permission.codes.req();
|
|
},
|
|
handleChange(value) {
|
|
// this.menu.checked = check.checkedKeys;
|
|
debugger;
|
|
console.log(value);
|
|
console.log(this.addForm.parent);
|
|
},
|
|
//加载树数据
|
|
async getGroup() {
|
|
var res = await this.$API.system.permission.list.req({page: 0});
|
|
debugger;
|
|
let permList = res;
|
|
this.permList = res;
|
|
let posts = [];
|
|
permList.forEach(item => {
|
|
let obj = new Object();
|
|
obj.id = item.id;
|
|
obj.label = item.name;
|
|
obj.parent = item.parent;
|
|
posts.push(obj)
|
|
});
|
|
let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
|
|
let arr = [];
|
|
for (let item of posts) {
|
|
if (item.parent == null) {
|
|
arr.push(item);
|
|
continue
|
|
}
|
|
let parent = obj[item.parent];
|
|
parent.children = parent.children ? parent.children : [];
|
|
parent.children.push(item);
|
|
}
|
|
debugger;
|
|
this.group = arr;
|
|
},
|
|
|
|
//添加
|
|
addDept() {
|
|
this.type = 'add';
|
|
this.limitedVisible = true;
|
|
},
|
|
addCodes(){
|
|
this.codesLimited = true;
|
|
},
|
|
saveCodes(){
|
|
debugger;console.log(this.addForm.codes);
|
|
this.addForm.codes.push(this.codes);
|
|
this.codes = ''
|
|
},
|
|
delCodes(){
|
|
this.codesLimited = false;
|
|
this.codes = ''
|
|
},
|
|
//编辑
|
|
editMenu(row) {
|
|
// debugger;
|
|
this.type = 'edit';
|
|
this.addForm.id = row.id;
|
|
this.addForm.name = row.name;
|
|
debugger;
|
|
console.log(row.codes);
|
|
this.codes = row.codes.join(',');
|
|
let parent = row.parent!==null?this.findParents(this.permList, row.parent):'';
|
|
this.addForm.parent = parent;
|
|
this.addForm.type = row.type ;
|
|
/*debugger;
|
|
console.log(row.type);
|
|
console.log(this.addForm.type);*/
|
|
this.addForm.sort = row.sort;
|
|
this.limitedVisible = true;
|
|
},
|
|
findParents(arr, parent) {
|
|
debugger;
|
|
let data = [];
|
|
arr.forEach(item => {
|
|
if (item.id === parent) {
|
|
data.unshift(item.id);
|
|
if (item.parent !== null) {
|
|
this.findParents(arr, item.parent)
|
|
} else {
|
|
return data
|
|
}
|
|
}
|
|
});
|
|
debugger;
|
|
return data
|
|
},
|
|
//删除
|
|
delMenu(id) {
|
|
this.$confirm(`确定删除吗？`, '提示', {
|
|
type: 'warning',
|
|
confirmButtonText: '删除',
|
|
confirmButtonClass: 'el-button--danger'
|
|
}).then(() => {
|
|
this.$API.system.permission.delete.req(id).then(res=>{
|
|
if(res.err_msg){
|
|
this.$message.error(res.err_msg);
|
|
this.$refs.table.refresh()
|
|
}else{
|
|
this.$message.success("操作成功");
|
|
}
|
|
});
|
|
})
|
|
},
|
|
submitHandle() {
|
|
let that = this;
|
|
if (this.addForm.parent !== null) {
|
|
this.addForm.parent = this.addForm.parent[this.addForm.parent.length - 1];
|
|
} else {
|
|
this.addForm.parent = ""
|
|
}
|
|
if(this.codes.indexOf(','>-1)){
|
|
this.addForm.codes = this.codes.split(',');
|
|
}else{
|
|
this.addForm.codes.push(this.codes)
|
|
}
|
|
this.$refs.addForm.validate((valid) => {
|
|
debugger;
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
var res;
|
|
if (this.type === 'add') {
|
|
res = this.$API.system.permission.create.req(that.addForm);
|
|
} else {
|
|
res = this.$API.system.permission.update.req(that.addForm.id, that.addForm);
|
|
}
|
|
console.log(res);
|
|
debugger;
|
|
if(res.err_msg){
|
|
this.$message.error(res.err_msg)
|
|
}else{
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection) {
|
|
this.selection = selection;
|
|
},
|
|
//搜索
|
|
upsearch() {
|
|
let params = {search:this.search.keyword};
|
|
this.$refs.table.queryData(params);
|
|
},
|
|
//本地更新数据
|
|
handleSaveSuccess(data, mode) {
|
|
if (mode == 'add') {
|
|
this.$refs.table.refresh()
|
|
} else if (mode == 'edit') {
|
|
this.$refs.table.refresh()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.formAddButton{
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
border-radius: 16px;
|
|
position: absolute;
|
|
right: 0;
|
|
top : 0
|
|
}
|
|
.formSaveButton,.formDelButton{
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
left: 20px;
|
|
top : 0
|
|
}
|
|
.formDelButton{
|
|
left: 60px;
|
|
}
|
|
</style>
|