履职下发详情/安全检查下发,介绍信管理详情 机构数量过多时详情页面样式异常处理

src/views/core/outIn/letter/dialog.letter.detail.vue

@@ -17,7 +17,26 @@
             <dict-tag :options="dict.type.letter_status" :value="formData.status"/>
           </el-descriptions-item>
           <el-descriptions-item label="介绍信编号">{{formData.letterNo}}</el-descriptions-item>
-          <el-descriptions-item label="接待机构">{{formData.receptionOrgNames}}</el-descriptions-item>
+          <el-descriptions-item label="接待机构">
+            {{formData.receptionOrgNames}}
+          </el-descriptions-item>
+
+
+
+          <el-descriptions-item label="接待机构">
+            <el-tooltip class="item" effect="dark" :content='formData.receptionOrgNames' placement="top">
+              <div class="ellipsis-tooltip">
+                {{ formData.receptionOrgNames}}
+              </div>
+            </el-tooltip>
+            <div class="count">
+              （{{formData.receptionOrgIds.length }}）
+            </div>
+          </el-descriptions-item>
+
+
+
+
           <el-descriptions-item label="来访事由">{{formData.reasons}}</el-descriptions-item>
           <el-descriptions-item label="开具日期">{{formData.startTimeStr}}</el-descriptions-item>
           <el-descriptions-item label="有效天数">{{formData.effectiveDays}}</el-descriptions-item>
@@ -231,6 +250,25 @@ export default {
   mounted() {},
 };
 </script>
+<style scoped>
+.ellipsis-tooltip {
+  display: inline-block;
+  max-width: 900px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  float: left;
+
+}
+
+.count {
+  white-space: nowrap;
+  margin-left: 5px;
+  float: left;
+}
+</style>
+
 
 
 

src/views/resumption/plan/dialog.detail.vue

@@ -34,15 +34,17 @@
         <el-descriptions-item label="开始时间" v-if="formData.planCycle == 0">{{
           dayjs(formData.endDate).format("YYYY年MM月DD日")
         }}</el-descriptions-item>
-<!--        <el-descriptions-item label="履职机构" :span="4">
-          {{
-          formData.orgs ? formData.orgs.map((o) => o.name).join("、") : ""
-          }}
-        </el-descriptions-item>-->
+
+
         <el-descriptions-item label="履职机构" :span="4">
           <el-tooltip class="item" effect="dark" :content='formData.orgs ? formData.orgs.map((o) => o.name).join("、") : ""' placement="top">
-            <div class="ellipsis-tooltip">{{ formData.orgs ? formData.orgs.map((o) => o.name).join("、") : "" }}</div>
+            <div class="ellipsis-tooltip">
+              {{ formData.orgs ? formData.orgs.map((o) => o.name).join("、") : "" }}
+            </div>
           </el-tooltip>
+          <div class="count">
+            （{{formData.orgs.length }}）
+          </div>
         </el-descriptions-item>
 
 
@@ -150,9 +152,19 @@ export default {
 
 <style scoped>
 .ellipsis-tooltip {
+  display: inline-block;
+  max-width: 900px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 1000px;
+  vertical-align: bottom;
+  float: left;
+
+}
+
+.count {
+  white-space: nowrap;
+  margin-left: 5px;
+  float: left;
 }
 </style>

src/views/safetycheck/plan/dialog.detail.vue

@@ -50,11 +50,15 @@
           }}
         </el-descriptions-item
         >
+
         <el-descriptions-item label="受检机构" :span="4" v-if="formData.checkOrgList && formData.checkOrgList.length > 0">
-          <el-tooltip class="item" effect="dark" :content="formData.checkOrgList.map((org) => org.shortName).join('、')" placement="top">
-            <div class="ellipsis-tooltip">{{ formData.checkOrgList.map((org) => org.shortName).join("、") }}</div>
+          <el-tooltip class="item" effect="dark" :content="getCheckOrgListContent()" placement="top">
+            <div class="ellipsis-tooltip">{{ getCheckOrgListContent() }}</div>
           </el-tooltip>
+          <div class="count">（{{ formData.checkOrgList.length }}）</div>
         </el-descriptions-item>
+
+
         <el-descriptions-item label="备注" :span="formData.planCycle!=6">{{
             formData.note
           }}
@@ -137,15 +141,28 @@ export default {
     onHide() {
       this.isShow = false;
     },
+    getCheckOrgListContent() {
+      return this.formData.checkOrgList.map((org) => org.shortName).join('、');
+    },
   },
 };
 </script>
 
 <style scoped>
 .ellipsis-tooltip {
+  display: inline-block;
+  max-width: 900px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 1000px;
+  vertical-align: bottom;
+  float: left;
+
+}
+
+.count {
+  white-space: nowrap;
+  margin-left: 5px;
+  float: left;
 }
 </style>