erp/resources/frontend/src/views/goods/goods.vue

<template>
  <!-- 商品管理页面 -->
  <div>
    <div class="cardBox">
      <div class="searchBox">
        <div class="row">
          <span>商品名称：</span>
          <el-input v-model="form.goods_title" placeholder="商品名称" clearable></el-input>
        </div>
        <div class="row">
          <span>商品种类：</span>
          <el-select v-model="form.type_id" placeholder="商品种类" clearable>
            <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>商品品牌：</span>
          <el-select v-model="form.brand_id" placeholder="商品品牌" clearable>
            <el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <span>商品编码：</span>
          <el-input v-model="form.external_sku_id" placeholder="商品编码" clearable></el-input>
        </div>
        <div class="row">
          <span>商品状态：</span>
          <el-select v-model="form.status" placeholder="商品状态" clearable>
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <el-select v-model="form.keyword_type" style="width: 80px;margin-right: 5px;">
            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker v-model="datePicker" type="datetimerange" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
            @change="getSTime" style="width: 300px">
          </el-date-picker>
        </div>
        <div class="row">
          <el-button type="primary" @click="handleChoose(1)" icon="el-icon-search">筛选</el-button>
          <el-button plain @click="handleReChoose" icon="el-icon-refresh">重置筛选</el-button>
        </div>
      </div>
    </div>

    <el-card>
      <div>
        <!-- 表格头部操作 -->
        <div>
            <span>全部商品(共{{ total }}条)</span>
            <span>&nbsp;玫瑰合计: {{ rose_num }}，</span>
            <span>&nbsp;其它合计: {{ other_num }}</span>
            <div class="btn">
                <el-button @click="resetOrderCount" icon="el-icon-refresh">订单重置</el-button>
                <!-- <el-button type="primary" plain @click="update">上新</el-button> -->
                <!-- <el-upload ref="newset" action="/api/new/set/goods_skus" :multiple="false" name="newSetFile"
                    :show-file-list="false" :on-success="inventorySuccess" :before-upload="beforeInventory"
                    :on-error="inventoryError" style="display:inline-block;margin: 0 10px 0 10px;">
                    <el-button type="primary" plain>上新导入</el-button>
                </el-upload> -->
                <!-- <el-upload ref="myUpload" action="/api/inventory/goods_skus" :multiple="false"
                  name="inventoryFile" :show-file-list="false" :on-success="inventorySuccess"
                  :before-upload="beforeInventory" :on-error="inventoryError"
                  style="display:inline-block;margin: 0 10px 0 10px;">
                  <el-button type="primary" plain>盘点导入</el-button>
                </el-upload> -->
                <el-button type="primary" @click="addNewgoods" icon="el-icon-plus">新增商品</el-button>
                <el-button type="primary" plain @click="handleImport" icon="el-icon-upload2">导入商品</el-button>
                <el-button type="warning" @click="handleExport" icon="el-icon-download">表格导出</el-button>
                <!-- <el-button type="primary" plain @click="onCount">库存盘点</el-button> -->
            </div>
        </div>

        <!-- 表格 -->
        <el-table v-loading="loading" ref="multipleTable" border :data="tableData" class="table" tooltip-effect="dark"
            style="width: 100%" @selection-change="handleSelectionChange" max-height="1500">
            <!-- 多选框 -->
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="商品信息" width="300">
              <template slot-scope="scope">
                <div class="goodBox flex">
                  <img v-if="scope.row.goods && scope.row.goods.img_url" :src="scope.row.goods.img_url" class="Img" />
                  <div>
                    <div class="tit">{{ scope.row.name }}</div>
                    <p>{{ scope.row.external_sku_id }}</p>
                    <p>{{ scope.row.goods && scope.row.goods.updated_at }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="品类">
              <template slot-scope="scope">
                <div>{{ scope.row.goods && scope.row.goods.type && scope.row.goods.type.name || '' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="规格" prop="title"></el-table-column>
            <el-table-column label="品牌">
              <template slot-scope="scope">
                <div>{{ scope.row.goods && scope.row.goods.brand && scope.row.goods.brand.name || '' }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="yesterday_num" sortable label="1T"></el-table-column>

            <el-table-column sortable label="0T">
              <template slot-scope="scope">
                <div class="flex">
                  <div v-if="isShow">
                    <el-input v-model="scope.row.arrived_today_num11"></el-input>
                  </div>
                  <span v-else>{{ scope.row.daily && scope.row.daily.arrived_today_num }}</span>
                </div>
              </template>
            </el-table-column> -->

            <el-table-column prop="cost" sortable label="成本">
              <template slot-scope="scope">
                <div class="flex">
                  <div v-if="isShow">
                    <el-input v-model="scope.row.cost"></el-input>
                  </div>
                  <span v-else>{{ scope.row.cost ||  0 }}</span>
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column prop="reference_price" sortable label="售价">
              <template slot-scope="scope">
                <div class="flex">
                  <div v-if="scope.row.id === editPriceId">
                      <el-input v-model="scope.row.reference_price" @blur="referencePriceBlur(scope.row)">
                      </el-input>
                  </div>
                  <div v-else>
                      {{ scope.row.reference_price }}
                      <el-button slot="reference" class="btn11" @click="referencePriceClick(scope.row.id)">
                          <img src="../../css/img/编辑.png" />
                      </el-button>
                  </div>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="num" sortable label="总量">
            </el-table-column> -->
            <el-table-column prop="goal_rate" sortable label="目标去化率">
              <template slot-scope="scope">
                <div class="flex">
                  <div v-if="scope.row.id === editGoalId">
                    <el-input v-model="scope.row.goal_rate" autofocus @blur="blurGoal"
                        @change="changeGoal(scope.row)"></el-input>
                  </div>
                  <span v-else>{{ scope.row.goal_rate }}</span>
                  <i class="el-icon-edit" @click="onGoal(scope.row)" style="padding-left: 5px;"></i>
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column prop="reserve" sortable label="预留">
              <template slot-scope="scope">
                <div v-if="scope.row.id === editReserveId">
                  <el-input v-model="scope.row.reserve" autofocus @blur="cancelReserve"
                      @change="reservebBlur(scope.row)"></el-input>
                </div>
                <div v-else>{{ scope.row.reserve }}</div>
                <i class="el-icon-edit" @click="onreserve(scope.row)" style="padding-left: 5px;"></i>
              </template>
            </el-table-column> -->

            <el-table-column sortable label="销量">
              <template slot-scope="scope">
                <span>{{ scope.row.order_goods_num }}</span>
                <el-popover placement="right-start" trigger="hover"
                  v-if="scope.row.order_detail.length !== 0">
                  <div>
                    <span v-for="(j, index) in scope.row.order_detail" :key="index">
                      <div>{{ j.shop.name }}:{{ j.number }}</div>
                    </span>
                  </div>
                  <i class="el-icon-view" slot="reference" style="padding-left: 5px;"></i>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column sortable label="损耗">
              <template slot-scope="scope">
                <div v-if="scope.row.daily" class="flex">
                  <div v-if="scope.row.id === editLossId">
                    <el-input v-model="scope.row.daily.loss_num"></el-input>
                  </div>
                  <div v-else>{{ scope.row.daily.loss_num }}</div>
                  <el-popover placement="right-start" trigger="click" @hide="noBubbles">
                    <el-form ref="lossForm" size="mini" label-width="80px">
                      <el-form-item label="损耗数量">
                        <el-input v-model="scope.row.daily.loss_num"></el-input>
                      </el-form-item>
                      <el-form-item label="原因">
                        <el-radio-group v-model="radio">
                          <el-radio label="48h以上">48h以上</el-radio>
                          <el-radio label="到货错误">到货错误</el-radio>
                          <el-radio label="灰霉">灰霉</el-radio>
                          <el-radio label="长度">长度</el-radio>
                          <el-radio label="花朵">花朵</el-radio>
                          <el-radio label="其他">其他</el-radio>
                          <el-radio label="补发">补发</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="onLoss(scope.row)">保存</el-button>
                      </el-form-item>
                    </el-form>
                    <i class="el-icon-edit" @click="loss(scope.row)" slot="reference" style="padding-left: 5px;"></i>
                  </el-popover>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="stock" sortable label="库存"></el-table-column>
            <el-table-column prop="sale_stock" label="在售库存"></el-table-column>

            <!-- <el-table-column prop="address" sortable label="盘点">
              <template slot-scope="scope">
                <div v-if="scope.row.daily">
                  <div v-if="stock">
                    <el-input v-model="scope.row.daily.inventory"></el-input>
                  </div>
                  <el-popover placement="right-start" trigger="hover" :content="scope.row.daily.inventory_time ?? ''">
                    <div v-if="!stock" slot="reference">{{ scope.row.daily.inventory }}</div>
                  </el-popover>
                </div>
              </template>
            </el-table-column> -->

            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <div style="text-align: center;width: 100%;">
                  <!-- <el-button type="text" @click="ejectstock(scope.row)">库存</el-button> -->
                  <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
                  <el-button type="text" @click="goodslog(scope.row)">记录</el-button>
                  <!-- <el-button type="text" @click="deleteSku(scope.row)">删除</el-button> -->
                </div>
              </template>
            </el-table-column>
        </el-table>
      </div>

        <!-- 底部按钮 -->
        <div class="footerBtn" v-show="isShow || stock">
            <el-button type="primary" class="confirmbtn" @click="cancel()">取消</el-button>
            <el-button type="primary" class="confirmbtn" @click="onSubmit()">保存</el-button>
        </div>

        <!-- 分页功能 -->
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="current_page" :page-sizes="[100, 150, 200]" :page-size="per_page"
                layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 点击库存按钮弹出框 -->
    <el-dialog title="库存修改" :visible.sync="ejectstock1" width="30%" :close-on-click-modal="false">
      <el-table :data="ommodityInventory" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="two_days_ago_num" label="2天前库存">
            <template slot-scope="scope">
                <div>
                    <el-input v-model="scope.row.two_days_ago_num" :disabled="true">
                    </el-input>
                    <el-input v-model="scope.row.two_days_ago_num"></el-input>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="yesterday_num" label="1天前库存">
            <template slot-scope="scope">
                <div>
                    <el-input v-model="scope.row.yesterday_num" :disabled="true"></el-input>
                    <el-input v-model="scope.row.yesterday_num"></el-input>
                </div>
            </template>
        </el-table-column>
        <el-table-column sortable label="今日到货">
            <template slot-scope="scope">
                <div>
                    <el-input v-model="scope.row.daily.arrived_today_num" :disabled="true">
                    </el-input>
                    <el-input v-model="scope.row.daily.arrived_today_num"></el-input>
                </div>
            </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelStock()">取 消</el-button>
        <el-button type="primary" @click="oldStock()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 参考售价弹出确认框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible3" width="20%" :close-on-click-modal="false">
      <span>确定要修改售价吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="referencePriceRequest()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预留量弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible4" width="20%" :close-on-click-modal="false">
      <span>确定要修改预留量吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reserveCancel">取 消</el-button>
        <el-button type="primary" @click="reserveRequest()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 目标去化率弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible5" width="20%" :close-on-click-modal="false">
      <span>确定要修改目标去化率吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelGoal">取 消</el-button>
        <el-button type="primary" @click="confirmGoal()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 点击表格导出弹出框 -->
    <el-dialog title="表格导出" :visible.sync="Tableexport" width="30%" :close-on-click-modal="false">
      <div>
        <span>选择：</span>
        <template>
          <el-select v-model="value" placeholder="盘点表/成本表/周数据">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Tableexport = false">取 消</el-button>
        <el-button type="primary" @click="derivation()">确 定</el-button>
        <!-- <a href="/goods_skus/export">确定</a> -->
      </span>
    </el-dialog>

    <!-- 点击商品文件导入弹出框 -->
    <el-dialog title="导入商品" :visible.sync="docImportDrawer" direction="rtl" custom-class="demo-drawer" ref="drawer"
      width="30%" @close="importForm.imFileList = []" :close-on-click-modal="false">
      <div class="demo-drawer__content">
        <el-form :model="importForm" :rules="improtRules" ref="importForm">
          <el-form-item label="上传文件" label-width="100px" prop="fileList">
            <el-upload class="uploader" action="" :limit="1"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              :file-list="importForm.fileList" :auto-upload="false" :on-change="importFileChange">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer btn-style">
          <el-button @click="docImportDrawer = false">取 消</el-button>
          <el-button type="primary" @click="saveUpload">上 传</el-button>
        </div>
      </div>
      <div class="import-right">
        <el-button size="medium" class="button-query">
          <a :href="`http://erp.chutang66.com/goods/import/template`">下载模板</a>
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import { goods_types, Brand_goods_types } from "../../api/rankingData.js"
  import { goods, update, singleUpdate, getStockNum } from "../../api/goods"
  import { orderRest } from "../../api/shop"

  export default {
    data() {
      return {
        editPriceId: '', //参考售价的id
        editGoalId: '',
        editReserveId: '', //预留量的id
        editLossId: '', //损耗的id
        total: 0, // 总条数
        rose_num: 0, // 玫瑰数量
        other_num: 0, // 其它数量
        radio: '', // 损耗选择的原因
        brand: [], // 品牌列表
        cate: [], // 种类列表
        loading: true,
        tableData: [], // 商品列表
        shopsData: [], //店铺传参数组
        sku_code: {}, //店铺传参对象
        // shopOrder: {}, //店铺悬浮窗详情数据
        options: [
          { id: 1, label: '在售' },
          { id: 2, label: '预警' },
          { id: 0, label: '下架' }
        ],
        options2: [
          { value: 'inventory', label: '盘点表' },
          { value: 'cost', label: '成本表' },
          { value: 'week_data', label: '周数据' }
        ],
        value: '',
        options3: [
          { value: 'stock', label: '库存' },
          { value: 'cost', label: '成本' },
          { value: 'loss_num', label: '损耗' },
          { value: 'reserve', label: '预留' }
        ],
        form: {
          external_sku_id: '',
          goods_title: '', // 商品名称
          type_id: '', // 商品种类id
          brand_id: '', // 商品品牌id
          sku_title: '', // 商品规格
          status: '', // 商品状态
          keyword_type: "stock", //筛选类型
          keyword_value: '' //日期筛选
        },
        Paginationdata: {}, //分页相关数据
        current_page: 1, //当前页
        per_page: 100, //每页显示数量
        multipleSelection: [], //多选框选中的id
        updateType: '', //更新类型，newest-上新, inventory-库存盘点, stock-库存
        stock: false, //点击库存显示输入框变量
        isShow: false, // 点击上新显示输入框
        ejectstock1: false, //点击库存按钮弹出框变量
        Importgoods: false, //导入商品变量
        Tableexport: false, //表格导出变量
        isShow1: false, //文件传输弹出变量
        //表格导入相关变量
        importForm: {
          fileList: []
        },
        docImportDrawer: false,
        improtRules: {
          fileList: [
            { required: true, message: "请导入Excel文件", trigger: "change" },
            {
              validator: (rule, value, callback) => {
                if (!value.length) {
                  callback(new Error("请导入Excel文件"))
                } else {
                  callback()
                }
              },
              trigger: "change"
            }
          ]
        },
        // 文件模板手添加到根目录下
        publicPath: process.env.BASE_URL, // public文件夹路径
        excelTemplatePath: '', // 数据导入Excel模板下载地址 - 调接口获取
        visible: false,
        updateField: '', //reference_price-参考售价, reserve-预留量, loss_num-损耗, status-状态
        reserveShow: false, //预留量-input显示变量
        datePicker: '', // 筛选的时间
        ommodityInventory: [], //单个商品库存
        dialogVisible: false, //上新按钮弹出框变量
        dialogVisible2: false, //库存盘点弹出框变量
        dialogVisible3: false, //参考售价弹出框变量
        dialogVisible4: false, //预留弹出框变量
        dialogVisible5: false,
        publicId: '',
        lastVal: 0,
        nowVal: 0,
        loadingModule: '',
        noRow: {}
      }
    },
    methods: {
      // 库存详情
      getStockInfo() {
        getStockNum().then((res) => {
          this.rose_num = res.data.rose_num
          this.other_num = res.data.other_num
        })
      },
      // 列表编辑
      handleEdit(id) {
        this.$router.push({ path: "EDIT_GOODS", query: { id: id } })
      },

      // 获取商品列表
      getList() {
        let page = {
          page: this.current_page,
          per_page: this.per_page
        }
        goods(page).then((res) => {
          this.tableData = res.data.data
          this.tableData = this.tableData.map((item) => {
            item = {
              ...item,
              arrived_today_num11: 0
            }
            return item
          })
          this.total = res.data.meta.total;
          this.Paginationdata = res.data.meta;
          this.shopsData = this.tableData.map((item) => {
            item = item.goods && item.goods.goods_code + "_" + item.sku_code
            return item
          })
          this.sku_code = {
            sku_code: this.shopsData
          }
          this.loading = false
        })
      },

      // 筛选
      handleChoose(page) {
        this.form = {
          ...this.form,
          page: page,
          per_page: this.per_page
        }

        // 对象值为空清除
        const newObj = filterParams(this.form);
        function filterParams(obj) {
          const _newPar = {}
          for (const key in obj) {
            // 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
            if (
              (obj[key] === 0 || obj[key]) &&
              obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== ''
            ) {
              // 记录属性
              _newPar[key] = obj[key];
            }
          }
          // 返回对象
          return _newPar
        }
        goods(newObj).then((res) => {
          this.tableData = res.data.data
          this.tableData = this.tableData.map((item) => {
            item = {
              ...item,
              arrived_today_num11: 0
            }
            return item
          })
          this.total = res.data.meta.total
          this.Paginationdata = res.data.meta
        })
      },

      // 重置筛选
      handleReChoose() {
        this.form = {
          external_sku_id: '',
          goods_title: '', // 商品名称
          type_id: '', // 商品种类id
          brand_id: '', // 商品品牌id
          sku_title: '', // 商品规格
          status: '' // 商品状态
        }
        this.datePicker = ''
      },

      // 导入商品按钮
      handleImport() {
        this.docImportDrawer = true
      },
      // 导出商品按钮
      handleExport() {
        this.Tableexport = true
      },
      // 订单重置计数
      resetOrderCount() {
        this.$confirm('确定重置订单计数?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderRest().then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.data.message
            })
            this.getList()
          })
        })
      },
      // 点击上新
      update() {
        this.isShow = true
        this.stock = false
        this.updateType = 'newest'
      },
      // 复选框按钮
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => item.id)
      },
      // 新增商品跳转
      addNewgoods() {
        this.$router.push("/ADDGOODS")
      },

      //分页功能
      handleSizeChange(val) {
        //当前条数
        this.per_page = val
        this.handleChoose(1)
      },
      handleCurrentChange(val) {
        //当前页
        this.current_page = val
        this.handleChoose(this.current_page)
      },

      //取消上新or库存盘点
      cancel() {
        this.handleChoose(this.current_page)
        this.isShow = false
        this.stock = false
      },

      // 点击上新or库存盘点后确认
      onSubmit() {
        //判断点击的是上新，再发送上新请求
        if (this.updateType === "newest") {
          let skus = this.tableData.map((item) => {
            return [
              {
                id: item.id,
                cost: item.cost,
                arrived_today_num: item.arrived_today_num11
              }
            ]
          })
          let patchdata = {
            updateType: this.updateType,
            skus: skus.flat()
          }
          // 上新请求
          update(patchdata).then((res) => {
            this.$message({
              message: "上新成功！",
              type: "success"
            })
          })
        }

        //判断点击的是库存盘点，再发送库存盘点请求
        if (this.updateType === "inventory") {
          let skus = this.tableData.map((item) => {
            return [
              {
                id: item.id,
                inventory: item.daily.inventory
              }
            ]
          })
          let patchdata = {
            updateType: this.updateType,
            skus: skus.flat()
          }
          // 上新请求
          update(patchdata).then((res) => {
            this.$message({
              message: "库存盘点成功！",
              type: "success"
            })
          })
        }
        this.isShow = false
        this.stock = false
        this.handleChoose(this.current_page)
      },

      // 点击库存盘点
      onCount() {
        this.dialogVisible2 = false
        this.isShow = false
        this.stock = true
        this.updateType = "inventory"
      },

      // 点击库存弹出框
      ejectstock(row) {
        this.ommodityInventory = []
        this.ejectstock1 = true
        this.updateType = "stock"
        this.ommodityInventory.push(row)
      },

      //库存弹出框取消
      cancelStock() {
        this.handleChoose(this.current_page)
        this.ejectstock1 = false
      },

      // 库存弹出框确认
      oldStock() {
        this.ejectstock1 = false
        //判断点击的是库存，再发送库存请求
        if (this.updateType === "stock") {
          let skus = [
            {
              id: this.ommodityInventory[0].id,
              yesterday_num: this.ommodityInventory[0].yesterday_num,
              two_days_ago_num: this.ommodityInventory[0].two_days_ago_num,
              arrived_today_num: this.ommodityInventory[0].daily.arrived_today_num
            }
          ]
          let stockpatch = {
            updateType: this.updateType,
            skus: skus
          }
          // 库存请求
          update(stockpatch).then((res) => {
            this.handleChoose(this.current_page);
            this.$message({
              message: "库存更新成功！",
              type: "success"
            })
          })
        }
      },

      // 商品导入
      importFile() {
        this.docImportDrawer = true
      },
      // 数据导入-上传Excel
      async importFileChange(file, fileList) {
        this.importForm.fileList = fileList // 检验上传文件是否为空
      },
      // 确定上传
      saveUpload() {
        this.$refs.importForm.validate(async (isValid) => {
          if (!isValid) return
          try {
            // 主要是这二行代码
            const params = new FormData()
            params.append("goodsSkus", this.importForm.fileList[0].raw)

            this.isLoadingDialog = true
            let token = localStorage.getItem("token")
            axios.post("/api/goods_skus", params, {
              headers: {
                Authorization: `Bearer ${token}`
              }
            }).then((res) => {
              if (res.status === 200) {
                this.$message.success("模板导入成功")
              }
            })
            this.docImportDrawer = false
          } finally {
            this.isLoadingDialog = false
          }
        })
      },

      // 数据导入-获取Excel模板地址
      getExcelTemplatePath() {
        this.$requestInternet.get("/api/xxx").then((res) => {
          this.excelTemplatePath = res
        })
      },

      // 表格导出
      derivation() {
        window.open("/goods_skus/export?exportType=" + this.value)
      },

      // 点击记录按钮跳转商品记录
      goodslog(row) {
        this.$router.push({
          path: "/GOODS_LOG",
          query: {
            id: row.id
          }
        })
      },

      // 删除
      deleteSku(rowData) {

      },

      // 获取筛选时间
      getSTime(val) {
        this.form.keyword_value = val.join(" - ")
      },

      // 参考价格点击修改
      referencePriceClick(id) {
        this.updateField = "reference_price"
        this.editPriceId = id
        this.editReserveId = id
        this.editLossId = ''
      },

      // 参考价格input框失去焦点弹出确认框
      referencePriceBlur(row) {
        this.dialogVisible3 = true
        this.publicId = row.id
        this.reference_price = row.reference_price
      },

      //参考价格弹出框确认修改请求
      referencePriceRequest() {
        let reference_priceData = {
          updateField: this.updateField,
          reference_price: this.reference_price
        }
        singleUpdate(this.publicId, reference_priceData).then((res) => {
          this.editPriceId = ''
          this.dialogVisible3 = false
          this.$message({
            message: "参考售价修改成功！",
            type: "success"
          })
        })
      },

      onGoal(row) {
        this.updateField = "goal_rate"
        this.editGoalId = row.id
        this.lastVal = row.goal_rate
        this.editReserveId = ''
        this.editLossId = ''
        this.editPriceId = ''
      },

      blurGoal() {
        this.updateField = ''
        this.editGoalId = ''
      },

      changeGoal(row) {
        this.noRow = row
        this.dialogVisible5 = true
        this.publicId = row.id
        this.nowVal = row.goal_rate
      },

      cancelGoal() {
        this.dialogVisible5 = false
        this.updateField = "goal_rate"
        this.editGoalId = this.publicId
        this.noRow.goal_rate = this.lastVal
      },

      confirmGoal() {
        let data = {
          updateField: 'goal_rate',
          goal_rate: this.nowVal
        }
        singleUpdate(this.publicId, data).then((res) => {
          this.editGoalId = ''
          this.dialogVisible5 = false
          this.$message({
            message: "目标去化率修改成功！",
            type: "success"
          })
        })
      },

      onreserve(row) {
        this.updateField = "reserve"
        this.editReserveId = row.id
        this.lastVal = row.reserve
        this.editLossId = ''
        this.editPriceId = ''
        this.editGoalId = ''
      },

      cancelReserve() {
        this.updateField = ''
        this.editReserveId = ''
      },

      // 预留量  失去焦点触发确认框
      reservebBlur(row) {
        this.noRow = row
        this.dialogVisible4 = true
        this.publicId = row.id
        this.nowVal = row.reserve
      },

      reserveCancel() {
        this.dialogVisible4 = false
        this.updateField = "reserve"
        this.editReserveId = this.publicId
        this.noRow.reserve = this.lastVal
      },

      // 预留量弹出框确认请求
      reserveRequest() {
        let reservebData = {
          updateField: 'reserve',
          reserve: this.nowVal
        }
        singleUpdate(this.publicId, reservebData).then((res) => {
          this.editReserveId = ''
          this.dialogVisible4 = false
          this.$message({
            message: "预留量修改成功！",
            type: "success"
          })
        })
      },

      loss(id) {
        this.updateField = "loss_num";
        this.editLossId = id;

        this.editPriceId = ''
        this.editReserveId = ''
        this.editGoalId = ''
      },

      // 添加损耗
      onLoss(row) {
        let id = row.id;
        let lossData = {
          updateField: 'loss_num',
          reason: this.radio,
          loss_num: row.daily.loss_num
        }
        singleUpdate(id, lossData).then((res) => {
          this.editLossId = ''
          this.$message({
            message: "损耗添加成功！",
            type: "success"
          })
          this.handleChoose()
        })
        this.updateField = ''
        this.editLossId = ''
      },

      //损耗框取消
      noBubbles() {
        this.updateField = ''
        this.editLossId = ''
      },

      // 获取商品种类
      getgoodsType() {
        let param = {
          per_page: 99999
        }
        goods_types(param).then((res) => {
          this.cate = res.data.data
        })
      },

      // 获取商品品牌
      getbrandType() {
        let parsm = {
          per_page: 99999
        }
        Brand_goods_types(parsm).then((res) => {
          this.brand = res.data.data
        })
      },
      beforeInventory() {
        this.loadingModule = this.$loading({
          lock: true,
          text: '导入中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      },
      inventorySuccess(response) {
        this.$message({
          message: response.message,
          type: "success"
        })
        this.loadingModule.close()
      },
      inventoryError(err) {
        this.$message({
          message: err.errorMessage,
          type: "error"
        })
        this.loadingModule.close()
      }
    },
    watch: {
      $route(to, from) {
        window.location.reload() //监测到路由发生跳转时刷新一次页面
      }
    },
    mounted() {
      this.getList()
      this.getStockInfo()
      this.getgoodsType()
      this.getbrandType()
      this.editPriceId = ''
      this.editReserveId = ''
      this.editLossId = ''
    }
}
</script>

<style lang="scss" scoped>
  .table {
    margin-top: 20px;
    position: relative;
  }
  .btn {
    float: right;
  }
  .flex{
    display: flex;
    align-items: center;
  }
  .goodBox{
    .Img {
      width: 50px;
      height: 50px;
      margin-right: 12px;
      border-radius: 4px;
    }
    .tit{
      color: #000;
      font-size: 13px;
    }
  }
  
  .confirmbtn {
    width: 114px;
    height: 44px;
    border-radius: 3px;
    margin-top: 21px;
    margin-bottom: 8px;
  }
  .import-right {
    margin-top: 30px;
  }
  .import-right a {
    text-decoration: none;
    color: black;
  }
  ::v-deep .btn11 {
    padding: 0;
    width: 14px;
    height: 14px;
  }
  ::v-deep .btn11 img {
    width: 100%;
    height: 100%;
  }
  .page {
    margin-top: 20px;
  }
  .searchBox{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    .row{
      font-size: 14px;
      margin-bottom: 20px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
</style>