This commit is contained in:
熊成强 2020-11-26 16:13:58 +08:00
parent 8867e15955
commit efd376e181

View File

@ -1,387 +0,0 @@
<!-- -->
<template>
<div class="basis">
<div class="basis-title commonFont">
基本信息
</div>
<div class="basis-form">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="考评组名称:" prop="name">
<el-input
size="small"
v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<!-- <el-form-item label="周期类型:">
<el-radio-group v-model="form.radio">
<el-radio
v-for="(i,index) in zhouqi"
:key="index"
:label="i.id">{{i.name}}</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="考评组管理员:" >
<el-tooltip class="item" effect="light" placement="right">
<div slot="content">
考评组管理员<br/>
只有考评组管理员可以编辑这个考评组<br/>
权限为全部考评组的管理员默认可以管理<br/>
所有考评组考评组管理员只能从智能绩<br/>
效的管理员中选择
</div>
<el-input
@focus='showRight=true'
style="width:300px;cursor: pointer;"
size="mini"
placeholder="请选择考评组管理员"
readonly
:value="Ground.title?(Ground.title+ ' 等'+ Ground.list.length + '人'):''">
<i @click='showRight=true' slot="suffix" class="el-input__icon el-icon-edit"></i>
</el-input>
</el-tooltip>
<div class="commonFont" style="font-size:12px">设置哪些管理员可以管理该考评组</div>
</el-form-item>
<el-form-item label="被考核人员" prop="name">
</el-form-item>
<el-form-item label="考评员工:">
<div v-if="showData.list.length>0">
<el-input
@focus="handleGetChoose('isShow')"
style="width:300px;cursor: pointer;"
size="small"
:value ="showData.title + '等' + showData.list.length + '个部门' || '请选择部门'"
readonly>
<i @click="handleGetChoose('isShow')" slot="suffix" class="el-input__icon el-icon-edit"></i>
</el-input>
<i @click="handleClearList('showData')" style="margin-left:10px;cursor: pointer;" class="el-icon-delete"></i>
</div>
<div v-if="personnelList.list.length>0">
<el-input
@focus="handleGetChoose('isShowPersonnel')"
style="width:300px;cursor: pointer;"
size="small"
:value ="personnelList.list[0].name + '等' + personnelList.list.length + '个人'"
readonly>
<i @click="handleGetChoose('isShowPersonnel')" slot="suffix" class="el-input__icon el-icon-edit"></i>
</el-input>
<i @click="handleClearList('personnelList')" style="margin-left:10px;cursor: pointer;" class="el-icon-delete"></i>
</div>
<el-button size='mini' @click="handleGetChoose('isShow')" icon="el-icon-plus">选部门</el-button>
<!-- <el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选角色</el-button> -->
<el-button size='mini' @click="handleGetChoose('isShowPersonnel')" icon="el-icon-plus">选人员</el-button>
<div class="commonFont" style="font-size:12px">
按部门设置新加入部门的员工将自动加入考评组
</div>
</el-form-item>
<el-form-item v-if="showData.list.length>0" label="无需考评人员:">
<div v-if="outIdsLsit.list.length>0">
<el-input
@focus="handleGetChoose('isSshowOutIds')"
style="width:300px;cursor: pointer;"
size="small"
:value ="outIdsLsit.list[0].name + '等' + outIdsLsit.list.length + '个人'"
readonly>
<i @clcik="handleGetChoose('isSshowOutIds')" slot="suffix" class="el-input__icon el-icon-edit"></i>
</el-input>
<i @click="handleClearList('outIdsLsit')" style="margin-left:10px;cursor: pointer;" class="el-icon-delete"></i>
</div>
<!-- <el-button size='mini' @click="handleGetChoose(0)" icon="el-icon-plus">选部门</el-button> -->
<!-- <el-button size='mini' @click="handleGetChoose" icon="el-icon-plus">选角色</el-button> -->
<el-button size='mini' @click="handleGetChoose('isSshowOutIds')" icon="el-icon-plus">选人员</el-button>
<div class="commonFont" style="font-size:12px">
从已选部门中排除无需在本考评组或无需考核的人员
</div>
</el-form-item>
</el-form>
</div>
<getPersonnel @cb='handleCheckOutIds' v-if="isSshowOutIds" :value.sync='form.outIds' :isShow.sync='isSshowOutIds' :showDataList.sync='outIdsLsit'/>
<getPersonnel @cb='handleCheckStaffIds' v-if="isShowPersonnel" :value.sync='form.staffIds' :isShow.sync='isShowPersonnel' :showDataList.sync='personnelList'/>
<get-depart @cb='handleCheckDepIds' v-if="isShow" :value.sync='form.depIds' :isShow.sync='isShow' :showDataList.sync='showData'/>
<popup-right v-if="showRight" @cancel='handleCancel' @submit="handleSubmit" title="选择考评组管理员">
<div slot="content" class="chooseManage">
<div v-for="i in GroundList" :key="i.staffId" class="chooseManage-item" >
<el-checkbox :true-label='1' :false-label='0' :disabled='i.isDisable===1' :checked='i.isDisable===1' v-model='i.isSelect'></el-checkbox><span class='commonFont' style="margin:0 0 0 10px;">{{i.staffName}} </span>
</div>
</div>
</popup-right>
<el-dialog title="将重复的人员进行归位" :visible.sync="dialogTableVisible">
<el-transfer :props="options" :titles="transferTitle" v-model="mobileList" :data="repeatList"></el-transfer>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false"> </el-button>
<el-button type="primary" @click="handleChangeList"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import getDepart from '@/components/getDepart'
import getPersonnel from '@/components/getPersonnel'
import PopupRight from '@/components/PopupRight'
import { getGround } from '@/api/data'
import { getByIdForBasis, apiCheckStaff } from '@/api/workbench'
export default {
props: {
basisForm: {
type: Object,
default: () => {
return {
counts: '', //
depIds: '', // id
managerIdList: [],
managerIds: '', // IDsystem_user,id
outIds: '', // ids
staffIds: '', // staff_id
name: ''
}
}
}
},
data () {
return {
repeatList: [],
mobileList: [],
chooseList: [],
options: {key: 'staffId', label: 'name'},
transferTitle: ['排除人员', '参评人员'],
dialogTableVisible: false,
id: '',
GroundList: [],
GroundList1: [],
isSshowOutIds: false,
outIdsLsit: {
list: []
},
showRight: false,
isShow: false,
isShowPersonnel: false,
personnelList: {
list: []
},
showData: {
list: []
}, //
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入考评组', trigger: 'blur' }
]
}
}
},
components: {
getDepart,
getPersonnel,
PopupRight
},
computed: {
Ground () {
const params = {
list: [],
title: '',
managerIds: ''
}
params.list = this.GroundList1.filter(i => i.isSelect === 1)
params.list.map((i, index) => {
params.managerIds += i.staffId + ','
if (index < 2) params.title += i.staffName.split(' ')[0] + ','
})
params.managerIds = params.managerIds.substring(0, params.managerIds.length - 1)
params.title = params.title.substring(0, params.title.length - 1)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.form.managerIds = params.managerIds
return params
}
},
beforeMount () {},
async mounted () {
this.$loadingStart()
await this.handleGetGround()
const id = this.$route.query.id || ''
this.id = id
if (id) {
await this.handleGetByIdForBasis(id)
}
this.$loadingEnd()
this.form = this.basisForm
},
methods: {
handleChangeList (diff) {
console.log('repeatList: ', this.repeatList)
console.log('mobileList: ', this.mobileList)
},
handleClearList (item) {
this[item].list = []
if (item === 'outIdsLsit') {
this.form.outIds = ''
}
if (item === 'personnelList') {
this.form.staffIds = ''
}
if (item === 'showData') {
this.form.depIds = ''
}
},
handleDifferec (list, choose) {
this.repeatList = list
this.chooseList = choose
this.dialogTableVisible = true
},
handleCheckOutIds (item) {
this.transferTitle = ['排除人员', '参评人员']
this.handleDifferec(this._.intersectionBy(this.personnelList.list, item.list, 'staffId'), ['outIdsLsit', 'personnelList'])
this.dialogTableVisible = true
console.log(this._.intersectionBy(this.personnelList.list, item.list, 'staffId'))
// this.form.outIds = item.value
// this.outIdsLsit = item
// this.isSshowOutIds = false
},
async handleCheckStaffIds (item) {
const params = Object.assign({}, this.form, {staffIds: item.value})
const bool = await this.handleCheckStaff(params)
if (bool) {
this.form.staffIds = item.value
this.personnelList = item
this.isShowPersonnel = false
}
},
async handleCheckDepIds (item) {
const params = Object.assign({}, this.form, {depIds: item.value})
const bool = await this.handleCheckStaff(params)
if (bool) {
this.form.depIds = item.value
this.showData = item
this.isShow = false
}
},
async handleCheckStaff (parmas = this.form) {
return new Promise(async (resolve, reject) => {
let res = await apiCheckStaff(Object.assign({}, parmas, {confirm: 0, id: this.$route.query.id || ''}))
if (res.code === 504) {
this.$confirm(res.msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
resolve(true)
}).catch(() => {
resolve(false)
})
} else if (res.code === 200) {
resolve(true)
} else {
resolve(false)
}
})
},
//
async handleGetByIdForBasis (id) {
try {
let res = await getByIdForBasis({id})
res = res.data
this.GroundList1 = res.managers ? res.managers.map(i => {
i.staffId = i.id
i.staffName = i.name
i.isSelect = 1
this.GroundList = this.GroundList.map(j => {
if (i.staffId === j.staffId) {
i = Object.assign({}, j, i)
j.isSelect = 1
}
return j
})
return i
}) : []
const obj = {
id: this.$route.query.copy ? '' : res.id,
name: this.$route.query.copy ? '' : res.name
}
if (res.deps && res.deps.length !== 0 && !this.$route.query.copy) {
const b = this.$personlGetForm(res.outs)
this.outIdsLsit = b
obj.outIds = b.value
}
if (!this.$route.query.copy) {
const a = this.$personlGetForm(res.staffs)
const c = this.$departGetForm(res.deps)
obj.staffIds = a.value
obj.depIds = c.value
this.personnelList = a
this.showData = c
}
this.form = obj
} catch (error) {
this.$message.error(error.msg)
}
},
async handleGetGround () {
try {
let res = await getGround({groupId: 1})
res = res.data
res = res.map(i => {
i.isDisable = i.isSelect
return i
})
this.GroundList = JSON.parse(JSON.stringify(res))
this.GroundList1 = JSON.parse(JSON.stringify(res))
} catch (error) {
this.$message.error(error.msg)
}
},
handleCancel () {
this.GroundList = JSON.parse(JSON.stringify(this.GroundList1))
this.showRight = false
},
handleSubmit () {
this.GroundList1 = JSON.parse(JSON.stringify(this.GroundList))
this.showRight = false
},
handleGetChoose (item) {
this[item] = true
}
},
watch: {
form: {
deep: true,
handler (n, o) {
this.$emit('update:basisForm', n)
}
}
}
}
</script>
<style lang="less">
.basis{
.el-transfer{
display: flex;
justify-content: space-around;
align-items: center;
}
}
</style>
<style lang='less' scoped>
.basis{
&-title{
text-align: center;
margin-bottom: 20px;
}
&-form{
margin: 0 auto;
width: 50%;
}
.chooseManage-item{
min-width: 300px;
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid @borderColor;
}
}
</style>