修改商品查看规格状态

src/api/system/shop.js

@@ -175,18 +175,19 @@ export function checkMachine(id) {
   });
 }
 
-// 获取规格选项状态
-export function getSpecState(shopId,goodsId) {
+// 获取规格选项
+export function getSpecSku(shopId,goodsId) {
   return request({
-    url: "/system/shop/getShopGoodsSpecs?shopId=" + shopId+"&goodsId="+goodsId,
+    //url: "/system/shop/getShopGoodsSpecs?shopId=" + shopId+"&goodsId="+goodsId,
+    url: "/system/shop/selectSkuByShopGoods?shopId=" + shopId+"&goodsId="+goodsId,
     method: "get",
   });
 }
 
 // 修改规格选项状态
-export function updateSpecState(shopId,goodsId,ruleId,state) {
+export function updateSpecState(ids,state) {
   return request({
-    url: "/system/shop/updateShopGoodsSpecState?shopId=" + shopId+"&goodsId="+goodsId+"&ruleId="+ruleId+"&state="+state,
+    url: "/system/shop/updateShopGoodsSkuState?ids="+ids+"&state="+state,
     method: "get",
   });
 }

src/views/shop/shop/components/commodity.vue

@@ -97,37 +97,48 @@
         layout="total, sizes, prev, pager, next,jumper"
         :total="totalNum">
     </el-pagination>
-    <el-dialog title="查看规格" :visible.sync="viewSpecDialog" width="1000px" append-to-body>
-      <div style="margin-bottom: 10px;">
+    <el-dialog title="查看规格" :visible.sync="viewSpecDialog" width="800px" append-to-body>
+      <div style="margin-bottom: 10px;" >
         <el-row>
+          <div>
             <el-col :span='2'>商品名称</el-col>
-          <el-col :span='22'>{{goodsName}}</el-col>
-        </el-row>
+            <el-col :span='4'>{{goodsName}}</el-col>
+          </div>
+          <div style="display: flex;justify-content:space-between">
+            <div></div>
+            <div></div>
+            <div>
+              <!-- <el-button size="small" type="primary">全选</el-button> -->
+              <el-button size="small" type="success" @click="changeMoreState('1')">上架</el-button>
+              <el-button size="small" type="danger" @click="changeMoreState('2')">下架</el-button>
+            </div>
           </div>
-      <div style="display:flex;flex-direction:row;flex-wrap:wrap;width:1000px;margin-bottom: 10px;">
-        <div style="width:480px;" v-for="(item,index) in specList" :key="index">
-          <el-row style="margin-bottom: 10px;">
-            <el-col :span='4'>规格组名</el-col>
-            <el-col :span='20'>{{item.name}}</el-col>
         </el-row>
-          <el-row>
-            <el-col :span='4'> 选项值</el-col>
-            <el-col :span='20'> 
-              <el-table  :data="item.specRules">
-                <el-table-column label="选项名称" prop="name"/>                
-                <el-table-column label="售罄" >
+      </div>
+      <el-table :data="specNameList" style="width: 100%" @selection-change="specNameStateChange" ref="multipleTable">
+        <el-table-column          
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column label="商品规格">
+          
             <template slot-scope="scope">
-                    <div @click="changeState(scope.row)"  ><el-switch v-model="scope.row.state"/> </div>
-                    <span v-if="scope.row.state == false">售罄</span>
-                    <span v-if="scope.row.state == true">在售</span>
+              <div style="white-space: pre-wrap;">
+              {{scope.row.strName}}
+              </div>
+            </template>
+          
+        </el-table-column>
+        <el-table-column label="状态" >
+          <template slot-scope="scope">
+            <div @click="changeOneState(scope.row)"  ><el-switch v-model="scope.row.state"/> </div>
+            <span v-if="scope.row.state == false">下架</span>
+            <span v-if="scope.row.state == true">上架</span>
           </template>
         </el-table-column>
+         
       </el-table>
-            </el-col>
-          </el-row>            
-        </div>
-      </div>
-      <div class="dialog-footer" style="text-align: center">       
+      <div class="dialog-footer" style="text-align: center;margin-top: 10px;">       
         <el-button @click="cancel" type="primary">关闭</el-button>
 		  </div>
     </el-dialog>
@@ -135,7 +146,7 @@
 </template>
 
 <script>
-import { getCategoryGoods, addGoods ,offGoods,turnList,getSpecState,updateSpecState} from "@/api/system/shop";
+import { getCategoryGoods, addGoods ,offGoods,turnList,getSpecSku,updateSpecState} from "@/api/system/shop";
 import SelectGoods from '@/components/SelectGoods';
 import AddRecommend from './addRecommend.vue'
 import Preferential from './preferential.vue';
@@ -165,47 +176,101 @@ export default {
       total: null,
       goodsList:[],
       viewSpecDialog:false,      
-      specList:[],
-      specState:true,
       goodsId:null,
-      goodsName:""
+      goodsName:"",
+      specNameList:[],
+      ids:"",
 		}    
 	},
 	mounted() {
 		//this.getList()
 	},
 	methods: {
+    //新增接口1
     cancel(){
       this.viewSpecDialog=false;
     },
-    changeState(row){     
+    specNameStateChange(val) {
+      this.ids="";
+      for(let i=0;i<val.length;i++){
+        this.ids +=val[i].id+","
+      }
+      this.ids=this.ids.substring(0,this.ids.length-1)      
+    },
+    //新增接口2
+    changeOneState(row){        
       let tag=2;      
       if(row.state){
         tag=1;
       }
-      updateSpecState(this.shopId,this.goodsId,row.id,tag).then((response) => {
+      this.updateSpecState(row.id,tag);      
+    },
+    //新增接口3
+    changeMoreState(tag){
+      this.updateSpecState(this.ids,tag);      
+    },
+    updateSpecState(ids,tag){
+      updateSpecState(ids,tag).then((response) => {
         if(response.code=="200"){          
-          this.$modal.msgSuccess("修改状态成功!");
+          let idsList=ids.split(",");
+          for(let i=0;i<idsList.length;i++){
+            let selectedId=idsList[i]
+            for(let j=0;j<this.specNameList.length;j++){
+              if(this.specNameList[j].id==selectedId){
+                this.specNameList[j].state=(tag == 1?true:false)
+              }
+            }
+          }
+          if(tag==1){
+            this.$modal.msgSuccess("上架成功!");
+          }else{
+            this.$modal.msgSuccess("下架成功!");
+          } 
+          this.$refs.multipleTable.clearSelection();
+        }else{
+          if(tag==1){
+            this.$message.error("上架失败!");
+          }else{
+            this.$message.error("下架失败!");
+          }
         }
       })
     },
+    //新增接口3
     clickView(row){
+      this.specNameList=[];
       this.viewSpecDialog=true;  
       this.goodsId=row.id; 
       this.goodsName=row.name;
-      getSpecState(this.shopId,row.id).then((response) => {
+      let specList=JSON.parse(row.spec);      
+      getSpecSku(this.shopId,row.id).then((response) => {
         if(response.code=="200"){
-        for(let i=0;i<response.data.length;i++){
-            let itemI = response.data[i];
-            for(let j=0;j<itemI.specRules.length;j++){
-               let itemJ= itemI.specRules[j];
-               itemJ.state = (itemJ.state == 1?true:false);
+          let list=response.data;
+          for(let i=0;i<list.length;i++){
+            let ruleList=JSON.parse(list[i].ruleList);
+            let strName = '';
+            for(let j=0;j<ruleList.length;j++){             
+              ruleList[j].specName=this.findSpecNameById(specList,ruleList[j].specId); 
+              strName +=ruleList[j].specName+":"+ruleList[j].name+"\n"; 
             }
+            list[i].state=(list[i].state == 1?true:false)
+            this.specNameList.push({"id":list[i].id,"strName":strName,"state":list[i].state})                               
           }      
-          this.specList=response.data 
         }        
       });      
     },
+    //根据id找name
+    findSpecNameById(specList,p_specId){      
+      let specName = '';
+      for(let i=0;i<specList.length;i++){
+          let specId = specList[i].id;
+          if(specId == p_specId){
+              specName = specList[i].name;
+              break;
+          }
+      }
+      return specName;
+    },
     turnClick(row,tag){
       turnList({"shopId":this.shopId,"goodsId": row.id,"pointer":tag}).then((response) => {
         if(response.code=="200"){
@@ -265,7 +330,6 @@ export default {
       this.outIds = selection.map((item) => item.id);
     },
     soldOutGoos(){      
-      console.log("this.outIds",this.outIds)
       if(this.outIds.length==0){
         this.$message.error('请选择所需下架的商品!');
         return;