mirror of
https://gitee.com/hzchunfen/erp.git
synced 2025-12-01 06:30:49 +00:00
1131 lines
33 KiB
Vue
1131 lines
33 KiB
Vue
<template>
|
||
<!-- 商品管理页面 -->
|
||
<div>
|
||
<!-- 条件筛选板块 -->
|
||
<el-card class="box-card">
|
||
<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-input
|
||
v-model="form.sku_title"
|
||
placeholder="商品规格"
|
||
style="width: 100px"
|
||
>
|
||
</el-input>
|
||
</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-select
|
||
v-model="form.status"
|
||
placeholder="商品状态"
|
||
style="width: 125px"
|
||
>
|
||
<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"
|
||
style="width: 350px"
|
||
>
|
||
</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="1500"
|
||
>
|
||
<!-- 多选框 -->
|
||
<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="0T" min-width="80">
|
||
<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="80"
|
||
>
|
||
<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="80">
|
||
</el-table-column>
|
||
<el-table-column prop="reserve" sortable label="预留" min-width="80">
|
||
<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="80">
|
||
<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>
|