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

src/components/DetailComponent/CollectionDetail.vue

@@ -2,26 +2,31 @@
   <div v-loading="loading">
     <el-form :model="formData" label-width="auto">
       <el-row>
-        <el-col :span="12" v-if="type==='singleDetail'">
+        <el-col :span="6" v-if="type==='singleDetail'">
           <el-form-item label="征集名称">
             <span>{{ formData.requirementName }}</span>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="6">
           <el-form-item label="征集类型">
             <span>{{ formData.collectType }}</span>
           </el-form-item>
         </el-col>
-        <el-col :span="12" v-if="type==='singleDetail'">
-          <el-form-item label="所属公司">
-            <span>{{ formData.companyIds }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
+        <el-col :span="6">
           <el-form-item label="截止时间">
             <span>{{ formData.deadline }}</span>
           </el-form-item>
         </el-col>
+        <el-col :span="24" v-if="type==='singleDetail'">
+          <el-form-item label="所属公司">
+            <span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
+                getCompanyName(formData.companyIds)
+              }}</span>
+            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
+                 @click="handleExpend">{{ showExpendText }}
+            </div>
+          </el-form-item>
+        </el-col>
         <el-col :span="24" v-if="formData.isSpecialFund">
           <el-form-item label="专项资金">
             <span>{{ formData.specialFund }}</span>
@@ -84,6 +89,8 @@ import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.v
 import {downloadFile} from "@/api/project-demand";
 
 const emit = defineEmits(['update:value'])
+const showExpendText = ref('')
+const showMoreCompany = ref(false)
 const props = defineProps({
   formData: {
     type: Array,
@@ -127,7 +134,26 @@ const _value = computed({
     emit("update:value", val);
   }
 })
-
+const getCompanyName = (data) => {
+  if (data) {
+    return data.join('，')
+  }
+}
+const handleExpend = () => {
+  showMoreCompany.value = !showMoreCompany.value;
+  showExpendClass(showMoreCompany.value, props.formData.companyIds)
+}
+const showExpendClass = (showMoreCompany, data) => {
+  if (!showMoreCompany) {
+    if (data && data.length > 14) {
+      showExpendText.value = '展开'
+      return 'company-style'
+    }
+  } else {
+    showExpendText.value = '收缩'
+    return ''
+  }
+}
 
 const handleDownload = (row) => {
   downloadFile(row.fileId).then(res => {
@@ -152,4 +178,15 @@ watch(() => props.processViewer, (newVal) => {
 :deep(.el-empty__description) {
   margin-top: 0;
 }
+
+.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;
+}
 </style>