|
|
@@ -1,30 +1,38 @@
|
|
|
-<!--suppress ALL -->
|
|
|
<template>
|
|
|
- <div style="width: 550px">
|
|
|
- <el-tree
|
|
|
- :data="menus"
|
|
|
- :render-content="renderContent"
|
|
|
- :highlight-current="true"
|
|
|
- :expand-on-click-node="false"
|
|
|
- node-key="id"
|
|
|
- default-expand-all>
|
|
|
- </el-tree>
|
|
|
- <el-button size="mini" type="text" @click="addRootMenu" style="margin-left: 24px">添加</el-button>
|
|
|
- <el-dialog :visible.sync="dialogVisible" title="添加菜单">
|
|
|
- <el-form :model="menu" ref="form" size="small">
|
|
|
- <el-form-item label="部门名称" prop="departName" :rules="[{required: true, message: '请填写部门名', trigger: 'blur'}]">
|
|
|
- <el-input v-model="menu.departName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="部门代码" prop="departCode">
|
|
|
- <el-input v-model="menu.departCode"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer">
|
|
|
- <el-button @click="dialogVisible = false" size="small">取消</el-button>
|
|
|
- <el-button type="primary" @click="addMenu" :loading="loading" size="small">保存</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <el-container class="container">
|
|
|
+ <el-aside class="depart-tree" style="width: 400px;">
|
|
|
+ <el-tree
|
|
|
+ :data="menus"
|
|
|
+ :render-content="renderContent"
|
|
|
+ :highlight-current="true"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="nodeClick"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all>
|
|
|
+ </el-tree>
|
|
|
+ <el-button size="mini" type="text" @click="addRootMenu" class="btn-add">添加</el-button>
|
|
|
+ </el-aside>
|
|
|
+ <el-main class="users">
|
|
|
+ <el-table :data="departUsers" :show-header="false">
|
|
|
+ <el-table-column prop="username" label="用户名"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="添加菜单">
|
|
|
+ <el-form :model="menu" ref="form" size="small">
|
|
|
+ <el-form-item label="部门名称" prop="departName"
|
|
|
+ :rules="[{required: true, message: '请填写部门名', trigger: 'blur'}]">
|
|
|
+ <el-input v-model="menu.departName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门代码" prop="departCode">
|
|
|
+ <el-input v-model="menu.departCode"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="dialogVisible = false" size="small">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addMenu" :loading="loading" size="small">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
<script>
|
|
|
import axios from 'axios'
|
|
|
@@ -42,7 +50,8 @@
|
|
|
menu: {
|
|
|
departName: '',
|
|
|
departCode: ''
|
|
|
- }
|
|
|
+ },
|
|
|
+ departUsers: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -82,7 +91,7 @@
|
|
|
}).then(res => {
|
|
|
this.loading = false;
|
|
|
if (res.success) {
|
|
|
- this.$message.success('保存成功')
|
|
|
+ this.$message.success('保存成功');
|
|
|
this.dialogVisible = false;
|
|
|
this.getData();
|
|
|
} else {
|
|
|
@@ -109,7 +118,7 @@
|
|
|
}
|
|
|
}
|
|
|
return formData;
|
|
|
- }
|
|
|
+ };
|
|
|
if (node.previousSibling) {
|
|
|
axios.all([axios.post(this.$baseUrl + '/departInfo/update', formData({
|
|
|
id: node.data.id,
|
|
|
@@ -131,7 +140,7 @@
|
|
|
}
|
|
|
}
|
|
|
return formData;
|
|
|
- }
|
|
|
+ };
|
|
|
if (node.nextSibling) {
|
|
|
axios.all([axios.post(this.$baseUrl + '/departInfo/update', formData({
|
|
|
id: node.data.id,
|
|
|
@@ -166,6 +175,18 @@
|
|
|
}).catch(() => {
|
|
|
});
|
|
|
},
|
|
|
+ nodeClick(data, node, component) {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/departInfo/departUsers',
|
|
|
+ data: {
|
|
|
+ departId: data.id
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.departUsers = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
getData() {
|
|
|
this.$http.get({
|
|
|
url: '/departInfo/departTree'
|
|
|
@@ -211,6 +232,19 @@
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ .depart-tree {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ .btn-add {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .users{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.custom-tree-node {
|
|
|
flex: 1;
|
|
|
display: flex;
|