<!-- 库存报表 -->
|
<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView
|
:showAdd="false"
|
:add-title="'新建'"
|
:placeholder="'请输入产品名称或产品类别'"
|
:amount-view="false"
|
@addCommonClick="addBtnClick"
|
@searchClick="getList"
|
:isDisabled="true"
|
/>
|
</div>
|
|
<div class="content_wrap">
|
<div class="con_left">
|
<p>仓库</p>
|
<div class="stash">
|
<template>
|
<el-radio
|
v-for="(item, index) in warehouseList"
|
:key="index"
|
v-model="stashRadio"
|
:label="item.code"
|
@change="radioHandleChange"
|
>{{ item.name }}</el-radio
|
>
|
<!-- @click.prevent.native="checkRadio(item.code)" 取消单选项 -->
|
</template>
|
</div>
|
<p style="margin-top: 30px">类别</p>
|
<el-checkbox-group v-model="checkList" @change="checkListHandler">
|
<el-checkbox v-for="item in categoryList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="list-view">
|
<div class="table">
|
<TableCommonView
|
ref="tableListRef"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
@tableRowClick="tableRowClick"
|
:showSummary="true"
|
>
|
<template slot="tableButton">
|
<el-table-column label="操作" width="220" align="center">
|
<template slot-scope="scope">
|
<span @click="handleHistoryClick(scope.row)" class="yes-cursor">
|
<i class="el-icon-refresh-left"></i>
|
<span>历史</span>
|
</span>
|
<span @click="handleAddGoods(scope)" class="margin_left_5px no-cursor">
|
<i class="el-icon-refresh"></i>
|
<span>补货</span>
|
</span>
|
<template>
|
<span @click="handleLocation(scope)" class="margin_left_5px yes-cursor">
|
<i class="el-icon-menu"></i>
|
<span>位置</span>
|
</span>
|
<span @click="handleForecast(scope)" class="margin_left_5px no-cursor">
|
<i class="el-icon-s-data"></i>
|
<span>预测</span>
|
</span>
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
|
<!-- 编辑 dialog-->
|
<AddOverviewDialog v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
|
</div>
|
</template>
|
|
<script>
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
|
import { getInventoryData, getProductCategoryList, getWarehouseList } from "@/api/reportForm/inventoryRwport"
|
|
export default {
|
name: "InboundOutboundDetail",
|
props: {},
|
components: { AddOverviewDialog },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
keyword: "",
|
checkList: [],
|
testArr: [],
|
testArr2: [
|
{
|
product: "南方丝巢xxx", //产品
|
category: "丝绸制品/真丝睡袍", // 产品类别
|
cost: "100.00", //单位成本
|
inStore: "12.00", // 在库
|
totalPrices: 10, // 总价值
|
availableStore: "0.00", //可用库存
|
inStorage: "100.00", // 入库
|
toStore: "20.00", // 出库
|
forecast: "0.00", //预测
|
unit: "件" //单位
|
},
|
{
|
product: "南方丝巢12306xxx",
|
category: "丝绸制品/真丝睡袍",
|
cost: "9980.00",
|
totalPrices: "0.00",
|
inStore: "10.00",
|
availableStore: "0.00",
|
inStorage: "0.00",
|
toStore: "0.00",
|
forecast: "0.00",
|
unit: "件"
|
}
|
],
|
tableList: {},
|
showcol: ["产品类别", "单位成本", "总价值", "入库", "出库"],
|
countcol: ["总价值", "在库", "可用库存", "入库", "出库", "预测"],
|
searchOptions: [],
|
commonDetail: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
editConfig: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
productId: this.$route.params.id,
|
productName: this.$route.params.name,
|
categoryList: [], // 类别
|
categoryListId: [], //类别id
|
warehouseList: [], // 仓库
|
warehouseListName: "", // 仓库名称
|
stashRadio: "1",
|
pageSizes: [15, 30],
|
oldRadioBtn: "",
|
metaTitle: this.$route.meta.title,
|
searchStr: ""
|
}
|
},
|
created() {
|
this.setTable()
|
this.getData() //库存报表
|
this.getStashData() // 仓库列表数据
|
this.getProductCategoryList()
|
},
|
mounted() {
|
this.countSums()
|
},
|
methods: {
|
checkListHandler(e) {
|
this.categoryListId = e
|
this.getData()
|
},
|
radioHandleChange(e) {
|
this.warehouseListName = e
|
this.getData()
|
},
|
// checkRadio(val){
|
// console.log(val)
|
// val == this.stashRadio ? this.stashRadio = '' : this.stashRadio = val
|
// this.warehouseListName = val
|
// this.getData()
|
// },
|
setTable() {
|
if (this.isIconIndex === "1") {
|
this.pageSizes = [30, 60]
|
this.pagerOptions.pageSize = 30
|
}
|
this.tableList = {
|
tableInfomation: [],
|
selectBox: false,
|
selectIndex: true,
|
showcol: this.showcol,
|
countcol: this.countcol,
|
allcol: [],
|
tableColumn: this.setTableColumn(this.showcol)
|
}
|
// this.tableList.tableInfomation = this.testArr;
|
let allcol = []
|
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
|
if (!this.tableList.tableColumn[i].default) {
|
const label = this.tableList.tableColumn[i].label
|
allcol.push(label)
|
}
|
}
|
this.tableList.allcol = allcol
|
},
|
setTableColumn(showcol) {
|
let tableColumn = [
|
{
|
label: "产品",
|
prop: "productName",
|
default: true,
|
width: 300,
|
isShowColumn: true
|
// date: true, // 是否为日期格式
|
},
|
{
|
label: "产品类别",
|
prop: "productType",
|
default: true,
|
isShowColumn: showcol.includes("产品类别")
|
},
|
{
|
label: "单位成本",
|
prop: "cost",
|
default: false,
|
isShowColumn: showcol.includes("单位成本")
|
},
|
{
|
label: "总价值",
|
prop: "value",
|
default: false,
|
isShowColumn: showcol.includes("总价值"),
|
unit: "￥"
|
},
|
{
|
label: "在库",
|
prop: "amount",
|
default: true,
|
isShowColumn: true,
|
unit: ""
|
},
|
{
|
label: "可用库存",
|
prop: "availableNumber",
|
default: true,
|
isShowColumn: true,
|
unit: ""
|
},
|
{
|
label: "入库",
|
prop: "in",
|
default: false,
|
isShowColumn: showcol.includes("入库"),
|
unit: ""
|
},
|
{
|
label: "出库",
|
prop: "out",
|
isShowColumn: showcol.includes("出库"),
|
default: false,
|
unit: ""
|
},
|
{
|
label: "预测",
|
prop: "forecast",
|
isShowColumn: showcol.includes("预测"),
|
default: false,
|
unit: ""
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
default: true,
|
isShowColumn: true
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcol = val
|
this.tableList.tableColumn = this.setTableColumn(val)
|
},
|
getList(val) {
|
this.searchStr = val
|
this.getInventoryData({
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyWord: val
|
})
|
},
|
// 行点击
|
tableRowClick(row) {
|
console.log(row)
|
// this.editConfig.visible = true;
|
this.editConfig.title = "查看"
|
this.editConfig.infomation = { ...row }
|
},
|
// 新建
|
addBtnClick() {
|
// this.editConfig.visible = true;
|
// this.editConfig.title = "新建"
|
// this.getData()
|
},
|
// 状态
|
getStatus(val) {
|
return val === 1 ? "草稿" : val === 3 ? "就绪" : "完成"
|
},
|
// 历史
|
handleHistoryClick(row) {
|
this.$router.push({
|
name: "inboundOutboundDetail",
|
params: {
|
id: row.produceId,
|
name: "报表"
|
}
|
})
|
},
|
|
// 补货
|
handleAddGoods(row) {
|
console.log(row)
|
},
|
// 位置
|
handleLocation() {
|
this.$router.push("/reportForm/locationReport")
|
},
|
// 预测
|
handleForecast() {},
|
//总价计算
|
countSums() {
|
this.testArr2.map((item) => {
|
let obj = {
|
product: item.product, //产品
|
category: item.category, // 产品类别
|
cost: item.cost, //单位成本
|
inStore: item.inStore, // 在库
|
totalPrices: item.cost * item.inStore, // 总价值
|
availableStore: item.availableStore, //可用库存
|
inStorage: item.inStorage, // 入库
|
toStore: item.toStore, // 出库
|
forecast: item.forecast, //预测
|
unit: item.unit //单位
|
}
|
this.testArr.push(obj)
|
})
|
},
|
|
//接口请求-----------------------------------------------------------------------------------------------
|
// 获取库存报表数据
|
async getInventoryData(params) {
|
await getInventoryData(params).then((res) => {
|
if (res.code === 200) {
|
const list = res.data
|
this.tableList.tableInfomation = list || []
|
this.pagerOptions.totalCount = res.total
|
}
|
})
|
},
|
getData() {
|
let params = {
|
keyWord: this.searchStr,
|
categoryIds: this.categoryListId,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
warehouseCode: this.warehouseListName
|
}
|
this.getInventoryData(params)
|
},
|
// 获取产品类型列表数据
|
async getProductCategoryList() {
|
await getProductCategoryList({
|
keyWord: "",
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize
|
}).then((res) => {
|
if (res.code === 200) {
|
this.categoryList = res.data
|
}
|
})
|
},
|
// 请求仓库列表数据
|
async getStashData() {
|
await getWarehouseList({
|
keyword: "",
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize
|
}).then((res) => {
|
if (res.data.code === 200) {
|
this.warehouseList = res.data.data
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.content_wrap {
|
height: calc(100% - 0px);
|
display: flex;
|
justify-content: space-between;
|
.con_left {
|
width: 200px;
|
.el-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
}
|
.stash {
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
.list-view {
|
flex: 1;
|
}
|
}
|
</style>
|
