fix : 固定所属公司选择条数为14则隐藏

src/views/project-demand/requirement/add.vue

@@ -34,12 +34,13 @@
         </el-col>
         <el-col :span="24">
           <el-form-item label="所属公司" prop="companyIds" class="tree-select">
-            <div v-if="route.query.id">{{selectedCompanyList}}</div>
-            <div v-else>{{ getName(selectedCompanyList) }}</div>
+            <div v-if="route.query.id" :class="showExpendClass(showMoreCompany)">{{ selectedCompanyList }}</div>
+            <div v-else :class="showExpendClass(showMoreCompany)">{{ getName(selectedCompanyList) }}</div>
+            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
+                 @click="handleExpend">{{ showExpendText }}
+            </div>
             <el-button color="#DED0B2" @click="showCompany">{{ selectedCompanyList.length === 0 ? '请选择所属公司' : '更改' }}
             </el-button>
-            <!--                        <el-tree-select v-model="formData.companyIds" :data="companyOption"-->
-            <!--                                        filterable clearable :check-strictly="true" multiple/>-->
           </el-form-item>
         </el-col>
         <el-col :span="6">
@@ -123,8 +124,11 @@ import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";
 import {matterTree} from "@/utils/matterTree";
 
 import {useCacheStore} from '@/stores/cache.js'
+
 const cacheStore = useCacheStore()
 const companyRef = ref()
+const showExpendText = ref('')
+const showMoreCompany = ref(false)
 const selectedCompanyList = ref([])
 // const companyList = ref([])
 const changeDiagram = ref(false)
@@ -149,6 +153,7 @@ const processDiagramViewer = ref(false)
 const companyOption = ref([])
 const specialFundOption = ref([])
 const form = ref(null)
+const expendClass = ref()
 const fileList = ref([])
 const loading = ref(false)
 const showTable = ref(true)
@@ -207,7 +212,24 @@ const tableConfig = reactive({
     }
   ]
 })
-
+const handleExpend = () => {
+  showMoreCompany.value = !showMoreCompany.value;
+  showExpendClass(showMoreCompany.value)
+}
+const showExpendClass = (showMoreCompany) => {
+  if (!showMoreCompany) {
+    if (selectedCompanyList.value.length === 0) {
+      showExpendText.value = ''
+      return  ''
+    } else if (selectedCompanyList.value.length>14) {
+      showExpendText.value = '展开'
+      return  'company-style'
+    }
+  } else {
+    showExpendText.value = '收缩'
+    return  ''
+  }
+}
 const getCompanyOptionItem = (val) => {
   if (val !== undefined) {
     val.forEach(item => {
@@ -222,6 +244,7 @@ const getName = (list) => {
 const showCompany = () => {
   companyRef.value.show()
 }
+
 const selected = (select) => {
   for (let val of select) {
     formData.value.companyIds.push(val.value)
@@ -437,6 +460,21 @@ onMounted(async () => {
     width: 750px;
   }
 
+  .company-style {
+    //width: 98%;
+    min-height: 30px;
+    max-height: 60px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .company {
+    color: #fff;
+    height: auto;
+  }
 }
 
 :deep(.el-table--fit ) {

src/views/project-demand/requirement/detail.vue

@@ -47,7 +47,7 @@ const getCompanyOptionItem = (val) => {
       matterTree(companyNameArray.value, companyOption.value, item)
     })
   }
-  return companyNameArray.value.join('，');
+  return companyNameArray.value
 }
 const init = async () => {
   if (!route.query.id) return;