<template>
|
<div class="member-manage">
|
<div class="left">
|
<div>
|
<el-input placeholder="请输入" v-model="treeWord">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>
|
<el-tree :data="treeData" node-key="id" default-expand-all></el-tree>
|
<div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
|
<ul>
|
<li>创建同级节点</li>
|
<li>删除节点</li>
|
<li>重命名节点</li>
|
<li>关闭</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.id"
|
:label="item.name"
|
>{{item.name}}</el-option>
|
</el-select>
|
<el-button type="primary" size="small" @click="dataSearch">查询</el-button>
|
</div>
|
<div class="table-area">
|
<div class="actions">
|
<el-button type="primary" size="small" @click="addMember">添加人员</el-button>
|
<el-button type="primary" 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">
|
<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="picture">
|
<template>
|
<div></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="性别" prop="gender"></el-table-column>
|
<el-table-column label="所属组织" prop="organization"></el-table-column>
|
<el-table-column label="工号" prop="no"></el-table-column>
|
<el-table-column label="手机号" prop="phone"></el-table-column>
|
<el-table-column label="用户权限" prop="userpermission"></el-table-column>
|
<el-table-column label="转储权限" prop="transferpermission"></el-table-column>
|
<el-table-column label="操作">
|
<template>
|
<div>
|
<i class="el-icon-edit"></i>
|
<i class="el-icon-delete"></i>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<el-dialog
|
:visible="memberEditDialogVisible"
|
class="member-edit-dialog"
|
:append-to-body="false"
|
title="添加/编辑人员"
|
@close="memberEditDialogVisible=false"
|
>
|
<div class="text-center">
|
<el-form :model="memberEditForm">
|
<el-form-item>
|
<el-upload
|
class="avatar-uploader"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:http-request="uploadMemberPic"
|
>
|
<img
|
v-if="memberEditForm.memberPicUrl"
|
:src="memberEditForm.memberPicUrl"
|
class="avatar"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="工号:" prop="no">
|
<el-input v-model="memberEditForm.no" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="照片标识:">
|
<el-input v-model="memberEditForm.figure" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="姓名:">
|
<el-input v-model="memberEditForm.name" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="性别:">
|
<el-radio v-model="memberEditForm.gender" label="1">女</el-radio>
|
<el-radio v-model="memberEditForm.gender" label="2">男</el-radio>
|
</el-form-item>
|
<el-form-item label="身份证号:">
|
<el-input v-model="memberEditForm.idCard" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号:">
|
<el-input v-model="memberEditForm.phone" size="mini"></el-input>
|
</el-form-item>
|
<el-form-item label="其他:">
|
<el-input v-model="memberEditForm.other" size="mini"></el-input>
|
</el-form-item>
|
<div class="btns">
|
<el-button size="small">取消</el-button>
|
<el-button size="small" type="primary">保存</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">
|
<div class="flex-box">
|
<label>人员:</label>
|
<span>lisi</span>
|
</div>
|
<el-input v-model="organizeKeyword" size="small">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
<div>默认组织</div>
|
<el-tree :data="organizeData" node-key="id" default-expand-all></el-tree>
|
<div slot="footer" class="btns">
|
<el-button size="small">取消</el-button>
|
<el-button size="small" type="primary">确定</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog
|
:visible="batchImportDialogVisible"
|
class="batch-import-dialog"
|
:append-to-body="false"
|
title="批量导入"
|
@close="batchImportDialogVisible=false"
|
>
|
<div class="text-left">
|
<div class="flex-box">
|
<label>上传文件:</label>
|
<el-upload
|
class="upload-demo batch-upload"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:on-remove="handleRemove"
|
multiple
|
:limit="3"
|
:http-request="batchImportFiles"
|
:on-exceed="handleExceed"
|
:file-list="fileList"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip"></div>
|
</el-upload>
|
<p>
|
*请按照此模板填写信息，点击下载模板
|
<a href="javascript:;">.excel</a>
|
</p>
|
</div>
|
<el-table class="thbg" :data="batchImportTableData" fit>
|
<el-table-column type="index" label="序号"></el-table-column>
|
<el-table-column prop="filename" label="文件名称"></el-table-column>
|
<el-table-column prop="time" label="上传时间"></el-table-column>
|
<el-table-column prop="state" label="状态"></el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import { getShuohuangDepartTree, getOrganizeTree } from '@/api/shuohuang'
|
|
export default {
|
data () {
|
return {
|
treeWord: '',
|
treeData: [],
|
showMenu: false,
|
menuTop: 0,
|
menuLeft: 0,
|
keyword: '',
|
gender: '',
|
genders: [{ name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
|
tableData: [],
|
organizeData: [],
|
memberEditDialogVisible: false,
|
toggleOrganizeDialogVisible: false,
|
batchImportDialogVisible: false,
|
fileList: [],
|
memberEditForm: {},
|
memberPicUrl: '',
|
batchImportTableData: [],
|
}
|
},
|
mounted () {
|
this.searchLeftTreeData();
|
this.getOrganizeTreeData();
|
},
|
methods: {
|
uploadPic(){
|
|
},
|
batchImportFiles () {
|
|
},
|
handleRemove () {
|
|
},
|
handleExceed () {
|
|
},
|
batchImport () {
|
this.batchImportDialogVisible = true;
|
},
|
toggleOrganize () {
|
this.toggleOrganizeDialogVisible = true;
|
},
|
uploadMemberPic () { },
|
openMenuList (t, l, frame) {
|
this.showMenu = true;
|
this.menuTop = t;
|
this.menuLeft = l;
|
},
|
closeMenuList () {
|
this.showMenu = false;
|
},
|
deepNodeChildren (node) {
|
if (node.ChildDept && node.ChildDept.length > 0) {
|
return 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;
|
});
|
} else if (node.UserLst && node.UserLst.length > 0) {
|
return node.UserLst.map(child => {
|
let childObj = {};
|
childObj.id = child.ID;
|
childObj.label = child.Name;
|
childObj.Status = child.Status;
|
return childObj;
|
});
|
}
|
},
|
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
|
})
|
})
|
},
|
addMember () {
|
this.memberEditDialogVisible = true;
|
},
|
dataSearch () {
|
|
}
|
}
|
}
|
</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-form-item {
|
.el-form-item__label {
|
width: 100px;
|
}
|
}
|
}
|
.el-input {
|
width: 270px;
|
}
|
}
|
.toggle-organize-dialog {
|
.el-dialog {
|
width: 450px;
|
min-height: 500px;
|
.el-dialog__body {
|
padding-bottom: 0;
|
.btns {
|
margin-top: 50px;
|
}
|
}
|
}
|
}
|
.menuList {
|
background: #fff;
|
position: absolute;
|
z-index: 100;
|
width: 180px;
|
text-align: left;
|
border: 1px solid #ccc;
|
}
|
.menuList li {
|
line-height: 28px;
|
height: 28px;
|
padding-left: 24px;
|
background: #fff;
|
}
|
.menuList li:hover {
|
background: rgba(152, 170, 190, 0.7);
|
}
|
.right {
|
padding: 8px 0 0 20px;
|
.filter-bar {
|
display: flex;
|
margin-bottom: 20px;
|
.keyword-input {
|
width: 300px;
|
}
|
}
|
.table-area {
|
.actions {
|
text-align: left;
|
}
|
|
}
|
}
|
}
|
</style>
|
