店铺商品信息新增规格

src/api/system/shop.js

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

src/views/goods/category/index.vue

@@ -246,6 +246,7 @@ export default {
         .catch(() => { });
     },
 
+
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();

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

@@ -11,7 +11,7 @@
 				</el-button>
 			</el-col>
 			<el-col :span="6">
-				<el-button type="primary" @click="openSelectGoos" plain icon="el-icon-plus" size="small" :disabled="showButton">添加商品
+				<el-button type="primary" @click="openSelectGoos" plain icon="el-icon-plus" size="small">添加商品
 				</el-button>
 				<el-button type="danger" @click="soldOutGoos"  plain icon="el-icon-minus" size="small">下架商品</el-button>
 			</el-col>
@@ -45,10 +45,23 @@
 			<el-table-column label="折扣价" align="center" prop="discount" />
 			<el-table-column label="总销量" align="center" prop="salesVolume" />
       <el-table-column label="上架时间" align="center" prop="shelfAt" width="150" /> 
-			<el-table-column label="状态" align="center" prop="state" width="150">
+      <el-table-column label="规格"  align="center" prop="" width="150">
         <template slot-scope="scope">
-          <span v-if="scope.row.state == 1">售卖</span>
-          <span v-if="scope.row.state == 2">告罄</span>
+          <div v-for="(item,index) in getSpecList(scope.row.spec)" :key="index" >
+            <el-tooltip effect="dark" placement="right-start" >       
+              <div slot="content">
+                <div v-for="ru in item.specRules" :key="ru.id" style="display: flex;align-items: center;">                  
+                  <div style="margin-right: 20px;">{{ru.name}}</div>
+                  <div>{{ru.amount}}</div>                  
+                </div>
+              </div>
+              <div>
+                <el-button style="height:30px">{{item.name}}</el-button>                
+              </div>
+            </el-tooltip>
+          </div>
+          <div style="text-align:center;">已售罄（{{scope.row.selloutCount}}/{{scope.row.skuCount}}）</div>
+          <div><el-button size="mini" type="text" @click="clickView(scope.row)">查看</el-button></div>      
         </template>
       </el-table-column>
       <el-table-column label="排序">
@@ -84,14 +97,49 @@
         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-row>
+          <el-col :span='2'>商品名称</el-col>
+          <el-col :span='22'>{{goodsName}}</el-col>
+        </el-row>
+      </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="售罄" >
+                  <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>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>            
+        </div>
+      </div>
+      <div class="dialog-footer" style="text-align: center">       
+        <el-button @click="cancel" type="primary">关闭</el-button>
+		  </div>
+    </el-dialog>
 	</div>
 </template>
 
 <script>
-import { getCategoryGoods, addGoods ,offGoods,turnList,checkMachine} from "@/api/system/shop";
+import { getCategoryGoods, addGoods ,offGoods,turnList,getSpecState,updateSpecState} from "@/api/system/shop";
 import SelectGoods from '@/components/SelectGoods';
 import AddRecommend from './addRecommend.vue'
 import Preferential from './preferential.vue';
+import { TagsView } from '../../../../layout/components';
 
 export default {
 	props: ['shopId'],
@@ -116,13 +164,48 @@ export default {
       outIds: '',
       total: null,
       goodsList:[],
-      showButton:true
+      viewSpecDialog:false,
+      specList:[],
+      specState:true,
+      goodsId:null,
+      goodsName:""
 		}    
 	},
 	mounted() {
 		//this.getList()
 	},
 	methods: {
+    cancel(){
+      this.viewSpecDialog=false;
+    },
+    changeState(row){     
+      let tag=2;      
+      if(row.state){
+        tag=1;
+      }
+      updateSpecState(this.shopId,this.goodsId,row.id,tag).then((response) => {
+        if(response.code=="200"){
+          this.$modal.msgSuccess("修改状态成功!");
+        }
+      })      
+    },
+    clickView(row){
+      this.viewSpecDialog=true;  
+      this.goodsId=row.id; 
+      this.goodsName=row.name;
+      getSpecState(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);
+            }
+          }
+          this.specList=response.data 
+        }
+      });      
+    },
     turnClick(row,tag){
       turnList({"shopId":this.shopId,"goodsId": row.id,"pointer":tag}).then((response) => {
         if(response.code=="200"){
@@ -155,9 +238,6 @@ export default {
 		},
 		getList() {
 			if (!this.shopId) return;
-      checkMachine(this.shopId).then(({ data }) => {
-        if(data){
-          this.showButton=false;
       this.list=[];
 			getCategoryGoods(this.shopId).then(({ data }) => {        
 				if (data && data.length > 0) {
@@ -179,12 +259,6 @@ export default {
           this.options=[];
         }
 			})
-        }else{
-          this.$message.error('请先绑定店铺机器!');
-          this.showButton=true;
-        }
-      })
-      
 		},
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -259,6 +333,9 @@ export default {
       this.pageSize=this.pageSize;
       this.getPageList();
     },
+    getSpecList(value){
+      return JSON.parse(value);      
+    }
 	}
 }
 </script>

src/views/shop/shop/setShop.vue

@@ -39,12 +39,13 @@ export default {
 	},
 	watch: {
 		activeName(value) {
+      
       if (value == 'second') {
 				this.$refs.Machine.getList()
 			}
       if (value == 'third') {
         this.$refs.Commodity.btnId='';
-				this.$refs.Commodity.getList()
+				this.$refs.Commodity.getList(1)
 			}
 			if (value == 'fourth') {
 				this.$refs.Recommend.getList()