<style>
.departmentTreeStyleCont {
padding-top: 20px;
display: flex;
height: 100%;
}
.departmentTreeStyleCont .departmentTreeStyle {
background: #fff;
padding: 20px;
flex: 0 1 400px;
min-height: 800px;
}
.departmentTreeStyleCont .departmentTreeStyle > p {
font-size: 14px;
margin-bottom: 15px;
color: #333;
font-weight: bold;
height: 14px;
line-height: 14px;
border-left: 3px solid #E95252;
text-indent: 20px;
}
.departmentTreeStyleCont .departmentTreeStyle .spanIcon {
padding-left: 20px;
display: none
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
height: 32px;
line-height: 32px;
font-size: 12px
}
.TreeSpan img {
width: 24px;
height: 24px;
border-radius: 12px;
vertical-align: sub;
margin-right: 3px;
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
display: inline-block
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
font-size: 14px !important;
color: #999;
margin-right: 2px;
}
.departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
color: #E95252;
}
.departmentTreeStyleCont .departmentTreeLayer > p {
font-size: 14px;
margin-bottom: 15px;
color: #333;
font-weight: bold;
height: 14px;
line-height: 14px;
border-left: 3px solid #E95252;
text-indent: 20px;
}
.departmentTreeStyleCont .departmentTreeLayer {
background: #fff;
min-height: 300px;
padding: 20px;
margin-left: 20px;
flex: auto
}
.departmentTreeStyleCont .el-date-editor.el-input,
.departmentTreeStyleCont .el-date-editor.el-input__inner {
width: auto !important;
}
</style>
<template>
<div class="flexOne">
</el-select>
<div class="query-box" v-show="!isTree">
<ul>
<li>
<span><em>{{$t('admin.admin_company')}}</em><el-select filterable :disabled="msg.IsParentCompany==2"
v-model='msg.RB_Branch_Id'
:placeholder="$t('pub.unlimitedSel')">
<el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
<el-option v-for='item in companyList'
:label='item.BName'
:value='item.Id'
:key="item.Id">
</el-option>
</el-select>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_parentdepartment')}}</em><el-select filterable clearable v-model='msg.ParentId'
:placeholder="$t('pub.unlimitedSel')">
<el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
<el-option v-for='item in departmentList'
:label='item.DepartmentName'
:value='item.DepartmentID'
:key="item.DepartmentID">
</el-option>
</el-select>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_departmentLevel')}}</em><el-select v-model="msg.Tier">
<el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
<el-option v-for='item in tierList' :label='item.name' :value='item.id' :key="item.id"></el-option>
</el-select>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_department')}} </em><el-input v-model='msg.DepartmentName'
@keyup.enter.native="getList"
:placeholder="$t('pub.pleaseImport')"></el-input></span>
</li>
<li>
<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()"/>
<input type="button" @click="outerVisible = true,getCompany()" class="normalBtn"
:value="$t('pub.addBtn')"/>
<input type="button" class="normalBtn" :value="$t('adm.adm_sxjg')" @click="isTree=true"/>
</li>
</ul>
</div>
<div v-show="isTree" class="departmentTreeStyleCont">
<div class="departmentTreeStyle">
<p>
{{$t('adm.adm_jggl')}}
<input type="button" class="normalBtn fr"
style="font-size: 12px; width: 86px; height: 24px; padding: 0 2px; margin-top: -5px;" :value="$t('adm.adm_fhlb')"
@click="isTree=false"/>
</p>
<el-tree :data="allList" node-key="id" :props="defaultProps" @node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop"
:allow-drag="allowDrag">
<span class="TreeSpan" slot-scope="{ node, data }">
<i v-show="data.DType==1" class="iconfont icon-bumen"></i>
<img v-show="data.DType==2" v-if="!data.Images" src="../../assets/img/default_head_img.jpg">
<img v-show="data.DType==2" v-else :src="data.Images" :onerror='defaultImg'/>
{{node.label}}<span v-show="data.DType==2"
style="background: #E95252; font-size: 12px; height: 16px; line-height: 16px; color:#fff; padding: 0 4px; border-radius: 4px; display: inline-block; margin-left: 5px;">{{data.PostName}}</span>
<span class="spanIcon" v-if="data.DType==1">
<el-tooltip class="item" effect="dark" :content="$t('adm.adm_addzibumen')" placement="top">
<i class="iconfont icon-tianjia"
@click="treeLayerShow=true;treeLayerShowUser=false,resetForm('addMsg'),addTreeData(data)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('adm.adm_addyuangong')" placement="top">
<i class="iconfont icon-tianjiayuangong"
@click="treeLayerShow=false,treeLayerShowUser=true,resetForm('addMsg1'),addTreeUerData(data)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
<i class="iconfont icon-xiugai"
@click="treeLayerShow=true,treeLayerShowUser=false,treeLayerTitle='部门信息编辑',resetForm('addMsg'),updateData(data.DepartmentID)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
<i class="iconfont icon-shanchu" @click='deleteDeparment(data.DepartmentID)'></i>
</el-tooltip>
</span>
<span class="spanIcon" v-if="data.DType==2">
<el-tooltip class="item" effect="dark" :content="$t('adm.adm_edityuangong')" placement="top">
<i class="iconfont icon-xiugai"
@click="treeLayerShow=false,treeLayerShowUser=true,treeLayerUserTitle='修改员工信息',resetForm('addMsg1'),updateDataUser(data)"></i>
</el-tooltip>
</span>
</span>
</el-tree>
</div>
<div class="departmentTreeLayer" v-show="treeLayerShowUser">
<p>{{treeLayerUserTitle}}</p>
<el-form :model="addMsg1" :rules="rules1" ref="addMsg1" label-width="90px">
<el-row :gutter="10">
<el-col :span="6">
<el-form-item :label="$t('system.table_company')" prop="RB_Branch_id">
<el-select filterable v-model='addMsg1.RB_Branch_id' @change='layerLinkageDepartment' :placeholder="$t('pub.unlimitedSel')">
<el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_Department')" prop="RB_Department_Id">
<el-select filterable v-model='addMsg1.RB_Department_Id' @change='layerLinkagePost' :placeholder="$t('pub.unlimitedSel')">
<el-option v-for='item in layerDepartMentList' :label='item.DepartmentName' :value='item.DepartmentID' :key="item.DepartmentID">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_Post')" prop="RB_Post_Id">
<el-select filterable v-model='addMsg1.RB_Post_Id' :placeholder="$t('pub.unlimitedSel')">
<el-option v-for='item in layerPostList' :label='item.PostName' :value='item.PostId' :key="item.PostId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('system.query_name')" prop="EmName">
<el-input maxlength='20' type="text" v-model="addMsg1.EmName"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item :label="$t('system.table_IDcard')" prop="EmCard">
<el-input type="text" v-model="addMsg1.EmCard" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('leader.leader_Sex')" prop="EmSex">
<el-select filterable v-model='addMsg1.EmSex' :placeholder="$t('pub.unlimitedSel')">
<el-option :label="$t('pub.man')" value='0'></el-option>
<el-option :label="$t('pub.woman')" value='1'></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('adm.adm_xueli')" prop="EmEducation">
<el-input maxlength='20' type="text" v-model="addMsg1.EmEducation"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="入职时间" prop="EmEntry">
<el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmEntry' type="date"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="离职时间" prop="EmLeave">
<el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmLeave' type="date"
disabled></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_address')" prop="EmAddress">
<el-input maxlength='50' type="text" v-model="addMsg1.EmAddress"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('pub.mbPhoneNum')" prop="EmMobile">
<el-input type="text" v-model="addMsg1.EmMobile" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('pub.telphone')" prop="EmTel">
<el-input maxlength='20' type="text" v-model="addMsg1.EmTel"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="QQ" prop="EmQQ">
<el-input type="text" v-model="addMsg1.EmQQ" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生日" prop="EmBirthday">
<el-date-picker value-format="yyyy-MM-dd" v-model='addMsg1.EmBirthday' type="date"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('system.table_acc')" prop="EmAccount">
<el-input type="text" v-model="addMsg1.EmAccount" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="密码" prop="EmPassword">
<el-input type="password" v-model="addMsg1.EmPassword" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<input type="button" :value="$t('pub.cancelBtn')" class="hollowFixedBtn"
@click="resetForm('addMsg1'),treeLayerShowUser=false"></input>
<input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="submitForm1('addMsg1')"></input>
<button v-if='isleaveBtn' class="normalBtn" @click="setIsLeave(leaveId)">{{leaveBtn}}</button>
</el-col>
</el-row>
</el-form>
</div>
<div class="departmentTreeLayer" v-show="treeLayerShow">
<p>
{{treeLayerTitle}}
</p>
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
<el-row :gutter="10">
<el-col :span="6">
<el-form-item :label="$t('admin.admin_company')" prop="RB_Branch_Id">
<el-select filterable clearable v-model='addMsg.RB_Branch_Id' :placeholder="$t('pub.unlimitedSel')"
@change='getDeparmentTierByBranch'>
<el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_department')" prop="DepartmentName">
<el-input type="text" maxlength='20' v-model="addMsg.DepartmentName"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_departmentLevel')" prop="Tier">
<el-select v-model="addMsg.Tier" @change='getParentDeparment'>
<el-option v-for='item in layerTierList' :label='item.name' :value='item.id' :key="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_parentdepartment')" prop="ParentId">
<el-select filterable v-model='addMsg.ParentId' :placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in layerDepartmentList' :label='item.DepartmentName' :value='item.DepartmentID' :key="item.DepartmentID">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item :label="$t('admin.admin_leader')" prop="DepartmentManager">
<el-select filterable clearable v-model='addMsg.ManagerIdArr' :placeholder="$t('pub.pleaseSel')" multiple>
<el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId' :key="item.EmployeeId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_dphone')" prop="DepartmentTel">
<el-input type="text" v-model="addMsg.DepartmentTel" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="部门排序" prop="Sort">
<el-input type="text" v-model="addMsg.Sort" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label='是否领队' prop="IsLeader">
<el-switch v-model="addMsg.IsLeader" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="绑定岗位" prop="PostIdArr">
<el-select filterable class='w400 multiple_input' multiple v-model='addMsg.PostIdArr'
:placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in postList' :label='item.PostName' :value='item.PostId' :key="item.PostId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<button class="hollowFixedBtn" @click="treeLayerShow = false,resetForm('addMsg')">
{{$t('pub.cancelBtn')}}
</button>
<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</el-form>
</div>
</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading' v-show="!isTree">
<tr>
<th width="200">{{$t('admin.admin_company')}}</th>
<th width="200">{{$t('admin.admin_department')}}</th>
<th>{{$t('admin.admin_departmentLevel')}}</th>
<th>{{$t('admin.admin_leader')}}</th>
<th>{{$t('admin.admin_dphone')}}</th>
<th width="300">绑定岗位</th>
<th>排序</th>
<th>{{$t('admin.admin_operate')}}</th>
</tr>
<tr v-for="(item,index) in DataList">
<td>{{item.RB_Branch_Name}}</td>
<td>{{item.DepartmentName}}</td>
<td>{{item.Tier}}级</td>
<td>{{item.DepartmentManagerName}}</td>
<td>{{item.DepartmentTel}}</td>
<td>{{item.PostName}}</td>
<td>{{item.Sort}}</td>
<td>
<el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
<el-button type="primary" icon="el-icon-edit" circle
@click="outerVisible = true,dialogTitle='修改部门信息',updateData(item.DepartmentID)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('pub.delete')" placement="top">
<el-button type="danger" icon="el-icon-delete" @click='deleteDeparment(item.DepartmentID)'
circle></el-button>
</el-tooltip>
</td>
</tr>
</table>
<el-pagination v-show="!isTree" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
</el-pagination>
<el-dialog custom-class='w800' :title="dialogTitle" :visible.sync="outerVisible" center
:before-close="closeChangeMachie">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
<table class="layerNoIcon">
<tr>
<td>
<el-form-item :label="$t('admin.admin_company')" prop="RB_Branch_Id">
<el-select class='w200' filterable clearable v-model='addMsg.RB_Branch_Id' :placeholder="$t('pub.unlimitedSel')"
@change='getDeparmentTierByBranch'>
<el-option v-for='item in layercompanyList' :label='item.BName' :value='item.Id' :key="item.Id">
</el-option>
</el-select>
</el-form-item>
</td>
<td>
<el-form-item :label="$t('admin.admin_department')" prop="DepartmentName">
<el-input class='w200' type="text" maxlength='20' v-model="addMsg.DepartmentName"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item :label="$t('admin.admin_departmentLevel')" prop="Tier">
<el-select class='w200' v-model="addMsg.Tier" @change='getParentDeparment'>
<el-option v-for='item in layerTierList' :label='item.name' :value='item.id' :key="item.id"></el-option>
</el-select>
</el-form-item>
</td>
<td>
<el-form-item :label="$t('admin.admin_parentdepartment')" prop="ParentId">
<el-select filterable class='w200' v-model='addMsg.ParentId' :placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in layerDepartmentList' :label='item.DepartmentName' :value='item.DepartmentID' :key="item.DepartmentID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item :label="$t('admin.admin_leader')" prop="DepartmentManager">
<el-select filterable class='w200 multiple_input' clearable v-model='addMsg.ManagerIdArr'
:placeholder="$t('pub.pleaseSel')" multiple>
<el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId' :key="item.EmployeeId">
</el-option>
</el-select>
</el-form-item>
</td>
<td>
<el-form-item :label="$t('admin.admin_dphone')" prop="DepartmentTel">
<el-input class='w200' type="text" v-model="addMsg.DepartmentTel"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item :label="$t('admin.admin_departsort')" prop="Sort">
<el-input class='w200' type="text" v-model="addMsg.Sort"
:placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
<td>
<el-form-item class='w400' :label="$t('admin.admin_isleader')" prop="IsLeader">
<el-switch v-model="addMsg.IsLeader" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="2">
<el-form-item :label="$t('admin.admin_Bindingposition')" prop="PostIdArr">
<el-select filterable class='w500 multiple_input' multiple v-model='addMsg.PostIdArr'
:placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in postList' :label='item.PostName' :value='item.PostId' :key="item.PostId">
</el-option>
</el-select>
</el-form-item>
</td>
</tr>
</table>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}
</button>
<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
let validateParentDepartment = (rule, value, callback) => {
if (this.addMsg.Tier != '1' && value == '') {
return callback(new Error('请选择上级层级'));
} else {
callback();
}
}
return {
leaveBtn: '',
leaveId: '',
isleaveBtn: false,
layerDepartMentList: [],
layerPostList: [],
treeLayerTitle: '',
treeLayerUserTitle: '',
treeLayerShow: false,
treeLayerShowUser: false,
//树形
defaultProps: {
children: 'ChildList',
label: 'DepartmentName',
},
isTree: false,
loading: true,
//分页
total: 0,
pageSize: '',
currentPage: 1,
//弹窗
outerVisible: false,
dialogTitle: '',
rules: { //表单验证
RB_Branch_Id: [{
required: true,
message: this.$t('rule.company'),
trigger: 'change'
}],
DepartmentName: [{
required: true,
message: this.$t('rule.qsrbmmingchen'),
trigger: 'blur'
}],
Tier: [{
required: true,
message: this.$t('rule.qxzbmcengji'),
trigger: 'change'
}],
ParentId: [{
validator: validateParentDepartment,
trigger: 'change'
}],
DepartmentManager: [{
required: false,
message: this.$t('rule.qxzfuzeren'),
trigger: 'change'
}],
PostIdArr: [{
required: true,
message: this.$t('rule.qsrbdgangwei'),
trigger: 'change'
}],
DepartmentTel: [{
pattern: /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
message: this.$t('rule.qsrzqdbmdianhua')
}],
Sort: [{
required: true,
pattern: /^(-|\+)?\d+$/,
message: this.$t('rule.qszhengshu')
}],
IsLeader: [{
required: false,
trigger: 'change'
}],
},
addMsg1: {
EmName: '',
EmSex: '0',
EmCard: '',
EmBirthday: '',
EmEducation: '',
EmEntry: '',
EmLeave: '',
EmAddress: '',
EmMobile: '',
EmTel: '',
EmQQ: '',
EmPhoto: '',
EmAccount: '',
EmPassword: '',
RB_Group_id: '',
RB_Branch_id: '',
RB_Department_Id: '',
RB_Post_Id: '',
},
rules1: {
RB_Branch_id: [{
required: true,
message: this.$t('rule.company'),
trigger: 'change'
}],
RB_Department_Id: [{
required: true,
message: this.$t('tips.qxzbumen'),
trigger: 'change'
}],
RB_Post_Id: [{
required: true,
message: this.$t('tips.qxzgangwei'),
trigger: 'change'
}],
EmName: [{
required: true,
message: this.$t('rule.qsrname'),
trigger: 'blur'
}],
EmEntry: [{
required: true,
message: '请选择入职时间',
trigger: 'blur'
}],
EmAccount: [{
required: true,
message: this.$t('login.login_account'),
trigger: 'blur'
},
{
pattern: /^[a-zA-Z0-9]{4,18}$/,
message: '账号为6-18位字母数字组成'
}
],
EmPassword: [{
required: true,
message: this.$t('login.login_password'),
trigger: 'blur'
}],
EmQQ: [{
pattern: /^\d{5,11}$/,
message: '请输入正确的qq'
}],
EmMobile: [{
pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[012356789]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/,
message: this.$t('rule.qsrtelphone'),
}],
EmCard: [{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: this.$t('rule.qsrIdnum'),
}],
},
//请求数据
departmentMsg: {
ParentId: '-1',
RB_Group_Id: '0',
RB_Branch_Id: '-1',
Status: '0',
Tier: '0',
},
layerDepartmentMsg: {
BranchId: '',
Tier: ''
},
msg: {
pageIndex: 1,
pageSize: 15,
ParentId: '0',
Tier: '0',
RB_Branch_Id: '-1',
DepartmentName: '',
IsParentCompany: 2
},
companyMsg: {
RB_Group_Id: '0',
Status: 0,
},
postMsg: {
RB_Group_Id: '',
},
employeeMsg: {
BranchId: '-1',
IsLeave: 0
},
addMsg: {
DepartmentID: '0',
DepartmentName: '',
DepartmentManager: '',
DepartmentTel: '',
RB_Branch_Id: '',
RB_Group_Id: '0',
ParentId: '',
Tier: '',
Status: '0',
Sort: '',
PostIdArr: [],
IsLeader: '0',
ManagerIds: '',//部门负责人
ManagerIdArr: []//数组
},
getDepartmentMsg: {
RB_Group_Id: '0',
RB_Branch_Id: '-1',
Status: '0',
},
getPostMsg: {
RB_Group_Id: '0',
RB_Branch_Id: '-1',
RB_Department_Id: '0',
},
layerTierMsg: {
BranchId: '-1'
},
dragMsg: {
IsSort: 1,
Tier: '',
Sort: '',
ParentId: '',
DepartmentID: '',
},
defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
//返回数据
DataList: [],
companyList: [],
layercompanyList: [],
departmentList: [],
layerDepartmentList: [],
postList: [],
employeeList: [],
tierList: [],
layerTierList: [],
allList: []
}
},
mounted() {
let userInfo = this.getLocalStorage();
this.addMsg1.RB_Group_id = this.postMsg.RB_Group_Id = this.companyMsg.RB_Group_Id = this.departmentMsg.RB_Group_Id = this.addMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
this.companyMsg.RB_Branch_Id = userInfo.RB_Branch_id; //公司
this.msg.RB_Branch_Id = userInfo.RB_Branch_id; //公司
this.msg.IsParentCompany = userInfo.IsParentCompany; //是否为总公司
this.getList();
this.getCompany();
this.getDepartment();
this.getEmployee();
this.getPost()
this.getTier()
this.getAllDepartment()
},
filters: {
// tierFormat(value){
// if(value=='1')
// return '一级'
// if(value=='2')
// return '二级'
// if(value=='3')
// return '三级'
// if(value=='4')
// return '四级'
// if(value=='5')
// return '五级'
// }
},
methods: {
setIsLeave(Id) {
let myDate = new Date();
let _year = myDate.getFullYear();
let _month = myDate.getMonth() >= 9 ? myDate.getMonth() + 1 : '0' + (myDate.getMonth() + 1);
let _date = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
let _time = _year + '-' + _month + '-' + _date;
this.apipost('admin_post_EmployeeInOrOut', {
Id: Id,
Time: _time,
}, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message)
this.getList();
this.getAllDepartment()
} else {
this.$message.error(res.data.message)
}
}, err => {
})
},
layerLinkageDepartment() { //弹窗联动部门
this.addMsg1.RB_Department_Id = '';
this.addMsg1.RB_Post_Id = '',
this.getDepartmentMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id;
this.getDerpartMent();
},
layerLinkagePost() { //弹窗联动岗位
this.addMsg1.RB_Post_Id = '',
this.getPostMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id;
this.getPostMsg.RB_Department_Id = this.addMsg1.RB_Department_Id
this.getPost1()
},
getPost1() { //岗位
this.apipost('admin_get_PostGetList', this.getPostMsg, res => {
if (res.data.resultCode == 1) {
this.layerPostList = res.data.data;
} else {
}
}, err => {
})
},
getDerpartMent() { //获取部门
this.apipost('admin_get_DepartmentGetList', this.getDepartmentMsg, res => {
if (res.data.resultCode == 1) {
this.layerDepartMentList = res.data.data;
} else {
}
}, err => {
})
},
handleDragStart(node, ev) {
// console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
// console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
// console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
// console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
// console.log('tree drag end: ', dropNode && dropNode.label, dropType);
// console.log(2222)
},
handleDrop(node, node1, inner) {
if (inner == 'inner') {
this.dragMsg.Tier = node1.data.Tier + 1
this.dragMsg.Sort = node.data.Sort
this.dragMsg.ParentId = node1.data.DepartmentID
this.dragMsg.DepartmentID = node.data.DepartmentID
}
if (inner == 'before') {
this.dragMsg.Tier = node1.data.Tier
this.dragMsg.Sort = node1.data.Sort - 1
this.dragMsg.ParentId = node1.data.ParentId
this.dragMsg.DepartmentID = node.data.DepartmentID
}
if (inner == 'after') {
this.dragMsg.Tier = node1.data.Tier
this.dragMsg.Sort = node1.data.Sort + 1
this.dragMsg.ParentId = node1.data.ParentId
this.dragMsg.DepartmentID = node.data.DepartmentID
}
this.apipost('admin_post_DepartmentSet', this.dragMsg, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message);
this.getList()
this.getAllDepartment()
} else {
this.$message.error(res.data.message)
}
}, err => {
})
},
allowDrop(draggingNode, dropNode, type) {
return dropNode.data.DType === 1
},
allowDrag(draggingNode) {
return draggingNode.data.DType === 1
},
getAllDepartment() {
this.apipost('user_get_GetGroupDepartmentTreeList', {}, res => {
if (res.data.resultCode == 1) {
this.allList = res.data.data
//console.log(this.allList)
}
}, err => {
})
},
getTier() {
this.apipost('app_get_GetDepartmentTier', {}, res => {
if (res.data.resultCode == 1) {
this.layerTierList = []
for (let i = res.data.data.StartNum; i <= res.data.data.EndNum; i++) {
this.tierList.push({
id: i,
name: i + '级'
})
}
} else {
}
}, err => {
})
},
getlayerTier() {
this.apipost('app_get_GetDepartmentTier', this.layerTierMsg, res => {
if (res.data.resultCode == 1) {
this.layerTierList = []
for (let i = res.data.data.StartNum; i <= res.data.data.EndNum; i++) {
this.layerTierList.push({
id: i,
name: i + '级'
})
}
} else {
}
}, err => {
})
},
getDeparmentTierByBranch() {
this.layerTierMsg.BranchId = this.employeeMsg.BranchId = this.layerDepartmentMsg.BranchId = this.addMsg.RB_Branch_Id
this.addMsg.DepartmentManager = ''
this.getLayerParentDepartment()
this.getEmployee()
this.getlayerTier()
},
getParentDeparment() {
this.addMsg.ParentId = '';
if (this.addMsg.Tier == 1) {
this.layerDepartmentList = null;
} else {
this.layerDepartmentMsg.Tier = this.addMsg.Tier;
this.getLayerParentDepartment();
}
},
getList() { //获取数据
this.loading = true
this.treeLayerShow = false
this.treeLayerShowUser = false
this.apipost('admin_get_DepartmentGetPageList', this.msg, res => {
if (res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
this.loading = false
} else {
}
}, err => {
})
},
getCompany() { //公司
this.dialogTitle=this.$t('adm.adm_xzbumen');
this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
if (this.outerVisible) {
this.layercompanyList = res.data.data
} else {
this.companyList = res.data.data
}
}, err => {
})
},
getDepartment() { //获取上级部门
this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
if (res.data.resultCode == 1) {
this.departmentList = res.data.data
}
}, err => {
})
},
getLayerParentDepartment() {
this.apipost('app_get_GetDepartmentCascade', this.layerDepartmentMsg, res => {
if (res.data.resultCode == 1) {
this.layerDepartmentList = res.data.data
}
}, err => {
})
},
getPost() { //获取岗位
this.apipost('admin_get_PostGetList', this.postMsg, res => {
if (res.data.resultCode == 1) {
this.postList = res.data.data
}
}, err => {
})
},
getEmployee() { //员工
this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
if (res.data.resultCode == 1) {
this.employeeList = res.data.data;
} else {
}
}, err => {
})
},
addData1() {
this.apipost('admin_post_EmployeeOperate', this.addMsg1, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message);
this.getList();
this.getAllDepartment()
this.resetForm('addMsg1');
} else {
this.$message.error(res.data.message)
}
}, err => {
})
},
submitForm1(addMsg) { //提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData1()
} else {
return false;
}
});
},
resetForm(formName) { //弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
// this.addMsg1.EmployeeId='0'
},
addData() { //新增数据
if (this.addMsg.ManagerIdArr.length > 0) {
this.addMsg.ManagerIds = this.addMsg.ManagerIdArr.join(",");
this.addMsg.DepartmentManager = String(this.addMsg.ManagerIdArr[0]);
} else {
this.addMsg.ManagerIds = ''
this.addMsg.DepartmentManager = 0
}
this.apipost('admin_post_DepartmentSet', this.addMsg, res => {
if (res.data.resultCode == 1) {
this.$message.success(res.data.message);
this.outerVisible = false;
this.treeLayerShow = false
this.getList()
this.getAllDepartment()
this.resetForm('addMsg');
} else {
this.$message.error(res.data.message)
}
}, err => {
})
},
addTreeData(obj) {
this.treeLayerTitle=this.$t('adm.adm_addbumen');
this.getCompany()
this.layerDepartmentMsg.BranchId = this.layerTierMsg.BranchId = this.addMsg.RB_Branch_Id = obj.RB_Branch_Id
this.layerDepartmentMsg.Tier = obj.Tier + 1;
this.getlayerTier()
this.getLayerParentDepartment()
this.addMsg.Tier = obj.Tier + 1
this.addMsg.ParentId = obj.DepartmentID
},
addTreeUerData(obj) {
this.isleaveBtn = false;
this.treeLayerUserTitle=this.$t('adm.adm_addyuangong');
this.getCompany()
this.getDepartmentMsg.RB_Branch_Id = this.addMsg1.RB_Branch_id = obj.RB_Branch_Id
this.getDerpartMent();
this.getPostMsg.RB_Department_Id = this.addMsg1.RB_Department_Id = obj.DepartmentID
this.getPost1()
},
updateData(id) {
this.getCompany();
this.addMsg.DepartmentID = id
this.apipost('admin_get_DepartmentGet', {
DepartmentID: id
}, res => {
if (res.data.resultCode == 1) {
this.layerDepartmentMsg.BranchId = this.layerTierMsg.BranchId = this.addMsg.RB_Branch_Id = res.data.data.RB_Branch_Id
this.addMsg.DepartmentName = res.data.data.DepartmentName;
this.addMsg.ParentId = res.data.data.ParentId.toString();
this.addMsg.DepartmentManager = res.data.data.DepartmentManager == "0" ? '' : res.data.data.DepartmentManager;
this.addMsg.DepartmentTel = res.data.data.DepartmentTel;
this.addMsg.Sort = res.data.data.Sort;
this.addMsg.ManagerIds = res.data.data.ManagerIds;
this.addMsg.ManagerIdArr = res.data.data.ManagerIdArr;
this.addMsg.IsLeader = res.data.data.IsLeader.toString();
this.layerDepartmentMsg.Tier = this.addMsg.Tier = res.data.data.Tier;
this.getlayerTier()
this.getLayerParentDepartment()
if (res.data.data.PostIdStr != '') {
this.addMsg.PostIdArr = res.data.data.PostIdStr
} else {
this.addMsg.PostIdArr = []
}
if (res.data.data.Tier == 1) {
this.addMsg.ParentId = '';
this.layerDepartmentList = null;
} else {
this.addMsg.ParentId = res.data.data.ParentId;
this.departmentMsg.Tier = res.data.data.Tier - 1;
this.getDepartment();
}
} else {
this.$message.error(res.data.message)
}
}, err => {
})
},
updateDataUser(obj) {
this.leaveId = obj.DepartmentID
this.isleaveBtn = true;
this.apipost('admin_get_EmployeeGet', {
Id: obj.DepartmentID
}, res => {
if (res.data.resultCode == 1) {
this.getDepartmentMsg.RB_Branch_Id = res.data.data.RB_Branch_id
this.getPostMsg.RB_Department_Id = res.data.data.RB_Department_Id;
this.getDerpartMent();
this.getPost1();
this.addMsg1 = res.data.data;
if (res.data.data.IsLeave == 0) {
this.leaveBtn = '设为离职';
} else {
this.leaveBtn = '设为在职';
}
this.addMsg1.EmSex = res.data.data.EmSex.toString();
}
}, err => {
})
},
deleteDeparment(id) {
this.$confirm(this.$t('tips.tips_deletealldepart'), this.$t('tips.tips'), {
confirmButtonText:this.$t('pub.sureBtn'),
cancelButtonText: this.$t('pub.cancelBtn'),
type: 'warning'
}).then(() => {
this.apipost('admin_post_DepartmentRemove', {
DepartmentID: id
}, res => {
if (res.data.resultCode == 1) {
this.$message.success(this.$t('tips.shanchuchenggong'))
this.getList();
this.getAllDepartment()
}
}, err => {
})
}).catch(() => {
this.$message.info('已取消删除！')
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
submitForm(addMsg) { //提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData()
} else {
return false;
}
});
},
closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
done();
this.resetForm('addMsg');
},
resetForm(formName) { //弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
this.addMsg.DepartmentID = 0
this.addMsg1.EmployeeId = '0'
this.addMsg1.EmPhoto = ''
// this.layerDepartmentMsg.Tier=''
// this.layerTierList=[]
// this.layerDepartmentList=[]
}
}
}
</script>