宣传物料制作: 新增选择物料时地市，区县，渠道新增全选按钮

src/pages/main/advertising/materialApplicationadd.vue

@@ -292,12 +292,18 @@
                     <el-form-item prop="regionCode">
                         <span>地市名称</span>
                         <el-select
-                            @change="verifcheck"
+                            @change="verifcheck(1, $event)"
                             clearable
                             multiple
                             v-model="infolist.regionCode"
                             placeholder="地市名称"
-                        >
+                        >   
+                            <!-- <el-option
+                                label="全选"
+                                value="selAllCity"
+                            >
+                            </el-option> -->
+                            <el-checkbox v-model="isSelAllCity" @change='selectAllCity' class="checkboxStyle">全选</el-checkbox>
                             <el-option
                                 v-for="item in regionOpt"
                                 :key="item.compId"
@@ -314,8 +320,14 @@
                             v-model="infolist.countyCode"
                             placeholder="区县名称"
                             multiple
-                            @change="verifcheck(2)"
+                            @change="verifcheck(2, $event)"
                         >
+                            <!-- <el-option
+                                label="全选"
+                                value="selAllCounty"
+                            >
+                            </el-option> -->
+                            <el-checkbox v-model="isSelAllCounty" @change='selectAllCounty' class="checkboxStyle">全选</el-checkbox>
                             <el-option
                                 v-for="item in countyOpt"
                                 :key="item.compId"
@@ -333,6 +345,7 @@
                             v-model="infolist.channelCode"
                             placeholder="渠道名称"
                         >
+                            <el-checkbox v-model="isSelAllChannel" @change='selectAllChannel' class="checkboxStyle">全选</el-checkbox>
                             <el-option
                                 v-for="(items, index) in channelOpt"
                                 :key="index"
@@ -676,6 +689,10 @@ export default {
             list: {},
             companyFlag: "",
             // approvalDirection: 1,
+            //地市,区县,渠道 是否全选
+            isSelAllCity: false,
+            isSelAllCounty: false,
+            isSelAllChannel: false
         };
     },
     computed: {
@@ -776,13 +793,81 @@ export default {
         //         this.infolist.channelName = "";
         //     }
         // },
-        verifcheck(v) {
-            if (v == 2) {
-                // for (let i = 0; i < this.countyOpt.length; i++) {
-                //     if (this.countyOpt[i].compId === this.infolist.countyCode) {
-                //         this.infolist.countyCode = this.countyOpt[i].compName;
-                //     }
-                // }
+        selectAllCity(){
+            this.infolist.regionCode = []
+            if(this.isSelAllCity){
+                this.regionOpt.map(item=>{
+                    this.infolist.regionCode.push(item.compId)
+                })
+                let countyOpt2 = [];
+                for (let i = 0; i < this.regionOpt.length; i++) {
+                    for (let j = 0; j < this.infolist.regionCode.length; j++) {
+                        if (
+                            this.regionOpt[i].compId ===
+                            this.infolist.regionCode[j]
+                        ) {
+                            this.infolist.regionName = this.regionOpt[i].compName;
+                            this.$http({
+                                url: "/sysmgr/regionComp/queryList",
+                                method: "post",
+                                headers: {
+                                    "Content-Type": "application/json"
+                                },
+                                data: {
+                                    parentCompId: this.regionOpt[i].compId
+                                }
+                            }).then(res => {
+                                countyOpt2 = countyOpt2.concat(res.data);
+                                this.countyOpt = countyOpt2;
+                                
+                            });
+                        }
+                    }
+                }
+            }else{
+                this.infolist.regionCode = []
+                this.countyOpt = [];
+            }
+        },
+        selectAllCounty(){
+            this.infolist.countyCode = []
+            if(this.isSelAllCounty){
+                this.countyOpt.map(item=>{
+                    this.infolist.countyCode.push(item.compId)
+                })
+                this.$http({
+                    url: "/market/cadvBusiMetirial/queryChannel",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    data: this.infolist.countyCode
+                }).then(res => {
+                    this.channelOpt = res.data;
+                });
+            }else{
+                this.infolist.countyCode = []
+                this.channelOpt = [];
+            }
+        },
+        selectAllChannel(){
+            this.infolist.channelCode = []
+            if(this.isSelAllChannel){
+                this.channelOpt.map(item=>{
+                    this.infolist.channelCode.push(item.channel_code)
+                })
+            }else{
+                this.infolist.channelCode = []
+            }
+        },
+        verifcheck(v, ev) {
+           if (v == 2) {
+                if(ev.length === this.countyOpt.length){
+                    this.isSelAllCounty = true
+                }else{
+                    this.isSelAllCounty = false
+                    
+                }
                 this.$http({
                     url: "/market/cadvBusiMetirial/queryChannel",
                     method: "post",
@@ -794,7 +879,15 @@ export default {
                     this.channelOpt = res.data;
                 });
             } else {
+
                 this.infolist.countyCode = [];
+                
+                if(ev.length === this.regionOpt.length){
+                    this.isSelAllCity = true
+                }else{
+                    this.isSelAllCity = false
+                    this.countyOpt = [];
+                }
                 let countyOpt2 = [];
                 for (let i = 0; i < this.regionOpt.length; i++) {
                     for (let j = 0; j < this.infolist.regionCode.length; j++) {
@@ -802,9 +895,7 @@ export default {
                             this.regionOpt[i].compId ===
                             this.infolist.regionCode[j]
                         ) {
-                            this.infolist.regionName = this.regionOpt[
-                                i
-                            ].compName;
+                            this.infolist.regionName = this.regionOpt[i].compName;
                             this.$http({
                                 url: "/sysmgr/regionComp/queryList",
                                 method: "post",
@@ -817,10 +908,13 @@ export default {
                             }).then(res => {
                                 countyOpt2 = countyOpt2.concat(res.data);
                                 this.countyOpt = countyOpt2;
+                                
                             });
                         }
                     }
                 }
+                
+                
             }
         },
         //获取物料类型
@@ -1514,4 +1608,10 @@ export default {
         margin-bottom: 5px;
     }
 }
+.checkboxStyle{
+    padding: 0 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
 </style>