<template>
|
<div class="member-manage">
|
<div class="left">
|
<div style="margin-bottom: 10px">
|
<el-input placeholder="请输入" v-model="treeWord" size="small">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>
|
<el-tree
|
ref="leftTreeNodes"
|
:data="treeData"
|
node-key="id"
|
default-expand-all
|
:expand-on-click-node="false"
|
:check-on-click-node="true"
|
:highlight-current="true"
|
@node-click="checkNode"
|
@node-contextmenu="nodeContextMenu"
|
></el-tree>
|
<div
|
class="menuList"
|
v-show="showMenu"
|
:style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
|
>
|
<ul>
|
<li>创建同级节点</li>
|
<li>删除节点</li>
|
<li>重命名节点</li>
|
<li @click="showMenu = false">关闭</li>
|
</ul>
|
</div>
|
</div>
|
<div class="right">
|
<div class="filter-bar">
|
<el-input
|
class="keyword-input"
|
placeholder="姓名/组织机构/手机号"
|
v-model="keyword"
|
size="small"
|
></el-input>
|
<el-select
|
v-model="gender"
|
size="small"
|
placeholder="性别"
|
style="margin: 0 10px"
|
>
|
<el-option
|
v-for="item in genders"
|
:key="item.id"
|
:value="item.name == '全部' ? '' : item.name"
|
:label="item.name"
|
>{{ item.name }}</el-option
|
>
|
</el-select>
|
<el-button type="primary" size="small" @click="renderMemberTable"
|
>查询</el-button
|
>
|
<el-button type="primary" size="small" @click="resetFilter"
|
>重置</el-button
|
>
|
</div>
|
<div class="table-area">
|
<div class="actions">
|
<el-button type="primary" size="small" @click="addMember"
|
>添加人员</el-button
|
>
|
<el-button
|
type="primary"
|
:disabled="multipleTableSelection.length < 1"
|
size="small"
|
@click="toggleOrganize"
|
>换组织</el-button
|
>
|
<el-button type="primary" size="small" @click="batchImport"
|
>批量导入</el-button
|
>
|
<!-- <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button> -->
|
</div>
|
<el-table
|
class="thbg"
|
:data="tableData"
|
fit
|
ref="elTable"
|
@selection-change="tableSelection"
|
>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column label="姓名" prop="Name" sortable>
|
<template slot-scope="scope">
|
<div style="cursor: pointer">{{ scope.row.Name }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="照片" prop="Surface">
|
<template slot-scope="scope">
|
<div class="table-cell-pic">
|
<img :src="`/httpImage/${scope.row.Surface}`" alt />
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="性别" prop="Sex"></el-table-column>
|
<el-table-column label="所属组织" prop="Org"></el-table-column>
|
<el-table-column label="工号" prop="WorkID"></el-table-column>
|
<el-table-column label="手机号" prop="Tel"></el-table-column>
|
<el-table-column label="用户权限" prop="userpermission">
|
<template slot-scope="scope">
|
<div>
|
<el-switch
|
v-model="scope.row.UserPermissions"
|
@change="memberUpdate(scope.row)"
|
></el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="转储权限" prop="transferpermission">
|
<template slot-scope="scope">
|
<div>
|
<el-switch
|
v-model="scope.row.DumpPermissions"
|
@change="memberUpdate(scope.row)"
|
></el-switch>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="operation">
|
<i class="el-icon-edit" @click="editMember(scope.row)"></i>
|
<i class="el-icon-delete" @click="delMember(scope.row)"></i>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleTableSizeChange"
|
@current-change="renderMemberTable"
|
:current-page.sync="PageIndex"
|
:page-size="PageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="tableTotal"
|
></el-pagination>
|
</div>
|
</div>
|
<el-dialog
|
:visible="memberEditDialogVisible"
|
class="member-edit-dialog"
|
:append-to-body="false"
|
@close="memberEditDialogVisible = false"
|
>
|
<div slot="title">
|
<div class="title">
|
<div class="main-title">
|
{{ memberEditForm.ID ? "编辑人员" : "添加人员" }}
|
</div>
|
<div class="subtitle">组织结构:{{ curLeftTreeNode.label }}</div>
|
</div>
|
</div>
|
<div class="text-center">
|
<el-form
|
:model="memberEditForm"
|
:rules="memberEditFormRule"
|
ref="memberForm"
|
>
|
<el-form-item>
|
<el-upload
|
class="avatar-uploader"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:http-request="uploadMemberPicture"
|
>
|
<img
|
v-if="memberEditForm.Surface"
|
:src="`/httpImage/` + memberEditForm.Surface"
|
class="avatar"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="工号:" prop="WorkID">
|
<el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="照片标识:">
|
<el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
|
</el-form-item>-->
|
<el-form-item label="姓名:" prop="Name">
|
<el-input v-model="memberEditForm.Name" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="用户名:" prop="UserName">
|
<el-input v-model="memberEditForm.UserName" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="性别:" prop="Sex">
|
<el-radio v-model="memberEditForm.Sex" label="女">女</el-radio>
|
<el-radio v-model="memberEditForm.Sex" label="男">男</el-radio>
|
</el-form-item>
|
<el-form-item label="身份证号:">
|
<el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号:" prop="Tel">
|
<el-input v-model="memberEditForm.Tel" size="mini"></el-input>
|
</el-form-item>
|
<div class="btns">
|
<el-button size="small" @click="memberEditDialogVisible = false"
|
>取消</el-button
|
>
|
<el-button size="small" type="primary" @click="memberSave"
|
>保存</el-button
|
>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
<el-dialog
|
:visible="toggleOrganizeDialogVisible"
|
class="toggle-organize-dialog"
|
:append-to-body="false"
|
title="移动人员到其他组织"
|
@close="toggleOrganizeDialogVisible = false"
|
>
|
<div class="text-left">
|
<el-input v-model="organizeKeyword" size="small">
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@clcik="getOrganizeTreeData"
|
></el-button>
|
</el-input>
|
<div>默认组织</div>
|
<el-tree
|
:data="organizeData"
|
node-key="id"
|
default-expand-all
|
@node-click="checkOrgNode"
|
:expand-on-click-node="false"
|
:check-on-click-node="true"
|
:highlight-current="true"
|
></el-tree>
|
<div slot="footer" class="btns">
|
<el-button size="small" @click="toggleOrganizeDialogVisible = false"
|
>取消</el-button
|
>
|
<el-button size="small" type="primary" @click="updateOrg"
|
>确定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog
|
:visible="batchImportDialogVisible"
|
class="batch-import-dialog"
|
:append-to-body="false"
|
title="批量导入"
|
@close="batchImportDialogVisible = false"
|
>
|
<div>
|
<p class="tip">
|
*请提前根据文件模板中的要求收集人员信息，在一个文件夹中存放人员照片和EXCEL文件
|
(
|
<a
|
href="javascript:;"
|
@mouseover="showDemo = true"
|
@mouseout="showDemo = false"
|
>示例</a
|
>),点击
|
<a href="javascript:;" @click="downloadExcel">下载模板.excel</a>
|
<img
|
class="tip-demo"
|
v-if="showDemo"
|
:src="`${publicPath}images/shuohuang/tip.jpg`"
|
alt
|
/>
|
</p>
|
<div class="flex-box">
|
<label>上传文件夹:</label>
|
<el-button size="mini" type="primary" @click="uploadDirectoryTrigger"
|
>点击上传</el-button
|
>
|
<input
|
ref="directoryInput"
|
@change="importDirectory"
|
hidden
|
type="file"
|
webkitdirectory
|
/>
|
</div>
|
<el-table class="thbg" :data="batchImportTableData" fit>
|
<el-table-column type="index" label="序号"></el-table-column>
|
<el-table-column prop="Name" label="文件名称"></el-table-column>
|
<el-table-column prop="UploadTime" label="上传时间"></el-table-column>
|
<el-table-column prop="Status" label="状态"></el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getShuohuangDepartTree,
|
getOrganizeTree,
|
getMemberList,
|
updateMemberInfo,
|
addMember,
|
updateUnit,
|
uploadMemberPic,
|
uploadDirectory,
|
uploadFile,
|
downloadFile,
|
} from "@/api/shuohuang";
|
export default {
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
CLIP: "http://192.168.20.113/",
|
treeWord: "",
|
treeData: [],
|
curLeftTreeNode: {},
|
showMenu: false,
|
deptId: "",
|
menuTop: 0,
|
menuLeft: 0,
|
keyword: "",
|
gender: "",
|
genders: [
|
{ id: "g3", name: "全部" },
|
{ name: "男", id: "g0" },
|
{ name: "女", id: "g1" },
|
],
|
tableData: [],
|
multipleTableSelection: [],
|
PageIndex: 1,
|
pageSizes: [2, 8, 12, 24],
|
tableTotal: 0,
|
PageSize: 8,
|
organizeData: [],
|
checkedOrgID: "",
|
checkedOrgName: "",
|
organizeKeyword: "",
|
memberEditDialogVisible: false,
|
toggleOrganizeDialogVisible: false,
|
batchImportDialogVisible: false,
|
fileList: [],
|
memberEditForm: {},
|
memberEditFormRule: {
|
Name: [{ required: true, message: "请输入姓名", trigger: "change" }],
|
UserName: [
|
{ required: true, message: "请输入姓名", trigger: "change" },
|
],
|
Sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
Tel: [{ validator: this.isPhone, trigger: "change" }],
|
},
|
memberPicUrl: "",
|
showDemo: false,
|
batchImportTableData: [],
|
};
|
},
|
mounted() {
|
this.searchLeftTreeData();
|
this.getOrganizeTreeData();
|
//this.renderMemberTable();
|
},
|
methods: {
|
resetFilter() {
|
this.keyword = "";
|
this.gender = "";
|
this.renderMemberTable();
|
},
|
isPhone(rule, value, callback) {
|
if (!value) {
|
return callback();
|
} else if (value.trim()) {
|
var pattern = /^1[345789]\d{9}$/;
|
if (pattern.test(value)) {
|
return callback();
|
}
|
return callback(new Error("输入的手机号错误"));
|
}
|
// if (value.trim()) {
|
// var pattern = /^1[345789]\d{9}$/
|
// if (pattern.test(value)) {
|
// return callback()
|
// }
|
// return callback(new Error('输入的手机号错误'))
|
// }
|
},
|
nodeContextMenu(e, data, node, comp) {
|
this.showMenu = true;
|
this.menuTop = e.pageY;
|
this.menuLeft = e.pageX;
|
},
|
checkOrgNode(a, b, c) {
|
this.checkedOrgID = a.id;
|
this.checkedOrgName = a.label;
|
},
|
downloadExcel() {
|
downloadFile().then(function (res) {
|
let blobUrl = window.URL.createObjectURL(
|
new Blob([res], {
|
type: "application/vnd.ms-excel",
|
})
|
);
|
const a = document.createElement("a");
|
a.style.display = "none";
|
a.download = "批量导入模板.xlsx";
|
a.href = blobUrl;
|
a.click();
|
document.body.removeChild(a)
|
});
|
},
|
updateOrg() {
|
let ids = this.multipleTableSelection.map((row) => {
|
return row.ID;
|
});
|
let params = {
|
DeptID: this.checkedOrgID,
|
DeptName: this.checkedOrgName,
|
Users: ids.join(","),
|
};
|
updateUnit(params).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.toggleOrganizeDialogVisible = false;
|
this.renderMemberTable();
|
this.searchLeftTreeData();
|
}
|
});
|
},
|
tableSelection(val) {
|
this.multipleTableSelection = val;
|
},
|
memberSave() {
|
this.$refs["memberForm"].validate((valid) => {
|
if (valid) {
|
debugger;
|
let params = Object.assign(
|
{ DeptID: this.curLeftTreeNode.id },
|
this.memberEditForm
|
);
|
if (this.memberEditForm.ID) {
|
updateMemberInfo(params).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.memberEditDialogVisible = false;
|
this.renderMemberTable();
|
this.searchLeftTreeData();
|
this.memberEditForm = {};
|
}
|
});
|
} else {
|
addMember(params).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.renderMemberTable();
|
this.memberEditDialogVisible = false;
|
this.searchLeftTreeData();
|
this.memberEditForm = {};
|
}
|
});
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
delMember(member) {
|
member.IsDel = "1";
|
this.memberUpdate(member);
|
},
|
editMember(member) {
|
this.memberEditDialogVisible = true;
|
this.memberEditForm = member;
|
},
|
memberUpdate(member) {
|
updateMemberInfo(member).then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
this.renderMemberTable();
|
this.searchLeftTreeData();
|
}
|
});
|
},
|
checkNode(a, b, c) {
|
if (a.hasOwnProperty("children")) {
|
this.curLeftTreeNode = a;
|
this.deptId = a.id;
|
this.renderMemberTable();
|
}
|
},
|
handleTableSizeChange(size) {
|
this.PageSize = size;
|
this.renderMemberTable();
|
},
|
renderMemberTable() {
|
let _this = this;
|
let params = {
|
DeptID: this.deptId,
|
Keyword: this.keyword,
|
Sex: this.gender,
|
PageIndex: this.PageIndex,
|
PageSize: this.PageSize,
|
};
|
getMemberList(params).then((res) => {
|
_this.tableData = res.data;
|
_this.tableTotal = res.total;
|
});
|
},
|
uploadPic() {},
|
uploadDirectoryTrigger() {
|
this.$refs["directoryInput"].click();
|
},
|
importDirectory() {
|
let _this = this;
|
//this.$refs['directoryInput'].files //文件夹map
|
let formData = new FormData();
|
for (var file in this.$refs["directoryInput"].files) {
|
formData.append("files", this.$refs["directoryInput"].files[file]);
|
}
|
//formData.append('files', this.$refs['directoryInput'].files)
|
|
uploadDirectory(formData).then((res) => {
|
_this.batchImportTableData = res.data;
|
_this.renderMemberTable();
|
});
|
},
|
|
handleRemove() {},
|
handleExceed() {},
|
batchImport() {
|
this.batchImportDialogVisible = true;
|
},
|
toggleOrganize() {
|
this.toggleOrganizeDialogVisible = true;
|
},
|
uploadMemberPicture(params) {
|
let param = new FormData();
|
param.append("file", params.file);
|
uploadMemberPic(param).then((res) => {
|
this.$set(this.memberEditForm, "Surface", res.data);
|
});
|
},
|
|
deepNodeChildren(node) {
|
var arr1 = [];
|
var arr2 = [];
|
if (node.ChildDept && node.ChildDept.length > 0) {
|
arr1 = node.ChildDept.map((child) => {
|
let childObj = {};
|
childObj.id = child.ID;
|
childObj.label = child.Name;
|
childObj.Status = child.Status;
|
if (child.ChildDept) {
|
childObj.children = this.deepNodeChildren(child);
|
}
|
if (child.UserLst) {
|
childObj.children = this.deepNodeChildren(child);
|
}
|
return childObj;
|
});
|
}
|
if (node.UserLst && node.UserLst.length > 0) {
|
arr2 = node.UserLst.map((child) => {
|
let childObj = {};
|
childObj.id = child.ID;
|
childObj.label = child.Name;
|
childObj.Status = child.Status;
|
return childObj;
|
});
|
}
|
return arr1.concat(arr2);
|
},
|
getOrganizeTreeData() {
|
let _this = this;
|
getOrganizeTree().then((res) => {
|
_this.organizeData = res.data.map((item) => {
|
let obj = {};
|
obj.id = item.ID;
|
obj.label = item.Name;
|
obj.Status = item.Status;
|
obj.children = _this.deepNodeChildren(item);
|
return obj;
|
});
|
});
|
},
|
searchLeftTreeData() {
|
let _this = this;
|
getShuohuangDepartTree().then((res) => {
|
_this.treeData = res.data.map((item) => {
|
let obj = {};
|
obj.id = item.ID;
|
obj.label = item.Name;
|
obj.Status = item.Status;
|
obj.children = _this.deepNodeChildren(item);
|
return obj;
|
});
|
this.$nextTick(() => {
|
if (!Object.keys(_this.curLeftTreeNode).length) {
|
if (_this.treeData.length) {
|
_this.curLeftTreeNode = _this.treeData[0];
|
_this.$refs["leftTreeNodes"].setCurrentNode(_this.treeData[0]);
|
}
|
} else {
|
_this.$refs["leftTreeNodes"].setCurrentNode(_this.curLeftTreeNode);
|
}
|
_this.checkNode(_this.curLeftTreeNode);
|
});
|
});
|
},
|
addMember() {
|
this.memberEditDialogVisible = true;
|
this.memberEditForm = {};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.member-manage {
|
display: flex;
|
padding: 20px;
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
.batch-upload {
|
text-align: left;
|
margin: 0 20px 20px 10px;
|
}
|
.member-edit-dialog {
|
.el-dialog {
|
width: 500px;
|
padding: 0 30px;
|
.el-dialog__header {
|
.title {
|
display: flex;
|
align-items: flex-end;
|
justify-content: center;
|
.main-title {
|
font-size: 16px;
|
padding-right: 10px;
|
}
|
.subtitle {
|
font-size: 14px;
|
color: #666;
|
}
|
}
|
}
|
.el-form-item {
|
.el-form-item__label {
|
width: 100px;
|
}
|
.el-form-item__error {
|
left: 120px;
|
}
|
}
|
}
|
.el-input {
|
width: 270px;
|
}
|
}
|
.toggle-organize-dialog {
|
.el-dialog {
|
width: 450px;
|
min-height: 500px;
|
.el-dialog__body {
|
padding-bottom: 0;
|
.btns {
|
margin-top: 50px;
|
}
|
}
|
}
|
}
|
.batch-import-dialog {
|
.el-dialog__body {
|
padding: 14px 20px;
|
}
|
.tip {
|
text-align: left;
|
margin-bottom: 10px;
|
position: relative;
|
.tip-demo {
|
position: absolute;
|
width: 530px;
|
z-index: 1000;
|
top: -10px;
|
left: 20px;
|
}
|
}
|
}
|
.menuList {
|
background: #fff;
|
position: absolute;
|
z-index: 100;
|
width: 180px;
|
text-align: left;
|
border: 1px solid #ddd;
|
box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1);
|
}
|
.menuList li {
|
line-height: 28px;
|
height: 28px;
|
padding-left: 24px;
|
background: #fff;
|
}
|
.menuList li:hover {
|
background: #ecf0fc;
|
}
|
.right {
|
padding-left: 20px;
|
.filter-bar {
|
display: flex;
|
margin-bottom: 20px;
|
.keyword-input {
|
width: 300px;
|
}
|
}
|
.table-area {
|
.actions {
|
text-align: left;
|
}
|
.table-cell-pic {
|
img {
|
width: 70px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
