From 5832e4ce53d30bc282bb2c0add421d5f0a6b091d Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 09 Jan 2024 14:54:25 +0800
Subject: [PATCH] 详情提交

---
 src/views/evaluate/components/viewEvaluateDetail.vue |  119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/src/views/evaluate/components/viewEvaluateDetail.vue b/src/views/evaluate/components/viewEvaluateDetail.vue
index 797ff5b..2a96c69 100644
--- a/src/views/evaluate/components/viewEvaluateDetail.vue
+++ b/src/views/evaluate/components/viewEvaluateDetail.vue
@@ -1,12 +1,45 @@
 <template>
-    <el-drawer v-model="props.params.visible" open="openDrawer" direction="rtl" size="50%">
+    <el-drawer v-model="props.params.visible" @open="openDrawer" direction="rtl" size="50%">
         <template #header>
-            <div class="title">评优任务详情</div>
+            <div class="drawer-title">{{ this.params.data?.taskName || '评优任务详情' }}</div>
         </template>
+        <el-collapse v-model="collapseParams.activeNames">
+            <el-collapse-item 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 title="第一轮候选结果" name="2">
+                <firstRoundResult :params="{ data: props.params.data }" />
+            </el-collapse-item>
+            <el-collapse-item title="最终评优结果" name="3">
+
+            </el-collapse-item>
+        </el-collapse>
     </el-drawer>
 </template>
 
 <script setup>
+import firstRoundResult from './firstRoundResult.vue';
+import { reactive } from 'vue';
+import { getEcList } from '@/api/evaluate/evaluateTask'
 
 const props = defineProps({
     params: {
@@ -21,8 +54,30 @@
     }
 })
 
-const openDrawer = () => {
+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
 }
 
 
@@ -30,8 +85,64 @@
 </script>
 
 <style lang="scss" scoped>
-.title {
+$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>
\ No newline at end of file

--
Gitblit v1.9.3