329 lines
8.4 KiB
Vue
329 lines
8.4 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="addMenu"
|
|
></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable
|
|
ref="table"
|
|
:isTree="true"
|
|
: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">
|
|
<template #default="scope">
|
|
<el-tag v-for="i in scope.row.codes" v-bind:key="i">{{ i }}</el-tag>
|
|
</template>
|
|
</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 link 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-select
|
|
v-model="addForm.codes"
|
|
multiple
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
:reserve-keyword="false"
|
|
placeholder="权限标识(回车添加多个)"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in permCodes"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</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>
|
|
import { genTree } from "@/utils/verificate";
|
|
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,
|
|
limitedVisible: false,
|
|
type: "add",
|
|
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,
|
|
emitPath: 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 });
|
|
this.group = genTree(res);
|
|
},
|
|
|
|
//添加
|
|
addMenu() {
|
|
this.type = "add";
|
|
this.limitedVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.addForm.resetFields();
|
|
});
|
|
},
|
|
//编辑
|
|
editMenu(row) {
|
|
this.type = "edit";
|
|
this.addForm = Object.assign({}, row);
|
|
this.limitedVisible = true;
|
|
},
|
|
|
|
//删除
|
|
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;
|
|
this.$refs.addForm.validate((valid) => {
|
|
// debugger;
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
var res;
|
|
if (this.type === "add") {
|
|
this.$API.system.permission.create
|
|
.req(that.addForm)
|
|
.then((res) => {
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
})
|
|
.catch((e) => {
|
|
this.isSaveing = false;
|
|
});
|
|
} else {
|
|
this.$API.system.permission.update
|
|
.req(that.addForm.id, that.addForm)
|
|
.then((res) => {
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
})
|
|
.catch((e) => {
|
|
this.isSaveing = false;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//表格选择后回调事件
|
|
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>
|