<template>
|
<el-drawer v-model="props.params.visible" @open="openDrawer" direction="rtl" size="50%">
|
<template #header>
|
<div class="drawer-title">{{ props.params.data?.taskName || '评优任务详情' }}</div>
|
</template>
|
<el-collapse v-model="collapseParams.activeNames">
|
<el-collapse-item v-if="!type()" title="当前任务评优奖项" name="1">
|
<ul class="type-list">
|
<li class="type-item">
|
<div class="title">奖项</div>
|
<div class="introduction">认定标准</div>
|
<div class="number">名额</div>
|
</li>
|
<li class="type-item" v-for="(item, index) in collapseParams.categoryEntities" :key="index">
|
<div class="title">{{ item.categoryName }}</div>
|
<el-tooltip effect="dark" placement="top">
|
<template #content>
|
<p style="max-width: 500px;">{{ item.standard }}</p>
|
</template>
|
<div class="introduction">
|
{{ item.standard }}
|
</div>
|
</el-tooltip>
|
|
<div class="number">{{ item.peopleNum }}人</div>
|
</li>
|
</ul>
|
</el-collapse-item>
|
<el-collapse-item v-if="!type()" name="2">
|
<template #title>
|
第一轮候选结果
|
<el-tag
|
style="margin-left: 10px;"
|
:type="status[props.params.data.candidateState].type">
|
当前状态：{{ status[props.params.data.candidateState].text }}
|
</el-tag>
|
</template>
|
<firstRoundResult :params="{ data: props.params.data }" />
|
</el-collapse-item>
|
<el-collapse-item name="3">
|
<template #title>
|
最终评优结果
|
<el-tag
|
style="margin-left: 10px;"
|
:type="status[props.params.data.evaluateState].type">
|
当前状态：{{ status[props.params.data.evaluateState].text }}
|
</el-tag>
|
</template>
|
<secondRoundResult :params="{ data: props.params.data }" />
|
</el-collapse-item>
|
</el-collapse>
|
</el-drawer>
|
</template>
|
|
<script setup>
|
import firstRoundResult from './firstRoundResult.vue';
|
import secondRoundResult from './secondRoundResult.vue';
|
import { inject, markRaw, onMounted, reactive } from 'vue';
|
import { getEcList } from '@/api/evaluate/evaluateTask'
|
|
const props = defineProps({
|
params: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
data: {}
|
}
|
}
|
}
|
})
|
|
const type = inject('type')
|
|
const status = markRaw({
|
0: {
|
text: '未开始',
|
type: 'warning'
|
},
|
1: {
|
text: '进行中',
|
type: 'success'
|
},
|
2: {
|
text: '已完成',
|
type: 'primary'
|
},
|
})
|
|
const collapseParams = reactive({
|
activeNames: ['1'],
|
categoryEntities: []
|
})
|
|
const pageParams = reactive({
|
current: 1,
|
size: 10,
|
total: 0
|
})
|
|
const currentTaskParams = reactive({
|
data: {}
|
})
|
|
const openDrawer = () => {
|
const { id } = props.params.data
|
const { current, size } = pageParams
|
getEcList(current, size, id).then(ecResult => {
|
const { code, data: { records } } = ecResult.data
|
if (code !== 200) return this.$message.error('评优类别加载失败')
|
collapseParams.categoryEntities = records
|
})
|
currentTaskParams.data = props.params.data
|
collapseParams.activeNames = !type() ? ['1'] : ['3']
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
$borderColor: var(--el-border-color);
|
|
.drawer-title {
|
border-left: 3px solid #409eff;
|
padding-left: 10px;
|
}
|
|
.type-list {
|
margin: 0;
|
padding: 0;
|
list-style-type: none;
|
width: 100%;
|
border: 1px solid $borderColor;
|
border-radius: var(--el-border-radius-base);
|
box-sizing: border-box;
|
|
.type-item {
|
display: flex;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
|
div {
|
border-bottom: 1px solid $borderColor;
|
flex-shrink: 0;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.title {
|
flex: 2;
|
}
|
|
.introduction {
|
flex: 5;
|
flex-shrink: 0;
|
|
border: {
|
right: 1px solid $borderColor;
|
left: 1px solid $borderColor;
|
}
|
}
|
|
.number {
|
flex: 1;
|
}
|
|
.tool {
|
flex: 2;
|
border-left: 1px solid $borderColor;
|
}
|
|
&:last-child {
|
div {
|
border-bottom: 0;
|
}
|
}
|
}
|
}
|
</style>
|
