移除一些造成编译错误的页面
This commit is contained in:
洛洛希雅
parent
bb9062f191
commit
291dbff80d
|
|
@ -1,313 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-drawer v-model="drawer" :title="title" :before-close="close">
|
|
||||||
<div v-loading="loading" class="drawer__content">
|
|
||||||
<el-tabs
|
|
||||||
v-model="activeName"
|
|
||||||
style="flex: 1; overflow: scroll"
|
|
||||||
:stretch="true"
|
|
||||||
>
|
|
||||||
<el-tab-pane label="组" :name="0">
|
|
||||||
<el-form
|
|
||||||
ref="menu"
|
|
||||||
:model="form"
|
|
||||||
:rules="menuRules"
|
|
||||||
label-width="80px"
|
|
||||||
>
|
|
||||||
<el-form-item label="组名称" prop="title">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.title"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入组名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组路由" prop="path">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.path"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入组路由"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组图标" prop="icon">
|
|
||||||
<icon-selector v-model="form.icon"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组排序" prop="order">
|
|
||||||
<el-input-number
|
|
||||||
v-model="form.order"
|
|
||||||
:min="0"
|
|
||||||
label="序号"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="菜单" :name="1">
|
|
||||||
<el-form
|
|
||||||
ref="submenu"
|
|
||||||
:model="form"
|
|
||||||
:rules="submenuRules"
|
|
||||||
label-width="80px"
|
|
||||||
>
|
|
||||||
<el-form-item label="菜单名称" prop="title">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.title"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入菜单名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单路由" prop="path">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.path"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入菜单路由"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="上级菜单" prop="parentId">
|
|
||||||
<el-select
|
|
||||||
ref="singleTree"
|
|
||||||
v-model="form.parentTitle"
|
|
||||||
placeholder="请选择上级菜单"
|
|
||||||
class="vab-tree-select"
|
|
||||||
clearable
|
|
||||||
popper-class="select-tree-popper"
|
|
||||||
value-key="id"
|
|
||||||
@clear="selectTreeClearHandle()"
|
|
||||||
>
|
|
||||||
<el-option :value="form.parentId">
|
|
||||||
<el-tree
|
|
||||||
id="singleSelectTree"
|
|
||||||
ref="singleSelectTree"
|
|
||||||
:current-node-key="form.parentId"
|
|
||||||
:data="menuData"
|
|
||||||
:default-expanded-keys="selectTreeDefaultSelectedKeys"
|
|
||||||
:highlight-current="true"
|
|
||||||
:props="selectTreeDefaultProps"
|
|
||||||
node-key="id"
|
|
||||||
@node-click="selectTreeNodeClick"
|
|
||||||
>
|
|
||||||
<template #defalut="{ node }">
|
|
||||||
<span class="vab-tree-item">
|
|
||||||
<i :class="'bi bi-' + node.icon" />
|
|
||||||
{{ node.label }}</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="组件路径" prop="component">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.component"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入组件路径"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单图标" prop="icon">
|
|
||||||
<icon-selector v-model="form.icon"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单排序" prop="order">
|
|
||||||
<el-input-number
|
|
||||||
v-model="form.order"
|
|
||||||
:min="0"
|
|
||||||
label="序号"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<div class="drawer__footer">
|
|
||||||
<el-button size="default" @click="close(true)">取 消</el-button>
|
|
||||||
<el-button size="default" type="primary" @click="save">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { doAdd, doUpdate } from "@/api/menuManagement";
|
|
||||||
import { allIcons } from "@/utils/common-util";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "MenuManagementEdit",
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
// 单选树的值
|
|
||||||
menuData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeName: 0,
|
|
||||||
iconList: [],
|
|
||||||
/* 单选树---------开始 */
|
|
||||||
selectTreeDefaultSelectedKeys: [], //单选树默认展开的key值数组
|
|
||||||
selectTreeDefaultProps: {
|
|
||||||
children: "children",
|
|
||||||
label: "title"
|
|
||||||
},
|
|
||||||
/* 单选树---------结束 */
|
|
||||||
|
|
||||||
form: {
|
|
||||||
title: "",
|
|
||||||
icon: "",
|
|
||||||
path: "",
|
|
||||||
parentId: "",
|
|
||||||
component: "",
|
|
||||||
|
|
||||||
parentTitle: "",
|
|
||||||
// 排序
|
|
||||||
order: 0,
|
|
||||||
type: ""
|
|
||||||
},
|
|
||||||
menuRules: {
|
|
||||||
path: [{ required: true, trigger: "blur", message: "请输入路由" }],
|
|
||||||
title: [{ required: true, trigger: "blur", message: "请输入标题" }],
|
|
||||||
icon: [{ required: true, trigger: "blur", message: "请选择图标" }]
|
|
||||||
},
|
|
||||||
submenuRules: {
|
|
||||||
path: [{ required: true, trigger: "blur", message: "请输入路由" }],
|
|
||||||
title: [{ required: true, trigger: "blur", message: "请输入标题" }],
|
|
||||||
component: [
|
|
||||||
{ required: true, trigger: "blur", message: "请输入组件路径" }
|
|
||||||
],
|
|
||||||
parentId: [
|
|
||||||
{ required: true, trigger: "blur", message: "请选择上级菜单" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
formBackup: {
|
|
||||||
title: "",
|
|
||||||
icon: "",
|
|
||||||
path: "",
|
|
||||||
parentId: "",
|
|
||||||
component: "",
|
|
||||||
|
|
||||||
parentTitle: "",
|
|
||||||
// 排序
|
|
||||||
order: 0,
|
|
||||||
type: ""
|
|
||||||
},
|
|
||||||
title: "",
|
|
||||||
loading: false,
|
|
||||||
drawer: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getIconList();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getIconList() {
|
|
||||||
this.iconList = allIcons().map(it => ({ value: it, label: it }));
|
|
||||||
},
|
|
||||||
showEdit(row) {
|
|
||||||
if (!row) {
|
|
||||||
this.title = "添加";
|
|
||||||
} else {
|
|
||||||
this.title = "编辑";
|
|
||||||
this.activeName = row.type;
|
|
||||||
this.form = Object.assign({}, row);
|
|
||||||
}
|
|
||||||
this.loading = true;
|
|
||||||
this.drawer = true;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.formBackup = Object.assign({}, this.form);
|
|
||||||
this.initSingleTree();
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading = false;
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
// 初始化单选树的值
|
|
||||||
async initSingleTree() {
|
|
||||||
if (this.form.parentId) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.selectTreeDefaultSelectedKeys = [this.form.parentId]; // 设置默认展开
|
|
||||||
//单选树
|
|
||||||
this.$refs.singleSelectTree.setCurrentKey(this.form.parentId); // 设置默认选中
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 清除单选树选中
|
|
||||||
selectTreeClearHandle() {
|
|
||||||
this.selectTreeDefaultSelectedKeys = [];
|
|
||||||
this.clearSelected();
|
|
||||||
this.form.parentTitle = "";
|
|
||||||
this.form.parentId = "";
|
|
||||||
this.$refs.singleSelectTree.setCurrentKey(""); // 设置默认选中
|
|
||||||
},
|
|
||||||
// 清空选中样式
|
|
||||||
clearSelected() {
|
|
||||||
const allNode = document.querySelectorAll(
|
|
||||||
"#singleSelectTree .el-tree-node"
|
|
||||||
);
|
|
||||||
allNode.forEach((element) => element.classList.remove("is-current"));
|
|
||||||
},
|
|
||||||
// 点击叶子节点
|
|
||||||
selectTreeNodeClick(data, node, el) {
|
|
||||||
this.form.parentTitle = data.title;
|
|
||||||
this.form.parentId = data.id;
|
|
||||||
this.$refs.singleTree.blur();
|
|
||||||
},
|
|
||||||
async close(confirm) {
|
|
||||||
if (this.loading) return;
|
|
||||||
const compare =
|
|
||||||
JSON.stringify(this.form) !== JSON.stringify(this.formBackup);
|
|
||||||
if (confirm && compare) {
|
|
||||||
const rs = await elConfirmNoCancelBtn(null, "编辑数据将会清空，确认退出？");
|
|
||||||
if (rs !== "confirm") return;
|
|
||||||
this.resetDrawer();
|
|
||||||
} else {
|
|
||||||
this.resetDrawer();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resetDrawer() {
|
|
||||||
this.$refs["menu"].resetFields();
|
|
||||||
this.$refs["submenu"].resetFields();
|
|
||||||
this.form = this.$options.data().form;
|
|
||||||
this.formBackup = this.$options.data().formBackup;
|
|
||||||
this.drawer = false;
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
const whichForm = this.activeName === "0" ? "menu" : "submenu";
|
|
||||||
this.$refs[whichForm].validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
let msg;
|
|
||||||
this.form.type = Number(this.activeName);
|
|
||||||
if (this.title === "添加") {
|
|
||||||
const resp = await doAdd(this.form);
|
|
||||||
msg = resp.msg;
|
|
||||||
} else {
|
|
||||||
const resp = await doUpdate(this.form);
|
|
||||||
msg = resp.msg;
|
|
||||||
}
|
|
||||||
elMessage(msg, "success");
|
|
||||||
this.$emit("fetch-data");
|
|
||||||
this.close(false);
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.drawer__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
form {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer__footer {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
button {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,143 +0,0 @@
|
||||||
<template>
|
|
||||||
<app-page class="menuManagement-container">
|
|
||||||
<!-- <vab-query-form>-->
|
|
||||||
<!-- <vab-query-form-left-panel :span="4">-->
|
|
||||||
<!-- <last-breadcrumb class="page-breadcrumb"/>-->
|
|
||||||
<!-- </vab-query-form-left-panel>-->
|
|
||||||
<!-- <vab-query-form-right-panel :span="20">-->
|
|
||||||
<!-- </vab-query-form-right-panel>-->
|
|
||||||
<!-- </vab-query-form>-->
|
|
||||||
<template #right>
|
|
||||||
<el-button type="primary" @click="handleEdit()">添加</el-button>
|
|
||||||
</template>
|
|
||||||
<div class="container-inner">
|
|
||||||
<el-table
|
|
||||||
v-loading="listLoading"
|
|
||||||
:data="list"
|
|
||||||
:element-loading-text="elementLoadingText"
|
|
||||||
row-key="path"
|
|
||||||
default-expand-all
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
:header-cell-style="{ background: '#F7F9FB', textAlign: 'center' }"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="meta.title"
|
|
||||||
label="标题"
|
|
||||||
style="text-align: center"
|
|
||||||
/>
|
|
||||||
<el-table-column show-overflow-tooltip label="类型" width="100">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div style="text-align: center">
|
|
||||||
<el-tag v-if="row.type === '0'" effect="dark">目录</el-tag>
|
|
||||||
<el-tag v-else type="success" effect="dark">菜单</el-tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column show-overflow-tooltip label="图标" width="150">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div style="text-align: center">
|
|
||||||
<span v-if="row.meta">
|
|
||||||
<i :class="'icon bi bi-' + row.meta.icon"/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="name"
|
|
||||||
label="name"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="path"
|
|
||||||
label="路径"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="component"
|
|
||||||
label="vue文件路径"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="redirect"
|
|
||||||
label="重定向"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="150">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<div style="display: flex; justify-content: center">
|
|
||||||
<el-button class="icon" type="primary" link @click="handleEdit(row)">
|
|
||||||
<i class="bi bi-pencil-square"/>
|
|
||||||
</el-button>
|
|
||||||
<el-button class="icon" type="primary" link @click="handleDelete(row)">
|
|
||||||
<i class="bi bi-trash"/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<edit ref="edit" :menu-data="menuData" @fetch-data="fetchData"/>
|
|
||||||
</div>
|
|
||||||
</app-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { doDelete, getTree } from '@/api/menuManagement'
|
|
||||||
import Edit from './components/MenuManagementEdit.vue'
|
|
||||||
import AppPage from "@/components/AppPage.vue";
|
|
||||||
export default {
|
|
||||||
name: 'MenuManagement',
|
|
||||||
components: { Edit, AppPage },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [],
|
|
||||||
defaultProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'label',
|
|
||||||
},
|
|
||||||
list: [],
|
|
||||||
listLoading: true,
|
|
||||||
elementLoadingText: '正在加载...',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
menuData() {
|
|
||||||
return this.list
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleEdit(row) {
|
|
||||||
if (row) {
|
|
||||||
this.$refs['edit'].showEdit(row)
|
|
||||||
} else {
|
|
||||||
this.$refs['edit'].showEdit()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async handleDelete(row) {
|
|
||||||
if (row.id) {
|
|
||||||
const rs = await elConfirmNoCancelBtn(null, '你确定要删除当前项吗')
|
|
||||||
if (rs !== 'confirm') return;
|
|
||||||
const { msg } = await doDelete(row)
|
|
||||||
elMessage(msg, 'success')
|
|
||||||
await this.fetchData()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
this.listLoading = true
|
|
||||||
this.list = await getTree()
|
|
||||||
setTimeout(() => {
|
|
||||||
this.listLoading = false
|
|
||||||
}, 300)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.icon {
|
|
||||||
font-size: 1.5em !important;
|
|
||||||
padding: 5px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,235 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-drawer v-model="drawer" :title="title" :before-close="close">
|
|
||||||
<div v-loading="loading" class="drawer__content">
|
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
||||||
<el-form-item label="角色名称：" prop="roleName">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.roleName"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入角色名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色key：" prop="type">
|
|
||||||
<el-input
|
|
||||||
v-model.trim="form.type"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="请输入角色key"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="菜单列表：" prop="menuId">
|
|
||||||
<el-select
|
|
||||||
v-model="form.menuTitle"
|
|
||||||
class="vab-tree-select"
|
|
||||||
clearable
|
|
||||||
collapse-tags
|
|
||||||
multiple
|
|
||||||
popper-class="select-tree-popper"
|
|
||||||
@clear="selectTreeClearHandle()"
|
|
||||||
@remove-tag="removeSelectTreeTag"
|
|
||||||
>
|
|
||||||
<!-- <el-select-->
|
|
||||||
<!-- v-model="form.menuTitle"-->
|
|
||||||
<!-- class="vab-tree-select"-->
|
|
||||||
<!-- clearable-->
|
|
||||||
<!-- multiple-->
|
|
||||||
<!-- popper-class="select-tree-popper"-->
|
|
||||||
<!-- @clear="selectTreeClearHandle()"-->
|
|
||||||
<!-- @remove-tag="removeSelectTreeTag"-->
|
|
||||||
<!-- >-->
|
|
||||||
<el-option :value="form.menuId" style="height: 250px; overflow: auto; background-color: white">
|
|
||||||
<el-tree
|
|
||||||
id="multipleSelectTree"
|
|
||||||
ref="multipleSelectTree"
|
|
||||||
:data="menu"
|
|
||||||
:default-expanded-keys="form.menuId"
|
|
||||||
:highlight-current="true"
|
|
||||||
:props="selectTreeDefaultProps"
|
|
||||||
node-key="id"
|
|
||||||
show-checkbox
|
|
||||||
@check="multipleSelectTreeCheckNode"
|
|
||||||
/>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="drawer__footer">
|
|
||||||
<el-button size="default" @click="close(true)">取 消</el-button>
|
|
||||||
<el-button size="default" type="primary" @click="save">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { doAdd, doUpdate } from "@/api/roleManagement";
|
|
||||||
import { getTree } from "@/api/menuManagement";
|
|
||||||
import { delay } from "@/utils/common-util";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "RoleManagementEdit",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
roleName: "",
|
|
||||||
type: "",
|
|
||||||
menuId: [],
|
|
||||||
menuTitle: []
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
roleName: [
|
|
||||||
{ required: true, trigger: "blur", message: "请输入角色名称" }
|
|
||||||
],
|
|
||||||
menuId: [{ required: true, trigger: "blur", message: "请选择菜单" }]
|
|
||||||
},
|
|
||||||
formBackup: {
|
|
||||||
roleName: "",
|
|
||||||
type: "",
|
|
||||||
menuId: [],
|
|
||||||
menuTitle: []
|
|
||||||
},
|
|
||||||
title: "",
|
|
||||||
loading: false,
|
|
||||||
drawer: false,
|
|
||||||
|
|
||||||
/* 单选树-多选树---------开始 */
|
|
||||||
menu: [],
|
|
||||||
selectTreeDefaultProps: {
|
|
||||||
children: "children",
|
|
||||||
label: "title"
|
|
||||||
}
|
|
||||||
/* 单选树-多选树---------结束 */
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/* 单选/多选树方法-------------------开始 */
|
|
||||||
// 初始化单选树的值
|
|
||||||
async initSingleTree() {
|
|
||||||
this.menu = await getTree();
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// 多选树
|
|
||||||
this.form.menuId.forEach((item) => {
|
|
||||||
const node = this.$refs.multipleSelectTree.getNode(item);
|
|
||||||
if (node && node.isLeaf) {
|
|
||||||
this.$refs.multipleSelectTree.setChecked(node, true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 清除单选树选中
|
|
||||||
selectTreeClearHandle() {
|
|
||||||
this.form.menuTitle = [];
|
|
||||||
this.form.menuId = [];
|
|
||||||
this.$refs.multipleSelectTree.setCheckedKeys([]);
|
|
||||||
},
|
|
||||||
// select多选时移除某项操作
|
|
||||||
removeSelectTreeTag(val) {
|
|
||||||
const stack = JSON.parse(JSON.stringify(this.menu));
|
|
||||||
while (stack.length) {
|
|
||||||
const curr = stack.shift();
|
|
||||||
if (curr.title == val) {
|
|
||||||
this.form.menuId.splice(this.form.menuId.indexOf(curr.id), 1);
|
|
||||||
return this.$refs.multipleSelectTree.setChecked(curr.id, false);
|
|
||||||
}
|
|
||||||
if (curr.children && curr.children.length) {
|
|
||||||
stack.unshift(...curr.children);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 节点选中操作
|
|
||||||
multipleSelectTreeCheckNode(data, node, el) {
|
|
||||||
const checkedNodes = this.$refs.multipleSelectTree.getCheckedNodes();
|
|
||||||
const halfCheckedNodes =
|
|
||||||
this.$refs.multipleSelectTree.getHalfCheckedNodes();
|
|
||||||
const allNodes = checkedNodes.concat(halfCheckedNodes);
|
|
||||||
const keyArr = [];
|
|
||||||
const valueArr = [];
|
|
||||||
allNodes.forEach((item) => {
|
|
||||||
keyArr.push(item.id);
|
|
||||||
valueArr.push(item.title);
|
|
||||||
});
|
|
||||||
this.form.menuTitle = valueArr;
|
|
||||||
this.form.menuId = keyArr;
|
|
||||||
},
|
|
||||||
/* 单选/多选树方法-------------------结束 */
|
|
||||||
|
|
||||||
showEdit(row) {
|
|
||||||
if (!row) {
|
|
||||||
this.title = "添加";
|
|
||||||
} else {
|
|
||||||
this.title = "编辑";
|
|
||||||
this.form = Object.assign({}, row);
|
|
||||||
}
|
|
||||||
this.loading = true;
|
|
||||||
this.drawer = true;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.formBackup = Object.assign({}, this.form);
|
|
||||||
this.initSingleTree();
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading = false;
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
async close(confirm) {
|
|
||||||
if (this.loading) return;
|
|
||||||
const compare =
|
|
||||||
JSON.stringify(this.form) !== JSON.stringify(this.formBackup);
|
|
||||||
if (confirm && compare) {
|
|
||||||
const rs = await elConfirmNoCancelBtn(null,
|
|
||||||
"编辑数据将会清空，确认退出？"
|
|
||||||
);
|
|
||||||
if (rs !== "confirm") return;
|
|
||||||
this.resetDrawer();
|
|
||||||
} else {
|
|
||||||
this.resetDrawer();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resetDrawer() {
|
|
||||||
this.$refs["form"].resetFields();
|
|
||||||
this.form = this.$options.data().form;
|
|
||||||
this.formBackup = this.$options.data().formBackup;
|
|
||||||
this.drawer = false;
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
this.$refs["form"].validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
let msg;
|
|
||||||
if (this.title === "添加") {
|
|
||||||
const resp = await doAdd(this.form);
|
|
||||||
msg = resp.msg;
|
|
||||||
} else {
|
|
||||||
const resp = await doUpdate(this.form);
|
|
||||||
msg = resp.msg;
|
|
||||||
}
|
|
||||||
elMessage(msg, "success");
|
|
||||||
this.$emit("fetch-data");
|
|
||||||
this.close(false);
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.drawer__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
form {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer__footer {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
button {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,197 +0,0 @@
|
||||||
<template>
|
|
||||||
<app-page class="roleManagement-container">
|
|
||||||
<template #right>
|
|
||||||
<el-form :inline="true" :model="queryForm" class="nav" @submit.prevent>
|
|
||||||
<el-form-item>
|
|
||||||
<el-input
|
|
||||||
v-model.trim="queryForm.roleName"
|
|
||||||
placeholder="请输入查询条件"
|
|
||||||
@keyup.enter="queryData"
|
|
||||||
>
|
|
||||||
<template #suffix>
|
|
||||||
<i
|
|
||||||
class="el-icon-search el-input__icon i-search"
|
|
||||||
@click="queryData"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="handleEdit">添加</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item>-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- icon="el-icon-delete"-->
|
|
||||||
<!-- type="danger"-->
|
|
||||||
<!-- @click="handleDestroy"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- 批量删除-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
<div class="container-inner">
|
|
||||||
<el-table
|
|
||||||
v-loading="listLoading"
|
|
||||||
:data="list"
|
|
||||||
:element-loading-text="elementLoadingText"
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
:header-cell-style="{ background: '#F7F9FB', textAlign: 'center' }"
|
|
||||||
:cell-style="{ textAlign: 'center' }"
|
|
||||||
@selection-change="setSelectRows"
|
|
||||||
>
|
|
||||||
<!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column>-->
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
width="120"
|
|
||||||
prop="id"
|
|
||||||
label="id"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
width="200"
|
|
||||||
prop="roleName"
|
|
||||||
label="角色名称"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
width="200"
|
|
||||||
prop="type"
|
|
||||||
label="角色类型"
|
|
||||||
/>
|
|
||||||
<el-table-column show-overflow-tooltip label="菜单列表">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span>{{ row.menuTitle.toString() }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="200">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button class="icon" type="primary" link @click="handleEdit(row)">
|
|
||||||
<i class="bi bi-pencil-square" />
|
|
||||||
</el-button>
|
|
||||||
<el-button class="icon" type="primary" link @click="handleDestroy(row)">
|
|
||||||
<i class="bi bi-trash" />
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
:current-page="queryForm.pageNo"
|
|
||||||
:page-size="queryForm.pageSize"
|
|
||||||
:layout="layout"
|
|
||||||
:total="total"
|
|
||||||
style="justify-content: center"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
<edit ref="edit" @fetch-data="fetchData" />
|
|
||||||
</div>
|
|
||||||
</app-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { doDelete, getList } from "@/api/roleManagement";
|
|
||||||
import Edit from "./components/RoleManagementEdit.vue";
|
|
||||||
import AppPage from "@/components/AppPage.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "RoleManagement",
|
|
||||||
components: { Edit, AppPage },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: null,
|
|
||||||
listLoading: true,
|
|
||||||
layout: "total, sizes, prev, pager, next, jumper",
|
|
||||||
total: 0,
|
|
||||||
selectRows: "",
|
|
||||||
elementLoadingText: "正在加载...",
|
|
||||||
queryForm: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
roleName: ""
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setSelectRows(val) {
|
|
||||||
this.selectRows = val;
|
|
||||||
},
|
|
||||||
handleEdit(row) {
|
|
||||||
if (row.id) {
|
|
||||||
this.$refs["edit"].showEdit(row);
|
|
||||||
} else {
|
|
||||||
this.$refs["edit"].showEdit();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async handleDestroy(row) {
|
|
||||||
// if (row.id) {
|
|
||||||
// this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
|
||||||
// const { msg } = await doDelete({ ids: row.id })
|
|
||||||
// this.$baseMessage(msg, 'success')
|
|
||||||
// this.fetchData()
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// if (this.selectRows.length > 0) {
|
|
||||||
// const ids = this.selectRows.map((item) => item.id).join()
|
|
||||||
// this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
|
||||||
// const { msg } = await doDelete({ ids })
|
|
||||||
// this.$baseMessage(msg, 'success')
|
|
||||||
// this.fetchData()
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// this.$baseMessage('未选中任何行', 'error')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
const rs = await elConfirmNoCancelBtn(null, "你确定要删除当前项吗");
|
|
||||||
if (rs !== "confirm") return;
|
|
||||||
const { msg } = await doDelete({
|
|
||||||
id: row.id
|
|
||||||
});
|
|
||||||
elMessage(msg, "success");
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.queryForm.pageSize = val;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.queryForm.pageNo = val;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
queryData() {
|
|
||||||
this.queryForm.pageNo = 1;
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
this.listLoading = true;
|
|
||||||
const { data } = await getList(this.queryForm);
|
|
||||||
this.list = data.rows;
|
|
||||||
this.total = data.total;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.listLoading = false;
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.nav > * {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-right: 1em;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 1.5em !important;
|
|
||||||
padding: 5px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user