车辆管理服务类型优化

src/views/index/vehicleAdd.vue

@@ -59,14 +59,18 @@
   <div class="serviceType">
 
     <div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
-      <div class="serviceline">
+      <div class="serviceline" :ref="'serviceline' + index" @click="loadAll(index)">
+        <img :src="show  ? require('@/assets/arr_bot.png') : require('@/assets/arr_right.png')" style="width: 20px;height: 15px" >
         <span  class="service">{{ item.name }}:</span>
         <span class="line"></span>
       </div>
+      <div :ref="'checkboxGroup' + index"  class="checkbox-group">
         <van-checkbox-group  v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap" @change="change">
           <van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
         </van-checkbox-group>
       </div>
+
+    </div>
   </div>
   <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
 </div>
@@ -95,7 +99,8 @@ export default {
       selectedOption:'1',//车辆类型
       id:'',//车辆Id
       serviceIds:[],//车辆服务种类,
-      supplierServiceList:[]
+      supplierServiceList:[],
+      show:false,
     }
   },
   async mounted() {
@@ -111,6 +116,19 @@ export default {
     await this.getSupplierServiceTree();
   },
   methods:{
+    loadAll(i){
+      // console.log(i)
+      this.show = !this.show
+      const refName='checkboxGroup' + i;
+      const element1 = this.$refs[refName]; // 通过动态属性名访问引用this.$refs.checkboxGroup.style.display = 'block';
+      // console.log("element1",refName,element1)
+      if(this.show){
+        element1[0].style.display = 'block'
+      }else {
+        element1[0].style.display = 'none'
+      }
+
+    },
     async getTypeList() {
         let result=await vehicleTypeList();
         if(result.code === 200){
@@ -177,6 +195,9 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.checkbox-group {
+  display: none;
+}
 .navBar{
   margin-bottom: 46px;
 }
@@ -237,6 +258,7 @@ export default {
     }
     .radioWrap{
       margin-left: 10px;
+      //display: none;
     }
     .service{
       opacity: .7;