<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:;">下载模板.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 } 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: [],
|
checkedOrg: '',
|
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.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.checkedOrg = a.id
|
},
|
updateOrg () {
|
let ids = this.multipleTableSelection.map(row => {
|
return row.ID
|
});
|
let params = {
|
DeptID: this.checkedOrg,
|
Users: ids.join(',')
|
}
|
updateUnit(params).then(res => {
|
if (res.success) {
|
this.$notify({
|
type: 'success',
|
message: res.msg
|
});
|
this.toggleOrganizeDialogVisible = false;
|
this.renderMemberTable();
|
}
|
})
|
|
},
|
tableSelection (val) {
|
this.multipleTableSelection = val;
|
},
|
memberSave () {
|
this.$refs['memberForm'].validate((valid) => {
|
if (valid) {
|
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();
|
}
|
})
|
} else {
|
addMember(params).then(res => {
|
if (res.success) {
|
this.$notify({
|
type: 'success',
|
message: res.msg
|
})
|
this.renderMemberTable();
|
this.memberEditDialogVisible = false;
|
this.searchLeftTreeData();
|
}
|
})
|
}
|
} 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 => {
|
debugger
|
_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) {
|
_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>
|
