454 lines
14 KiB
Vue
454 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<popup-right
|
||
v-if="showPopup"
|
||
@cancel="hundlePopupHide"
|
||
@submit="handleSubmitPopup"
|
||
:title="title"
|
||
class="popup"
|
||
>
|
||
<div slot="content">
|
||
<div class="line-space commonFont">
|
||
<div class="line-space ">
|
||
<el-input
|
||
v-model="rqAssessmentParameter.searchName"
|
||
@change="handlePopupSearchChange"
|
||
prefix-icon="el-icon-search"
|
||
placeholder="按姓名搜索"
|
||
size="small"
|
||
></el-input>
|
||
</div>
|
||
<div >
|
||
<el-button
|
||
@click="handleChooseDepartment"
|
||
size="small"
|
||
><div class="popup-btn"><span class="popup-btn-left-title">{{deptFilterData.deptNames}}</span><i class="el-icon-arrow-down"></i></div></el-button>
|
||
<el-button
|
||
@click="handleChooseGroup"
|
||
size="small"
|
||
><div class="popup-btn"><span class="popup-btn-left-title">{{groupFilterData.groupNames}}</span><i class="el-icon-arrow-down"></i></div></el-button>
|
||
</div>
|
||
<div
|
||
v-if="groupFilterData.selectedList.length>0|| deptFilterData.showDataList.list.length>0"
|
||
class="popup-tags "
|
||
>
|
||
<span>筛选条件:</span>
|
||
<el-tag
|
||
v-for="(item, index) in deptFilterData.showDataList.list"
|
||
:key="index+'dept'"
|
||
@close="handleTagDeptClose(item,index)"
|
||
closable
|
||
>{{ item.departmentName }}
|
||
</el-tag>
|
||
<el-tag
|
||
v-for="(item, index) in groupFilterData.selectedList"
|
||
:key="index+'group'"
|
||
effect="plain"
|
||
type="warning"
|
||
@close="handleTagGroupClose(item,index)"
|
||
closable
|
||
>{{ item.name }}
|
||
</el-tag>
|
||
<span>共筛选出<span class="comonBlue">{{deptFilterData.sumPerson + groupFilterData.sumPerson}}</span>人</span>
|
||
</div>
|
||
</div>
|
||
<div class="popup-table">
|
||
<el-table
|
||
v-if="popupData.tableList.length"
|
||
ref="popupMultipleTable"
|
||
:data="popupData.tableList"
|
||
@selection-change="handleSelectionChange"
|
||
tooltip-effect="dark"
|
||
:row-key="handleGetRowKeys"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="40px"
|
||
:reserve-selection="true"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="姓名"
|
||
width="55px"
|
||
><template slot-scope="scope">
|
||
<img
|
||
:src="scope.row.avatar"
|
||
class="popup-table-img"
|
||
/>
|
||
</template></el-table-column>
|
||
<el-table-column>
|
||
<template slot-scope="scope">
|
||
{{scope.row.staffName}}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div
|
||
v-else
|
||
class="popup-empty comonPromptFont"
|
||
>
|
||
<img
|
||
src=""
|
||
style="height: 150px; width: 150px;"
|
||
/>
|
||
<div>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
<el-pagination
|
||
:hide-on-single-page="true"
|
||
:current-page.sync="rqAssessmentParameter.currPage"
|
||
:page-size="rqAssessmentParameter.pageSize"
|
||
:total="rqAssessmentParameter.totalCount"
|
||
:page-count="rqAssessmentParameter.totalPage"
|
||
@current-change="handleCurrentChange"
|
||
layout="total, prev, pager, next, jumper"
|
||
></el-pagination>
|
||
</div>
|
||
<div
|
||
slot="footer-left"
|
||
class="popup-footer-left"
|
||
>已选择：{{popupData.selectedList.length}}个</div>
|
||
</popup-right>
|
||
|
||
<EvaluationTeamFilter
|
||
v-if="visibleGroupFilter"
|
||
:value='groupFilterData.evaluationIds'
|
||
:filtersDic="{startId: this.startId }"
|
||
:dialogVisible.sync='visibleGroupFilter'
|
||
@submitClick='handleTeamSubmit'
|
||
@close='visibleGroupFilter = false'
|
||
/>
|
||
|
||
<dialog-depart
|
||
v-if="visibleDeptFilter"
|
||
:isShow.sync='visibleDeptFilter'
|
||
:showDataList.sync='deptFilterData.showDataList'
|
||
@cb="handleDeptSubmit"
|
||
/>
|
||
<el-dialog title="删除确认" :visible.sync="visibleRemovePerson" width="440px">
|
||
<div v-if="popupData.selectedList.length>1">
|
||
<div class="commonFont line-space">确认将选中的{{popupData.selectedList.length}}人，从考核中删除，删除后，绩效考核数据将被清空，数据无法恢复，请确认是否删除</div>
|
||
<div class="commonFont line-space">请在下方输入框中输入<span style="color: red;">“删除”</span>二字，确认您已知晓删除将导致数据无法恢复</div>
|
||
<div><el-input v-model="removeConfirmInput" placeholder="请输入“删除二字”" size="small"></el-input></div>
|
||
</div>
|
||
<div v-else class="commonFont">被考核人删除后，本次考核相关数据数据将被清空，数据无法恢复，请确认是否删除</div>
|
||
<div slot="footer">
|
||
<el-button @click="visibleRemovePerson = false" size="small">取 消</el-button>
|
||
<el-button @click="handleConfirmRemovePerson" type="primary" size="small" :disabled="removeConfirmInput!=='删除'&&popupData.selectedList.length>1">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import PopupRight from '@/components/PopupRight'
|
||
import EvaluationTeamFilter from '@/components/EvaluationTeamFilter'
|
||
import dialogDepart from '@/components/getDepart'
|
||
import { apiManagerDetail, apiAssessManagerChange } from '@/api/assessment'
|
||
|
||
export default {
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '请选择开始评分的考评组'
|
||
},
|
||
showPopup: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
startId: null
|
||
|
||
},
|
||
data () {
|
||
return {
|
||
visibleRemovePerson: false, // 显示删除人员提示
|
||
removeConfirmInput: '', // 删除确认文案
|
||
visibleGroupFilter: false, // 考评组筛选
|
||
groupFilterData: {
|
||
groupNames: '选择考评组',
|
||
evaluationIds: '', // 选中值group
|
||
selectedList: [], // 选中考评组
|
||
sumPerson: 0 // 考评组 总人数
|
||
},
|
||
visibleDeptFilter: false, // 部门组筛选
|
||
deptFilterData: {
|
||
staffIds: '', // 人员id
|
||
deptNames: '选择部门',
|
||
showDataList: {
|
||
list: [],
|
||
title: '',
|
||
value: '' // 选中值部门ids
|
||
}, // 选中考评组
|
||
sumPerson: 0 // 考评部门 总人数
|
||
},
|
||
popupData: {
|
||
tableList: [],
|
||
selectedList: []
|
||
},
|
||
rqAssessmentParameter: {
|
||
currPage: 1,
|
||
pageSize: 100,
|
||
searchName: '',
|
||
totalCount: 1,
|
||
totalPage: 1,
|
||
evaluationIds: '', // 考勤组ids
|
||
staffIds: '', // 部门 id串
|
||
startId: ''// 考核id
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
PopupRight,
|
||
dialogDepart,
|
||
EvaluationTeamFilter
|
||
},
|
||
computed: {},
|
||
beforeMount () { },
|
||
mounted () { },
|
||
methods: {
|
||
handleGetRowKeys (row) {
|
||
return row.id
|
||
},
|
||
handlePopupSearchChange (val) {
|
||
// 去搜搜
|
||
this.handleGainAssessmentGroupList()
|
||
},
|
||
handleChooseDepartment () {
|
||
this.visibleDeptFilter = true
|
||
},
|
||
handleChooseGroup () {
|
||
this.visibleGroupFilter = true
|
||
},
|
||
handleSelectionChange (val) {
|
||
// 选择发生变化
|
||
this.popupData.selectedList = val
|
||
},
|
||
handleSubmitPopup () {
|
||
// 确定选择 显示二次删除去人
|
||
if (this.popupData.selectedList.length <= 0) {
|
||
this.$message.error('请选择删除的人员')
|
||
return
|
||
}
|
||
this.visibleRemovePerson = true
|
||
},
|
||
handleConfirmRemovePerson () {
|
||
// 确认删除 选中用户 删除成功页面刷新
|
||
let removeStaffIds = []
|
||
this.popupData.selectedList.forEach(item => {
|
||
removeStaffIds.push(item.id)
|
||
})
|
||
let dicPara = {
|
||
changeType: 1,
|
||
confirm: 0,
|
||
staffIds: removeStaffIds.join(),
|
||
startId: this.startId
|
||
}
|
||
console.log('删除数据===', dicPara)
|
||
apiAssessManagerChange(dicPara).then(res => {
|
||
if (res.code !== 200) {
|
||
return
|
||
}
|
||
// 删除成功
|
||
this.visibleRemovePerson = false
|
||
this.$emit('cb')
|
||
})
|
||
},
|
||
hundlePopupHide () {
|
||
this.$emit('update:showPopup', false)
|
||
},
|
||
handleCurrentChange () {
|
||
this.handleGainAssessmentGroupList()
|
||
},
|
||
// 获取数据
|
||
handleGainAssessmentGroupList () {
|
||
this.rqAssessmentParameter.startId = this.startId
|
||
apiManagerDetail(this.rqAssessmentParameter).then(res => {
|
||
if (res.code !== 200) {
|
||
return
|
||
}
|
||
this.rqAssessmentParameter.totalPage = res.data.totalPage
|
||
this.rqAssessmentParameter.totalCount = res.data.totalCount
|
||
this.rqAssessmentParameter.currPage = res.data.currPage
|
||
this.popupData.tableList = res.data.list
|
||
console.log('获取数据成功')
|
||
})
|
||
},
|
||
// 部门筛选
|
||
handleDeptSubmit (val) {
|
||
this.deptFilterData.showDataList = val
|
||
console.log('部门筛选--====-==-== ', val)
|
||
let deptNames = []
|
||
this.deptFilterData.showDataList.list.forEach(item => {
|
||
deptNames.push(item.departmentName)
|
||
})
|
||
this.deptFilterData.deptNames = deptNames.join()
|
||
// 递归方法 生成 json tree 数据
|
||
this.handleGainDeptData()
|
||
this.visibleDeptFilter = false
|
||
},
|
||
handleGainDeptData () {
|
||
// 获取真实数据 重新选择 删除标签
|
||
let dicIds = {}
|
||
this.handleGainDeptPerson(dicIds, this.deptFilterData.showDataList.list)
|
||
let arrPersonId = Object.keys(dicIds)
|
||
this.deptFilterData.sumPerson = arrPersonId.length
|
||
this.deptFilterData.staffIds = arrPersonId.join()
|
||
// 重新获取数据
|
||
this.rqAssessmentParameter.staffIds = this.deptFilterData.staffIds
|
||
this.handleGainAssessmentGroupList()
|
||
console.log('部门筛选--====-==-== ', this.deptFilterData)
|
||
},
|
||
handleGainDeptPerson (dicArr, list) {
|
||
for (let index = 0; index < list.length; index++) {
|
||
const dept = list[index]
|
||
for (let index = 0; index < dept.staffDtos.length; index++) {
|
||
const person = dept.staffDtos[index]
|
||
dicArr[person.staffId.toString()] = 1
|
||
}
|
||
if (dept.list instanceof Array) {
|
||
if (dept.list.length > 0) {
|
||
this.handleGainDeptPerson(dicArr, dept.list)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
handleTagDeptClose (item, index) {
|
||
this.deptFilterData.showDataList.list.splice(index, 1)
|
||
this.handleGainDeptData()
|
||
let newTitle = '选择部门'
|
||
let newVal = ''
|
||
if (this.deptFilterData.showDataList.list.length > 0) {
|
||
let titles = this.deptFilterData.deptNames.split(',')
|
||
let vals = this.deptFilterData.showDataList.value.split(',')
|
||
titles.splice(titles.indexOf(item.departmentName), 1)
|
||
vals.splice(vals.indexOf(item.departmentId), 1)
|
||
newTitle = titles.join()
|
||
newVal = vals.join()
|
||
}
|
||
this.deptFilterData.deptNames = newTitle
|
||
this.deptFilterData.showDataList.value = newVal
|
||
},
|
||
// 考评组筛选
|
||
handleTeamSubmit (val) {
|
||
let groupNames = []
|
||
val.selectedList.forEach((item) => {
|
||
groupNames.push(item.name)
|
||
})
|
||
this.groupFilterData.groupNames = groupNames.join()
|
||
this.visibleGroupFilter = false
|
||
this.groupFilterData.selectedList = val.selectedList
|
||
this.groupFilterData.sumPerson = val.sumCounts
|
||
this.groupFilterData.evaluationIds = val.value
|
||
this.rqAssessmentParameter.evaluationIds = val.value
|
||
// 重新获取
|
||
this.handleGainAssessmentGroupList()
|
||
},
|
||
handleTagGroupClose (item, index) {
|
||
this.groupFilterData.sumPerson -= item.counts
|
||
this.groupFilterData.selectedList.splice(index, 1)
|
||
let groupIds = ''
|
||
let groupNameStr = '选择考评组'
|
||
if (this.groupFilterData.selectedList.length > 0) {
|
||
let arrS = []
|
||
let groupNames = []
|
||
this.groupFilterData.selectedList.forEach((item) => {
|
||
arrS.push(item.id)
|
||
groupNames.push(item.name)
|
||
})
|
||
groupIds = arrS.join()
|
||
groupNameStr = groupNames.join()
|
||
}
|
||
this.groupFilterData.evaluationIds = groupIds
|
||
this.groupFilterData.groupNames = groupNameStr
|
||
|
||
// 重新获取
|
||
this.rqAssessmentParameter.evaluationIds = groupIds
|
||
this.handleGainAssessmentGroupList()
|
||
}
|
||
},
|
||
watch: {
|
||
'showPopup': function (newVal, oldVal) {
|
||
if (newVal) {
|
||
this.handleGainAssessmentGroupList()
|
||
} else {
|
||
this.removeConfirmInput = ''
|
||
this.rqAssessmentParameter.startId = null
|
||
this.rqAssessmentParameter.staffIds = ''
|
||
this.rqAssessmentParameter.evaluationIds = ''
|
||
this.rqAssessmentParameter.searchName = ''
|
||
this.rqAssessmentParameter.currPage = 1
|
||
this.rqAssessmentParameter.totalCount = 1
|
||
this.rqAssessmentParameter.totalPage = 1
|
||
this.staffIds = ''
|
||
this.popupData.tableList = []
|
||
this.popupData.selectedList = []
|
||
this.$nextTick(() => {
|
||
if (this.$refs.popupMultipleTable) {
|
||
console.log('lllllllllllllllllllllllllllllllll')
|
||
this.$refs.popupMultipleTable.clearSelection()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
.line-space {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.popup {
|
||
max-width: 440px;
|
||
.el-button {
|
||
max-width: 104px;
|
||
width: 104px;
|
||
}
|
||
&-btn{
|
||
display: flex;
|
||
&-left-title {
|
||
width: 74px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.el-tag{
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
&-tags {
|
||
width: 440px;
|
||
word-break: break-all;
|
||
}
|
||
&-table {
|
||
width: 440px;
|
||
.el-table {
|
||
width: 100%;
|
||
}
|
||
&-img {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 17px;
|
||
}
|
||
}
|
||
&-empty {
|
||
padding-top: 100px;
|
||
height: 500px;
|
||
width: 440px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
display: block;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&-footer-left {
|
||
color: @fontBlue;
|
||
}
|
||
}
|
||
</style>
|