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

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

@@ -34,9 +34,19 @@
         <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">{{
+<!--        <el-descriptions-item label="履职机构" :span="4">
+          {{
           formData.orgs ? formData.orgs.map((o) => o.name).join("、") : ""
-        }}</el-descriptions-item>
+          }}
+        </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>
+          </el-tooltip>
+        </el-descriptions-item>
+
+
+
         <el-descriptions-item label="备注" :span="4">{{
           formData.note
         }}</el-descriptions-item>
@@ -137,4 +147,12 @@ export default {
 };
 </script>
 
-<style></style>
+
+<style scoped>
+.ellipsis-tooltip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 1000px;
+}
+</style>

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

@@ -1,57 +1,64 @@
 <template>
   <div class="rule-type">
-    <DialogCom title="检查任务详情" :visible.sync="isShow" width="1500px" >
+    <DialogCom title="检查任务详情" :visible.sync="isShow" width="1500px">
       <el-descriptions :column="4" border :label-style="labelStyle" :contentStyle="content_style">
         <el-descriptions-item label="任务名称">{{
-          formData.planName
-        }}</el-descriptions-item>
+            formData.planName
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="任务类型">{{
-          getLabel(dict.type.check_type, formData.checkType)
-        }}</el-descriptions-item>
+            getLabel(dict.type.check_type, formData.checkType)
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="任务周期">{{
-          getLabel(dict.type.check_cycle, formData.planCycle)
-        }}</el-descriptions-item>
+            getLabel(dict.type.check_cycle, formData.planCycle)
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="开始时间" v-if="formData.planCycle == 6">{{
-          dayjs(formData.startDate).format("YYYY年MM月DD日")
-        }}</el-descriptions-item>
+            dayjs(formData.startDate).format("YYYY年MM月DD日")
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="结束时间" v-if="formData.planCycle == 6">{{
-          dayjs(formData.endDate).format("YYYY年MM月DD日")
-        }}</el-descriptions-item>
+            dayjs(formData.endDate).format("YYYY年MM月DD日")
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="机构主体类型">{{
-          getLabel(orgTypeOptions, formData.execOrgType)
-        }}</el-descriptions-item>
+            getLabel(orgTypeOptions, formData.execOrgType)
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="检查人员">
           {{
-            formData.roleList .map((r) => r.roleName).join("、") 
+            formData.roleList.map((r) => r.roleName).join("、")
           }}
         </el-descriptions-item>
         <el-descriptions-item label="受检机构类型">{{
-          formData.checkOrgTypeList
-            .map((t) => getLabel(orgTypeOptions, t.typeId))
-            .join("、")
-        }}</el-descriptions-item>
+            formData.checkOrgTypeList
+              .map((t) => getLabel(orgTypeOptions, t.typeId))
+              .join("、")
+          }}
+        </el-descriptions-item>
         <el-descriptions-item label="任务次数" :span="formData.planCycle!=6 ?2:1">{{
-          formData.count
-        }}</el-descriptions-item>
+            formData.count
+          }}
+        </el-descriptions-item>
         <el-descriptions-item
           label="检查主体"
           :span="4"
           v-if="formData.execOrgList && formData.execOrgList.length > 0"
-          >{{
+        >{{
             formData.execOrgList.map((org) => org.shortName).join("、")
-          }}</el-descriptions-item
-        >
-        <el-descriptions-item
-          label="受检机构"
-          :span="4"
-          v-if="formData.checkOrgList && formData.checkOrgList.length > 0"
-          >{{
-            formData.checkOrgList.map((org) => org.shortName).join("、")
-          }}</el-descriptions-item
+          }}
+        </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>
+        </el-descriptions-item>
         <el-descriptions-item label="备注" :span="formData.planCycle!=6">{{
-          formData.note
-        }}</el-descriptions-item>
+            formData.note
+          }}
+        </el-descriptions-item>
       </el-descriptions>
       <el-table :data="tableData" style="width: 100%" height="400px">
         <el-table-column label="是否扫描">
@@ -64,14 +71,14 @@
             {{ row.required ? "是" : "否" }}
           </template>
         </el-table-column>
-        <el-table-column prop="ruleName" label="检查手册"> </el-table-column>
-        <el-table-column prop="itemName" label="检查项"> </el-table-column>
+        <el-table-column prop="ruleName" label="检查手册"></el-table-column>
+        <el-table-column prop="itemName" label="检查项"></el-table-column>
         <el-table-column prop="pointName" label="检查内容" width="300px">
           <template slot-scope="scope">
             <pre>{{ scope.row.pointName }}</pre>
           </template>
         </el-table-column>
-        <el-table-column prop="areaName" label="检查区域"> </el-table-column>
+        <el-table-column prop="areaName" label="检查区域"></el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer" style="margin-top: 20px">
         <el-button @click="onHide">关闭</el-button>
@@ -81,10 +88,11 @@
 </template>
 
 <script>
-import { findAllRole } from "@/api/system/role";
+import {findAllRole} from "@/api/system/role";
 import * as api from "@/api/safetycheck/plan";
-import { getLabel } from "@/views/commonOption.js";
+import {getLabel} from "@/views/commonOption.js";
 import dayjs from 'dayjs';
+
 export default {
   dicts: ["check_type", "check_cycle", "check_status"],
   props: {
@@ -107,10 +115,10 @@ export default {
         height: "40px",
         "width": "150px",
         "word-break": "keep-all",
-      },content_style: {
+      }, content_style: {
         "text-align": "left",
-         "min-width": "150px",
-         "text-wrap":'no-wrap'
+        "min-width": "150px",
+        "text-wrap": 'no-wrap'
         // "word-break": "break-all",
       },
     };
@@ -124,22 +132,8 @@ export default {
         this.formData = r.data;
         this.tableData = r.data.rulePointList;
         this.isShow = true;
-        // if (this.formData.execOrgType) {
-        //   this.getRolesByOrg();
-        // }
       });
     },
-    // getRolesByOrg() {
-    //   if (this.formData.execOrgType != null) {
-    //     let params = {
-    //       orgType: this.formData.execOrgType,
-    //     };
-
-    //     findAllRole(params).then((res) => {
-    //       this.resumptionRoles = res.data;
-    //     });
-    //   }
-    // },
     onHide() {
       this.isShow = false;
     },
@@ -147,4 +141,11 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.ellipsis-tooltip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 1000px;
+}
+</style>