363 lines
11 KiB
Vue
363 lines
11 KiB
Vue
<template>
|
||
<div class="initiate-assessment commonFont">
|
||
<el-form
|
||
:model="formData"
|
||
:rules="formRules"
|
||
ref="formData"
|
||
label-width="150px"
|
||
label-position="left"
|
||
label-suffix="："
|
||
size="mini"
|
||
>
|
||
<div class="title">基本信息</div>
|
||
<el-form-item
|
||
label="周期类型"
|
||
prop="cycleTimeType"
|
||
>
|
||
<el-radio-group v-model="formData.cycleTimeType">
|
||
<el-radio :label="0">月度</el-radio>
|
||
<el-radio :label="1">自定义</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="时间周期"
|
||
required
|
||
prop="rangDate"
|
||
>
|
||
<el-date-picker
|
||
@change="handleChangeRangDate"
|
||
v-model="formData.rangDate"
|
||
:type="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
|
||
:key="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
|
||
value-format="yyyy-MM"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="formData.rangDate"
|
||
label="考核合并"
|
||
prop="mergeType.name"
|
||
>
|
||
<el-radio
|
||
v-model="formData.mergeType.type"
|
||
:label="1"
|
||
>新发起考核
|
||
<el-input
|
||
v-model="formData.mergeType.name"
|
||
:disabled="formData.cycleTimeType===0"
|
||
maxlength="30"
|
||
show-word-limit
|
||
></el-input>
|
||
</el-radio>
|
||
</el-form-item>
|
||
|
||
<div class="choose-group">
|
||
<div class="title">被考核对象</div>
|
||
<el-form-item
|
||
label="参与考评组"
|
||
prop="assessmentList"
|
||
>
|
||
<div>
|
||
<el-button @click="handleChooseGroup">请选择</el-button>
|
||
</div>
|
||
<div class="line-space">
|
||
<el-table
|
||
v-if="formData.assessmentList.length>0"
|
||
:data="formData.assessmentList"
|
||
:header-cell-style="{ 'background-color': '#f5f5f5' }"
|
||
max-height="440px"
|
||
>
|
||
<el-table-column
|
||
label="考核组名称"
|
||
prop="name"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="参与人数"
|
||
prop="counts"
|
||
></el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
@click.native.prevent="
|
||
handleGroupDelete(scope.$index, formData.assessmentList)
|
||
"
|
||
size="small"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="line-space">
|
||
<el-button
|
||
type="primary"
|
||
@click="handleSubmit"
|
||
>确定</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<div>
|
||
<popup-right
|
||
v-if="showChooseList"
|
||
@cancel='showChooseList = false'
|
||
@submit="handleSubmitPopup"
|
||
:title="popupRightTitle"
|
||
class="popup"
|
||
>
|
||
<div slot="content">
|
||
<div class="popup-search">
|
||
<el-input
|
||
v-model="rqAssessmentParameter.searchName"
|
||
@change="handlePopupSearchChange"
|
||
prefix-icon="el-icon-search"
|
||
placeholder="搜索考评组"
|
||
size="mini"
|
||
></el-input>
|
||
</div>
|
||
<div class="popup-table">
|
||
<el-table
|
||
v-if="popupData.tableList.length"
|
||
:data="popupData.tableList"
|
||
@selection-change="handleSelectionChange"
|
||
tooltip-effect="dark"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="40"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="全选"
|
||
width="250"
|
||
><template slot-scope="scope">{{scope.row.name}}</template></el-table-column>
|
||
<el-table-column
|
||
width="80"
|
||
align="right"
|
||
><template slot-scope="scope">{{scope.row.counts}}人</template></el-table-column>
|
||
</el-table>
|
||
<div
|
||
v-else
|
||
class="popup-empty"
|
||
>
|
||
<img
|
||
src=""
|
||
style="height: 150px; width: 150px;"
|
||
/>
|
||
<div>暂无考评组</div>
|
||
<div>考评组用于自定义配置“被考核人”的考核指标和考核流程</div>
|
||
<el-button
|
||
@click="handlePopupCreat"
|
||
type="text"
|
||
>新建考评组</el-button>
|
||
</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>
|
||
<el-dialog
|
||
title="发起考核"
|
||
:visible.sync="dialogSendVisible"
|
||
width="30%"
|
||
>
|
||
<span>确认发起{{this.formData.mergeType.name}}绩效考核？</span>
|
||
<span
|
||
slot="footer"
|
||
class="dialog-footer"
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleDialogSend"
|
||
>确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import PopupRight from '@/components/PopupRight'
|
||
import { getWorkList, sendAssessmentInfo } from '@/api/workbench'
|
||
export default {
|
||
data () {
|
||
return {
|
||
dialogSendVisible: false,
|
||
popupRightTitle: '选择考评组（月度）考核',
|
||
showChooseList: false,
|
||
formData: {
|
||
cycleTimeType: 0,
|
||
rangDate: '',
|
||
assessmentList: [], // 考核对象
|
||
mergeType: { // 考核合并类型
|
||
type: 1,
|
||
name: '' // 合并 id 新发起无效
|
||
}
|
||
},
|
||
formRules: {
|
||
cycleTimeType: [{ required: true, message: '请选择周期类型', trigger: 'blur' }],
|
||
rangDate: [{ required: true, message: '请选择时间周期', trigger: 'change' }],
|
||
assessmentList: [{ type: 'array', required: true, message: '请选择参与考评组', trigger: 'change' }],
|
||
'mergeType.name': [{ required: true, message: '请填写新建考核名称', trigger: 'blur' }]
|
||
|
||
},
|
||
popupData: {
|
||
tableList: [],
|
||
selectedList: []
|
||
},
|
||
rqAssessmentParameter: {
|
||
currPage: 1,
|
||
pageSize: 100,
|
||
searchName: '',
|
||
totalCount: 1,
|
||
totalPage: 1
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
PopupRight
|
||
},
|
||
watch: {
|
||
'formData.cycleTimeType': function (newVal, oldVal) {
|
||
// console.log(this.formData.cycleTimeType)
|
||
this.formData.rangDate = ''
|
||
}
|
||
},
|
||
created () {
|
||
this.handleGainAssessmentGroupList()
|
||
},
|
||
methods: {
|
||
handleChangeRangDate (chgVal) {
|
||
let nameStr = this.$format(chgVal, 'yyyy年MM月绩效考核')
|
||
if (this.formData.cycleTimeType === 1) {
|
||
// 自定义
|
||
nameStr = chgVal[0] + '至' + chgVal[1] + '绩效考核'
|
||
}
|
||
this.formData.mergeType.name = nameStr
|
||
},
|
||
handleChooseGroup () {
|
||
this.popupData.selectedList = []
|
||
this.showChooseList = !this.showChooseList
|
||
},
|
||
handleGroupDelete (index, rows) {
|
||
console.log('删除----', rows)
|
||
rows.splice(index, 1)
|
||
},
|
||
handleSubmit () {
|
||
console.log('提交')
|
||
this.$refs['formData'].validate((val) => {
|
||
this.dialogSendVisible = val
|
||
console.log('1111111111111111')
|
||
})
|
||
},
|
||
handleDialogSend () {
|
||
// 发起考核
|
||
const groupIdList = this.formData.assessmentList.map((item, index) => {
|
||
return item.id
|
||
})
|
||
let para = {
|
||
cycleType: this.formData.cycleTimeType,
|
||
groupIds: '24',
|
||
// groupIds: groupIdList.join(),
|
||
name: this.formData.mergeType.name
|
||
}
|
||
if (this.formData.cycleTimeType === 0) {
|
||
para['startTime'] = this.$format(this.formData.rangDate, 'yyyy-MM-dd hh:mm:ss')
|
||
} else {
|
||
para['startTime'] = this.$format(this.formData.rangDate[0], 'yyyy-MM-dd hh:mm:ss')
|
||
para['endTime'] = this.$format(this.formData.rangDate[1], 'yyyy-MM-dd hh:mm:ss')
|
||
}
|
||
sendAssessmentInfo(para).then(res => {
|
||
this.dialogSendVisible = false
|
||
// this.$router.push({ name: 'assessment' })
|
||
this.$message({
|
||
message: '发起考核成功',
|
||
type: 'success'
|
||
})
|
||
})
|
||
},
|
||
handlePopupSearchChange (val) {
|
||
console.log('搜索' + val)
|
||
// 去搜搜
|
||
this.handleGainAssessmentGroupList()
|
||
},
|
||
handleSelectionChange (val) {
|
||
// 全选
|
||
this.popupData.selectedList = val
|
||
},
|
||
handlePopupCreat () {
|
||
this.showChooseList = false
|
||
// 新建考评组
|
||
this.$router.push({ name: 'workbench-edit-group' })
|
||
},
|
||
handleSubmitPopup () {
|
||
this.showChooseList = false
|
||
const list = this.popupData.selectedList
|
||
this.formData.assessmentList = this.popupData.selectedList
|
||
},
|
||
handleCurrentChange (val) {
|
||
this.handleGainAssessmentGroupList(val)
|
||
},
|
||
// 获取数据
|
||
handleGainAssessmentGroupList (currPage) {
|
||
currPage = currPage > 0 ? currPage : this.rqAssessmentParameter.currPage
|
||
let para = {
|
||
pageSize: this.rqAssessmentParameter.pageSize,
|
||
currPage: currPage,
|
||
name: this.rqAssessmentParameter.searchName
|
||
}
|
||
getWorkList(para).then(res => {
|
||
this.rqAssessmentParameter.totalPage = res.totalPage
|
||
this.rqAssessmentParameter.totalCount = res.totalCount
|
||
this.currPage = res.currPage
|
||
this.popupData.tableList = res.list
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.initiate-assessment {
|
||
padding: 25px;
|
||
background-color: white;
|
||
min-height: 600px;
|
||
.title {
|
||
margin-bottom: 25px;
|
||
}
|
||
.choose-group {
|
||
margin-top: 150px;
|
||
}
|
||
.line-space {
|
||
margin-top: 20px;
|
||
}
|
||
.popup {
|
||
&-search {
|
||
margin-bottom: 20px;
|
||
}
|
||
&-empty {
|
||
padding-top: 100px;
|
||
height: 500px;
|
||
width: 410px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
display: block;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&-footer-left {
|
||
color: @fontBlue;
|
||
}
|
||
}
|
||
}
|
||
</style>
|