2026-05-21

RoHs优化

src/views/modules/rohs/rohsRecord.vue

@@ -154,7 +154,7 @@
             </el-form>
             <el-form :inline="true" label-position="top" :model="modalData">
               <el-form-item label="材料分类/Material Classify">
-                <dict-data-select v-model="modalData.materialClassifyList" multiple :collapse-tags="true" :disabled="isRohsFieldDisabled('materialClassify')" style="width: 394px" dict-type="rohs_material_classify"></dict-data-select>
+                <dict-data-select class="rohs-multiple-ellipsis" v-model="modalData.materialClassifyList" multiple :title="getMultipleSelectTitle(modalData.materialClassifyList)" :disabled="isRohsFieldDisabled('materialClassify')" style="width: 394px" dict-type="rohs_material_classify"></dict-data-select>
               </el-form-item>
               <el-form-item label="其他材料分类/Other Material Classify" v-if="modalData.materialClassifyList && modalData.materialClassifyList.includes('Other其他')">
                 <el-input v-model="modalData.otherMaterialClassify" :disabled="isRohsFieldDisabled('otherMaterialClassify')" style="width: 190px"></el-input>
@@ -275,10 +275,10 @@
             </el-form>
             <el-form :inline="true" label-position="top" :model="modalData">
               <el-form-item label="所需审批文件/Docs Needed" >
-                <dict-data-select v-model="modalData.qualificationDocumentsNeededList" multiple :collapse-tags="true" :disabled="isRohsFieldDisabled('qualificationDocumentsNeeded')" style="width: 394px" dict-type="rohs_qualification_docs"></dict-data-select>
+                <dict-data-select class="rohs-multiple-ellipsis" v-model="modalData.qualificationDocumentsNeededList" multiple :title="getMultipleSelectTitle(modalData.qualificationDocumentsNeededList)" :disabled="isRohsFieldDisabled('qualificationDocumentsNeeded')" style="width: 394px" dict-type="rohs_qualification_docs"></dict-data-select>
               </el-form-item>
               <el-form-item label="测试报告必测项/Test Items">
-                <dict-data-select v-model="modalData.testReportIncludingItemsList" multiple :collapse-tags="true" :disabled="isRohsFieldDisabled('testReportIncludingItems')" style="width: 394px" dict-type="rohs_test_report_items"></dict-data-select>
+                <dict-data-select class="rohs-multiple-ellipsis" v-model="modalData.testReportIncludingItemsList" multiple :title="getMultipleSelectTitle(modalData.testReportIncludingItemsList)" :disabled="isRohsFieldDisabled('testReportIncludingItems')" style="width: 394px" dict-type="rohs_test_report_items"></dict-data-select>
               </el-form-item>
             </el-form>
             <el-form :inline="true" label-position="top" :model="modalData">
@@ -334,9 +334,10 @@
                 <span style="cursor: pointer" v-if="!isRohsFieldDisabled('hsfApprover')" slot="label" @click="loadHsfApproverByCurrentProject(!isEditMode)"><a herf="#">HSF审批人/HSF Approver</a></span>
                 <span v-else slot="label">HSF审批人/HSF Approver</span>
                 <el-select
+                  class="rohs-multiple-ellipsis"
                   v-model="modalData.hsfApproverList"
                   multiple
-                  collapse-tags
+                  :title="getMultipleSelectTitle(modalData.hsfApproverList)"
                   clearable
                   filterable
                   :disabled="isRohsFieldDisabled('hsfApprover')"
@@ -1291,6 +1292,15 @@ export default {
       }
       return value || ''
     },
+    getMultipleSelectTitle (value) {
+      if (!Array.isArray(value)) {
+        return ''
+      }
+      return value
+        .filter(item => item !== null && item !== undefined && String(item).trim() !== '')
+        .map(item => String(item).trim())
+        .join('；')
+    },
     shouldShowHsfStandard (customerCode) {
       return String(customerCode || '').trim().toUpperCase() === 'C00052'
     },
@@ -2578,4 +2588,36 @@ export default {
   white-space: nowrap;
   word-break: keep-all;
 }
+
+/deep/ .rohs-multiple-ellipsis.el-select .el-select__tags,
+/deep/ .rohs-multiple-ellipsis .el-select .el-select__tags {
+  max-width: calc(100% - 34px) !important;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/deep/ .rohs-multiple-ellipsis.el-select .el-select__tags > span,
+/deep/ .rohs-multiple-ellipsis .el-select .el-select__tags > span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/deep/ .rohs-multiple-ellipsis.el-select .el-select__tags .el-tag,
+/deep/ .rohs-multiple-ellipsis .el-select .el-select__tags .el-tag {
+  display: inline-flex;
+  max-width: 120px;
+  margin-right: 4px;
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+/deep/ .rohs-multiple-ellipsis.el-select .el-select__tags .el-tag .el-select__tags-text,
+/deep/ .rohs-multiple-ellipsis .el-select .el-select__tags .el-tag .el-select__tags-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>