月报2.0改造（4.2）

src/views/monthlyReport/childrenPage/setReport/components/teamSet.vue

@@ -28,12 +28,27 @@
       </div>
       <div class="team-member team-person" style="line-height: 33px;margin: 0;">
         <div v-if="treeNode.length <= 0">无</div>
-        <div v-for="item in treeNode" v-else :key="item">{{ item }}</div>
+        <div v-for="item in treeNode" v-else :key="item.label + item.index" class="txt-ellipsis">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :enterable="true"
+            :disabled="item.isTooltip"
+            placement="top-start"
+          >
+            <template slot="content">
+              <span v-html="item.label" />
+            </template>
+            <div :ref="`anchor_${item.index}`" class="txt-ellipsis">
+              {{ item.label }}
+            </div>
+          </el-tooltip>
+        </div>
       </div>
     </div>
 
     <!-- 设置 -->
-    <normal-dialog :show-dialog="showTeamBizDialog" :title="'设置'" :width="'35%'" @confirm="createDeptBizRel()" @cancel="showTeamBizDialog=false">
+    <normal-dialog :show-dialog="showTeamBizDialog" :title="'设置'" :width="'45%'" @confirm="createDeptBizRel()" @cancel="showTeamBizDialog=false">
       <el-form :model="setTeamBiz" label-width="65px">
         <el-form-item label="业务线">
           <el-select v-model="setTeamBiz.stage" clearable filterable placeholder="请选择" style="width: 100%;">
@@ -63,7 +78,7 @@ export default {
       },
       list: ['chjdsbvchjbdshjbchdsbchjkscbjhdsc', 'c dhjsbchjsbchjksbhjkcbjkdsbcjksdbcjk', 'cmkldsnckjdsbckjdsbcbscbdbibsciu'],
       deptName: '',
-      treeNode: '',
+      treeNode: [],
       memberInformation: [], // 人员信息
       bizList: [], // 业务线数据
       deleteSectorData: {}, // 要删除的部门业务线数据
@@ -124,7 +139,14 @@ export default {
       }
       const resK = await getOdinNode(row.deptCode)
       if (resK.code === 200) {
-        this.treeNode = resK.data
+        this.treeNode = resK.data.map((elm, elmIndex) => ({
+          label: elm,
+          index: elmIndex,
+          isTooltip: false
+        }))
+        setTimeout(() => {
+          this.tooltipShow()
+        }, 200)
       }
     },
     async getReportBizInfo() { // 获取月报业务线option
@@ -132,6 +154,17 @@ export default {
       if (res.code === 200) {
         this.bizList = res.data.bizList
       }
+    },
+    tooltipShow() {
+      this.$nextTick && this.$nextTick(() => {
+        this.$refs && Object.keys(this.$refs).forEach((key) => {
+          if (this.$refs[key][0]) {
+            const index = key.replace('anchor_', '')
+            const { scrollWidth, offsetWidth } = this.$refs[key][0]
+            this.treeNode[index].isTooltip = scrollWidth <= offsetWidth
+          }
+        })
+      })
     }
   }
 }
@@ -160,7 +193,7 @@ export default {
     }
 
     .team-rightText {
-      width: 350px;
+      width: 500px;
       padding-left: 60px;
       height: calc(100vh - 189px);
       overflow: hidden;
@@ -202,6 +235,13 @@ export default {
       color: #409EFF;
       margin-left: 15px;
     }
+    .txt-ellipsis{
+      width: calc(100% - 20px);
+      word-break: keep-all;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
 </style>