<template>
|
<div>
|
<a-list item-layout='horizontal' :data-source='infoList'>
|
<a-list-item slot='renderItem' slot-scope='item, index'>
|
<a-list-item-meta>
|
<a slot='title'>{{ item.label }}</a>
|
<template slot='description'>
|
<div style='display: flex'>
|
<div style='min-width: 100px'>
|
总共:<span :class="item.subUserList.length ? 'text-blue' : null">{{ item.subUserList.length ? item.subUserList.length : '-' }}</span> 人
|
</div>
|
<div style='min-width: 100px'>
|
<a-icon type='user' style='color: #1890FF;' />
|
在编:<span :class="item.bz.length ? 'text-blue' : null">{{ item.bz.length ? item.bz.length : '-' }}</span> 人
|
</div>
|
<div style='min-width: 100px'>
|
<a-icon type='star' :class="item.yj.length ? 'text-blue' : null" theme='filled' />
|
应届:<span :class="item.yj.length ? 'text-blue' : null">{{ item.yj.length ? item.yj.length : '-' }}</span> 人
|
</div>
|
<div style='min-width: 100px'>
|
<a-icon type='golden':class="item.jd.length ? 'text-blue' : null" theme='filled' />
|
借调:<span :class="item.jd.length ? 'text-blue' : null">{{ item.jd.length ? item.jd.length : '-' }}</span> 人
|
</div>
|
|
<div style='min-width: 100px'>
|
<a-icon type='thunderbolt' :class="item.sy.length ? 'text-blue' : null" theme='filled' />
|
试用:<span :class="item.sy.length ? 'text-blue' : null">{{ item.sy.length ? item.sy.length : '-' }}</span> 人
|
</div>
|
<div style='min-width: 100px'>
|
<a-icon type='flag' :class="item.sx.length ? 'text-blue' : null" theme='filled' />
|
实习:<span :class="item.sx.length ? 'text-blue' : null">{{ item.sx.length ? item.sx.length : '-' }}</span> 人
|
</div>
|
|
</div>
|
|
</template>
|
</a-list-item-meta>
|
</a-list-item>
|
</a-list>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'DepartInfoList',
|
props: {
|
data: {
|
type: Object,
|
required: true,
|
default: {}
|
}
|
},
|
watch: {
|
data: {
|
handler(newValue, oldValue) {
|
// 回调函数逻辑
|
this.parseData()
|
},
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
infoList: [
|
]
|
}
|
},
|
methods: {
|
parseData() {
|
let result = []
|
let temp = []
|
temp.push(this.data)
|
const fitData = (array) => {
|
for (let i = 0; i < array.length; i++) {
|
const item = array[i]
|
let model = {}
|
model.label = item.label
|
const subUserList = item.subUserList
|
//不是借调或实习生 = 编制人员
|
const bz = subUserList.filter(item => item.staffing == 1)
|
//借调人员
|
const jd = subUserList.filter(item => item.employStatu == 2)
|
//应届生
|
const yj = subUserList.filter(item => item.grad == 1)
|
//试用期
|
const sy = subUserList.filter(item => item.employ == 2)
|
//实习生
|
const sx = subUserList.filter(item => item.employ == 3)
|
model.subUserList = subUserList
|
model.bz = bz
|
model.jd = jd
|
model.yj = yj
|
model.sy = sy
|
model.sx = sx
|
result.push(model)
|
if (item.children) {
|
fitData(item.children)
|
}
|
}
|
}
|
fitData(temp)
|
this.infoList = result
|
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
/deep/ .ant-list-item {
|
padding: 4px 0;
|
}
|
|
.text-blue{
|
color:#1890FF;
|
}
|
|
</style>
|
