<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-date-picker
|
v-model="dateRange"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
:default-time="['00:00:00','23:59:59']">
|
</el-date-picker>
|
<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-row>
|
<el-row style="padding-top: 10px">
|
<div style="display: block;">
|
<div class="basic_search">
|
<span>地域：  </span>
|
<el-select
|
v-model="queryForm.province"
|
placeholder="请选择省份"
|
clearable
|
filterable
|
@change="changeArea('province')">
|
<el-option
|
v-for="item in provinceList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.city" prop="city" clearable filterable @change="changeArea('city')">
|
<el-option
|
v-for="item in cityList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.area" clearable filterable @change="changeArea('area')">
|
<el-option
|
v-for="item in districtList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.town" clearable filterable @change="changeArea('town')" >
|
<el-option
|
v-for="item in streetList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="basic_search">
|
<el-select v-model="queryForm.community" clearable filterable>
|
<el-option
|
v-for="item in committeeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
|
</el-row>
|
<el-row style="padding-top: 10px">
|
企业名称：
|
<el-input v-model="queryForm.name" class="filter-item" placeholder="企业名称" style="width: 20%;padding-right: 15px"
|
@keyup.enter.native="queryHandle"/>
|
|
企业类型：
|
<el-select
|
v-model.trim="queryForm.enterpriseType"
|
placeholder="请选择企业类型"
|
style="width:13%;">
|
<el-option
|
v-for="(item,index) in checkTypeList"
|
:label="item.text"
|
:value="item.text"
|
:key="index"/>
|
</el-select>
|
</el-row>
|
|
</div>
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
:key="tableKey"
|
:data="tableData"
|
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="enterpriseName" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<el-link type="primary" v-if="scope.row.enterpriseName !=='总计'"
|
@click="showDetail(scope.row.enterpriseNumber)">{{ scope.row.enterpriseName }}</el-link>
|
<span v-if="scope.row.enterpriseName ==='总计'">总计</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="入库数（箱）" prop="entryNum" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span v-bind:class="{'click-color':scope.row.entryNum > 0 && scope.row.enterpriseName !=='总计'}"
|
@click="scope.row.entryNum > 0 && scope.row.enterpriseName!=='总计' && showMore('one',scope.row) ">{{ scope.row.entryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="退货入库数（箱）" prop="returnNum" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span v-bind:class="{'click-color':scope.row.returnNum > 0 && scope.row.enterpriseName !=='总计'}"
|
@click="scope.row.returnNum > 0 && scope.row.enterpriseName!=='总计' && showMore('two',scope.row) ">{{ scope.row.returnNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="出库数（箱）" prop="deliveryNum" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span v-bind:class="{'click-color':scope.row.deliveryNum > 0 && scope.row.enterpriseName !=='总计'}"
|
@click="scope.row.deliveryNum > 0 && scope.row.enterpriseName!=='总计' && showMore('three',scope.row)">{{ scope.row.deliveryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="退库数（箱）" prop="returnDeliveryNum" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span v-bind:class="{'click-color':scope.row.returnDeliveryNum > 0 && scope.row.enterpriseName !=='总计'}"
|
@click="scope.row.returnDeliveryNum > 0 && scope.row.enterpriseName!=='总计' && showMore('four',scope.row) ">{{ scope.row.returnDeliveryNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="销售数（箱）" prop="saleNum" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span v-bind:class="{'click-color':scope.row.saleNum > 0 && scope.row.enterpriseName !=='总计'}"
|
@click="scope.row.saleNum > 0 && scope.row.enterpriseName !=='总计' && showMore('five',scope.row) ">{{ scope.row.saleNum }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[30, 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>
|
<in-storage-detail ref="inStorageDetail"></in-storage-detail>
|
<out-storage-detail ref="outStorageDetail"></out-storage-detail>
|
<sale-detail ref="saleDetail"></sale-detail>
|
</div>
|
|
</template>
|
|
<script>
|
import saleDetail from './components/saleDetail/index'
|
import outStorageDetail from "./components/outStorageDetail/index";
|
import inStorageDetail from "./components/inStorageDetail/index";
|
import {getManufacturerTree} from "../../api/product";
|
import {computePageCount, parseTime} from "../../utils";
|
import {parseError} from "../../utils/messageDialog";
|
import {enterpriseSaleList} from "../../api/stock";
|
import Cookies from 'js-cookie'
|
import {getCityListData, getProvinceListData} from "../../api/area";
|
import {dictionaryAllItems} from "../../api/dictionary";
|
|
export default {
|
name: "enterpriseSale",
|
data(){
|
return{
|
pageSize: 30,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
tableKey: 0,
|
stockData:[],
|
listLoading: true,
|
manufacturerTree:[],
|
provinceList:[],
|
cityList:[],
|
districtList:[],
|
streetList:[],
|
committeeList:[],
|
checkTypeList:[],
|
dateRange:[],
|
isSupervision : Cookies.get('isSupervision'),
|
queryForm: {
|
name: '',
|
beginDate:'',
|
endDate:'',
|
province:'',
|
city:'',
|
area:'',
|
town:'',
|
community:'',
|
enterpriseType:'',
|
},
|
totalRow:{}
|
}
|
},
|
components:{
|
inStorageDetail,
|
outStorageDetail,
|
saleDetail
|
},
|
mounted(){
|
getManufacturerTree().then(res=>{
|
this.manufacturerTree=(res.data) ;
|
});
|
this.queryDateHandle();
|
if (this.isSupervision === 'null'){
|
this.queryForm.enterpriseType = "烟花爆竹批发经营"
|
}
|
this.getDictionaryCheckType();
|
this.getSaleList();
|
this.getProvince();
|
},
|
computed:{
|
tableData(){
|
const tbody = this.stockData
|
this.totalRow['enterpriseName'] = '总计'
|
return tbody.length?[...tbody,this.totalRow]:[]
|
}
|
},
|
methods:{
|
getSaleList(){
|
const _this = this;
|
_this.queryForm.beginDate = _this.formatTime(_this.dateRange[0]);
|
_this.queryForm.endDate = _this.formatTime(_this.dateRange[1]);
|
const params = {};
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
params['operator'] = Cookies.get('userName') ;
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() !== '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true;
|
enterpriseSaleList(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
|
_this.totalRow = result.extension
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
_this.listLoading = false;
|
}).catch(error => {
|
_this.listLoading = false;
|
parseError({error: error, vm: _this})
|
})
|
},
|
showMore(value,row){
|
if(value === 'one'){
|
this.$refs.inStorageDetail.showInStorageDetail(this.queryForm.beginDate,this.queryForm.endDate,row.enterpriseName)
|
}else if(value === 'two'){
|
this.$refs.inStorageDetail.showQuitInStorageDetail(this.queryForm.beginDate,this.queryForm.endDate,row.enterpriseName)
|
}else if(value === 'three'){
|
this.$refs.outStorageDetail.showOutStorageDetail(this.queryForm.beginDate,this.queryForm.endDate,row.enterpriseName)
|
}else if(value === 'four'){
|
this.$refs.outStorageDetail.showQuitOutStorageDetail(this.queryForm.beginDate,this.queryForm.endDate,row.enterpriseName)
|
}else{
|
this.$refs.saleDetail.showSaleDetail(this.queryForm.beginDate,this.queryForm.endDate,row.enterpriseName)
|
}
|
},
|
showDetail(enterpriseNumber){
|
this.$router.push({path:'/sale/info',query:{enterpriseNumber:enterpriseNumber,beginDate:this.queryForm.beginDate,endDate:this.queryForm.endDate}})
|
},
|
refreshHandle: function () {
|
this.getSaleList();
|
},
|
queryHandle: function () {
|
this.currentPage = 1;
|
this.getSaleList();
|
},
|
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();
|
},
|
//获取省
|
async getProvince(){
|
let res = await getProvinceListData()
|
if(res.data.code === "200"){
|
this.provinceList = res.data.result.provinceList
|
}
|
},
|
async changeArea(value){
|
if(value === 'province'){
|
this.queryForm.city = ''
|
this.queryForm.area = ''
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 2,
|
parenttype: 1,
|
parentname: this.queryForm.province,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.cityList = res.data.result
|
}
|
}else if(value === 'city'){
|
this.queryForm.area = ''
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 3,
|
parenttype: 2,
|
parentname: this.queryForm.city,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.districtList = res.data.result
|
}
|
}else if(value === 'area'){
|
this.queryForm.town = ''
|
this.queryForm.community = ''
|
this.areaListQuery = {
|
type: 4,
|
parenttype: 3,
|
parentname: this.queryForm.area,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.streetList = res.data.result
|
}
|
}else if(value === 'town'){
|
this.queryForm.community = '';
|
this.areaListQuery = {
|
type: 5,
|
parenttype: 4,
|
parentname: this.queryForm.town,
|
}
|
let res = await getCityListData(this.areaListQuery)
|
if(res.data.code === "200"){
|
this.committeeList = res.data.result
|
}
|
}
|
},//市、镇、街道、委员会
|
getDictionaryCheckType() {
|
const _this = this;
|
if (_this.checkTypeList && _this.checkTypeList.length > 0) {
|
return
|
}
|
const params = {};
|
params['dictionaryType'] = '安全监管分类';
|
dictionaryAllItems(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
_this.checkTypeList = res.result
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
|
queryDateHandle(){
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
start.setHours(0);
|
start.setMinutes(0);
|
start.setSeconds(0);
|
this.dateRange.push(start,end);
|
this.queryForm.beginDate = start;
|
this.queryForm.endDate = end;
|
},
|
exportAllHandle () {
|
const _this = this;
|
const params = {};
|
params['pageIndex'] = 1;
|
params['pageSize'] = 100000;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
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]
|
}
|
}
|
enterpriseSaleList(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
|
}
|
allData.push(this.totalRow)
|
import('@/vendor/Export2Excel').then(excel => {
|
const tHeader = ['企业名称', '入库数（箱）', '退货入库数（箱）', '出库数（箱）', '退库数（箱）', '销售数（箱）'];
|
const filterVal = ['enterpriseName', 'entryNum', 'returnNum', 'deliveryNum', 'returnDeliveryNum', 'saleNum'];
|
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]
|
}
|
})
|
)
|
},
|
formatTime: function(value) {
|
let date = new Date(value);
|
let y = date.getFullYear();
|
let MM = date.getMonth() + 1;
|
MM = MM < 10 ? "0" + MM : MM;
|
let d = date.getDate();
|
d = d < 10 ? "0" + d : d;
|
let h = date.getHours();
|
h = h < 10 ? "0" + h : h;
|
let m = date.getMinutes();
|
m = m < 10 ? "0" + m : m;
|
let s = date.getSeconds();
|
s = s < 10 ? "0" + s : s;
|
return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
|
}
|
},
|
|
}
|
</script>
|
|
<style scoped>
|
.basic_search{
|
display:inline-block;
|
}
|
.click-color{
|
color: #409EFF;
|
}
|
</style>
|
