<!-- 位置报表 -->
|
<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView
|
:add-title="'新建'"
|
:showAdd="false"
|
:placeholder="'请输入位置名称、产品名称或产品类别'"
|
:amount-view="false"
|
@addCommonClick="addBtnClick"
|
@searchClick="getList"
|
:isDisabled="true"
|
:showDownload="true"
|
@downloadClick="downHttpClick"
|
/>
|
</div>
|
<div class="container">
|
<div class="list-left">
|
<!--<div class="title">仓库</div>
|
<div class="tree-location">
|
<el-tree
|
:show-checkbox="true"
|
:data="warehouseList"
|
:props="treeProps"
|
@check-change="warehouseChangeNode"
|
></el-tree>
|
</div>-->
|
<div class="title">位置</div>
|
<div class="tree-location">
|
<el-tree
|
node-key="id"
|
:data="locationList"
|
show-checkbox
|
:props="treeProps"
|
:default-expanded-keys="checkedLocationList"
|
:default-checked-keys="checkedLocationList"
|
@check="locationCheck"
|
></el-tree>
|
</div>
|
</div>
|
<div class="list-view" style="margin-left: 10px">
|
<div class="table">
|
<TableCommonView
|
ref="tableListRef"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
@tableRowClick="tableRowClick"
|
:showSummary="true"
|
>
|
<template slot="tableButton">
|
<el-table-column label="在库数量" prop='amount'>
|
<el-table-column v-for="unit in unitList" :label="unit.name" prop='amount' min="90">
|
<template slot-scope="scope">
|
{{getUnitValue(scope.row.amountMoreUnits,unit.name,scope.row.amount,scope.row.unit)}}
|
</template>
|
</el-table-column>
|
<!--<el-table-column label="匹" prop='amount' min="90">
|
<template slot-scope="scope">
|
{{getUnitValue(scope.row.amountMoreUnits,'匹',scope.row.amount,scope.row.unit)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="米数" prop='amount' min="90">
|
<template slot-scope="scope">
|
{{getUnitValue(scope.row.amountMoreUnits,'米数',scope.row.amount,scope.row.unit)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="重量" prop='amount' min="90">
|
<template slot-scope="scope">
|
{{getUnitValue(scope.row.beginMoreUnitsArr,'重量',scope.row.beginAmount,scope.row.unit)}}
|
</template>
|
</el-table-column>-->
|
</el-table-column>
|
<el-table-column label="操作" width="210" 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.row)" class="margin_left_5px">
|
<i class="el-icon-refresh"></i>
|
<span>补货</span>
|
</span>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
<!-- 编辑 -->
|
<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 { getLocationData } from "@/api/locationApi/locationApi"
|
import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
|
import { downloadLocationForms } from "@/api/downFile"
|
import FileSaver from 'file-saver'
|
import _ from 'lodash'
|
import { getLocationList } from "@/api/overview/overview";
|
import {getTreeData} from '@/common/untils/index.js';
|
import {getWarehouseList} from '@/api/warehouseManage/warehouse.js'
|
import {getUnitInfo} from "@/api/basic/standard";
|
export default {
|
name: "InventoryReport",
|
props: {},
|
components: { AddOverviewDialog },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
unitList:[],
|
treeProps:{
|
label:'name',
|
value:'id',
|
children:'children'
|
},
|
warehouseList:[],
|
locationList:[],
|
checkedLocationList:[],
|
tableList: {},
|
showcol: [ "产品类别", "价值"],
|
// countcol: [
|
// { label: "在库数量", unit: "" },
|
// { label: "预留数量", unit: "" },
|
// { label: "价值", unit: "￥" },
|
// ],
|
countcol: ["在库数量", "预留数量", "价值"],
|
testArr: [
|
{
|
product: "HC/销售区/b区",
|
category: "丝绸制品/真丝睡袍",
|
cost: "800.00",
|
totalPrices: "2000.00",
|
inStore: "00.00",
|
availableStore: "200.00",
|
inStorage: "00.00",
|
toStore: 65432.0,
|
forecast: "0.00",
|
unit: "件"
|
},
|
{
|
product: "HC销售区/A区",
|
category: "丝绸制品/金丝睡袍",
|
cost: "9980.00",
|
totalPrices: "00.00",
|
inStore: "00.00",
|
availableStore: "20.00",
|
inStorage: "0.00",
|
toStore: 32618.0,
|
forecast: "0.00",
|
unit: "件"
|
}
|
],
|
searchOptions: [],
|
commonDetail: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
editConfig: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
productId: this.$route.params.id,
|
productName: this.$route.params.name,
|
metaTitle: this.$route.meta.title,
|
keyWord:''
|
}
|
},
|
created() {
|
this.setTable();
|
this.getData();
|
// this.queryWarehouse();//查询仓库
|
this.queryLocation();
|
this.getUnitInfo();
|
},
|
methods: {
|
async getUnitInfo(){
|
const { code,data }=await getUnitInfo();
|
if(code===200){
|
this.unitList=data;
|
}
|
},
|
locationCheck(_,checkObj){
|
this.checkedLocationList=checkObj.checkedKeys;
|
let params={
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyWord:this.keyWord,
|
};
|
if(this.checkedLocationList.length>0){
|
params.locationIds=this.checkedLocationList;
|
}
|
this.getLocationData(params);
|
},
|
async queryWarehouse(){
|
const {code,data} =await getWarehouseList({page:0,pageSize:0,keyword:""});
|
if(code===200){
|
this.warehouseList=data;
|
}
|
},
|
getTreeData(dataList,childFieldName='children',pIdFieldName='parentId',idFieldName = 'id',rootValue=0){
|
const rootArr=[];
|
//1.先获取根节点列表
|
dataList.forEach(item=>{
|
const children= getChildrenNode(item[idFieldName],dataList);
|
if(Array.isArray(children)&&children.length>0){
|
item[childFieldName]=children;
|
}
|
if(!item.isParent){
|
rootArr.push(item)
|
}
|
});
|
//2.递归获取根节点的所有下级节点
|
function getChildrenNode(parentId,dataList) {
|
//1.根据根节点获取 子节点列表
|
const childrenArr=dataList.filter(item=>parentId===item[pIdFieldName]);
|
//2.孩子有可能还有孩子 遍历孩子进行重新递归
|
childrenArr.forEach(item=>{
|
const children=getChildrenNode(item[idFieldName],dataList);
|
if(children.length>0){
|
item[childFieldName]=children;
|
}
|
});
|
return childrenArr;
|
}
|
return rootArr;
|
},
|
async queryLocation(){
|
const {code,data}=await getLocationList({type:3,page:0,pageSize:0});
|
if(code===200){
|
data.forEach(item=>{
|
item.isParent=data.some(dItem=>{
|
if(dItem.id!==item.id){
|
return dItem.id===item.parentId
|
}
|
})
|
});
|
this.locationList=this.getTreeData(data)//转成树形数据;
|
}
|
},
|
getUnitValue(list,val,num,unit){
|
let string='--'
|
if(list){
|
if(list.length>0){
|
for(let i in list){
|
if(list[i].unit==val){
|
string=list[i].amount
|
break;
|
}
|
}
|
}
|
}
|
if(unit==val){
|
string=num
|
}
|
return string
|
},
|
// 下载
|
downHttpClick: _.debounce(function(){
|
downloadLocationForms({
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyword:this.keyword,
|
}).then(res => {
|
if (res) {
|
FileSaver.saveAs(res, '位置报表.xlsx');
|
this.$message.success("下载成功！");
|
}
|
})
|
}, 1000),
|
setTable() {
|
this.tableList = {
|
tableInfomation: [],
|
selectBox: false,
|
selectIndex: true,
|
showcol: this.showcol,
|
countcol: this.countcol,
|
allcol: [],
|
tableColumn: this.setTableColumn(this.showcol)
|
}
|
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: "locationName",
|
default: true,
|
isShowColumn: true
|
},
|
|
{
|
label: "存储类别",
|
prop: "category",
|
default: false,
|
isShowColumn: showcol.includes("存储类别")
|
},
|
{
|
label: "产品",
|
prop: "productName",
|
default: true,
|
isShowColumn: true
|
},
|
{
|
label: "产品类别",
|
prop: "productTypeName",
|
default: false,
|
isShowColumn: showcol.includes("产品类别")
|
},
|
/*{
|
label: "在库数量",
|
width:100,
|
prop: "amount",
|
isShowColumn: true,
|
default: true,
|
unit: "",
|
textAlign:"right"
|
},*/
|
{
|
label: "预留数量",
|
prop: "availableStore",
|
default: false,
|
isShowColumn: showcol.includes("预留数量"),
|
unit: "",
|
textAlign:"right"
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
width: 120,
|
default: false,
|
isShowColumn: showcol.includes("单位")
|
},
|
{
|
label: "价值",
|
prop: "value",
|
width: 120,
|
default: false,
|
isShowColumn: showcol.includes("价值"),
|
//textAlign:"right",
|
unit: "￥"
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcol = val
|
this.tableList.tableColumn = this.setTableColumn(val)
|
},
|
// 请求数据
|
async getLocationData(params) {
|
await getLocationData(params).then((res) => {
|
if (res.code === 200) {
|
const list = res.data
|
this.tableList.tableInfomation = list || []
|
this.pagerOptions.totalCount = res.total
|
}
|
})
|
},
|
getData() {
|
if(this.$route.params.name==="库存报表"){
|
this.getLocationData({
|
wareHouseCode:this.$route.params.wareHouseCode,
|
productId:this.$route.params.productId,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize
|
})
|
}else{
|
let params={
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyWord:this.keyWord,
|
};
|
if(this.$route.params.locationId){
|
params.locationId=this.$route.params.locationId
|
}
|
this.getLocationData(params)
|
}
|
},
|
|
// 搜索
|
getList(val) {
|
this.keyWord=val
|
this.pagerOptions.currPage=1
|
this.pagerOptions.pageSize=15
|
this.getData()
|
},
|
// 行点击
|
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) {
|
console.log(row)
|
this.$router.push({
|
name: "outEnterLibrary",
|
params: {
|
keyWord:row.productName,
|
produceId:row.produceId,
|
productName:row.productName,
|
unit:row.unit,
|
name: "报表"
|
}
|
})
|
},
|
// 补货
|
handleAddGoods(row) {
|
this.$router.push({
|
name: 'orderPoint',
|
params:{
|
locationId:row.locationId,
|
locationName:row.locationName
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.container{
|
display: flex;
|
justify-content: start;
|
.list-left{
|
background-color: white;
|
width: 15%;
|
.title{
|
font-family: '黑体';
|
padding: 10px;
|
}
|
.tree-location{
|
height: 75vh;
|
overflow-y: auto;
|
}
|
}
|
.list-view{
|
background-color: white;
|
min-height: 80vh;
|
width: 85%;
|
}
|
}
|
</style>
|
