<template>
|
<div class="cardCurrentStyle1 channelInventoryStyle">
|
<list-condition-template ref="table" :form="listQuery" :dataKey="'spuNum'"
|
:formLabel="formLabel" :tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="6" :offset="0">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
<el-button size="mini" class="orderDownload" type="primary" icon="el-icon-download"
|
v-customLoading="{ isLoading: isLoading, percentage: percentage }"
|
@click="exportData">导出</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<!-- tab页 渠道选择-->
|
<template slot="tabItem">
|
<el-tabs type="card" v-model="listQuery.channel" @tab-click="handleTabClick">
|
<el-tab-pane :label="item.dictName" :name="item.dictCode" v-for="(item,index) in tabList"
|
:key="index">
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<template slot="columns">
|
<el-table-column label="商品主编码" prop="spuNum" min-width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品类型" prop="spuType" width="150px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.spuType ? scope.row.spuType === '1001' ? '销售商品' : '赠品/物料' : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="规格型号" prop="spec" width="120px" align="center"></el-table-column>
|
<el-table-column label="单位" prop="unit" width="120px" align="center"></el-table-column>
|
<el-table-column label="已售数量" prop="soldStock" width="120px" align="center"
|
show-overflow-tooltip>
|
<template slot="header">
|
已售数量
|
<el-popover placement="top" width="200" trigger="click"
|
content="注：统计当前渠道该商品历史销售总和，商品发货后进行统计">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<el-link v-if="scope.row.soldStock" type="primary"
|
@click="orderDetails(scope.row, 'soldStock')">{{scope.row.soldStock}}</el-link>
|
<span v-else>{{scope.row.soldStock}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="cumulativeStock" width="120px" align="center" show-overflow-tooltip>
|
<template slot="header">
|
总数量
|
<el-popover placement="top" trigger="click" content="注：当记录当前渠道该商品数量总和，只增不减">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
</el-table-column>
|
<el-table-column label="锁定库存" prop="lockStock" width="120px" align="center">
|
<template slot="header">
|
锁定库存
|
<el-popover placement="top" width="260" trigger="click">
|
<div class="tips-content">
|
<p>注：</p>
|
<div>
|
<p>1、统计当前渠道该商品待发货数量的总和</p>
|
</div>
|
<div>
|
<p>2、发货后锁定数进行扣减，未发货退款该该数扣减，且待售总和增加</p>
|
</div>
|
</div>
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<el-link v-if="scope.row.lockStock" type="primary" @click="orderDetails(scope.row)">
|
{{scope.row.lockStock}}</el-link>
|
<span v-else>{{scope.row.lockStock}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column width="120px" prop="stock" align="center">
|
<template slot="header">
|
可用库存
|
<el-popover placement="top" trigger="click" content="注：统计当前商品渠道可用库存，不包含锁定库存、活动库存">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<span
|
:class="{ 'reach-warningNumber-style': scope.row.stock <= scope.row.warningStock }">
|
{{ scope.row.stock}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column width="120px" prop="activeInventory" align="center">
|
<template slot="header">
|
活动库存
|
<el-popover placement="top" trigger="click"
|
content="注：统计活动占用库存，活动生效则从可用库存扣减，活动结束该库存则释放">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<el-popover v-if="scope.row.stockPromotionVo.promotionTotalStock" placement="top"
|
trigger="click">
|
限时抢购库存：{{scope.row.stockPromotionVo.limitStock}}<br />拼团库存：{{scope.row.stockPromotionVo.agglomerateStock}}
|
<el-link type="primary" slot="reference" style="cursor:pointer;">
|
{{scope.row.stockPromotionVo.promotionTotalStock}}</el-link>
|
</el-popover>
|
<span v-else>{{scope.row.stockPromotionVo.promotionTotalStock}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="预警库存数" align="center" prop="warningStock" width="120px"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${$store.getters.colSize*2 + 60}px`">
|
<template slot-scope="scope">
|
<wly-btn type="success" @click="getAllocationInfo(scope.row)">分发记录</wly-btn>
|
<wly-btn type="primary" @click="openInventoryReturn(scope.row)">库存扣减</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<!-- 分发记录弹窗 -->
|
<dist-records-info-dialog ref="distRecordsDialog" :selectItem="selectItem"
|
:dialogVisible.sync="distRecordsDialogVisible" title="分发记录">
|
</dist-records-info-dialog>
|
<order-inventory ref="orderInventory" :title="orderInventoryTitle" :orderDetail="orderDetail">
|
</order-inventory>
|
<inventory-return ref="inventoryReturn" :row="rowData"></inventory-return>
|
</div>
|
</template>
|
|
<script>
|
import dictApi from '@/api/dict'
|
import { downloadFile } from '@/utils/downloadFile'
|
import ChannelInventoryApi from '@/api/stockManagement/channelInventory'
|
import distRecordsInfoDialog from '@/views/channelInventory/components/distRecordsInfoDialog.vue'
|
import orderInventory from '@/views/channelInventory/components/orderInventory.vue'
|
import inventoryReturn from '@/views/channelInventory/components/inventoryReturn.vue'
|
|
export default {
|
name: 'channelInventoryList',
|
components: {
|
distRecordsInfoDialog,
|
orderInventory,
|
inventoryReturn
|
},
|
data() {
|
return {
|
tabList: [],
|
listQuery: {
|
spuNum: null, // 商品主编码
|
channel: 'WLY', // 渠道来源-code
|
spuType: null, // 商品类型
|
},
|
formLabel: [
|
{
|
model: 'spuNum',
|
label: '商品主编码',
|
type: 'input',
|
labelWidth: '100px',
|
rule: /[^\w]/g // 可输入数字字母
|
},
|
{
|
model: 'spuName',
|
label: '商品名称',
|
type: 'input',
|
labelWidth: '100px'
|
},
|
{
|
model: 'spuType',
|
label: '商品类型',
|
type: 'select',
|
opts: [
|
{
|
id: '1001',
|
name: '销售商品'
|
},
|
{
|
id: '1002',
|
name: '赠品/物料'
|
}
|
]
|
}
|
],
|
tableData: [],
|
total: 0,
|
distRecordsDialogVisible: false, // 分发记录弹窗状态
|
percentage: 0, // 进度条数值
|
isLoading: false, // 是否展示进度条遮罩
|
selectItem: {}, // 操作项数据
|
orderInventoryTitle: null, // 订单详情弹出框标题
|
orderDetail: {
|
questApi: null,
|
params: null
|
},
|
rowData: {}
|
}
|
},
|
watch: {
|
$route: {
|
handler() {
|
if (this.$route.name === 'channelInventory') {
|
this.getChannelData()
|
}
|
// 深度监听，同时也可监听到param参数变化
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
// 查看已售和锁定的订单详情
|
orderDetails(row, tag) {
|
this.$refs.orderInventory.toggleDialog()
|
this.orderInventoryTitle = tag ? '已售数量详情' : '锁定库存详情'
|
this.orderDetail.questApi = tag ? ChannelInventoryApi.querySoldStockOrderDetail : ChannelInventoryApi.queryLockStockOrderDetail
|
this.orderDetail.params = {
|
channel: this.listQuery.channel,
|
spuNums: [row.spuNum]
|
}
|
},
|
// 打开库存扣减弹窗
|
openInventoryReturn(row) {
|
this.$refs.inventoryReturn.toggleDialog()
|
this.rowData = row
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
try {
|
const pageParams = {
|
current: pageInfo.pageNum,
|
size: pageInfo.pageSize,
|
sortProperties: 'update_time',
|
sortDirection: 'DESC'
|
}
|
const res = await ChannelInventoryApi.getList({ ...this.listQuery, ...pageParams })
|
if (res.code === '200') {
|
this.tableData = res.data.records
|
this.total = res.data.total
|
if (this.listQuery.spuNum && this.tableData.length === 0) {
|
this.$message({
|
message: '未查询到该商品主编码，请重新输入！',
|
type: 'info'
|
})
|
}
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 获取渠道数据字典
|
*/
|
async getChannelData() {
|
const res = await dictApi.getChanneldict()
|
const _data = res.data
|
if (res.code === '0' && _data) {
|
this.tabList = _data
|
if (_data.length > 0) {
|
this.queryParamsChange()
|
}
|
}
|
},
|
/**
|
* 切换渠道获取渠道库存数据
|
*/
|
handleTabClick() {
|
// this.listQuery.spuNum = null
|
this.$refs.table.resetTable()
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
/**
|
* 进入页面默认查询参数
|
*/
|
queryParamsChange() {
|
const _query = this.$route.query
|
if (_query && _query.promotionId) {
|
const arr = _query.promotionId.split(',')
|
if (arr.length && arr.length === 2) {
|
this.listQuery.channel = arr[0] ? arr[0] : null
|
this.listQuery.spuNum = arr[1] ? arr[1] : null
|
} else {
|
this.listQuery.channel = 'WLY'
|
this.listQuery.spuNum = null
|
}
|
}
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
/**
|
* 分发记录弹窗状态
|
*/
|
getAllocationInfo(row) {
|
this.selectItem = JSON.parse(JSON.stringify(row))
|
this.selectItem.channel = this.listQuery.channel// 渠道来源
|
this.distRecordsDialogVisible = true
|
},
|
/**
|
* 导出所有渠道数据
|
*/
|
async exportData() {
|
if (this.tabList.length === 0) {
|
return
|
}
|
const _exportQuery = JSON.parse(JSON.stringify({ spuNum: this.listQuery.spuNum }))
|
// let _dictName = this.tabList.find((item) => item.dictCode === this.listQuery.channel).dictName;
|
const config = {
|
onUploadProgress: (ProgressEvent) => {
|
const progressPercent = Math.round(
|
((ProgressEvent.loaded / ProgressEvent.total) * 100) | 0
|
)
|
this.percentage = progressPercent === 100 ? 99 : progressPercent
|
this.isLoading = true
|
},
|
onDownloadProgress: (ProgressEvent) => { },
|
url: 'wly-warehouse-service/stock/query/exportStockChannelExcel',
|
data: _exportQuery, // 导出条件
|
fileName: '渠道库存',
|
type: '.xlsx'
|
}
|
const res = await downloadFile(config)
|
if (res) {
|
this.percentage = 100
|
this.isLoading = false
|
} else {
|
this.percentage = 0
|
this.isLoading = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.channelInventoryStyle {
|
background-color: rgb(242, 242, 242);
|
// padding:20px;
|
.tableStyle {
|
margin-top: 0 !important;
|
}
|
.el-tabs__header {
|
// height:20px;
|
background-color: #fff !important;
|
border-top-right-radius: 6px;
|
padding: 0 !important;
|
border-bottom: none;
|
.el-tabs__nav-wrap {
|
border-bottom: 1px solid #e4e7ed !important;
|
}
|
}
|
.reach-warningNumber-style {
|
color: #df3341;
|
cursor: pointer;
|
display: inline-block;
|
}
|
.reach-warningNumber-style:hover {
|
border-bottom: 1px solid #D70012;
|
}
|
}
|
</style>
|
