<template>
|
<div class="container">
|
<el-breadcrumb style="padding-top: 10px;padding-bottom: 10px" >
|
<el-breadcrumb-item :to="{ path: '/stock/enterpriseSale' }">进销存</el-breadcrumb-item>
|
<el-breadcrumb-item>进销存详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
|
<div class="filter-container">
|
<el-row>
|
<el-input v-model="queryForm.name" class="filter-item" placeholder="产品名称" style="width: 30%; float: left;"
|
@keyup.enter.native="queryHandle"/>
|
<el-select v-model="queryForm.manufacturer" filterable placeholder="请选择" style="float: left;padding-left: 15px">
|
<el-option
|
v-for="item in manufacturerTree"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.text">
|
</el-option>
|
</el-select>
|
</el-row>
|
|
<el-row>
|
<el-input v-model="queryForm.directionCode" class="filter-item" placeholder="流向码" style="width: 30%;float: left" @keyup.enter.native="queryHandle"/>
|
|
<el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-refresh"
|
@click="refreshHandle">刷新
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-download"
|
@click="exportAllHandle">导出
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search"
|
@click="queryHandle"/>
|
<el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-refresh-right"
|
@click="resetQueryForm">重置
|
</el-button>
|
</el-row>
|
|
|
</div>
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
:key="tableKey"
|
:data="stockData"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
@sort-change="sortChange"
|
>
|
<el-table-column type="index" label="序号" align="center" width="80"/>
|
<el-table-column label="产品名称" prop="name" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品编码" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.directioncode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="入库数（箱）" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.entryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="退货入库数（箱）" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.returnNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="出库数（箱）" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.deliveryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="退库数（箱）" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.returnDeliveryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="销售数（箱）" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.saleNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="每箱数量（挂、个）" prop="boxnumber" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.boxnumber}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="生产厂家" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.manufacturer }}</span>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[20, 50, 100, 200]"
|
:page-size="pageSize"
|
:total="recordTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
background
|
style="float:right;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {getManufacturerTree} from "../../api/product";
|
import {computePageCount, parseTime} from "../../utils";
|
import {parseError} from "../../utils/messageDialog";
|
import {saleList, stockList} from "../../api/stock";
|
import Cookies from 'js-cookie'
|
|
export default {
|
name: "saleInfo",
|
data(){
|
return{
|
pageSize: 20,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
tableKey: 0,
|
stockData:[],
|
listLoading: true,
|
manufacturerTree:[],
|
queryForm: {
|
name: '',
|
manufacturer:'',
|
directionCode:'',
|
beginDate:'',
|
endDate:'',
|
type:'',
|
},
|
owner:'',
|
}
|
},
|
created(){
|
this.queryForm.beginDate = this.$route.query.beginDate;
|
this.queryForm.endDate = this.$route.query.endDate;
|
},
|
mounted(){
|
getManufacturerTree().then(res=>{
|
this.manufacturerTree=(res.data) ;
|
});
|
this.enterpriseNumber = this.$route.query.enterpriseNumber;
|
this.getSaleList(this.$route.query.enterpriseNumber);
|
},
|
methods:{
|
getSaleList(enterpriseNumber){
|
const _this = this;
|
const params = {};
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
if (enterpriseNumber == null){
|
enterpriseNumber = _this.enterpriseNumber;
|
}
|
params['enterpriseNumber'] = enterpriseNumber;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['operator'] = name + '(' + userName + ')';
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true
|
saleList(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
const result = res.result;
|
_this.recordTotal = result.totalCount;
|
_this.pageSize = result.pageSize;
|
_this.pageTotal = computePageCount(result.totalCount, result.pageSize);
|
_this.currentPage = result.pageIndex;
|
_this.stockData = result.result
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
_this.listLoading = false
|
}).catch(error => {
|
_this.listLoading = false
|
parseError({error: error, vm: _this})
|
})
|
},
|
refreshHandle: function () {
|
this.getSaleList()
|
},
|
queryHandle: function () {
|
this.currentPage = 1
|
this.getSaleList()
|
},
|
resetQueryForm(){
|
this.queryForm.name = '';
|
this.queryForm.manufacturer = '';
|
this.queryForm.directionCode = '';
|
},
|
handleSizeChange: function (val) {
|
this.pageSize = val
|
this.currentPage = 1
|
this.getSaleList()
|
},
|
handleCurrentChange: function (val) {
|
this.currentPage = val
|
this.getSaleList()
|
},
|
sortChange(param){
|
this.sort = param.prop;
|
this.order = param.order;
|
this.getSaleList();
|
},
|
exportAllHandle () {
|
const _this = this;
|
const params = {};
|
let enterpriseNumber = _this.enterpriseNumber;
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
params['enterpriseNumber'] = enterpriseNumber;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['operator'] = name + '(' + userName + ')';
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
saleList(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
const allData = res.result.result;
|
if (allData.length == 0) {
|
parseError({ error: '当前没有数据', vm: _this });
|
return
|
}
|
import('@/vendor/Export2Excel').then(excel => {
|
const tHeader = ['产品名称','产品编码', '入库数（箱）', '退货入库数（箱）', '出库数（箱）', '退库数（箱）', '销售数（箱）','每箱数量（挂、个）','生产厂家'];
|
const filterVal = ['name','directioncode', 'entryNum', 'returnNum', 'deliveryNum', 'returnDeliveryNum', 'saleNum','boxnumber','manufacturer'];
|
const data = _this.formatJson(filterVal, allData);
|
excel.export_json_to_excel({
|
header: tHeader,
|
data,
|
filename: '进销存详情'
|
})
|
})
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
formatJson(filterVal, jsonData) {
|
return jsonData.map((v) =>
|
filterVal.map((j) => {
|
if (j === 'createddate') {
|
return parseTime(v[j], '{y}-{m}-{d}')
|
}else {
|
return v[j]
|
}
|
})
|
)
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
