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>

src/components/DetailComponent/CompanyPicker.vue

@@ -10,27 +10,15 @@
             <el-button @click="getList()">搜索</el-button>
           </template>
         </el-input>
-<!--        <el-button v-if="isChooseAll" @click="chooseAll">全选</el-button>-->
-<!--        <el-button v-else @click="cancelAll">不全选</el-button>-->
-        <!--        <el-checkbox-group v-model="checkBtn" @change="handleChange">-->
-        <!--          <el-checkbox label="全选" value="1" />-->
-        <!--          <el-checkbox label="Option B" value="Value B" />-->
-        <!--          <el-checkbox label="Option C" value="Value C" />-->
-        <!--          <el-checkbox label="disabled" value="Value disabled" disabled />-->
-        <!--          <el-checkbox-->
-        <!--              label="selected and disabled"-->
-        <!--              value="Value selected and disabled"-->
-        <!--              disabled-->
-        <!--          />-->
-        <!--        </el-checkbox-group>-->
+        <fvCheckbox :options="checkOptions" v-model="checkList" @change="checkBoxChange"/>
         <!-- 人员选择 -->
         <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
         <el-scrollbar style="height:87%;">
           <div class="tree">
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     default-expand-all :show-checkbox="showCheckbox" highlight-current
-                     :default-checked-keys="defaultChecked"
-                     :check-strictly="true" @node-click="(node,check)=>handle(node,check)"
+                     :show-checkbox="showCheckbox" highlight-current default-expand-all
+                     :default-checked-keys="defaultChecked" :disabled="disabled"
+                     :check-strictly="!checkStrictly" @node-click="(node,check)=>handle(node,check)"
                      @check-change="handleChange" :filter-node-method="filterNode">
               <template #default="{ node, data }">
                 <div class="tree-node">
@@ -70,6 +58,20 @@
 import {ElMessageBox} from "element-plus";
 import {getSubCompOpt} from "@/api/user/user";
 
+const checkList = ref(['1'])
+const checkStrictly = ref(false)
+const isExpand = ref('展开')
+const expandedKeys = ref(['-1']);
+const checkOptions = ref([
+  {
+    label: isExpand.value,
+    value: '1'
+  },
+  {
+    label: '父子联动',
+    value: '2'
+  },
+])
 const props = defineProps({
   value: {
     type: Array,
@@ -86,7 +88,6 @@ const props = defineProps({
     type: Boolean
   }
 });
-const checkBtn = ref(1)
 const isChooseAll = ref(true);
 let selectItem = reactive({
   type: -1,
@@ -103,7 +104,8 @@ const tree = ref([]);
 const defaultProps = {
   value: "value",
   label: "label",
-  children: "children"
+  children: "children",
+  disabled: "disabled",
 };
 const emit = defineEmits();
 const _value = computed({
@@ -118,22 +120,39 @@ const _value = computed({
 watch(() => filterText.value, (newVal) => {
   tree.value.filter(newVal);
 });
-const matterTree = (list) => {
+const checkBoxChange = (val) => {
+  checkStrictly.value = val.includes('2')
+  let nodes = tree.value.store.nodesMap
+  if (val.includes('1')) {
+    for (const node in nodes) {
+      nodes[node].expanded = true;
+    }
+    isExpand.value = '折叠'
+  } else {
+    for (const node in nodes) {
+      nodes[node].expanded = false;
+    }
+    isExpand.value = '展开'
+  }
+}
+const matterTree = (list, flag) => {
   list.forEach(item => {
-    tree.value.setChecked(item, true)
+    if (!flag&&item.value!==-1) {
+      tree.value.setChecked(item, false)
+    }
     if (item.children !== undefined) {
       matterTree(item.children)
     }
   })
 }
-const cancelAll = () => {
-  isChooseAll.value = true
-  tree.value.setCheckedNodes([])
-}
-const chooseAll = () => {
-  isChooseAll.value = false
-  matterTree(dataList.value)
-}
+// const cancelAll = () => {
+//   isChooseAll.value = true
+//   tree.value.setCheckedNodes([])
+// }
+// const chooseAll = () => {
+//   isChooseAll.value = false
+//   matterTree(dataList.value)
+// }
 const getList = () => {
   getSubCompOpt().then(res => {
     dataList.value = [
@@ -161,10 +180,10 @@ const show = () => {
   getList()
 };
 const handleChange = (data, checked) => {
-  if(data.value==-1&&checked){
-    chooseAll()
-  }else if(data.value==-1&&!checked){
-    cancelAll()
+  if (data.value == -1&&checked) {
+    // tree.value.setCheckedNodes(['-1'])
+    matterTree(dataList.value, false)
+    // return;
   }
   // 左侧有选择框 + 多选
   if (props.multiple) {
@@ -193,7 +212,6 @@ const handleChange = (data, checked) => {
     }
     if (checked) {
       tree.value.setCheckedNodes([data]);
-      // this.$refs.tree.setCheckedKeys([]);
       selectList.value = [data];
     } else if (data === "1") {
       selectList.value = [];

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;