商品列表新增绑定耗材

src/api/consumable.js

@@ -5,11 +5,11 @@ import request from "@/utils/request";
  * @returns
  */
 export function gettbConsType(params) {
-    return request({
+  return request({
-        url: '/api/tbConsType',
+    url: "/api/tbConsType",
-        method: "get",
+    method: "get",
-        params
+    params
-    });
+  });
 }
 
 /**
@@ -17,73 +17,72 @@ export function gettbConsType(params) {
  * @returns
  */
 export function posttbConsType(data) {
-    return request({
+  return request({
-        url: '/api/tbConsType',
+    url: "/api/tbConsType",
-        method: "post",
+    method: "post",
-        data
+    data
-    });
+  });
 }
 /**
  * 修改耗材类型
  * @returns
  */
 export function puttbConsType(data) {
-    return request({
+  return request({
-        url: '/api/tbConsType',
+    url: "/api/tbConsType",
-        method: "put",
+    method: "put",
-        data
+    data
-    });
+  });
 }
 /**
  * 查询耗材信息
  * @returns
  */
 export function gettbConsInfo(params) {
-    // return request({
+  // return request({
-    //     url: '/api/tbConsInfo',
+  //     url: '/api/tbConsInfo',
-    //     method: "get",
+  //     method: "get",
-    //     params
+  //     params
-    // });
+  // });
-    return request({
+  return request({
-        url: "/api/viewConInfoFlow",
+    url: "/api/viewConInfoFlow",
-        method: "get",
+    method: "get",
-        params 
+    params
-      });
+  });
 }
 
-
 /**
  * 耗材入库
  * @returns
  */
 export function posttbConsInfostockIn(data) {
-    return request({
+  return request({
-        url: '/api/tbConsInfo/stockIn',
+    url: "/api/tbConsInfo/stockIn",
-        method: "post",
+    method: "post",
-        data
+    data
-    });
+  });
 }
 /**
  * 修改单位耗材值耗材
  * @returns
  */
 export function postapitbConsInfo(data) {
-    return request({
+  return request({
-        url: '/api/tbConsInfo',
+    url: "/api/tbConsInfo",
-        method: "put",
+    method: "put",
-        data
+    data
-    });
+  });
 }
 /**
  * 新增耗材信息
  * @returns
  */
 export function posttbConsInfo(data) {
-    return request({
+  return request({
-        url: '/api/tbConsInfo',
+    url: "/api/tbConsInfo",
-        method: "post",
+    method: "post",
-        data
+    data
-    });
+  });
 }
 
 /**
@@ -91,55 +90,55 @@ export function posttbConsInfo(data) {
  * @returns
  */
 export function getviewConSku(params) {
-    return request({
+  return request({
-        url: '/api/viewConSku',
+    url: "/api/viewConSku",
-        method: "get",
+    method: "get",
-        params
+    params
-    });
+  });
 }
 /**
  * 查询查询商品规格
  * @returns
  */
 export function gettbProductSpec(params) {
-    return request({
+  return request({
-        url: '/api/viewProductSkuShop',
+    url: "/api/viewProductSkuShop",
-        method: "get",
+    method: "get",
-        params
+    params
-    });
+  });
 }
 /**
  * 新增商品规格耗材信息
  * @returns
  */
 export function posttbProskuCon(data) {
-    return request({
+  return request({
-        url: '/api/tbProskuCon',
+    url: "/api/tbProskuCon",
-        method: "post",
+    method: "post",
-        data
+    data
-    });
+  });
 }
 /**
  * 新增商品规格耗材信息-修改后
  * @returns
  */
 export function posttbProskuCons(data) {
-    return request({
+  return request({
-        url: '/api/tbProskuCon',
+    url: "/api/tbProskuCon",
-        method: "post",
+    method: "post",
-        data
+    data
-    });
+  });
 }
 /**
  * 修改商品规格耗材信息状态
  * @returns
  */
 export function puttbProskuCon(data) {
-    return request({
+  return request({
-        url: '/api/tbProskuCon',
+    url: "/api/tbProskuCon",
-        method: "put",
+    method: "put",
-        data
+    data
-    });
+  });
 }
 // 编辑单位耗材值
 // export function puttbProskuCon(data) {
@@ -154,74 +153,86 @@ export function puttbProskuCon(data) {
  * @returns
  */
 export function deletetbProskuCon(data) {
-    return request({
+  return request({
-        url: '/api/tbProskuCon',
+    url: "/api/tbProskuCon",
-        method: "delete",
+    method: "delete",
-        data
+    data
-    });
+  });
 }
 /**
  * 查询耗材流水信息
  * @returns
  */
 export function gettbConsInfoFlow(params) {
-    return request({
+  return request({
-        url: '/api/tbConsInfoFlow',
+    url: "/api/tbConsInfoFlow",
-        method: "get",
+    method: "get",
-        params
+    params
-    });
+  });
 }
 /**
  * 分组查询获取耗材流水信息
  */
 export function viewConInfoFlow(data) {
-    return request({
+  return request({
-      url: "/api/viewConInfoFlow",
+    url: "/api/viewConInfoFlow",
-      method: "get",
+    method: "get",
-      params: {
+    params: {
-        shopId: localStorage.getItem("shopId"),
+      shopId: localStorage.getItem("shopId"),
-        ...data
+      ...data
-      }
+    }
-    });
+  });
-  }
+}
 
-  /**
+/**
  *   查询耗材单位列表
  */
 export function queryTbConUnitInfo(data) {
-    return request({
+  return request({
-      url: "/api/tbConUnit/queryTbConUnitInfo",
+    url: "/api/tbConUnit/queryTbConUnitInfo",
-      method: "get",
+    method: "get",
-      params: {
+    params: {
-        shopId: localStorage.getItem("shopId"),
+      shopId: localStorage.getItem("shopId"),
-        ...data
+      ...data
-      }
+    }
-    });
+  });
-  }
+}
 
 /**
  * 新增耗材单位
  */
 export function addtbConUnit(data) {
-    return request({
+  return request({
-        url: '/api/tbConUnit',
+    url: "/api/tbConUnit",
-        method: "post",
+    method: "post",
-       data:{
+    data: {
-        shopId: localStorage.getItem("shopId"),
+      shopId: localStorage.getItem("shopId"),
-        ...data
+      ...data
-        }
+    }
-    });
+  });
 }
+
 /**
  * 修改耗材单位
  */
 export function edittbConUnit(data) {
-    return request({
+  return request({
-        url: '/api/tbConUnit',
+    url: "/api/tbConUnit",
-        method: "put",
+    method: "put",
-        data:{
+    data: {
-        shopId: localStorage.getItem("shopId"),
+      shopId: localStorage.getItem("shopId"),
-        ...data
+      ...data
-        }
+    }
-    });
+  });
-}
+}
+
+/**
+ * 绑定关系
+ */
+export function tbProskuConV2(data) {
+  return request({
+    url: "/api/tbProskuCon/V2",
+    method: "post",
+    data
+  });
+}

src/api/shop.js

@@ -612,11 +612,11 @@ export function callTabledelete(data) {
   });
 }
 export function callTablepost(data) {
-	return request({
+  return request({
-		url: '/callTable',
+    url: "/callTable",
-		method: 'post',
+    method: "post",
-		data 
+    data
-	})
+  });
 }
 // 桌型列表
 export function callTable(params) {
@@ -636,44 +636,44 @@ export function callTabledataput(data) {
 }
 // 叫号列表
 export function callTablequeue(params) {
-	return request({
+  return request({
-		url: '/callTable/queue',
+    url: "/callTable/queue",
-		method: 'get',
+    method: "get",
-		params
+    params
-	})
+  });
 }
 // 取消叫号
 export function callTableput(data) {
-	return request({
+  return request({
-		url: `/callTable/updateState`,
+    url: `/callTable/updateState`,
-		method: "put",
+    method: "put",
-		data
+    data
-	});
+  });
 }
 export function callTabletakeNumber(data) {
-	return request({
+  return request({
-		url: '/callTable/takeNumber',
+    url: "/callTable/takeNumber",
-		method: 'post',
+    method: "post",
-		data: {
+    data: {
-			...data
+      ...data
-		}
+    }
-	})
+  });
 }
 // 叫号配置获取
 export function callTableconfig(params) {
-	return request({
+  return request({
-		url: '/callTable/config',
+    url: "/callTable/config",
-		method: 'get',
+    method: "get",
-		params
+    params
-	})
+  });
 }
 // 叫号配置修改
 export function callTableconfigput(data) {
-	return request({
+  return request({
-		url: `/callTable/config`,
+    url: `/callTable/config`,
-		method: "put",
+    method: "put",
-		data
+    data
-	});
+  });
 }
 /**
  * 员工删除
@@ -727,4 +727,13 @@ export function tbProductListV2(params) {
     method: "get",
     params
   });
-}
+}
+
+// 修改商品相关(快捷接口）
+export function updateProductData(data) {
+  return request({
+    url: `/api/stock/updateProductData`,
+    method: "post",
+    data
+  });
+}

src/assets/styles/index.css

@@ -159,7 +159,7 @@
   height: 100%;
 }
 #app .sidebar-container.has-logo .el-scrollbar {
-  height: calc(100% - 50px);
+  height: calc(100% - 110px);
 }
 #app .sidebar-container .is-horizontal {
   display: none;

src/assets/styles/sidebar.scss

@@ -39,7 +39,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 110px);
       }
     }
 

src/views/product/add_shop.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="app-container">
-    <el-form
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="left">
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      label-width="140px"
-      label-position="left"
-    >
       <el-form-item label="商品类型" prop="typeEnum">
         <div class="shop_type_box" :class="{}">
           <!-- <div class="shop_type_box" :class="{ disabled: form.id }"> -->
-          <div
+          <div class="item" v-for="(item, index) in shopTypes" :key="index"
-            class="item"
+            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
-            v-for="(item, index) in shopTypes"
-            :key="index"
-            :class="{ active: shopTypesActive == index }"
-            @click="changeTypeEnum(index)"
-          >
             <div class="s_title">{{ item.label }}</div>
             <div class="intro">（{{ item.intro }}）</div>
             <div class="active_dot">
@@ -26,109 +15,42 @@
         </div>
       </el-form-item>
       <el-form-item label="商品名称" prop="name">
-        <el-input
+        <el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px"></el-input>
-          v-model="form.name"
-          placeholder="请输入商品名称"
-          style="width: 500px"
-        ></el-input>
       </el-form-item>
       <el-form-item label="商品介绍" prop="shortTitle">
-        <el-input
+        <el-input v-model="form.shortTitle" type="textarea" placeholder="请输入商品介绍" style="width: 500px"></el-input>
-          v-model="form.shortTitle"
-          type="textarea"
-          placeholder="请输入商品介绍"
-          style="width: 500px"
-        ></el-input>
       </el-form-item>
       <el-form-item label="单位" prop="unitId">
-        <el-select
+        <el-select v-model="form.unitId" placeholder="请选择单位" style="width: 500px" @change="selectUnitt">
-          v-model="form.unitId"
+          <el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
-          placeholder="请选择单位"
-          style="width: 500px"
-          @change="selectUnitt"
-        >
-          <el-option
-            :label="item.name"
-            :value="item.id"
-            v-for="item in units"
-            :key="item.id"
-          ></el-option>
         </el-select>
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          @click="$refs.addUnitRef.show()"
-          >添加单位</el-button
-        >
         <addUnit ref="addUnitRef" @success="tbShopUnit" />
       </el-form-item>
-      <el-form-item
+      <el-form-item label="团购券分类" prop="groupCategoryId" v-if="form.typeEnum == 'group'">
-        label="团购券分类"
+        <el-table :data="form.groupCategoryId" border style="width: 500px" v-if="form.groupCategoryId.length">
-        prop="groupCategoryId"
-        v-if="form.typeEnum == 'group'"
-      >
-        <el-table
-          :data="form.groupCategoryId"
-          border
-          style="width: 500px"
-          v-if="form.groupCategoryId.length"
-        >
           <el-table-column label="名称" prop="name"></el-table-column>
           <el-table-column label="操作" width="160">
             <template v-slot="scope">
-              <el-button
+              <el-button type="text" @click="form.groupCategoryId.splice(scope.$index, 1)">删除</el-button>
-                type="text"
-                @click="form.groupCategoryId.splice(scope.$index, 1)"
-                >删除</el-button
-              >
             </template>
           </el-table-column>
         </el-table>
-        <el-button
+        <el-button type="text" @click="$refs.groupTypeList.show(form.groupCategoryId)">添加团购券分类</el-button>
-          type="text"
-          @click="$refs.groupTypeList.show(form.groupCategoryId)"
-          >添加团购券分类</el-button
-        >
       </el-form-item>
       <el-form-item label="商品分类" prop="categoryId" v-else>
-        <el-select
+        <el-select v-model="form.categoryId" placeholder="请选择商品分类" style="width: 500px">
-          v-model="form.categoryId"
+          <el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
-          placeholder="请选择商品分类"
-          style="width: 500px"
-        >
-          <el-option
-            :label="item.name"
-            :value="item.id"
-            v-for="item in categorys"
-            :key="item.id"
-          ></el-option>
         </el-select>
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          @click="$refs.addClassifyRef.show()"
-          >添加分类</el-button
-        >
         <addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
       </el-form-item>
       <el-form-item label="商品图片">
         <div style="display: flex; flex-wrap: wrap">
-          <div
+          <div v-for="(item, index) in imgList" :key="index" style="position: relative" class="showStyle">
-            v-for="(item,index) in imgList"
-            :key="index"
-            style="position: relative"
-            class="showStyle"
-          >
             <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
-            <img
+            <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :key="item.id" :src="item.url"
-              style="width: 148px; height: 148px; margin-right: 6px"
+              alt="" />
-              class="imgStyle"
-              :key="item.id"
-              :src="item.url"
-              alt=""
-            />
           </div>
           <div class="upImgStyle" @click="$refs.addImg.show()">+</div>
         </div>
@@ -136,44 +58,25 @@
         <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
         <!-- <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addImg.show()">选择图片</el-button> -->
       </el-form-item>
-      <el-form-item
+      <el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
-        label="套餐商品"
-        v-if="shopTypes[shopTypesActive].typeEnum == 'group'"
-      >
         <el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
           <el-table-column label="标题" prop="title">
             <template v-slot="scope">
-              <el-input
+              <el-input v-model="scope.row.title" placeholder="请输入标题：自选小吃"></el-input>
-                v-model="scope.row.title"
-                placeholder="请输入标题：自选小吃"
-              ></el-input>
             </template>
           </el-table-column>
           <el-table-column label="商品信息">
             <template v-slot="scope">
               <div class="shop_list">
-                <div
+                <div class="item" v-for="(item, index) in scope.row.goods" :key="item.id">
-                  class="item"
-                  v-for="(item, index) in scope.row.goods"
-                  :key="item.id"
-                >
                   <span class="dot"></span>
                   <div class="name">
                     <div class="t">{{ item.name }}</div>
                     <div class="t" v-if="!form.id">x{{ item.groupNum }}</div>
-                    <el-input-number
+                    <el-input-number v-model="item.groupNum" :step="1" step-strictly :min="1" size="mini"
-                      v-model="item.groupNum"
+                      v-else></el-input-number>
-                      :step="1"
-                      step-strictly
-                      :min="1"
-                      size="mini"
-                      v-else
-                    ></el-input-number>
                   </div>
-                  <i
+                  <i class="del el-icon-delete" @click="delGoods(scope.row.goods, index, scope.$index)"></i>
-                    class="del el-icon-delete"
-                    @click="delGoods(scope.row.goods, index, scope.$index)"
-                  ></i>
                 </div>
               </div>
             </template>
@@ -181,57 +84,33 @@
           <el-table-column label="几选几">
             <template v-slot="scope">
               <span>{{ scope.row.goods.length }}选</span>
-              <el-input-number
+              <el-input-number v-model="scope.row.number" controls-position="right" :min="1"></el-input-number>
-                v-model="scope.row.number"
-                controls-position="right"
-                :min="1"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="160">
             <template v-slot="scope">
-              <el-button
+              <el-button type="text" @click="tableAddShop(scope.$index, scope.row.goods)">添加商品</el-button>
-                type="text"
+              <el-button type="text" @click="form.groupSnap.splice(scope.$index, 1)">删除分组</el-button>
-                @click="tableAddShop(scope.$index, scope.row.goods)"
-                >添加商品</el-button
-              >
-              <el-button
-                type="text"
-                @click="form.groupSnap.splice(scope.$index, 1)"
-                >删除分组</el-button
-              >
             </template>
           </el-table-column>
         </el-table>
-        <el-button type="text" @click="$refs.shopListRef.show()"
+        <el-button type="text" @click="$refs.shopListRef.show()">添加分组</el-button>
-          >添加分组</el-button
-        >
         <shopList ref="shopListRef" @success="selectShopRes" />
       </el-form-item>
-      <el-form-item
+      <el-form-item label="规格属性" v-if="shopTypes[shopTypesActive].typeEnum != 'sku'">
-        label="规格属性"
-        v-if="shopTypes[shopTypesActive].typeEnum != 'sku'"
-      >
         <el-table :data="form.skuList" border>
           <el-table-column label="售价" prop="salePrice">
             <template v-slot="scope">
-              <el-input-number
+              <el-input-number size="mini" @change="priceFormat(scope.row, 'salePrice')"
-                size="mini"
+                @blur="priceFormat(scope.row, 'salePrice')" v-model="scope.row.salePrice"
-                @change="priceFormat(scope.row, 'salePrice')"
+                controls-position="right"></el-input-number>
-                @blur="priceFormat(scope.row, 'salePrice')"
-                v-model="scope.row.salePrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="会员价" prop="memberPrice">
             <template v-slot="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'memberPrice')"
-                @change="priceFormat(scope.row, 'memberPrice')"
+                @blur="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
-                @blur="priceFormat(scope.row, 'memberPrice')"
+                controls-position="right"></el-input-number>
-                v-model="scope.row.memberPrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <!-- <el-table-column label="成本价" prop="costPrice">
@@ -256,16 +135,11 @@
           </el-table-column>-->
           <el-table-column label="起售数量" prop="suit">
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="1"
-                @change="priceFormat(scope.row, 'suit')"
+                v-model="scope.row.suit" controls-position="right"></el-input-number>
-                @blur="priceFormat(scope.row, 'suit')"
-                :min="1"
-                v-model="scope.row.suit"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
-          <el-table-column label="库存数量" prop="stockNumber">
+          <!-- <el-table-column label="库存数量" prop="stockNumber">
             <template v-slot="scope">
               <el-input-number
                 @change="priceFormat(scope.row, 'stockNumber')"
@@ -275,15 +149,12 @@
                 controls-position="right"
               ></el-input-number>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column label="分销金额" prop="firstShared">
             <template v-slot="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'firstShared')"
-                @change="priceFormat(scope.row, 'firstShared')"
+                @blur="priceFormat(scope.row, 'firstShared')" v-model="scope.row.firstShared"
-                @blur="priceFormat(scope.row, 'firstShared')"
+                controls-position="right"></el-input-number>
-                v-model="scope.row.firstShared"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="商品条码">
@@ -298,220 +169,107 @@
       </el-form-item>
       <template v-if="form.typeEnum == 'group'">
         <el-form-item label="使用日期说明" prop="notices.dateUsed">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.dateUsed" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入使用日期说明"></el-input>
-            v-model="form.notices.dateUsed"
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入使用日期说明"
-          ></el-input>
         </el-form-item>
         <el-form-item label="可用时间说明" prop="notices.availableTime">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.availableTime" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入可用时间说明
-            v-model="form.notices.availableTime"
+"></el-input>
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入可用时间说明
-"
-          ></el-input>
         </el-form-item>
         <el-form-item label="预约方式" prop="notices.bookingType">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.bookingType" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入预约方式
-            v-model="form.notices.bookingType"
+"></el-input>
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入预约方式
-"
-          ></el-input>
         </el-form-item>
         <el-form-item label="退款说明" prop="notices.refundPolicy">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.refundPolicy" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入退款说明
-            v-model="form.notices.refundPolicy"
+"></el-input>
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入退款说明
-"
-          ></el-input>
         </el-form-item>
         <el-form-item label="团购价说明">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.groupPurInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入团购价说明"></el-input>
-            v-model="form.notices.groupPurInfo"
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入团购价说明"
-          ></el-input>
         </el-form-item>
         <el-form-item label="门市价/划线价说明">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.marketPriceInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入门市价/划线价说明"></el-input>
-            v-model="form.notices.marketPriceInfo"
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入门市价/划线价说明"
-          ></el-input>
         </el-form-item>
         <el-form-item label="折扣说明">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.discountInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入折扣说明"></el-input>
-            v-model="form.notices.discountInfo"
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入折扣说明"
-          ></el-input>
         </el-form-item>
         <el-form-item label="发票说明">
-          <el-input
+          <el-input type="textarea" v-model="form.notices.invoiceInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-            type="textarea"
+            style="width: 500px" placeholder="请输入发票说明"></el-input>
-            v-model="form.notices.invoiceInfo"
-            :autosize="{ minRows: 3, maxRows: 10 }"
-            style="width: 500px"
-            placeholder="请输入发票说明"
-          ></el-input>
         </el-form-item>
         <el-form-item label="使用规则">
-          <Editor
+          <Editor :minHeight="200" :value="form.notices.usageRules" v-model="form.notices.usageRules" />
-            :minHeight="200"
-            :value="form.notices.usageRules"
-            v-model="form.notices.usageRules"
-          />
         </el-form-item>
       </template>
-      <el-form-item
+      <el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
-        label="选择规格"
+        <el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle">
-        v-if="shopTypes[shopTypesActive].typeEnum == 'sku'"
+          <el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
-      >
-        <el-select
-          v-model="form.specId"
-          placeholder="请选择规格"
-          style="width: 500px"
-          @change="selectSpecHandle"
-        >
-          <el-option
-            :label="item.name"
-            :value="item.id"
-            v-for="item in specList"
-            :key="item.id"
-          ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item
+      <el-form-item :label="item.name" v-if="selectSpec.length" v-for="item in selectSpec" :key="item.name">
-        :label="item.name"
+        <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
-        v-if="selectSpec.length"
+          <el-checkbox :label="item" v-for="(item, index) in item.value" :key="index"></el-checkbox>
-        v-for="item in selectSpec"
-        :key="item.name"
-      >
-        <el-checkbox-group
-          v-model="item.selectSpecResult"
-          @change="selectSpecResultChange"
-        >
-          <el-checkbox
-            :label="item"
-            v-for="(item, index) in item.value"
-            :key="index"
-          ></el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-      <el-form-item
+      <el-form-item v-if="selectSpecResult && shopTypes[shopTypesActive].typeEnum == 'sku'">
-        v-if="selectSpecResult && shopTypes[shopTypesActive].typeEnum == 'sku'"
-      >
         <el-table :data="form.skuList" border>
-          <el-table-column
+          <el-table-column :label="item.label" :prop="item.value" v-for="(item, index) in specTableHeaders"
-            :label="item.label"
+            :key="index">
-            :prop="item.value"
-            v-for="(item, index) in specTableHeaders"
-            :key="index"
-          >
           </el-table-column>
           <el-table-column label="图片" prop="coverImg" width="80">
             <template v-slot="scope">
-              <uploadImg
+              <uploadImg v-if="!scope.row.coverImg" type="text" :limit="1"
-                v-if="!scope.row.coverImg"
+                @success="uploadImgSucess($event, scope.row)" />
-                type="text"
+              <el-image style="width: 30px; height: 30px" :src="scope.row.coverImg" v-else />
-                :limit="1"
+              <i class="el-icon-error" v-if="scope.row.coverImg" @click="scope.row.coverImg = ''" />
-                @success="uploadImgSucess($event, scope.row)"
-              />
-              <el-image
-                style="width: 30px; height: 30px"
-                :src="scope.row.coverImg"
-                v-else
-              />
-              <i
-                class="el-icon-error"
-                v-if="scope.row.coverImg"
-                @click="scope.row.coverImg = ''"
-              />
             </template>
           </el-table-column>
           <el-table-column label="售价" prop="salePrice">
             <template slot="header" slot-scope="scope">
               <span>售价</span>
-              <i
+              <i class="icon el-icon-edit" @click="batchNumber('salePrice')"></i>
-                class="icon el-icon-edit"
-                @click="batchNumber('salePrice')"
-              ></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'salePrice')" @blur="priceFormat(scope.row, 'salePrice')"
-                @change="priceFormat(scope.row, 'salePrice')"
+                v-model="scope.row.salePrice" controls-position="right"></el-input-number>
-                @blur="priceFormat(scope.row, 'salePrice')"
-                v-model="scope.row.salePrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="会员价" prop="memberPrice">
             <template slot="header" slot-scope="scope">
               <span>会员价</span>
-              <i
+              <i class="icon el-icon-edit" @click="batchNumber('memberPrice')"></i>
-                class="icon el-icon-edit"
-                @click="batchNumber('memberPrice')"
-              ></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'memberPrice')"
-                @change="priceFormat(scope.row, 'memberPrice')"
+                @blur="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
-                @blur="priceFormat(scope.row, 'memberPrice')"
+                controls-position="right"></el-input-number>
-                v-model="scope.row.memberPrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="成本价" prop="costPrice">
             <template slot="header" slot-scope="scope">
               <span>成本价</span>
-              <i
+              <i class="icon el-icon-edit" @click="batchNumber('costPrice')"></i>
-                class="icon el-icon-edit"
-                @click="batchNumber('costPrice')"
-              ></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'costPrice')" @blur="priceFormat(scope.row, 'costPrice')"
-                @change="priceFormat(scope.row, 'costPrice')"
+                v-model="scope.row.costPrice" controls-position="right"></el-input-number>
-                @blur="priceFormat(scope.row, 'costPrice')"
-                v-model="scope.row.costPrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="原价" prop="originPrice">
             <template slot="header" slot-scope="scope">
               <span>原价</span>
-              <i
+              <i class="icon el-icon-edit" @click="batchNumber('originPrice')"></i>
-                class="icon el-icon-edit"
-                @click="batchNumber('originPrice')"
-              ></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'originPrice')"
-                @change="priceFormat(scope.row, 'originPrice')"
+                @blur="priceFormat(scope.row, 'originPrice')" v-model="scope.row.originPrice"
-                @blur="priceFormat(scope.row, 'originPrice')"
+                controls-position="right"></el-input-number>
-                v-model="scope.row.originPrice"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="起售数量" prop="suit">
@@ -520,16 +278,11 @@
               <i class="icon el-icon-edit" @click="batchNumber('suit')"></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'originsuitrice')" @blur="priceFormat(scope.row, 'suit')"
-                @change="priceFormat(scope.row, 'originsuitrice')"
+                v-model="scope.row.suit" controls-position="right" :min="1"></el-input-number>
-                @blur="priceFormat(scope.row, 'suit')"
-                v-model="scope.row.suit"
-                controls-position="right"
-                :min="1"
-              ></el-input-number>
             </template>
           </el-table-column>
-          <el-table-column label="库存数量" prop="stockNumber">
+          <!-- <el-table-column label="库存数量" prop="stockNumber">
             <template slot="header" slot-scope="scope">
               <span>库存数量</span>
               <i
@@ -547,22 +300,16 @@
                 controls-position="right"
               ></el-input-number>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column label="分销金额" prop="firstShared">
             <template slot="header" slot-scope="scope">
               <span>分销金额</span>
-              <i
+              <i class="icon el-icon-edit" @click="batchNumber('firstShared')"></i>
-                class="icon el-icon-edit"
-                @click="batchNumber('firstShared')"
-              ></i>
             </template>
             <template slot-scope="scope">
-              <el-input-number
+              <el-input-number @change="priceFormat(scope.row, 'firstShared')"
-                @change="priceFormat(scope.row, 'firstShared')"
+                @blur="priceFormat(scope.row, 'firstShared')" v-model="scope.row.firstShared"
-                @blur="priceFormat(scope.row, 'firstShared')"
+                controls-position="right"></el-input-number>
-                v-model="scope.row.firstShared"
-                controls-position="right"
-              ></el-input-number>
             </template>
           </el-table-column>
           <el-table-column label="商品条码">
@@ -587,21 +334,13 @@
       <template v-if="form.typeEnum != 'group'">
         <el-form-item label="上架区域">
           <div class="shop_type_box">
-            <div
+            <div class="item" :class="{ active: form.isShowCash }" @click="areaChange('isShowCash')">
-              class="item"
-              :class="{ active: form.isShowCash }"
-              @click="areaChange('isShowCash')"
-            >
               <div class="s_title">收银台</div>
               <div class="active_dot">
                 <i class="el-icon-check"></i>
               </div>
             </div>
-            <div
+            <div class="item" :class="{ active: form.isShowMall }" @click="areaChange('isShowMall')">
-              class="item"
-              :class="{ active: form.isShowMall }"
-              @click="areaChange('isShowMall')"
-            >
               <div class="s_title">小程序商城</div>
               <div class="active_dot">
                 <i class="el-icon-check"></i>
@@ -610,79 +349,52 @@
           </div>
         </el-form-item>
         <el-form-item label="库存开关">
-          <el-switch
+          <el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch>
-            v-model="form.isStock"
-            :active-value="1"
-            :inactive-value="0"
-          ></el-switch>
           <div class="tips">注：关闭则不计算出入库数据</div>
         </el-form-item>
+        <el-form-item label="库存数量" v-if="form.isStock">
+          <el-input-number @change="priceFormat(form, 'stockNumber')" @blur="priceFormat(form, 'stockNumber')"
+            v-model="form.stockNumber" controls-position="right"></el-input-number>
+        </el-form-item>
         <el-form-item label="标签打印">
-          <el-switch
+          <el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch>
-            v-model="form.enableLabel"
-            :active-value="1"
-            :inactive-value="0"
-          ></el-switch>
           <div class="tips">开启后: 收银完成后会自动打印对应数量的标签数</div>
         </el-form-item>
         <el-form-item label="打包费">
-          <el-input-number
+          <el-input-number @change="priceFormat(form, 'packFee')" @blur="priceFormat(form, 'packFee')"
-            @change="priceFormat(form, 'packFee')"
+            v-model="form.packFee" controls-position="right"></el-input-number>
-            @blur="priceFormat(form, 'packFee')"
-            v-model="form.packFee"
-            controls-position="right"
-          ></el-input-number>
           <div class="tips">
             单份商品打包费。注：店铺开启外卖模式下该数据才生效
           </div>
         </el-form-item>
-        <el-form-item label="虚拟销量">
+        <!-- <el-form-item label="虚拟销量">
-          <el-input-number
+          <el-input-number @change="priceFormat(form, 'baseSalesNumber')" @blur="priceFormat(form, 'baseSalesNumber')"
-            @change="priceFormat(form, 'baseSalesNumber')"
+            v-model="form.baseSalesNumber" controls-position="right"></el-input-number>
-            @blur="priceFormat(form, 'baseSalesNumber')"
+        </el-form-item> -->
-            v-model="form.baseSalesNumber"
-            controls-position="right"
-          ></el-input-number>
-        </el-form-item>
       </template>
       <el-form-item label="排序" v-if="form.id">
-        <el-input-number
+        <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
-          v-model="form.sort"
-          controls-position="right"
-          :min="0"
-        ></el-input-number>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" v-loading="loading" @click="submitHandle"
+        <el-button type="primary" v-loading="loading" @click="submitHandle">确定</el-button>
-          >确定</el-button
-        >
         <el-button @click="$router.back()">取消</el-button>
       </el-form-item>
     </el-form>
     <el-dialog title="批量修改" width="400px" :visible.sync="showBatchModal">
       <el-form :model="batchNumberForm">
         <el-form-item>
-          <el-input-number
+          <el-input-number @change="priceFormat(batchNumberForm, 'batchNumber')"
-            @change="priceFormat(batchNumberForm, 'batchNumber')"
+            @blur="priceFormat(batchNumberForm, 'batchNumber')" v-model="batchNumberForm.batchNumber"
-            @blur="priceFormat(batchNumberForm, 'batchNumber')"
+            controls-position="right" style="width: 100%"></el-input-number>
-            v-model="batchNumberForm.batchNumber"
-            controls-position="right"
-            style="width: 100%"
-          ></el-input-number>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="showBatchModal = false">取 消</el-button>
-        <el-button type="primary" @click="batchNumberFormConfirm"
+        <el-button type="primary" @click="batchNumberFormConfirm">确 定</el-button>
-          >确 定</el-button
-        >
       </span>
     </el-dialog>
     <!-- 选择团购券分类 -->
-    <groupTypeList
+    <groupTypeList ref="groupTypeList" @success="(res) => (form.groupCategoryId = res)" />
-      ref="groupTypeList"
-      @success="(res) => (form.groupCategoryId = res)"
-    />
     <!-- 选择图片 -->
     <addImg ref="addImg" @successEvent="successEvent"></addImg>
   </div>
@@ -792,6 +504,7 @@ export default {
           refundPolicy: "",
           usageRules: "",
         },
+        stockNumber: 0
       },
       imgList: [],
       rules: {
@@ -1043,7 +756,7 @@ export default {
             this.form.specTableHeaders = JSON.stringify(this.specTableHeaders);
             this.form.specInfo = JSON.stringify(this.form.skuList);
             this.form.skuList[0].costPrice = 0
-            this.form.skuList[0].originPrice =  this.form.skuList[0].salePrice
+            this.form.skuList[0].originPrice = this.form.skuList[0].salePrice
             if (this.form.id) {
               await tbProductPut(this.form);
             } else {
@@ -1255,7 +968,7 @@ export default {
           size: 100,
         });
         this.specList = res.content;
-      } catch (error) {}
+      } catch (error) { }
     },
     // 获取单位
     async tbShopUnit() {
@@ -1267,7 +980,7 @@ export default {
           size: 100,
         });
         this.units = res.content;
-      } catch (error) {}
+      } catch (error) { }
     },
     // 商品分类列表
     async tbShopCategoryGet() {
@@ -1383,7 +1096,7 @@ export default {
   z-index: 10;
 }
 
-.showStyle:hover > .buttonstyle {
+.showStyle:hover>.buttonstyle {
   display: block;
 }
 </style>

src/views/product/components/bindCons.vue

@@ -0,0 +1,215 @@
+<template>
+    <el-dialog width="80%" :visible.sync="dialogVisible" :show-close="false" @close="reset">
+        <div class="header_wrap">
+            <div class="title">耗材信息</div>
+            <div class="btn_wrap">
+                <div class="refund_stock">
+                    <span>退款退回库存</span>
+                    <el-switch v-model="isRefundStock"></el-switch>
+                </div>
+                <el-radio-group v-model="type">
+                    <el-radio-button label="1">添加至商品</el-radio-button>
+                    <el-radio-button label="2" v-if="goodsDetail.typeEnum == '多规格'">添加至规格</el-radio-button>
+                </el-radio-group>
+            </div>
+        </div>
+        <div class="name_wrap">
+            <div class="name">商品名：{{ goodsDetail.name }}</div>
+        </div>
+        <el-table :data="tableData.cons">
+            <el-table-column label="序号" type="index" width="50"></el-table-column>
+            <el-table-column label="耗材名称">
+                <template v-slot="scope">
+                    <el-select v-model="scope.row.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
+                        :remote-method="remoteMethod" :loading="loading" @change="selectionChange($event, scope.row)">
+                        <el-option v-for="item in options" :key="item.consId" :label="item.conName"
+                            :value="item.consId">
+                        </el-option>
+                    </el-select>
+                    <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column label="单位">
+                <template v-slot="scope">
+                    <span v-if="scope.row.conInfoId">{{ scope.row.conUnit }}</span>
+                    <span v-else>请选择耗材</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="使用数量">
+                <template v-slot="scope">
+                    <el-input-number v-model="scope.row.surplusStock" :min="0" />
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100px">
+                <template v-slot="scope">
+                    <div class="table_btn_wrap">
+                        <div class="btn sub" @click="tableData.cons.splice(scope.$index, 1)">
+                            <i class="el-icon-remove-outline"></i>
+                        </div>
+                        <div class="btn add" @click="createItem">
+                            <i class="el-icon-circle-plus-outline"></i>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" :loading=formLoading @click="onSubmitHandle">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { gettbConsInfo, tbProskuConV2 } from "@/api/consumable"
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            type: '1',
+            isRefundStock: true,
+            goodsDetail: '',
+            tableData: {
+                productId: '',
+                cons: [],
+            },
+            loading: false,
+            options: [],
+            formLoading: false
+        }
+    },
+    mounted() {
+        this.gettbConsInfo()
+    },
+    methods: {
+        // 提交
+        async onSubmitHandle() {
+            try {
+                this.formLoading = true
+                const res = await tbProskuConV2(this.tableData)
+                this.formLoading = false
+                this.$message.success('编辑成功')
+                this.dialogVisible = false
+            } catch (error) {
+                console.log(error);
+                this.formLoading = false
+            }
+        },
+        // 选择耗材
+        selectionChange(e, row) {
+            let item = this.options.find(item => item.consId == e)
+            row.name = item.conName
+            row.conUnit = item.conUnit
+        },
+        // 远程搜索耗材
+        remoteMethod(query) {
+            if (query !== '') {
+                this.gettbConsInfo(query)
+            }
+        },
+        // 获取耗材列表
+        async gettbConsInfo(query = '') {
+            try {
+                this.loading = true;
+                const res = await gettbConsInfo({
+                    page: 0,
+                    size: 100,
+                    shopId: localStorage.getItem("shopId"),
+                    conName: query,
+                })
+                this.loading = false;
+                this.options = res.content;
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 显示
+        show(obj) {
+            this.dialogVisible = true
+            this.goodsDetail = { ...obj }
+            this.tableData.productId = this.goodsDetail.id
+            if (obj.conInfos.length) {
+                this.tableData.cons = [...obj.conInfos]
+            } else {
+                this.createItem()
+            }
+        },
+        // 生成新关系项
+        createItem() {
+            let item = {}
+            item.id = ''
+            item.shopId = localStorage.getItem('shopId')
+            item.productId = this.goodsDetail.id
+            item.productSkuId = 0
+            item.conInfoId = ''
+            item.name = ''
+            item.conUnit = ''
+            item.surplusStock = 0
+            item.status = 1
+            this.tableData.cons.push(item)
+        },
+        reset() {
+            this.goodsDetail = ''
+            this.tableData.productId = ''
+            this.tableData.cons = []
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog__header {
+    padding: 0;
+}
+
+.header_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+        font-size: 16px;
+        font-weight: bold;
+    }
+
+    .btn_wrap {
+        display: flex;
+        align-items: center;
+
+        .refund_stock {
+            display: flex;
+            align-items: center;
+            margin-right: 20px;
+
+            span {
+                margin-right: 6px;
+            }
+        }
+    }
+}
+
+.name_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+}
+
+.table_btn_wrap {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .btn {
+        font-size: 26px;
+
+        &.sub {
+            color: #FF4D4F;
+        }
+
+        &.add {
+            color: #52C41A;
+        }
+    }
+}
+</style>

src/views/product/index.vue

@@ -32,13 +32,15 @@
       </el-row>
     </div>
     <div class="head-container" id="table_drag">
-      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id"
-        <el-table-column prop="id" label="ID" width="50px"></el-table-column>
+        :tree-props="{ children: 'skuList', hasChildren: 'hasChildren' }">
+        <el-table-column width="50px"></el-table-column>
         <el-table-column label="商品信息">
           <template v-slot="scope">
             <div class="shop_info">
               <el-image :src="scope.row.coverImg"
-                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
+                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;"
+                v-if="scope.row.coverImg">
                 <div class="img_error" slot="error">
                   <i class="icon el-icon-document-delete"></i>
                 </div>
@@ -51,52 +53,66 @@
         </el-table-column>
         <el-table-column label="售价">
           <template v-slot="scope">
-            <span>￥{{ scope.row.lowPrice }}</span>
+            <el-button type="text" v-if="scope.row.typeEnum == '多规格' && scope.row.skuList.length">
-            <span v-if="scope.row.typeEnum == '多规格'">~￥{{ scope.row.maxPrice }}</span>
+              {{ scope.row.lowPrice }}
+            </el-button>
+            <el-button type="text" v-else @click="changePrice('salePrice', scope.row,)">
+              ￥{{ scope.row.lowPrice }}
+              <i class="el-icon-edit"></i>
+            </el-button>
           </template>
         </el-table-column>
-        <el-table-column label="商品规格" prop="typeEnum">
+        <el-table-column label="商品规格" prop="typeEnum"></el-table-column>
-
-        </el-table-column>
         <el-table-column label="库存">
           <template v-slot="scope">
-            <span>{{ scope.row.stockNumber }}</span>
+            <el-button type="text" v-if="scope.row.typeEnum" @click="changePrice('stockNumber', scope.row,)">
+              {{ scope.row.stockNumber }}
+              <i class="el-icon-edit"></i>
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column label="耗材信息">
           <template v-slot="scope">
-            <div v-if="scope.row.conInfos.length">{{ scope.row.conInfos.join(',') }}</div>
+            <div v-if="scope.row.conInfos && scope.row.conInfos.length">
-            <el-button type="text" icon="el-icon-edit" v-else>绑定</el-button>
+              <span v-for="item in scope.row.conInfos" :key="item.id">{{ item.conName }}、</span>
+            </div>
+            <el-button type="text" @click="showBindCons(scope.row)">
+              绑定
+              <i class="el-icon-edit"></i>
+            </el-button>
           </template>
         </el-table-column>
-        <el-table-column label="上架区域">
+        <el-table-column label="上架">
           <template v-slot="scope">
             <!-- <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowCash">收银端</el-button>
             <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowMall">小程序</el-button>
             <el-button type="text" icon="el-icon-edit"
               v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
             <el-switch v-model="scope.row.isGrounding" :active-value="1" :inactive-value="0"
-              @change="changeHot($event, scope.row)"></el-switch>
+              @change="changeGrounding($event, scope.row)"></el-switch>
           </template>
         </el-table-column>
         <el-table-column label="排序" prop="sort" sortable />
-        <el-table-column label="更新时间" prop="createdAt">
+        <el-table-column label="更新时间" prop="createdAt" width="150">
           <template v-slot="scope">
             {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
           </template>
         </el-table-column>
-        <el-table-column label="设为热门" prop="createdAt">
+        <!-- <el-table-column label="设为热门" prop="createdAt">
           <template v-slot="scope">
             <el-switch v-model="scope.row.isHot" :active-value="1" :inactive-value="0"
               @change="changeHot($event, scope.row)"></el-switch>
           </template>
-        </el-table-column>
+        </el-table-column> -->
-        <el-table-column label="操作" width="200">
+        <el-table-column label="操作" width="150">
           <template v-slot="scope">
-            <el-button type="text" icon="el-icon-rank" v-if="isPcBowser">排序</el-button>
+            <!-- <el-button type="text" icon="el-icon-rank" v-if="isPcBowser">排序</el-button> -->
-            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }"
+            <!-- <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }"
               style="margin-left: 20px !important;">
               <el-button type="text" icon="el-icon-edit">编辑</el-button>
+            </router-link> -->
+            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
+              <el-button type="text" icon="el-icon-edit">编辑</el-button>
             </router-link>
             <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
               <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
@@ -111,6 +127,20 @@
         :page-size="tableData.size" @current-change="paginationChange"
         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
+    <!-- 绑定耗材 -->
+    <BindCons ref="bindCons" />
+    <!-- 编辑售价、库存 -->
+    <el-dialog :title="editorEumn[editorForm.key]" :visible.sync="editorVisable" :show-close="false" width="300px">
+      <el-form :model="editorForm">
+        <el-form-item>
+          <el-input-number v-model="editorForm.value" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editorVisable = false">取 消</el-button>
+        <el-button type="primary" :loading="editorFormLoading" @click="editorConfirmChange">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -118,8 +148,12 @@
 import Sortable from 'sortablejs'
 import dayjs from 'dayjs'
 import settings from '@/settings'
-import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort } from '@/api/shop'
+import BindCons from './components/bindCons.vue'
+import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort, updateProductData } from '@/api/shop'
 export default {
+  components: {
+    BindCons
+  },
   data() {
     return {
       dayjs,
@@ -137,6 +171,21 @@ export default {
         size: 30,
         loading: false,
         total: 0
+      },
+      editorEumn: {
+        grounding: '上下架',
+        pauseSale: '商品',
+        stockNumber: '库存数量',
+        salePrice: '售价'
+      },
+      editorVisable: false,
+      editorFormLoading: false,
+      editorForm: {
+        shopId: localStorage.getItem('shopId'),
+        isSku: '',
+        id: '',
+        key: '',
+        value: ''
       }
     }
   },
@@ -156,6 +205,53 @@ export default {
     }
   },
   methods: {
+    changeGrounding(event, row) {
+      this.editorForm.key = 'grounding'
+      this.editorForm.id = row.id
+      this.editorForm.isSku = !row.typeEnum
+      this.editorForm.value = event
+
+      this.editorConfirmChange()
+    },
+    // 确认修改
+    async editorConfirmChange() {
+      try {
+        this.editorFormLoading = true
+        const res = await updateProductData([this.editorForm])
+        this.editorFormLoading = false
+        this.$message.success('修改成功')
+        this.editorVisable = false
+        this.getTableData()
+      } catch (error) {
+        console.log(error);
+        this.editorFormLoading = false
+      }
+    },
+    // 修改售价
+    changePrice(type, row) {
+      this.editorVisable = true
+      this.editorForm.key = type
+      this.editorForm.id = row.id
+      this.editorForm.isSku = !row.typeEnum
+
+      switch (type) {
+        case 'salePrice':
+          // 修改售价
+          this.editorForm.value = row.lowPrice
+          break;
+        case 'stockNumber':
+          // 修改库存
+          this.editorForm.value = row.stockNumber
+          break;
+        default:
+          break;
+      }
+    },
+    // 显示绑定耗材
+    showBindCons(item) {
+      // console.log(item);
+      this.$refs.bindCons.show(item)
+    },
     // 选择分类
     queryHandle() {
       localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))