<template>
<div class="dept-manage">
<div class="query-form">
<el-form :inline="true" ref="queryForm" :model="queryForm">
<el-form-item label="部门名称">
<el-input
placeholder="请输入部门名称"
v-model="queryForm.deptName"
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDeptList" type="primary">查询</el-button>
<el-button @click="handleReset('queryForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="base-table">
<div class="action">
<el-button type="primary" @click="handleOpen">创建</el-button>
</div>
<el-table
:data="deptList"
row-key="_id"
:tree-props="{ children: 'children' }"
stripe
>
<el-table-column
v-for="item in columns"
:key="item.prop"
v-bind="item"
></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDel(scope.row._id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
:title="action == 'create' ? '创建部门' : '编辑部门'"
v-model="showModal"
>
<el-form
ref="dialogForm"
:model="deptForm"
:rules="rules"
label-width="120px"
>
<el-form-item label="上级部门" prop="parentId">
<el-cascader
placeholder="请选择上级部门"
v-model="deptForm.parentId"
:props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
clearable
:options="deptList"
:show-all-levels="true"
></el-cascader>
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input
placeholder="请输入部门名称"
v-model="deptForm.deptName"
></el-input>
</el-form-item>
<el-form-item label="负责人" prop="user">
<el-select
placeholder="请选择部门负责人"
v-model="deptForm.user"
@change="handleUser"
>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="`${item.userId}/${item.userName}/${item.userEmail}`"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="负责人邮箱" prop="userEmail">
<el-input
placeholder="请输入负责人邮箱"
v-model="deptForm.userEmail"
disabled
></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button @click="handleSubmit" type="primary">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "dept",
data() {
return {
queryForm: {
deptName: "",
},
columns: [
{
label: "部门名称",
prop: "deptName",
},
{
label: "负责人",
prop: "userName",
},
{
label: "更新时间",
prop: "updateTime",
},
{
label: "创建时间",
prop: "createTime",
},
],
deptList: [],
pager: {
pageNum: 1,
pageSize: 10,
},
action: "create",
showModal: false,
deptForm: {
parentId: [null],
},
userList: [],
rules: {
parentId: [
{
required: true,
message: "请选择上级部门",
trigger: "blur",
},
],
deptName: [
{
required: true,
message: "请输入部门名称",
trigger: "blur",
},
],
user: [
{
required: true,
message: "请选择负责人",
trigger: "blur",
},
],
},
};
},
mounted() {
this.getDeptList();
this.getAllUserList();
},
methods: {
async getDeptList() {
let list = await this.$api.getDeptList(this.queryForm);
this.deptList = list;
},
async getAllUserList() {
this.userList = await this.$api.getAllUserList();
},
handleUser(val) {
console.log("=>", val);
const [userId, userName, userEmail] = val.split("/");
Object.assign(this.deptForm, { userId, userName, userEmail });
},
handleReset(form) {
this.$refs[form].resetFields();
},
handleOpen() {
this.action = "create";
this.showModal = true;
},
handleEdit(row) {
this.action = "edit";
this.showModal = true;
this.$nextTick(() => {
Object.assign(this.deptForm, row, {
user: `${row.userId}/${row.userName}/${row.userEmail}`,
});
});
},
async handleDel(_id) {
this.action = "delete";
await this.$api.deptOperate({ _id, action: this.action });
this.$message.success("删除成功");
this.getDeptList();
},
handleClose() {
this.showModal = false;
this.handleReset("dialogForm");
},
handleSubmit() {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
let params = { ...this.deptForm, action: this.action };
delete params.user;
await this.$api.deptOperate(params);
this.$message.success("操作成功");
this.handleClose();
this.getDeptList();
}
});
},
},
};
</script>
deptSchema.js
const mongoose = require('mongoose')
const deptSchema = mongoose.Schema({
deptName: String,
userId: String,
userName: String,
userEmail: String,
parentId: [mongoose.Types.ObjectId],
updateTime: {
type: Date,
default: Date.now()
},
createTime: {
type: Date,
default: Date.now()
},
})
module.exports = mongoose.model("depts", deptSchema, "depts")
depts.js
const router = require('koa-router')()
const util = require('./../utils/util')
const Dept = require('./../models/deptSchema')
router.prefix('/dept')
// 部门树形列表
router.get('/list', async (ctx) => {
let { deptName } = ctx.request.query;
let params = {}
if (deptName) params.deptName = deptName;
let rootList = await Dept.find(params)
if (deptName) {
ctx.body = util.success(rootList);
} else {
let tressList = getTreeDept(rootList, null, [])
ctx.body = util.success(tressList)
}
})
// 递归拼接树形列表
function getTreeDept(rootList, id, list) {
for (let i = 0; i < rootList.length; i++) {
let item = rootList[i]
if (String(item.parentId.slice().pop()) == String(id)) {
list.push(item._doc)
}
}
list.map(item => {
item.children = []
getTreeDept(rootList, item._id, item.children)
if (item.children.length == 0) {
delete item.children;
}
})
return list;
}
// 部门操作：创建、编辑、删除
router.post('/operate', async (ctx) => {
const { _id, action, ...params } = ctx.request.body;
let res, info;
try {
if (action == 'create') {
await Dept.create(params)
info = "创建成功"
} else if (action == 'edit') {
params.updateTime = new Date()
await Dept.findByIdAndUpdate(_id, params)
info = "编辑成功"
} else if (action == 'delete') {
await Dept.findByIdAndRemove(_id)
await Dept.deleteMany({ parentId: { $all: [_id] } })
info = "删除成功"
}
ctx.body = util.success('', info)
} catch (error) {
ctx.body = util.fail(error.stack)
}
})
module.exports = router;
// 获取全量用户列表
router.get('/all/list', async (ctx) => {
try {
const list = await User.find({}, "userId userName userEmail")
ctx.body = util.success(list)
} catch (error) {
ctx.body = util.fail(error.stack)
}
})
