<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :dataKey="'spuNum'"
|
:multipleSelected="true" :tableData="tableData" :total="total"
|
:formLabel="formLabel" @page-info-change="handlePageInfoChange"
|
@selected="selectItem">
|
<template slot="otherElement">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" class="orderDownload" type="primary" icon="el-icon-download"
|
v-customLoading="{ isLoading: isLoading, percentage: percentage }"
|
@click="exportData">导出明细</el-button>
|
<el-button size="mini" type="primary" @click="handleAllocationSet(true)"
|
:disabled="handleBtnStatus">分配设置
|
</el-button>
|
<el-button size="mini" type="primary" @click="handleBatchAllocation"
|
:disabled="handleBtnStatus" v-if="allotType === 'MANUAL'">批量分配</el-button>
|
<el-button size="mini" type="primary" @click="handleConfirmAllocation"
|
:disabled="handleBtnStatus" v-if="allotType === 'AUTOMATIC'">确认分配</el-button>
|
</template>
|
<!-- 表格区域 -->
|
<template slot="columns">
|
<el-table-column label="商品主编码" prop="spuNum" min-width="100px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName" min-width="120px" 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="100px"></el-table-column>
|
<el-table-column label="计量单位" prop="unit" width="80px"></el-table-column>
|
<el-table-column label="总数量" prop="stockTotal" width="100px" 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>
|
</el-table-column>
|
<el-table-column label="可分配数量" prop="stock" width="140px" 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>
|
</el-table-column>
|
<el-table-column label="渠道待售剩余数" prop="salesStock" width="150px" 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>
|
</el-table-column>
|
<el-table-column label="锁定库存" prop="lockStock" width="150px" show-overflow-tooltip>
|
<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>
|
</el-table-column>
|
<el-table-column label="更新日期" prop="updateTime" width="160px"></el-table-column>
|
<el-table-column label="操作" :width="`${4 * $store.getters.colSize + 90}px`">
|
<template slot-scope="scope">
|
<wly-btn type="success" v-if="allotType === 'MANUAL'" @click="handleItems(1,scope.row)"
|
:disabled="scope.row.stock ? false : true">
|
分配</wly-btn>
|
<wly-btn @click="handleItems(2,scope.row)">入库流水</wly-btn>
|
<wly-btn type="warning" @click="handleItems(3,scope.row)">分配记录</wly-btn>
|
<wly-btn type="warning" @click="handleItems(4,scope.row)">预警库存</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<!-- 单个商品分配弹窗 -->
|
<single-commodity-dialog ref="singleCommodity"
|
:dialogVisible.sync="singleCommodityDialogVisible" title="单商品分配"
|
@close="queryData">
|
</single-commodity-dialog>
|
<!-- 入库流水弹窗 -->
|
<incoming-Water-dialog ref="incomingWater" :operItem="operItem"
|
:dialogVisible.sync="incomingWaterDialogVisible" title="入库流水">
|
</incoming-Water-dialog>
|
<!-- 分配记录弹窗 -->
|
<allocation-record-dialog ref="allocationRecord" :operItem="operItem"
|
:dialogVisible.sync="allocationRecordDialogVisible" title="分配记录">
|
</allocation-record-dialog>
|
<!-- 预警库存弹窗 -->
|
<warning-inventory-dialog ref="warningInventory"
|
:dialogVisible.sync="warningInventoryDialogVisible" title="库存预警">
|
</warning-inventory-dialog>
|
<!-- 分配设置弹窗 -->
|
<allocation-set-dialog ref="allocationSet" :dialogVisible.sync="allocationSetDialogVisible"
|
title="分配设置" @close="handleAllocationSet(false)">
|
</allocation-set-dialog>
|
<!-- 批量分配弹窗 -->
|
<batch-allocation-dialog ref="batchAllocation"
|
:dialogVisible.sync="batchAllocationDialogVisible" title="批量分配"
|
@close="queryData">
|
</batch-allocation-dialog>
|
<!-- 确认分配弹窗 -->
|
<confirm-allocation-dialog ref="confirmAllocation"
|
:dialogVisible.sync="confirmAllocationDialogVisible" title="确认分配"
|
@close="queryData">
|
</confirm-allocation-dialog>
|
<!-- 导出条件弹窗 -->
|
<export-condition-dialog ref="exportCondition"
|
:dialogVisible.sync="exportConditionDialogVisible" title="选择导出条件">
|
</export-condition-dialog>
|
</div>
|
</template>
|
|
<script>
|
import commodityStocksApi from '@/api/stockManagement/commodityStocks'
|
import singleCommodityDialog from '@/views/commodityStocks/components/singleCommodityDialog.vue'
|
import incomingWaterDialog from '@/views/commodityStocks/components/incomingWaterDialog.vue'
|
import allocationRecordDialog from '@/views/commodityStocks/components/allocationRecordDialog.vue'
|
import warningInventoryDialog from '@/views/commodityStocks/components/warningInventoryDialog.vue'
|
import allocationSetDialog from '@/views/commodityStocks/components/allocationSetDialog.vue'
|
import batchAllocationDialog from '@/views/commodityStocks/components/batchAllocationDialog.vue'
|
import confirmAllocationDialog from '@/views/commodityStocks/components/confirmAllocationDialog.vue'
|
import exportConditionDialog from '@/views/commodityStocks/components/exportConditionDialog.vue'
|
export default {
|
name: 'commodityStocksList',
|
components: {
|
singleCommodityDialog,
|
incomingWaterDialog,
|
allocationRecordDialog,
|
warningInventoryDialog,
|
allocationSetDialog,
|
batchAllocationDialog,
|
confirmAllocationDialog,
|
exportConditionDialog
|
},
|
data() {
|
return {
|
listQuery: {
|
spuName: null, // 商品名称
|
spuNums: null, // 商品主编码--商品主编码,多个用逗号分隔
|
spuType: null, // 商品类型
|
},
|
allotType: null,
|
distributeData: [], // 比例分配配置数据
|
tableData: [],
|
total: 0,
|
formLabel: [
|
{
|
model: 'spuNums',
|
label: '商品主编码',
|
type: 'input',
|
labelWidth: '120px',
|
rule: /[^\w]/g // 可输入数字字母
|
},
|
{
|
model: 'spuName',
|
label: '商品名称',
|
type: 'input'
|
},
|
{
|
model: 'spuType',
|
label: '商品类型',
|
type: 'select',
|
opts: [
|
{
|
id: '1001',
|
name: '销售商品'
|
},
|
{
|
id: '1002',
|
name: '赠品/物料'
|
}
|
]
|
}
|
],
|
singleCommodityDialogVisible: false, // 单个商品弹窗状态
|
incomingWaterDialogVisible: false, // 入库流水弹窗状态
|
allocationRecordDialogVisible: false, // 分配记录弹窗状态
|
warningInventoryDialogVisible: false, // 预警库存弹窗状态
|
allocationSetDialogVisible: false, // 分配设置弹窗状态
|
batchAllocationDialogVisible: false, // 批量分配弹窗状态
|
confirmAllocationDialogVisible: false, // 确认分配弹窗状态
|
exportConditionDialogVisible: false, // 导出条件弹窗状态
|
percentage: 0, // 进度条数值
|
isLoading: false, // 是否展示进度条遮罩
|
rows: [], // 需要导出的数据[id]
|
rowItem: [], // 获取勾选的商品
|
exportQuery: {}, // 导出查询条件
|
operItem: {} // 操作项数据
|
}
|
},
|
computed: {
|
handleBtnStatus() {
|
let bool = true
|
if (this.tableData.length) {
|
for (var i = 0; i < this.tableData.length; i++) {
|
if (this.tableData[i].stock && this.tableData[i].stock > 0) {
|
bool = false
|
break
|
}
|
}
|
}
|
return bool
|
}
|
},
|
/*
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
this.getCurrentInventoryConfig()
|
},
|
methods: {
|
/**
|
* 查询分配设置---分配比例
|
*/
|
async getCurrentInventoryConfig() {
|
const res = await commodityStocksApi.getCurrentInventoryConfig()
|
if (res.code === '200') {
|
const _data = res.data
|
if (_data && _data.distributeType) {
|
this.allotType = _data.distributeType
|
} else {
|
this.allotType = 'MANUAL'// 没有设置的情况下：默认手动分配
|
}
|
this.distributeData = _data && _data.distributeData ? _data.distributeData : null
|
}
|
},
|
/**
|
* 查询列表
|
*/
|
async queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
try {
|
const pageParams = {
|
current: pageInfo.pageNum,
|
size: pageInfo.pageSize,
|
sortProperties: 'update_time'
|
}
|
const res = await commodityStocksApi.getList({ ...this.listQuery, ...pageParams })
|
if (res.code === '200') {
|
this.tableData = res.data.records
|
this.total = res.data.total
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
*
|
*获取勾选的表格数据
|
*/
|
selectItem(val) {
|
this.rows = []
|
this.rowItem = []
|
val.forEach((item) => {
|
this.rows.push(item.spuNum)
|
this.rowItem.push(item)
|
})
|
},
|
/**
|
* 导出
|
*/
|
exportData() {
|
this.$refs.exportCondition.getQueryCon(this.listQuery)
|
this.exportConditionDialogVisible = true
|
},
|
/**
|
* 操作项
|
*/
|
handleItems(num, obj) {
|
this.operItem = obj
|
if (num === 1) { // 单商品分配
|
this.$refs.singleCommodity.add(obj)
|
this.singleCommodityDialogVisible = true
|
} else if (num === 2) { // 入库流水
|
this.incomingWaterDialogVisible = true
|
} else if (num === 3) { // 分配记录
|
this.allocationRecordDialogVisible = true
|
} else if (num === 4) { // 预警库存
|
this.$refs.warningInventory.getCurrentGoodsChannelData(obj)
|
this.warningInventoryDialogVisible = true
|
}
|
},
|
/**
|
* 分配设置
|
*/
|
handleAllocationSet(bool) {
|
if (bool) {
|
const data = {
|
allotType: this.allotType,
|
data: this.distributeData
|
}
|
this.$refs.allocationSet.getInfo(data)
|
this.allocationSetDialogVisible = true
|
} else {
|
this.getCurrentInventoryConfig()
|
}
|
},
|
/**
|
* 批量分配
|
*/
|
handleBatchAllocation() {
|
if (!this.rowItem.length) {
|
this.$message({
|
message: '请选择要分配的商品！',
|
type: 'info'
|
})
|
return
|
}
|
let bool = false
|
for (var i = 0; i < this.rowItem.length; i++) {
|
if (!this.rowItem[i].stock || this.rowItem[i].stock === 0) {
|
bool = true
|
break
|
}
|
}
|
if (bool) {
|
this.$message({
|
message: '商品剩余可分配数量不足，请重新选择',
|
type: 'info'
|
})
|
return
|
}
|
this.$refs.batchAllocation.add(this.rowItem)
|
this.batchAllocationDialogVisible = true
|
},
|
/**
|
* 确认分配
|
*/
|
handleConfirmAllocation() {
|
if (!this.rowItem.length) {
|
this.$message({
|
message: '请选择要分配的商品！',
|
type: 'info'
|
})
|
return
|
}
|
let bool = false
|
for (var i = 0; i < this.rowItem.length; i++) {
|
if (!this.rowItem[i].stock || this.rowItem[i].stock === 0) {
|
bool = true
|
break
|
}
|
}
|
if (bool) {
|
this.$message({
|
message: '商品剩余可分配数量不足，请重新选择',
|
type: 'info'
|
})
|
return
|
}
|
const data = {
|
allotType: this.allotType,
|
data: this.distributeData,
|
rowItem: this.rowItem
|
}
|
this.$refs.confirmAllocation.getInfo(data)
|
this.confirmAllocationDialogVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
