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

<template>
  <!-- 商品管理页面 -->
  <div>
    <!-- 条件筛选板块 -->
    <el-card class="box-card">
      <div class="goods">
        <el-form ref="form" :inline="true" :model="form">
          <el-form-item label="商品名称：" :style="(marginRight = '80')">
            <el-input v-model="form.goods_title" placeholder="商品名称">
            </el-input>
          </el-form-item>
          <el-form-item label="商品种类：">
            <el-select v-model="form.type_id" placeholder="商品种类">
              <el-option
                v-for="item in cate"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品规格：">
            <el-input v-model="form.sku_title" placeholder="商品规格">
            </el-input>
          </el-form-item>
          <el-form-item label="商品品牌：">
            <el-select v-model="form.brand_id" placeholder="商品品牌">
              <el-option
                v-for="item in brand"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品状态：">
            <el-select v-model="form.status" placeholder="商品状态">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：">
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="getSTime"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleChoose()">筛选</el-button>
            <el-button plain @click="handleReChoose()">重置筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card1" style="margin-top: 30px">
      <div>
        <!-- 表格头部操作 -->
        <div>
          <span>全部商品(共{{ total }}条)</span>
          <div class="btn">
            <el-button type="primary" plain @click="addNewgoods"
              >新建商品</el-button
            >
            <el-button type="primary" plain @click="update()">上新</el-button>
            <el-button type="primary" plain @click="onCount()"
              >库存盘点</el-button
            >
            <el-button type="primary" plain @click="handleImport()"
              >导入商品</el-button
            >
            <el-button type="primary" plain @click="handleExport()"
              >表格导出</el-button
            >
          </div>
        </div>

        <!-- 参考售价弹出确认框 -->
        <el-dialog
          :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="reference_priceRequest()"
              >确 定</el-button
            >
          </span>
        </el-dialog>

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

        <!-- 点击表格导出弹出框 -->
        <el-dialog
          title="表格导出"
          :visible.sync="Tableexport"
          width="30%"
          :close-on-click-modal="false"
        >
          <div>
            选择:
            <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="`http://erp.staging.miaoxuan66.cn/goods_skus/export`">确 定</a> -->
          </span>
        </el-dialog>

        <!-- 点击商品文件导入弹出框 -->
        <el-dialog
          title="导入商品"
          :visible.sync="docImportDrawer"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          size="20%"
          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.staging.miaoxuan66.cn/goods/import/template`"
                >下载模板</a
              >
            </el-button>
          </div>
        </el-dialog>

        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          class="table"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="500"
        >
          <!-- 多选框 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品信息" width="250">
            <template slot-scope="scope">
              <div class="commodityimg">
                <img :src="scope.row.goods.img_url" class="Img" />
              </div>
              <div>
                <p>{{ scope.row.goods.title }}</p>
                <p>
                  {{ scope.row.goods.goods_code + "_" + scope.row.sku_code }}
                </p>
                <p>
                  {{ scope.row.goods.updated_at }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="品类">
            <template slot-scope="scope">
              <div>
                {{ 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.brand ? scope.row.goods.brand.name : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="two_days_ago_num" sortable label="2T">
          </el-table-column>
          <el-table-column prop="yesterday_num" sortable label="1T">
          </el-table-column>

          <el-table-column sortable label="今日到货" min-width="110">
            <template slot-scope="scope">
              <div v-if="isShow">
                <el-input v-model="scope.row.arrived_today_num11"></el-input>
              </div>
              <div v-else>
                {{ scope.row.daily.arrived_today_num }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="cost" sortable label="成本">
            <template slot-scope="scope">
              <div v-if="isShow">
                <el-input v-model="scope.row.cost"></el-input>
              </div>
              <div v-else>
                {{ scope.row.cost != null ? scope.row.cost : 0 }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="reference_price"
            sortable
            label="参考售价"
            min-width="110"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.id === id">
                <el-input
                  v-model="scope.row.reference_price"
                  @blur="reference_priceBlur(scope.row)"
                ></el-input>
              </div>
              <div v-else>
                {{ scope.row.reference_price }}
                <el-button
                  slot="reference"
                  class="btn11"
                  @click="reference_priceClick(scope.row.id)"
                  ><img src="../../css/img/编辑.png"
                /></el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" sortable label="总量" min-width="110">
          </el-table-column>
          <el-table-column
            prop="reserve"
            sortable
            label="预留量"
            min-width="110"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.id === id1">
                <el-input
                  v-model="scope.row.reserve"
                  @blur="reservebBlur(scope.row)"
                ></el-input>
              </div>
              <div v-else>
                {{ scope.row.reserve }}
              </div>
              <el-button
                slot="reference"
                class="btn11"
                @click="onreserve(scope.row.id)"
                ><img src="../../css/img/编辑.png" alt=""
              /></el-button>
            </template>
          </el-table-column>

          <el-table-column sortable label="店铺订单" min-width="110">
            <template slot-scope="scope">
              <div>
                <span v-if="shopOrder[scope.row.daily.sku_id]">{{
                  shopOrder[scope.row.daily.sku_id].total
                }}</span>
                <span v-else>0</span>
              </div>
              <el-popover
                placement="right-start"
                width="200"
                trigger="hover"
                v-if="shopOrder[scope.row.daily.sku_id]"
              >
                <div>
                  <p
                    v-for="(j, index) in shopOrder[scope.row.daily.sku_id]
                      .items"
                    :key="index"
                  >
                    {{ j.shop_name }} : {{ j.num }}
                  </p>
                </div>
                <el-button class="btn11" type="text" slot="reference"
                  ><img src="../../css/img/眼睛.png" alt=""
                /></el-button>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column sortable label="损耗">
            <template slot-scope="scope">
              <div v-if="scope.row.id === id2">
                <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"
                width="220"
                trigger="click"
                @hide="noBubbles"
              >
                <p>损耗:</p>
                <el-input v-model="scope.row.daily.loss_num"></el-input>
                <el-radio-group v-model="radio">
                  <el-radio disabled>原因:</el-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-group>
                <div class="list_btn">
                  <el-button type="primary" @click="onLoss(scope.row)"
                    >保存</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  class="btn11"
                  @click="loss(scope.row.id)"
                  ><img src="../../css/img/编辑.png" alt=""
                /></el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="stock" sortable label="库存">
          </el-table-column>
          <el-table-column prop="address" sortable label="盘点">
            <template slot-scope="scope">
              <div v-if="stock">
                <el-input v-model="scope.row.daily.inventory"></el-input>
              </div>
              <div v-else>{{ scope.row.daily.inventory }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="ejectstock(scope.row)"
                  >库存</el-button
                >
              </div>
              <div>
                <el-button
                  type="text"
                  @click="handleEdit(scope.row.goods_id, scope.row.id)"
                  >编辑</el-button
                >
              </div>
              <div>
                <el-button type="text" @click="goodslog(scope.row)"
                  >记录</el-button
                >
              </div>

              <!-- 点击库存按钮弹出框 -->
              <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>
                        {{ scope.row.two_days_ago_num }}
                        <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>
                        {{ scope.row.yesterday_num }}
                        <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>
                        {{ scope.row.daily.arrived_today_num }}
                        <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>
            </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="[15, 50, 100]"
          :page-size="per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Paginationdata.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { goods_types, Brand_goods_types } from "../../api/rankingData.js";
import { goods, update, singleUpdate, shops } from "../../api/goods";
export default {
  data() {
    return {
      id: "", //参考售价的id
      id1: "", //预留量的id
      id2: "", //损耗的id
      total: 0, // 总条数
      radio: "", // 损耗选择的原因
      brand: [], // 品牌列表
      cate: [], // 种类列表
      tableData: [], // 商品列表
      shopsData: [], //店铺传参数组
      sku_code: {}, //店铺传参对象
      shopOrder: {}, //店铺悬浮窗详情数据
      options: [
        {
          id: "1",
          label: "在售",
        },
        {
          id: "2",
          label: "预警",
        },
        {
          id: "0",
          label: "下架",
        },
      ], // 商品状态
      options2: [
        {
          value: "inventory",
          label: "盘点表",
        },
        // {
        //   value: "选项2",
        //   label: "运营表",
        // },
        {
          value: "cost",
          label: "成本表",
        },
      ], //表格导出选项
      value: "", //表格导出选择的选项
      // 请求商品列表的参数
      form: {
        goods_title: "", // 商品名称
        type_id: "", // 商品种类id
        brand_id: "", // 商品品牌id
        sku_title: "", // 商品规格
        status: "", // 商品状态
        keyword_value: "", //日期筛选
      },
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
      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-状态
      reference_priceShow: false,
      reserveShow: false, //预留量-input显示变量
      value1: "", // 筛选的时间
      ommodityInventory: [], //单个商品库存
      dialogVisible: false, //上新按钮弹出框变量
      dialogVisible2: false, //库存盘点弹出框变量
      dialogVisible3: false, //参考售价弹出框变量
      dialogVisible4: false, //预留弹出框变量
      publicId: "", //参考售价 预留量公用id
      reference_price: "", //参考价格修改传参
      reserve: "", //预留量修改传参
    };
  },
  methods: {
    // 列表编辑
    handleEdit(goodsid, id) {
      // console.log(id);
      // console.log("我是路由信息", this.$route);
      sessionStorage.setItem("商品ID", goodsid);
      sessionStorage.setItem("ID", id);
      this.$router.push("/ADDGOODS");
    },

    //店铺订单请求
    getShop() {
      shops(this.sku_code).then((res) => {
        this.shopOrder = res.data;
      });
    },

    // 获取商品列表
    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.goods_code + "_" + item.sku_code;
          return item;
        });
        this.sku_code = {
          sku_code: this.shopsData,
        };
        this.getShop();
      });
    },

    // 筛选
    handleChoose() {
      this.form = {
        ...this.form,
        page: this.current_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 = {
        goods_title: "", // 商品名称
        type_id: "", // 商品种类id
        brand_id: "", // 商品品牌id
        sku_title: "", // 商品规格
        status: "", // 商品状态
      };
      this.value1 = "";
    },

    // 导入商品按钮
    handleImport() {
      this.docImportDrawer = true;
    },
    // 导出商品按钮
    handleExport() {
      this.Tableexport = true;
    },

    // 点击上新
    update() {
      this.isShow = true;
      this.stock = false;
      this.updateType = "newest";
    },
    // 复选框按钮
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val.map((item) => item.id);
      console.log(this.multipleSelection);
    },
    // 新增商品跳转
    addNewgoods() {
      this.$router.push("/ADDGOODS");
    },

    //分页功能
    handleSizeChange(val) {
      //当前条数
      this.per_page = val;
      // console.log(1111, val);
      this.getList();
    },
    handleCurrentChange(val) {
      //当前页
      this.current_page = val;
      // console.log(2222, val);
      this.getList();
    },

    //取消上新or库存盘点
    cancel() {
      this.handleChoose();
      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.handleChoose();
          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.handleChoose();
          this.$message({
            message: "库存盘点成功！",
            type: "success",
          });
        });
      }
      this.isShow = false;
      this.stock = false;
      this.handleChoose();
    },

    // 点击库存盘点
    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.ejectstock1 = false;
    },

    // 库存弹出框确认
    oldStock() {
      this.ejectstock1 = false;
      //判断点击的是库存，再发送库存请求
      if (this.updateType === "stock") {
        console.log(this.ommodityInventory);
        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.$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() {
      let data = {
        exportType: this.value,
      };
      console.log(data);
      this.Tableexport = false;
    },

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

    // 获取筛选时间
    getSTime(val) {
      val.forEach((item, index, ary) => {
        this.form.keyword_value = item + "-" + item;
      });
    },

    // 参考价格点击修改
    reference_priceClick(id) {
      this.updateField = "reference_price";
      this.reference_priceShow = true;
      this.id = id;
      this.id1 = "";
    },

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

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

    onreserve(id) {
      this.updateField = "reserve";
      this.id1 = id;
      this.id = "";
    },

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

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

    loss(id) {
      this.updateField = "loss_num";
      this.id2 = id;
      this.id = "";
      this.id1 = "";
    },

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

    //损耗框取消
    noBubbles() {
      this.handleChoose();
      this.updateField = "";
      this.id2 = "";
    },

    // 获取商品种类
    getgoodsType() {
      goods_types().then((res) => {
        this.cate = res.data.data;
      });
    },

    // 获取商品品牌
    getbrandType() {
      Brand_goods_types().then((res) => {
        this.brand = res.data.data;
      });
    },
  },

  watch: {
    $route(to, from) {
      window.location.reload(); //监测到路由发生跳转时刷新一次页面
    },
  },

  mounted() {
    this.getList();
    this.getgoodsType();
    this.getbrandType();
    this.id = "";
    this.id1 = "";
    this.id2 = "";
  },
};
</script>

<style lang="css" scoped>
.loss {
  position: relative;
}

.table {
  margin-top: 40px;
  position: relative;
}
.btn {
  float: right;
}

::v-deep .cell {
  display: flex;
  align-items: center;
}

.commodityimg {
  width: 59px;
  height: 59px;
  background: rgba(227, 227, 227, 0.39);
  opacity: 1;
  display: block;
  margin-right: 12px;
}

.Img {
  width: 100%;
  height: 100%;
}

.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;
}
</style>