添加批量操作

src/views/operationManage/goodsManage/homeGoodsSet.vue

@@ -28,19 +28,12 @@
        <!-- <el-button class="add-btn" type="primary" size="small" @click="handleAdd"
         >添加</el-button
       > -->
-       <div>
-        <el-button class="add-btn" size="small" @click="handleSetting"
-          >产品配置</el-button
-        >
-        <el-button class="add-btn" size="small" @click="handleList"
-          >黑名单</el-button
-        >
-      </div>
+     
     </div>
 
-    <!-- <div class="search">
+    <div class="search">
       <div>
-          <el-button class="add-btn" type="primary" size="small" @click="handleSetting"
+          <el-button class="add-btn" type="primary" size="small" :disabled="!pids.length" @click="handleBatch(true)"
           >批量加入黑名单</el-button
         >
       </div>
@@ -53,9 +46,10 @@
           >黑名单</el-button
         >
       </div>
-    </div> -->
+    </div>
 
     <el-table
+      @selection-change="handleSelectionChange"
       :data="tableData"
       tooltip-effect="dark"
       border
@@ -68,21 +62,24 @@
       width="55">
     </el-table-column>
      <el-table-column
+        width="250px"
         align="center"
         label="产品信息"
         prop="产品信息"
         show-overflow-tooltip
       >
       <template slot-scope="scope">
-        <el-imageproductType
+        <div class="info">
+        <el-image
         v-if="scope.row.cover.length"
         :src="scope.row.cover[0]"
           class="small-img"
           style="width: 40px; height: 40px;"
           fit="cover"
           >
-          </el-imageproductType>
+          </el-image>
           <span class="ml10">{{scope.row.title}}</span>
+        </div>
       </template>
       </el-table-column>
       <el-table-column
@@ -153,12 +150,17 @@
     </div>
 
       <el-dialog title="黑名单" width="80%" :visible.sync="dialogFormVisible3">
+         <div class="search">
+          <el-button class="add-btn" type="primary" size="small" :disabled="!pids1.length" @click="handleBatch(false)"
+          >批量移除黑名单</el-button>
+        </div>
         <el-table
         :data="tableData1"
         tooltip-effect="dark"
         border
         v-loading="loading"
         style="width: 100%"
+        @selection-change="handleSelectionChange1"
       >
       <el-table-column
         align="center"
@@ -318,6 +320,7 @@ export default {
         distance:100000000,
         latitude:30.57447,
         longitude:103.92377,
+        regionCode:520101,
         productType:'',
         page: 1,
         size: 10,
@@ -396,7 +399,9 @@ export default {
 				'PetrolStation'
 				    :'加油站',
 			
-      }
+      },
+      pids:[],//拉黑 
+      pids1:[],// 解除
     };
   },
   watch: {
@@ -412,6 +417,12 @@ export default {
     },
   },
   methods: {
+    handleSelectionChange(val){
+      this.pids = val.map(item => item.pid)
+    },
+    handleSelectionChange1(val){
+      this.pids1 = val.map(item => item.pid)
+    },
     handleList(){
       this.dialogFormVisible3 = true
       this.query1.page = 1
@@ -490,6 +501,40 @@ export default {
           })
         })
     },
+    handleBatch(hidden){
+      let str = ''
+      let pids
+      if(hidden){
+        str = '拉黑'
+        pids = this.pids
+      }else{
+        str = '取消拉黑'
+        pids = this.pids1
+      }
+       this.$confirm(`此操作将批量${str}该数据, 是否继续?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          setHidden({pids,hidden}).then(res=>{
+            if(res.state == 'Success'){
+              this.dialogFormVisible3 = false
+              this.pids = []
+               this.$notify({
+                title: '成功',
+                message: '操作成功',
+                type: 'success'
+              });
+              if(hidden){
+
+              }else{
+                // this.listHidden()
+              }
+              this.handleSearch()
+            }
+          })
+        })
+    },
     handleSizeChange(val) {
       this.query.page = 1;
       this.query.size = val;
@@ -643,7 +688,7 @@ export default {
     align-items: center;
     padding-bottom: 20px;
     .tab{
-      font-size: 16px;
+      font-size: 14px;
       color: #222;
       cursor: pointer;
     }
@@ -655,6 +700,14 @@ export default {
       font-weight: bold;
     }
   }
+  .info{
+    display: flex;
+    align-items: center;
+    .small-img{
+      width: 40px;
+      height: 40px;
+    }
+  }
 }
 </style>
   

src/views/operationManage/goodsManage/productLibrary.vue

@@ -40,21 +40,24 @@
       width="55">
     </el-table-column>
      <el-table-column
+        width="250px"
         align="center"
         label="产品信息"
         prop="产品信息"
         show-overflow-tooltip
       >
       <template slot-scope="scope">
-        <el-imageproductType
-        v-if="scope.row.cover.length"
-        :src="scope.row.cover[0]"
-          class="small-img"
-          style="width: 40px; height: 40px;"
-          fit="cover"
-          >
-          </el-imageproductType>
-          <span class="ml10">{{scope.row.title}}</span>
+        <div class="info">
+          <el-image
+          v-if="scope.row.cover.length"
+          :src="scope.row.cover[0]"
+            class="small-img"
+            style="width: 40px; height: 40px;"
+            fit="cover"
+            >
+            </el-image>
+            <span class="ml10">{{scope.row.title}}</span>
+        </div>
       </template>
       </el-table-column>
       <el-table-column
@@ -88,17 +91,7 @@
         {{productType[scope.row.productType]||'暂无分类'}}
       </template>
       </el-table-column>
-
-      <el-table-column align="center" label="操作">
-        <template slot-scope="scope">
-          <!-- <el-button type="text" size="small" @click="handleEdit(scope.row)"
-            >编辑</el-button
-          > -->
-          <el-button type="text" size="small" @click="handleDel(scope.row.pid)"
-            >加入黑名单</el-button
-          >
-        </template>
-      </el-table-column>
+    
     </el-table>
     <div class="page-box">
       <el-pagination
@@ -155,52 +148,13 @@
   </div>
 </el-dialog>
 
-<el-dialog title="产品配置" width="550px" :visible.sync="dialogFormVisible1">
-    <el-form label-width="130px" :model="setQuery1"
-      ref="setQuery1"
-      :rules="rules1">
-        <el-form-item label="产品类型"  prop="type">
-
-            <el-select v-model="setQuery1.type" multiple class="item-width-300" placeholder="请选择">
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-        </el-form-item>
-    </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
-    <el-button type="primary" :loading="btnLoading1" @click="save1">确 定</el-button>
-  </div>
-</el-dialog>
-
-    <el-dialog title="排序" width="550px" :visible.sync="dialogFormVisible2">
-        <el-form label-width="130px" :model="topFrom"
-          ref="topFrom"
-          :rules="rules2">
-            <el-form-item label="产品类型"  prop="top">
-               <el-input
-              v-model.number="topFrom.top"
-              class="item-width-300"
-              ></el-input>
-            </el-form-item>
-        </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
-        <el-button type="primary" :loading="btnLoading2" @click="save2">确 定</el-button>
-      </div>
-    </el-dialog>
-
 
   </div>
 </template>
   
   <script>
 import { debounce } from "@/utils/index";
-import { goodsStoreList,setHidden,listShowTypes,listAllTypes,setShowTypes,setTop } from "@/api/goods";
+import { goodsStoreList,setHidden} from "@/api/goods";
 export default {
   name: "marketing",
   data() {
@@ -394,32 +348,6 @@ export default {
         }
       });
     },
-    listAllTypes(){
-       listAllTypes().then((res) => {
-        if (res.state == "Success") {
-          res.content.map(item=>{
-            this.options.push({
-              value:item.productType,
-              label:item.productTypeDesc
-            })
-          })
-        }
-      });
-    },
-    listShowTypes(){
-      listShowTypes().then(res=>{
-        if (res.state == "Success") {
-          this.tabList = []
-          res.content.map(item=>{
-            this.tabList.push({
-              value:item.productType,
-              label:item.productTypeDesc
-            })
-          })
-          this.setQuery1.type = res.content.map(item=>item.productType)
-        }
-      })
-    },
     save(){
         this.$refs.setQuery.validate((v) => {
         if (v) {
@@ -442,54 +370,10 @@ export default {
         }
       });
     },
-    save1(){
-        this.$refs.setQuery1.validate((v) => {
-        if (v) {
-          this.btnLoading1 = true
-          setShowTypes(this.setQuery1.type).then(res=>{
-            this.btnLoading1 = false
-            if(res.state == 'Success'){
-                this.dialogFormVisible1 = false
-              this.$notify({
-                  title: '成功',
-                  message: '操作成功',
-                  type: 'success'
-                });
-                this.listShowTypes();
-
-            }
-          })
-              
-        }
-      });
-    },
-    save2(){
-        this.$refs.topFrom.validate((v) => {
-        if (v) {
-          this.btnLoading2 = true
-          setTop(this.topFrom).then(res=>{
-            this.btnLoading2 = false
-            if(res.state == 'Success'){
-                this.dialogFormVisible2 = false
-              this.$notify({
-                  title: '成功',
-                  message: '操作成功',
-                  type: 'success'
-                });
-                this.getList();
-
-            }
-          })
-              
-        }
-      });
-    },
   
   },
   created() {
     this.getList();
-    this.listAllTypes()
-    this.listShowTypes()
   },
 };
 </script>
@@ -513,6 +397,14 @@ export default {
       font-weight: bold;
     }
   }
+  .info{
+    display: flex;
+    align-items: center;
+    .small-img{
+      width: 40px;
+      height: 40px;
+    }
+  }
 }
 </style>