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

<template>
    <!-- 商品管理页面 -->
    <div>
        <!-- 条件筛选板块 -->
        <el-card :body-style="{ padding: '20px 20px 0 20px' }">
            <div class="goods">
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="商品名称:">
                        <el-input v-model="form.goods_title" placeholder="商品名称" style="width: 100px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品种类:">
                        <el-select v-model="form.type_id" placeholder="商品种类" style="width: 125px">
                            <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-select v-model="form.brand_id" placeholder="商品品牌" style="width: 125px">
                            <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-input v-model="form.external_sku_id" placeholder="商品编码" style="width: 100px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品状态:">
                        <el-select v-model="form.status" placeholder="商品状态" style="width: 115px">
                            <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>
                        <el-select v-model="form.keyword_type" style="width: 80px; margin-right: 5px; margin-left: 10px">
                            <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="value1" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime"
                            style="width: 300px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleChoose(1)">筛选</el-button>
                        <el-button plain @click="handleReChoose()">重置筛选</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card style="margin-top: 10px">
            <div>
                <!-- 表格头部操作 -->
                <div>
                    <span>全部商品(共{{ total }}条)</span>
                    <span>&nbsp;玫瑰合计: {{ rose_num }}</span>
                    <span>&nbsp;其它合计: {{ other_num }}</span>
                    <div class="btn">
                        <el-button type="primary" plain @click="update()">上新</el-button>
                        <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" plain @click="addNewgoods">新建商品</el-button>
                        <el-button type="primary" plain @click="handleImport()">导入商品</el-button>
                        <el-button type="primary" plain @click="handleExport()">表格导出</el-button>
                        <el-button type="primary" plain @click="onCount()">库存盘点</el-button>
                    </div>
                </div>

                <!-- 表格 -->
                <el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark"
                    style="width: 100%" @selection-change="handleSelectionChange" max-height="1500">
                    <!-- 多选框 -->
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="商品信息" width="300">
                        <template slot-scope="scope">
                            <div class="commodityimg">
                                <img :src="scope.row.goods.img_url" class="Img" />
                            </div>
                            <div>
                                <p>{{ scope.row.goods.title }}&nbsp;{{ scope.row.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" width="130"></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="0T">
                        <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="售价">
                        <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="总量">
                    </el-table-column> -->
                    <el-table-column prop="reserve" sortable label="预留">
                        <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="订单">
                        <template slot-scope="scope">
                            <div>
                                <span>{{ scope.row.order_goods_num }}</span>
                            </div>
                            <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>
                                <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" trigger="click" @hide="noBubbles" width="264">
                                <div>
                                    <span>损耗数量: </span>
                                    <el-input v-model="scope.row.daily.loss_num" style="width: 200px;"></el-input>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span>原因: </span>
                                    <el-radio-group v-model="radio" style="width: 220px;">
                                        <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>
                                <div style="margin-top: 10px;">
                                    <el-button type="primary" @click="onLoss(scope.row)" size="mini">保存</el-button>
                                    <!-- <el-button size="mini" type="primary" plain @click="closeLossPopover()">取消
                                    </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>
                            <el-popover placement="right-start" trigger="hover" :content="scope.row.daily.inventory_time
                                    ? scope.row.daily.inventory_time
                                    : ''
                                ">
                                <div v-if="!stock" slot="reference">
                                    {{ scope.row.daily.inventory }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column prop="status" label="状态"> </el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <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> -->
                        </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, 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 :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="/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>
    </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";
export default {
    data() {
        return {
            id: "", //参考售价的id
            id1: "", //预留量的id
            id2: "", //损耗的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: "", //表格导出选择的选项
            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-状态
            reference_priceShow: false,
            reserveShow: false, //预留量-input显示变量
            value1: "", // 筛选的时间
            ommodityInventory: [], //单个商品库存
            dialogVisible: false, //上新按钮弹出框变量
            dialogVisible2: false, //库存盘点弹出框变量
            dialogVisible3: false, //参考售价弹出框变量
            dialogVisible4: false, //预留弹出框变量
            publicId: "", //参考售价 预留量公用id
            reference_price: "", //参考价格修改传参
            reserve: "", //预留量修改传参
            loadingModule: ""
        };
    },
    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.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.value1 = "";
        },

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

        // 点击上新
        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(" - ");
        },

        // 参考价格点击修改
        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;
            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.current_page);
            this.updateField = "";
            this.id2 = "";
        },

        // 获取商品种类
        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.id = "";
        this.id1 = "";
        this.id2 = "";
    },
};
</script>

<style lang="css" scoped>
.table {
    margin-top: 20px;
    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>