From d13cebe7fbadd396e91a989af331df8a8e7b40f8 Mon Sep 17 00:00:00 2001
From: xieb <vip_xiaobin810@163.com>
Date: Tue, 21 Jan 2025 11:40:42 +0800
Subject: [PATCH] 考核结果查看详情
---
src/views/evaluate/components/viewEvaluateDetail.vue | 367 ++++++++++++++++++++--------------------------------
1 files changed, 142 insertions(+), 225 deletions(-)
diff --git a/src/views/evaluate/components/viewEvaluateDetail.vue b/src/views/evaluate/components/viewEvaluateDetail.vue
index d0657b2..fa20021 100644
--- a/src/views/evaluate/components/viewEvaluateDetail.vue
+++ b/src/views/evaluate/components/viewEvaluateDetail.vue
@@ -1,262 +1,179 @@
<template>
- <el-dialog title="信息预览" v-model="params.visible" width="70%">
- <div class="descriptions">
- <div class="descriptions-item" v-for="item in taskDateil" :key="item.prop" :style="{ width: item.width }">
- <div class="label">{{ item.title }}</div>
- <div class="value" v-if="!item.isSlot">{{ item.value }}</div>
- <div class="table" v-else>
- <avue-crud :option="item.option" :data="item.data" ref="crud" @current-change="currentChange"
- @size-change="sizeChange" @refresh-change="refreshChange"></avue-crud>
- </div>
- </div>
- </div>
- </el-dialog>
+ <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 { reactive, watch } from 'vue';
-import {
- getCandidateList,
- getFinallyResult
-} from '@/api/evaluate/evaluateTask'
+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: () => ({
- visible: false,
- data: {},
- }),
+ default: () => {
+ return {
+ visible: false,
+ data: {}
+ }
+ }
}
})
-const page = reactive({
+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 taskDateil = reactive([
- {
- title: '任务名称',
- prop: 'taskName',
- value: '',
- width: 'calc(100% / 3)'
- },
- {
- title: '任务类别',
- prop: 'taskType',
- value: '',
- width: 'calc(100% / 3)'
- },
- {
- title: '评定标准',
- prop: 'remark',
- value: '',
- width: 'calc(100% / 3)'
- },
- {
- title: '候选人截止日期',
- prop: 'candidateCutoffTime',
- value: '',
- width: '50%'
- },
- {
- title: '评优截止日期',
- prop: 'evaluateCutoffTime',
- value: '',
- width: '50%'
- },
- {
- title: '候选人状态',
- prop: 'candidateState',
- value: '',
- width: '50%'
- },
- {
- title: '评优评先状态',
- prop: 'evaluateState',
- value: '',
- width: '50%'
- },
- {
- title: '候选结果',
- prop: 'candidateResult',
- value: '',
- width: '100%'
- },
- {
- title: '最终评定结果',
- prop: 'finallyResult',
- isSlot: true,
- width: '100%',
- data: [],
- option: {
- height: 260,
- calcHeight: 30,
- tip: false,
- searchShow: true,
- border: true,
- index: true,
- dialogClickModal: false,
- menu: false,
- menuLeft: false,
- header: false,
- menuFixed: 'right',
- column: [
- {
- label: '评优项目',
- prop: 'evaluateTaskName',
- type: 'input',
- },
- // {
- // label: '任务类别',
- // prop: '',
- // type: 'input',
- // },
- {
- label: '候选人',
- prop: 'userName',
- type: 'input',
- },
- {
- label: '部门',
- prop: 'deptName',
- type: 'input'
- },
- {
- label: '票数',
- prop: 'voteNum',
- type: 'input'
- }
- ]
- }
- }
-])
-
-watch(() => props.params.visible, (val) => {
- val && initData()
-}, {
- deep: true
+const currentTaskParams = reactive({
+ data: {}
})
-const candidateList = () => {
- let values = {
- evaluateTaskId: props.params.data.id
- };
- return getCandidateList(1, 99999, values).then(res => {
- const candidateRes = res.data.data.records;
- return candidateRes
- });
-}
-
-const getFinallyList = () => {
- const { id, evaluateNum } = props.params.data
- const params = {
- evaluateTaskId: id,
- current: 1,
- size: evaluateNum
- }
- return getFinallyResult(params).then(res => {
- return res.data.data.records
+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']
}
-const initData = async () => {
- const data = props.params.data
- const status = {
- 0: '未开始',
- 1: '进行中',
- 2: '已完成'
- }
-
- for (const item of taskDateil) {
- item.value = data[item.prop] || '暂未完善'
-
- if (['candidateState', 'evaluateState'].includes(item.prop)) {
- item.value = status[item.value]
- }
-
- if (item.prop === 'candidateResult') {
- const res = await candidateList()
- if (res.length == 0) {
- item.value = '暂无候选人'
- } else {
- const candidates = {}
- const candidateStrArr = []
- const { candidateNum } = data
- candidateNum.forEach(candidate => {
- res.forEach(r => {
- const value = candidate.users.find(user => user.id === r.userId)
- if (value) {
- if (candidates[candidate.deptName] === void 0) {
- candidates[candidate.deptName] = []
- }
- candidates[candidate.deptName].push(value.name)
- }
- })
- })
- Object.keys(candidates).forEach(key => { candidateStrArr.push(`${key}(${candidates[key].length}人)：${candidates[key].join('、')}`) })
- item.value = candidateStrArr.join('\n')
- console.log(candidateStrArr.join('\n'));
- }
- }
-
- if (item.prop === 'finallyResult') {
- const res = await getFinallyList()
- item.data = res
- console.log(item.data);
- }
- }
-
- // 获取当前数据
-}
</script>
<style lang="scss" scoped>
-.descriptions {
+$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%;
- display: flex;
- flex-wrap: wrap;
+ border: 1px solid $borderColor;
+ border-radius: var(--el-border-radius-base);
+ box-sizing: border-box;
- border: {
- top: 1px solid #eeeded;
- right: 1px solid #eeeded;
- }
-
-
- .descriptions-item {
+ .type-item {
display: flex;
- box-sizing: border-box;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
- border: {
- bottom: 1px solid #eeeded;
- left: 1px solid #eeeded;
- }
-
- .label,
- .value {
- padding: 10px 5px;
- display: flex;
- align-items: center;
- }
-
- .label {
- width: 100px;
+ div {
+ border-bottom: 1px solid $borderColor;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- background-color: aliceblue;
- border-right: 1px solid #eeeded;
- }
- .value {
- white-space: pre-line;
}
- .table {
- padding: 10px;
- width: calc(100% - 20px);
+ .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;
+ }
}
}
}
--
Gitblit v1.9.3