<template>
|
<basic-container>
|
<avue-tabs :option="taskTypeList" @change="tabChange"></avue-tabs>
|
<el-container class="container">
|
<el-aside width="300px">
|
<el-input v-model="taskWord" class="search-box" clearable placeholder="请输入任务名称" @change="searchChange">
|
<template #append>
|
<el-button icon="el-icon-search"></el-button>
|
</template>
|
</el-input>
|
<ul class="aside-box">
|
<template v-if="this.taskList.length > 0">
|
<li v-for="(item, index) in this.taskList" :key="item.id" :class="{ 'is-active': taskActive === index }"
|
@click="handleActive(index)">
|
<div class="text">
|
<el-icon size="20px">
|
<Document />
|
</el-icon>
|
{{ item.taskName }}
|
</div>
|
</li>
|
</template>
|
<template v-else>
|
<el-empty description="暂无任务" />
|
</template>
|
</ul>
|
<div class="pagination">
|
<el-pagination v-model:current-page="page.current" v-model:page-size="page.size" background :pager-count="5"
|
layout="prev, pager, next" :total="page.total" @current-change="handleCurrentChange" small
|
hide-on-single-page/>
|
</div>
|
</el-aside>
|
<el-main>
|
<template v-if="this.taskList.length > 0">
|
<el-collapse v-model="activeNames">
|
<el-collapse-item title="当前任务评优奖项候选人详情" name="1" v-if="!defaultTaskType">
|
<evaluateTypeResult :params="{ data: taskList[taskActive] }" @initAsideData="initData" />
|
</el-collapse-item>
|
<el-collapse-item name="2" v-if="!defaultTaskType">
|
<template #title>
|
第一轮候选结果
|
<el-tag
|
style="margin-left: 10px;"
|
:type="status[taskList[taskActive].candidateState].type">
|
当前状态：{{ status[taskList[taskActive].candidateState].text }}
|
</el-tag>
|
</template>
|
<firstRoundResult :params="{ data: taskList[taskActive] }" />
|
</el-collapse-item>
|
<el-collapse-item name="3">
|
<template #title>
|
最终评优结果
|
<el-tag
|
style="margin-left: 10px;"
|
:type="status[taskList[taskActive].evaluateState].type">
|
当前状态：{{ status[taskList[taskActive].evaluateState].text }}
|
</el-tag>
|
</template>
|
<secondRoundResult :params="{ data: taskList[taskActive] }" />
|
</el-collapse-item>
|
</el-collapse>
|
</template>
|
<template v-else>
|
<el-empty description="暂无任务信息" />
|
</template>
|
</el-main>
|
</el-container>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getList } from '@/api/evaluate/evaluateTask'
|
import evaluateTypeResult from './components/evaluateTypeResult.vue'
|
import firstRoundResult from './components/firstRoundResult.vue'
|
import secondRoundResult from './components/secondRoundResult.vue'
|
|
export default {
|
components: {
|
evaluateTypeResult,
|
firstRoundResult,
|
secondRoundResult
|
},
|
data() {
|
return {
|
activeNames: ['1'],
|
taskList: [],
|
taskWord: '',
|
taskActive: 0,
|
page: {
|
current: 1,
|
size: 10,
|
total: 20
|
},
|
defaultTaskType: 0,
|
taskTypeList: {
|
column: [
|
{
|
label: '个人评优',
|
prop: 0,
|
},
|
{
|
label: '部门评优',
|
prop: 1,
|
},
|
],
|
},
|
status: {
|
0: {
|
text: '未开始',
|
type: 'warning'
|
},
|
1: {
|
text: '进行中',
|
type: 'success'
|
},
|
2: {
|
text: '已完成',
|
type: ''
|
},
|
}
|
// firstRounParams: {},
|
// secondRounParams: {}
|
};
|
},
|
methods: {
|
initData() {
|
this.getTaskList()
|
},
|
getTaskList(params) {
|
this.page.current = 1
|
const { current, size } = this.page
|
const values = {
|
type: this.defaultTaskType,
|
...params
|
}
|
getList(current, size, values).then(res => {
|
const result = res.data.data
|
this.page.total = result.total
|
this.taskList = result.records
|
})
|
},
|
searchChange() {
|
this.page.current = 1
|
this.getTaskList({ taskName: this.taskWord })
|
},
|
handleCurrentChange(value) {
|
this.page.current = value
|
this.getTaskList({ taskName: this.taskWord })
|
},
|
tabChange(value) {
|
this.taskActive = 0
|
this.defaultTaskType = value.prop;
|
this.getTaskList()
|
this.defaultTaskType ? this.activeNames = ['3'] : this.activeNames = ['1']
|
},
|
handleActive(index) {
|
this.taskActive = index
|
}
|
},
|
mounted() {
|
this.initData()
|
},
|
provide() {
|
return {
|
type: () => this.defaultTaskType
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
.el-aside {
|
margin-right: 10px;
|
padding-right: 10px;
|
border-right: 1px solid var(--el-card-border-color);
|
|
.aside-box {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
|
li {
|
cursor: pointer;
|
padding: 10px 0;
|
margin-top: 10px;
|
|
.text {
|
display: flex;
|
align-items: center;
|
border-left: 3px solid var(--el-color-primary);
|
padding-left: 10px;
|
}
|
|
.el-icon {
|
margin-right: 5px;
|
}
|
}
|
}
|
|
.pagination {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
}
|
|
.is-active {
|
color: var(--el-color-primary);
|
background-color: rgba(var(--el-color-primary-rgb), .1);
|
}
|
</style>
|
