支持店铺通过excel批量更新商品库存功能

seller/src/views/goods/goods-seller/alertQuantity.vue

@@ -19,6 +19,26 @@
               style="width: 200px"
             />
           </Form-item>
+          <Form-item label="商品编号" prop="goodsId">
+            <Input
+              type="text"
+              v-model="searchForm.goodsId"
+              placeholder="请输入商品编号"
+              clearable
+              style="width: 200px"
+            />
+          </Form-item>
+          <Form-item label="状态" prop="status">
+            <Select
+              v-model="searchForm.marketEnable"
+              placeholder="请选择"
+              clearable
+              style="width: 200px"
+            >
+              <Option value="DOWN">下架</Option>
+              <Option value="UPPER">上架</Option>
+            </Select>
+          </Form-item>
           <Form-item label="商品分类" prop="category">
             <Cascader
               v-model="category"
@@ -27,12 +47,62 @@
               :data="categoryList"
             ></Cascader>
           </Form-item>
-
+          <Form-item label="货号" prop="id">
+            <Input
+              type="text"
+              v-model="searchForm.skuSn"
+              placeholder="请输入货号"
+              clearable
+              style="width: 200px"
+            />
+          </Form-item>
           <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
           <Button @click="handleReset" class="search-btn">重置</Button>
         </Form>
       </Row>
       <Tabs @on-click="switchTabs" value="updateStock" v-model="stockType">
+        <TabPane label="商品库存管理" name="stockManage">
+          <Row class="operation padding-row">
+            <Button @click="exportStock" type="primary" class="export">批量导出</Button>
+            <Button @click="openImportStock" class="export">批量导入</Button>
+          </Row>
+          <Table
+            class="mt_10"
+            border
+            :loading="loading"
+            :columns="stockManageColumns"
+            :data="stockAllData"
+            ref="table"
+          >
+            <template slot="goodsSlot" slot-scope="{ row }">
+              <div style="margin-top: 5px; height: 90px; display: flex">
+                <div style="">
+                  <img :src="row.thumbnail" style="height: 80px; margin-top: 3px; width: 70px"/>
+                </div>
+                <div style="margin-left: 13px;margin-top: 5px;">
+                  <div class="div-zoom" style="color: black;">
+                    {{ row.goodsName }}
+                  </div>
+                  <div class="div-zoom" style="margin-top: 5px;">
+                    ID: {{ row.goodsId }}
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template slot="skuSlot" slot-scope="{ row }">
+              <div style="margin-top: 5px; height: 90px; display: flex">
+                <div style="margin-left: 13px;margin-top: 5px;">
+                  <div class="div-zoom" style="color: black;">
+                    {{ row.simpleSpecs }}
+                  </div>
+                  <div class="div-zoom" style="margin-top: 5px;">
+                    ID: {{ row.id }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </Table>
+        </TabPane>
         <TabPane label="预警商品" name="warnList">
           <Table
             class="mt_10"
@@ -54,7 +124,8 @@
             ref="table"
           >
             <template slot="alertQuantitySlot" slot-scope="{ row }">
-                        <Input type="number" v-model="row.alertQuantity" clearable placeholder="请输入预警库存" @on-blur="updateWarnStock(row)" @on-change="checkVal(row)" />
+              <Input type="number" v-model="row.alertQuantity" clearable placeholder="请输入预警库存"
+                     @on-blur="updateWarnStock(row)" @on-change="checkVal(row)"/>
             </template>
           </Table>
         </TabPane>
@@ -66,7 +137,7 @@
           :page-size="searchForm.pageSize"
           @on-change="changePage"
           @on-page-size-change="changePageSize"
-            :page-size-opts="[10, 20, 50]"
+          :page-size-opts="[20, 50]"
           size="small"
           show-total
           show-elevator
@@ -92,31 +163,51 @@
         <Button type="primary" @click="updateStock">更新</Button>
       </div>
     </Modal>
+
+    <Modal title="导入商品信息" v-model="importModal" :mask-closable="false">
+      <div style="text-align: center">
+        <Upload :before-upload="handleUpload" name="files"
+                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                multiple type="drag" :action="action" :headers="accessToken">
+          <div style="padding: 50px 0">
+            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
+            <h2>选择或拖拽文件上传</h2>
+          </div>
+          <Spin fix v-if="spinShow"></Spin>
+        </Upload>
+      </div>
+      <div slot="footer">
+        <Button type="text" @click="importModal = false">确定</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
 import {
-    getGoodsSkuListDataSeller,
+  getGoodsCategoryAll,
   getGoodsListDataByStockSeller,
+  getGoodsSkuListDataSeller,
+  importStockExcel,
+  queryExportStock,
   updateGoodsAlertStocks,
-    updateGoodsSkuStocks,
-    getGoodsCategoryAll
+  updateGoodsSkuStocks
 } from "@/api/goods";
-  import * as API_Shop from "@/api/shops";
+
 export default {
   name: "goods",
   data() {
     return {
+      importModal: false,
       id: "", //要操作的id
       loading: true, // 表单加载状态
       updateStockModalVisible: false, // 更新库存模态框显隐
       stockAllUpdate: undefined, // 更新库存数量
-        stockType: 'warnList',
+      stockType: 'stockManage',
       searchForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
-          pageSize: 10, // 页面大小
+        pageSize: 20, // 页面大小
         sort: "create_time", // 默认排序字段
         order: "desc", // 默认排序方式
       },
@@ -125,6 +216,55 @@
       formValidate: {},
       //修改库存的数据
       stockList: [],
+      stockManageColumns: [
+        {
+          title: "商品信息",
+          key: "goodsName",
+          midwidth: 400,
+          slot: "goodsSlot",
+        }, {
+          title: "SKU信息",
+          key: "simpleSpecs",
+          midwidth: 400,
+          tooltip: true,
+          slot: "skuSlot",
+        }, {
+          title: "上架状态",
+          key: "marketEnable",
+          width: 130,
+          sortable: false,
+          render: (h, params) => {
+            if (params.row.marketEnable == "DOWN") {
+              return h("Tag", {props: {color: "red"}}, "下架");
+            } else if (params.row.marketEnable == "UPPER") {
+              return h("Tag", {props: {color: "green"}}, "上架");
+            }
+          },
+        }, {
+          title: "审核状态",
+          key: "authFlag",
+          width: 120,
+          render: (h, params) => {
+            if (params.row.authFlag == "PASS") {
+              return h("Tag", {props: {color: "green"}}, "通过");
+            } else if (params.row.authFlag == "TOBEAUDITED") {
+              return h("Tag", {props: {color: "volcano"}}, "待审核");
+            } else if (params.row.authFlag == "REFUSE") {
+              return h("Tag", {props: {color: "red"}}, "审核拒绝");
+            }
+          },
+        }, {
+          title: "库存",
+          key: "quantity",
+          midwidth: 280,
+          render: (h, params) => {
+            if (params.row.quantity) {
+              return h("div", params.row.quantity);
+            } else {
+              return h("div", 0);
+            }
+          },
+        },],
       //列表名称
       columns: [
         {
@@ -256,6 +396,7 @@
       ],
       warnData: [], // 表单数据
       skuAllData: [], //SKU数据
+      stockAllData: [],//SKU库存数据
       total: 0, //sku数据总数
       categoryList: [], //分类列表
       category: '', //选中分类
@@ -368,6 +509,15 @@
             this.loading = false;
           }
         })
+      } else if (this.stockType == 'stockManage') {
+        //调用获取全部sku
+        getGoodsSkuListDataSeller(this.searchForm).then(res => {
+          if (res.success) {
+            this.stockAllData = res.result.records
+            this.total = res.result.total
+            this.loading = false;
+          }
+        })
       }
     },
     //组织分类树
@@ -408,6 +558,64 @@
         }
       })
     },
+    // 导出订单
+    async exportStock() {
+      let randomNumber = '';
+      for (let i = 0; i < 10; i++) {
+        randomNumber += Math.floor(Math.random() * 10);
+      }
+      ;
+      queryExportStock(this.searchForm)
+        .then((res) => {
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=utf-8",
+          });
+          //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+          //IE10以上支持blob但是依然不支持download
+          if ("download" in document.createElement("a")) {
+            //支持a标签download的浏览器
+            const link = document.createElement("a"); //创建a标签
+            link.download = randomNumber + ".xlsx"; //a标签添加属性
+            link.style.display = "none";
+            link.href = URL.createObjectURL(blob);
+            document.body.appendChild(link);
+            link.click(); //执行下载
+            URL.revokeObjectURL(link.href); //释放url
+            document.body.removeChild(link); //释放标签
+          } else {
+            navigator.msSaveBlob(blob, fileName);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    openImportStock() {
+      this.importModal = true;
+    },
+    // 上传数据
+    handleUpload(file) {
+      this.file = file;
+      this.upload();
+      return false;
+    },
+    /**
+     * 上传文件
+     */
+    upload() {
+      let fd = new FormData();
+      fd.append("files", this.file);
+      this.spinShow = true;
+
+      importStockExcel(fd).then(res => {
+        if (res.success) {
+          this.spinShow = false;
+          this.$Message.success("导入成功");
+          this.importModal = false;
+          this.getDataList();
+        }
+      })
+    },
   },
   mounted() {
     this.init();
@@ -417,4 +625,3 @@
 <style lang="scss" scoped>
 @import "@/styles/table-common.scss";
 </style>
-