From 2de8b72aa4b75db1d12d719bd3ba9a028cf67ac7 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Thu, 25 Jul 2024 15:23:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B):=20?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E8=AF=84=E5=AE=A1-=E8=AF=A6=E6=83=85-?=
 =?UTF-8?q?=E5=A4=9A=E4=BA=BA=E8=AF=84=E5=AE=A1=E7=9A=84=E8=AF=84=E5=AE=A1?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E4=B8=8B=E6=8B=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/reviewStatusTrigger.vue        | 76 +++++++++++++++++++
 .../ms-minders/caseReviewMinder/index.vue     | 60 ++-------------
 .../case-management/caseReview/caseDetail.vue | 29 ++++++-
 3 files changed, 110 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue

diff --git a/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue b/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue
new file mode 100644
index 0000000000..1034d695dc
--- /dev/null
+++ b/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue
@@ -0,0 +1,76 @@
+<template>
+  <a-trigger
+    v-model:popup-visible="statusVisible"
+    content-class="review-result-trigger-content"
+    trigger="click"
+    position="br"
+    :popup-translate="[0, 4]"
+  >
+    <div
+      :class="`overall-review-result flex cursor-pointer items-center rounded p-[4px] hover:bg-[var(--color-text-n9)] 
+      ${statusVisible ? 'bg-[var(--color-text-n9)]' : ''} `"
+    >
+      <ReviewResult :status="reviewHistoryStatus" :class="[`text-[${props.size}px]`]" :icon-size="props.size" />
+      <MsIcon type="icon-icon_expand-down_filled" :size="props.size" class="ml-[4px] text-[var(--color-text-4)]" />
+    </div>
+    <template #content>
+      <div v-for="item in reviewUserStatusList" :key="item.id" class="my-[4px] flex justify-between">
+        <div class="one-line-text max-w-[72px]">
+          {{ item.id }}
+        </div>
+        <ReviewResult
+          :status="item.name as ReviewResultStatus"
+          is-part
+          :class="[`text-[${props.size}px]`]"
+          :icon-size="props.size"
+        />
+      </div>
+      <MsEmpty v-if="!reviewUserStatusList.length" />
+    </template>
+  </a-trigger>
+</template>
+
+<script setup lang="ts">
+  import MsEmpty from '@/components/pure/ms-empty/index.vue';
+  import ReviewResult from '@/views/case-management/caseReview/components/reviewResult.vue';
+
+  import { getReviewerAndStatus } from '@/api/modules/case-management/caseReview';
+  import { OptionItem } from '@/api/modules/message/index';
+
+  import { ReviewResult as ReviewResultStatus } from '@/models/caseManagement/caseReview';
+
+  const props = defineProps<{
+    size?: number;
+  }>();
+
+  const statusVisible = ref(false);
+  const reviewHistoryStatus = ref<ReviewResultStatus>();
+  const reviewUserStatusList = ref<OptionItem[]>([]); // 每个评审人最后一次评审结果
+
+  async function initReviewerAndStatus(reviewId: string, caseId: string) {
+    try {
+      const res = await getReviewerAndStatus(reviewId, caseId);
+      reviewUserStatusList.value = res.reviewerStatus;
+      reviewHistoryStatus.value = res.status as ReviewResultStatus;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  defineExpose({
+    initReviewerAndStatus,
+  });
+</script>
+
+<style lang="less">
+  .review-result-trigger-content {
+    padding: 6px;
+    width: 150px;
+    max-height: 192px;
+    border-radius: var(--border-radius-medium);
+    box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
+    @apply overflow-y-auto overflow-x-hidden bg-white;
+    .ms-scroll-bar();
+  }
+</style>
diff --git a/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue b/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
index 4aabb7a6e7..aef0e46416 100644
--- a/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
+++ b/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
@@ -78,39 +78,13 @@
           disabled
           :active-case="activeCaseInfo"
         />
-        <div v-else class="pl-[16px]">
+        <div v-show="activeExtraKey === 'history'" class="pl-[16px]">
           <div v-if="props.reviewPassRule === 'MULTIPLE'" class="mb-[8px] flex items-center justify-between">
             <div class="text-[12px]">
               <span class="text-[var(--color-text-4)]">{{ t('caseManagement.caseReview.progress') }}</span>
               {{ props.reviewProgress }}
             </div>
-            <a-trigger v-model:popup-visible="statusVisible" trigger="click" position="br" :popup-translate="[0, 4]">
-              <div
-                :class="`flex cursor-pointer items-center rounded p-[4px] hover:bg-[var(--color-text-n9)] 
-                ${statusVisible ? 'bg-[var(--color-text-n9)]' : ''} `"
-              >
-                <ReviewResult :status="reviewHistoryStatus" class="text-[12px]" :icon-size="12" />
-                <MsIcon type="icon-icon_expand-down_filled" size="12" class="ml-[4px] text-[var(--color-text-4)]" />
-              </div>
-              <template #content>
-                <div
-                  class="trigger-content w-[150px] rounded-[var(--border-radius-medium)] bg-white p-[6px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
-                >
-                  <div v-for="item in reviewUserStatusList" :key="item.id" class="my-[4px] flex justify-between">
-                    <div class="one-line-text max-w-[80px]">
-                      {{ item.id }}
-                    </div>
-                    <ReviewResult
-                      :status="item.name as ReviewResultStatus"
-                      is-part
-                      class="text-[12px]"
-                      :icon-size="12"
-                    />
-                  </div>
-                  <MsEmpty v-if="!reviewUserStatusList.length" />
-                </div>
-              </template>
-            </a-trigger>
+            <ReviewStatusTrigger ref="reviewStatusTriggerRef" :size="12" />
           </div>
           <ReviewCommentList
             :review-comment-list="reviewHistoryList"
@@ -128,7 +102,6 @@
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsDescription, { Description } from '@/components/pure/ms-description/index.vue';
-  import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import MsMinderEditor from '@/components/pure/ms-minder-editor/minderEditor.vue';
   import type { MinderJson, MinderJsonNode, MinderJsonNodeData } from '@/components/pure/ms-minder-editor/props';
   import {
@@ -138,18 +111,16 @@
   } from '@/components/pure/ms-minder-editor/script/tool/utils';
   import { MsFileItem } from '@/components/pure/ms-upload/types';
   import Attachment from '@/components/business/ms-minders/featureCaseMinder/attachment.vue';
+  import ReviewStatusTrigger from './components/reviewStatusTrigger.vue';
   import ReviewCommentList from '@/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue';
-  import ReviewResult from '@/views/case-management/caseReview/components/reviewResult.vue';
   import ReviewSubmit from '@/views/case-management/caseReview/components/reviewSubmit.vue';
 
   import {
     getCaseReviewerList,
     getCaseReviewHistoryList,
     getCaseReviewMinder,
-    getReviewerAndStatus,
   } from '@/api/modules/case-management/caseReview';
   import { getCaseDetail } from '@/api/modules/case-management/featureCase';
-  import { OptionItem } from '@/api/modules/message/index';
   import { useI18n } from '@/hooks/useI18n';
   import { useUserStore } from '@/store';
   import useAppStore from '@/store/modules/app';
@@ -162,7 +133,6 @@
     CaseReviewFunctionalCaseUserItem,
     ReviewHistoryItem,
     ReviewPassRule,
-    ReviewResult as ReviewResultStatus,
   } from '@/models/caseManagement/caseReview';
   import { ModuleTreeNode } from '@/models/common';
   import { StartReviewStatus } from '@/enums/caseEnum';
@@ -479,9 +449,6 @@
   }
 
   const reviewHistoryList = ref<ReviewHistoryItem[]>([]); // 加载评审历史列表
-  const reviewHistoryStatus = ref<ReviewResultStatus>();
-  const reviewUserStatusList = ref<OptionItem[]>([]); // 每个评审人最后一次评审结果
-  const statusVisible = ref(false);
   async function initReviewHistoryList(data: MinderJsonNodeData) {
     try {
       const res = await getCaseReviewHistoryList(route.query.id as string, data?.caseId || activeCaseInfo.value.caseId);
@@ -491,20 +458,11 @@
       console.log(error);
     }
   }
-  async function initReviewerAndStatus(data: MinderJsonNodeData) {
-    try {
-      const res = await getReviewerAndStatus(route.query.id as string, data?.caseId || activeCaseInfo.value.caseId);
-      reviewUserStatusList.value = res.reviewerStatus;
-      reviewHistoryStatus.value = res.status as ReviewResultStatus;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
 
   /**
    * 切换用例详情显示
    */
+  const reviewStatusTriggerRef = ref<InstanceType<typeof ReviewStatusTrigger>>();
   async function toggleDetail(val?: boolean) {
     extraVisible.value = val !== undefined ? val : !extraVisible.value;
     const node: MinderJsonNode = window.minder.getSelectedNode();
@@ -513,7 +471,10 @@
       activeExtraKey.value = 'history';
       initCaseDetail(data);
       initReviewHistoryList(data);
-      initReviewerAndStatus(data);
+      reviewStatusTriggerRef.value?.initReviewerAndStatus(
+        route.query.id as string,
+        data?.caseId || activeCaseInfo.value.caseId
+      );
     }
   }
 
@@ -685,9 +646,4 @@
   :deep(.comment-list-item-name) {
     max-width: 200px;
   }
-  .trigger-content {
-    max-height: 192px;
-    @apply overflow-y-auto overflow-x-hidden;
-    .ms-scroll-bar();
-  }
 </style>
diff --git a/frontend/src/views/case-management/caseReview/caseDetail.vue b/frontend/src/views/case-management/caseReview/caseDetail.vue
index 1b0c456ce5..78e9aca342 100644
--- a/frontend/src/views/case-management/caseReview/caseDetail.vue
+++ b/frontend/src/views/case-management/caseReview/caseDetail.vue
@@ -133,7 +133,11 @@
                 {{ t('caseManagement.caseReview.reviewResult') }}
               </div>
               <div class="case-detail-value">
-                <div v-if="reviewResultMap[activeCaseReviewStatus as ReviewResult]" class="flex items-center gap-[4px]">
+                <ReviewStatusTrigger v-if="reviewDetail.reviewPassRule === 'MULTIPLE'" ref="reviewStatusTriggerRef" />
+                <div
+                  v-if="reviewResultMap[activeCaseReviewStatus as ReviewResult] && reviewDetail.reviewPassRule !== 'MULTIPLE'"
+                  class="flex items-center gap-[4px]"
+                >
                   <MsIcon
                     :type="reviewResultMap[activeCaseReviewStatus as ReviewResult].icon"
                     :style="{
@@ -289,6 +293,7 @@
   import MsPagination from '@/components/pure/ms-pagination/index';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
+  import ReviewStatusTrigger from '@/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue';
   import caseTabDemand from '../caseManagementFeature/components/tabContent/tabDemand/associatedDemandTable.vue';
   import caseTabDetail from '../caseManagementFeature/components/tabContent/tabDetail.vue';
   import EditCaseDetailDrawer from './components/editCaseDetailDrawer.vue';
@@ -511,10 +516,16 @@
     }
   }
 
+  const reviewStatusTriggerRef = ref<InstanceType<typeof ReviewStatusTrigger>>();
+  function initReviewerAndStatus() {
+    reviewStatusTriggerRef.value?.initReviewerAndStatus(reviewId.value, activeCaseId.value);
+  }
+
   watch(
     () => activeCaseId.value,
     () => {
       loadCaseDetail();
+      initReviewerAndStatus();
       initReviewHistoryList();
     }
   );
@@ -552,12 +563,14 @@
         loadCaseDetail();
         initReviewHistoryList();
         loadCaseList();
+        initReviewerAndStatus();
       }
     } else {
       // 不自动下一个才请求详情
       loadCaseDetail();
       initReviewHistoryList();
       loadCaseList();
+      initReviewerAndStatus();
     }
   }
 
@@ -568,7 +581,7 @@
     loadCaseDetail();
   }
 
-  onBeforeMount(() => {
+  onBeforeMount(async () => {
     const lastPageParams = window.history.state.params ? JSON.parse(window.history.state.params) : null; // 获取上个页面带过来的表格查询参数
     if (lastPageParams) {
       const {
@@ -598,8 +611,9 @@
     } else {
       keyword.value = route.query.reviewId as string;
     }
-    initDetail();
+    await initDetail();
     loadCase();
+    initReviewerAndStatus();
     if (showTab.value === 'detail') {
       initReviewHistoryList();
     }
@@ -659,4 +673,13 @@
       @apply inline-flex;
     }
   }
+  :deep(.overall-review-result) {
+    padding: 0;
+  }
+</style>
+
+<style lang="less">
+  .review-result-trigger-content {
+    width: 160px;
+  }
 </style>