<template>
|
<basic-container>
|
<avue-crud
|
ref="departCrud"
|
:data="tableData"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="handleRefresh"
|
@selection-change="selectChange"
|
@row-save="rowSaveHandler"
|
@row-update="rowUpdateHandler"
|
@row-del="rowDeleteHandler"
|
@current-row-change="handleCurrentRowChange"
|
>
|
<template slot="menu" slot-scope="{row,size,type}">
|
<el-button v-if="permissionList.departmentAddChildrenBtn" size="small"
|
type="text" @click="handleAdd()">
|
<icon-show :name="permissionList.departmentAddChildrenBtn.source"></icon-show>
|
新增子级
|
</el-button>
|
<el-button v-if="row.ALLDept !== 'ALLDept' && permissionList.editBtn" size="small"
|
type="text"
|
@click="editBtnClick(row)">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
编辑
|
</el-button>
|
<el-button v-if="row.ALLDept !== 'ALLDept' && permissionList.delBtn" size="small"
|
type="text"
|
@click="rowDeleteHandler(row)">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
</template>
|
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button v-if="permissionList.assignMembersBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="assignMembersHandler">
|
<icon-show :name="permissionList.assignMembersBtn.source"></icon-show>
|
分配成员
|
</el-button>
|
<el-button v-if="permissionList.statisticsBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="statisticsHandler">
|
<icon-show :name="permissionList.statisticsBtn.source"></icon-show>
|
统计
|
</el-button>
|
<el-button v-if="permissionList.importDepartmentBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="upLoadHandler">
|
<icon-show :name="permissionList.importDepartmentBtn.source"></icon-show>
|
导入部门
|
</el-button>
|
<el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
|
type="primary" @click="downLoadHandler">
|
<icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
|
下载导入模板
|
</el-button>
|
</template>
|
</avue-crud>
|
|
<!-- 统计对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="statisticsLoading"
|
:visible.sync="statisticsVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="人员信息"
|
width="50%"
|
>
|
<avue-crud
|
:data="countData"
|
:option="countOption"
|
>
|
</avue-crud>
|
<div slot="footer" class="dialog-footer" style="display: flex;gap: 20px;justify-content: center">
|
<div>
|
<el-tag>当前角色总人数: {{ this.countData.length }}</el-tag>
|
</div>
|
<el-button icon="el-icon-close" size="small" type="danger" @click="statisticsVisible = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
|
|
<!-- 分配成员穿梭框 -->
|
<transfer ref="transfer" :left-role-data="leftTransferData" :right-role-data="rightTransferData"
|
:transferTitle="transferTitle" title="部门添加成员"
|
@transferSend="departTransferSend">
|
</transfer>
|
|
<!-- 导入部门 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入部门"
|
@updata="getTableList"></upload-file>
|
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
refTree,
|
addDept,
|
updateDept,
|
deleteDept,
|
countSmUserByDeptOid,
|
listUserUnInDeptOid,
|
listUserByDeptOid,
|
saveUsersDepts,
|
download
|
} from "@/api/system/departMent/api";
|
import basicOption from '@/util/basic-option';
|
import {column} from './option'
|
import func from "@/util/func";
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "departmentManage",
|
data() {
|
return {
|
tableData: [],
|
option: {
|
...basicOption,
|
rowKey: 'oid',
|
rowParentKey: 'parentId',
|
expandRowKeys: [],
|
selection: false,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
gridBtn: false,
|
menuWidth: 280,
|
highlightCurrentRow: true,
|
calcHeight: -50,
|
column: column
|
},
|
tableLoading: false,
|
departCurrenRow: {},
|
parentId: '',
|
statisticsLoading: false,
|
statisticsVisible: false,
|
countData: [],
|
countOption: {
|
...basicOption,
|
selection: false,
|
refreshBtn: false,
|
addBtn: false,
|
header: false,
|
menu: false,
|
calcHeight: 80,
|
column: [
|
{
|
label: '部门',
|
prop: 'pkDepartmentName',
|
sortable: true,
|
},
|
{
|
label: '用户名',
|
prop: 'id',
|
sortable: true,
|
},
|
{
|
label: '真实姓名',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '角色',
|
prop: 'pkPersonName',
|
sortable: true,
|
overHidden: true,
|
},
|
]
|
},
|
leftTransferData: [],
|
rightTransferData: [],
|
transferTitle: ['待选人员', '已选人员'],
|
tipList: ['导入模板中标明红色字体的为必输项', '导入结构为树结构时请保证ID列不能重复', '父ID请使用界面上部门的唯一标识ID或者Excel中手动输入的ID', '父ID列为空时，导入的部门即为顶层部门'],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/departmentQueryController/importDept',
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
assignMembersBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false),
|
departmentAddChildrenBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOAD, false),
|
importDepartmentBtn: this.vaildData(this.permission[this.$route.query.id].MGR, false),
|
statisticsBtn: this.vaildData(this.permission[this.$route.query.id].DISCARD, false),
|
};
|
},
|
},
|
methods: {
|
// 表格初始化请求
|
getTableList() {
|
refTree({queryAllLevel: true, 'extandParamsMap[showAllDepartmentNode]': true}).then(res => {
|
this.tableData = this.departDtaFormAtter(res.data.treeData);
|
this.option.expandRowKeys = [res.data.treeData[0].oid];
|
})
|
},
|
|
// 分配部门数据转换
|
departDtaFormAtter(items) {
|
return items.map(item => {
|
// 转换当前节点的属性
|
const formList = {
|
expanded: item.expanded,
|
oid: item.oid,
|
id: item.attributes.id,
|
name: item.attributes.name,
|
description: item.attributes.description,
|
code: item.attributes.code,
|
specialties: item.attributes.specialties,
|
uniqueId: item.attributes.uniqueId,
|
ALLDept: item.attributes.ALLDept ? item.attributes.ALLDept : "",
|
parentId: item.parentId,
|
parentName: item.parentName,
|
parentBtmName: item.parentBtmName,
|
// 如果children存在且不为空，则递归转换children
|
children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
|
};
|
return formList;
|
});
|
},
|
|
// 列头刷新
|
handleRefresh() {
|
this.getTableList();
|
},
|
|
// 下拉
|
selectChange() {
|
|
},
|
|
// 表格行新增子级
|
handleAdd() {
|
this.$refs.departCrud.rowAdd();
|
},
|
|
// 添加
|
rowSaveHandler(row, done, loading) {
|
row = {...row, ...{pkFatherDepartment: this.parentId}};
|
addDept(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
loading();
|
})
|
|
},
|
|
// 编辑按钮点击事件
|
editBtnClick(row) {
|
this.$refs.departCrud.rowEdit(row);
|
},
|
|
// 编辑
|
rowUpdateHandler(row, index, done, loading) {
|
let params = {
|
name: row.name,
|
id: row.id,
|
code: row.code,
|
specialties: row.specialties,
|
description: row.description,
|
oid: row.oid
|
}
|
updateDept(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
loading();
|
})
|
},
|
|
// 删除
|
rowDeleteHandler(row) {
|
let params = {
|
ids: row.oid
|
}
|
|
this.$confirm('您确定要删除当前部门吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteDept(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 表格行 行单选
|
handleCurrentRowChange(row) {
|
// 单独添加 ALLDept 属性判断是否是顶层节点所有部门
|
if (row.ALLDept === "ALLDept") {
|
this.parentId = "";
|
} else {
|
this.parentId = row.oid;
|
}
|
|
this.departCurrenRow = row;
|
},
|
// 统计
|
statisticsHandler() {
|
console.log(this.departCurrenRow);
|
if (func.isEmptyObject(this.departCurrenRow)) {
|
this.$message.warning('请选择部门！');
|
return
|
}
|
|
countSmUserByDeptOid({pkDepartment: this.departCurrenRow.ALLDept === 'ALLDept' ? null : this.departCurrenRow.oid}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.countData = data.map(item => {
|
return {
|
pkDepartmentName: item.pkDepartmentName,
|
name: item.name,
|
id: item.id,
|
pkPersonName: item.pkPersonName
|
}
|
});
|
this.statisticsVisible = true;
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
|
// 分配成员
|
assignMembersHandler() {
|
if (func.isEmptyObject(this.departCurrenRow)) {
|
this.$message.error('请选择部门节点');
|
return
|
}
|
if (this.departCurrenRow.ALLDept === "ALLDept") {
|
this.$message.error('此节点为部门标识，不能执行分配成员操作，请选择其他节点！')
|
return
|
}
|
|
Promise.all([
|
listUserUnInDeptOid({pkDepartment: this.departCurrenRow.oid}),
|
listUserByDeptOid({pkDepartment: this.departCurrenRow.oid})
|
]).then(([unInRoleRes, byRoleRes]) => {
|
if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
|
const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
|
// 组装好穿梭框可用数据
|
this.leftTransferData = leftData.map(item => {
|
return {
|
name: item.name + `(${item.id})`,
|
oid: item.oid
|
}
|
})
|
this.rightTransferData = byRoleRes.data.data.map(item => item.oid);
|
this.$refs.transfer.visible = true;
|
}
|
});
|
},
|
|
// 分配成员穿梭框回填
|
departTransferSend(row) {
|
let params = {
|
userOIds: row.join(','),
|
deptId: this.departCurrenRow.oid
|
}
|
saveUsersDepts(params).then(res => {
|
//console.log(res);
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}).catch(err => {
|
console.log(err);
|
})
|
},
|
|
// 下载导入模板
|
downLoadHandler() {
|
download().then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('下载成功')
|
});
|
},
|
|
// 导入部门
|
upLoadHandler() {
|
this.$refs.upload.visible = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
