op部分修改

src/components/OP/CarTouristGuideGrounContent.vue

@@ -25,6 +25,11 @@
                     </div>
                 </div>
             </div>
+            <div style="display: flex;justify-content: space-between;margin: 10px 0;" class="checkbox-style">
+                <el-checkbox-group v-model="checkList" @change="checkBoxChange">
+                    <el-checkbox v-for="(item, index) in checkItems" :key="index" :label=item></el-checkbox>
+                </el-checkbox-group>
+            </div>
             <div style="margin:10px 0;color:#606266;font-size:16px;">
                 <span style="font-weight: bold;">团队名称：</span>
                 <span style="color:#606266;">{{ delegationInfo.teamName }}&nbsp;&nbsp;&nbsp;</span>
@@ -41,7 +46,7 @@
             <hr style='background-color:#5555; height:1px; border:none;' />
             <div>
                 <template>
-                    <el-table :data="ContentList" border style="width: 100%">
+                    <el-table :data="ContentList" :border=true style="width: 100%">
                         <el-table-column prop="num" label="序 号" width="55">
                             <template slot-scope="scope">
                                 {{ scope.$index + 1 }}
@@ -224,6 +229,9 @@ export default {
                 ]
             },
             unitsArr: [],
+            checkItems: ["车费", "导游费", "客户午餐费用", "导游景点费", "导游小费", "接送机费", "其他费用", "司机工资", "司机小费", "司机餐补", "车超时费", "导游餐补", "导游房补", "导游交通", "客户早餐费用", "客户晚餐费用", "景点门票费", "饮料/零食/水果", "住补费用", "翻译费"],
+            checkList: [],
+            sourceList: []
         }
     },
     methods: {
@@ -254,6 +262,7 @@ export default {
                     }
 
                     that.ContentList = res.data.data.carTouristGuides;
+                    that.sourceList = res.data.data.carTouristGuides;
                     that.payment = res.data.data.payment;
 
                     var CreditCardPayment = res.data.data.creditCardPayment;
@@ -276,6 +285,8 @@ export default {
                         return time.getTime() < start || time.getTime() > end;
                     }
 
+                    that.checkList = res.data.data.checkedItem;
+
                     that.loading = false;
                     //that.OpCarTouristGuideGroundContenById()
                 } else {
@@ -434,6 +445,23 @@ export default {
             })
 
             this.countCost = countCost
+        },
+        checkBoxChange(value) {
+            console.log(value.length, this.checkList.length);
+            var index = 0
+
+            if (value.length > this.checkList.length) {
+                for (var item = 0; item < this.sourceList.length; item++) {
+                    if (value[value.length - 1] == this.sourceList.sidName) {
+                        index = item
+                    }
+                }
+
+                this.ContentList.splice(index, this.sourceList[index])
+
+            } else {
+                this.ContentList = value
+            }
         }
     },
 
@@ -513,4 +541,9 @@ export default {
         width: 260px !important;
     }
 }
+
+.checkbox-style .el-checkbox {
+    width: 120px;
+    margin: 10px 10px;
+}
 </style>