<template>
<div class="OrderProfitLossList">
<div class="el-card__header">
<span>{{$t('objFill.v101.FinancialModule.shunyijs')}}</span>
<div style="display: flex;flex-direction: row;align-items: center">
<!---->
<el-button type="primary" class="el-button--small" @click="Export">{{$t('objFill.v101.FinancialModule.daochuqb')}}</el-button>
</div>
</div>
<div class="content">
<div style="display: flex;flex-direction: row;align-items: center">
<span>{{$t('hotel.hotel_Supplier')}}</span>
<el-select class="w150" style="margin-left: 10px;" v-model="msg.SupplierId" filterable size="small"
:placeholder="$t('pub.pleaseSel')" @change="msg.pageIndex=1,getDateList()">
<el-option :key="0" :value="0" :label="$t('advmanager.v_all')"></el-option>
<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
<div class="block" style="margin-left: 10px;">
<el-date-picker style="padding: 3px 10px;width: 380px;height: 32px" v-model="value" type="daterange"
:range-separator="$t('OrderList.zhi')" :start-placeholder="$t('OrderList.star')" :end-placeholder="$t('OrderList.end')" value-format="yyyy-MM-dd"
@change="change" align="right">
</el-date-picker>
</div>
<span style="margin:0 10px">{{$t('hotel.order_Number')}}</span>
<el-input v-model="msg.OrderNo" :placeholder="$t('objFill.qingsrddid')" @blur='msg.pageIndex=1,getDateList()' style="width:200px"
@keyup.enter.native='search' clearable></el-input>
<span style="margin:0 10px">{{$t('MarketingActi.commName')}}</span>
<el-autocomplete style="width:350px" v-model="GoodsIDs" :fetch-suggestions="remoteMethod" :placeholder="$t('pub.pleaseImport')"
@select="forceUpdate" @blur="spget()" :trigger-on-focus="false"></el-autocomplete>
<span style="margin:0 10px">{{$t('objFill.v101.FinancialModule.daili')}}</span>
<el-autocomplete v-model="OneUserId" :fetch-suggestions="querySearchAsync" :placeholder="$t('pub.pleaseImport')"
@select="handleSelect" @blur="dlget()" :trigger-on-focus="false"></el-autocomplete>
</div>
</div>
<div style="padding: 10px 20px;background: #fff;margin-top: 10px">
<div class="Subtotal">
<div class="Subtotal_item" style="margin:15px">
<div style='width:100%;border-bottom:1px solid #f2f2f2'>
<i class="iconfont icon-qian groupTourOrder_count_green" style="font-size:12px"></i>
<span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yinyeshour')}}</span>
</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.jiesuank')}}：</span>￥{{OrderProfitLoss.TotalFinal_Price}}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yunfei')}}：</span>￥{{OrderProfitLoss.TotalFreightMoney }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yishou')}}：</span>￥{{OrderProfitLoss.TotalAllPrice}}</div>
<div><span class='Subtotal_t'>{{$t('Operation.Op_weiShou')}}：</span>￥{{OrderProfitLoss.TotalNoAllPrice }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.hejishu')}}：</span>￥{{OrderProfitLoss.TotalPay}}</div>
</div>
<div class="Subtotal_item" style="margin:15px">
<div style='width:100%;border-bottom:1px solid #f2f2f2'>
<i class="iconfont icon-qian groupTourOrder_count_green" style="font-size:12px"></i>
<span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yinyecb')}}</span>
</div>
<div class="ProfitLoss">
<div class="ProfitLoss_xbox">
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.caigoucb')}}：</span> ￥{{OrderProfitLoss.TotalCostMoney }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.baozftx')}}：</span>￥{{OrderProfitLoss.TotalPackingMoney }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.kuaidifei')}}：</span>￥{{OrderProfitLoss.TotalCostFreight }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.shanpyftx')}}：</span>￥{{OrderProfitLoss.TotalGoodsFreight }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.fengsxj')}}：</span>￥{{OrderProfitLoss.TotalBranchCommission }}</div>
</div>
<div class="ProfitLoss_xbox" style="margin-left:60px">
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.zongdlxj')}}：</span>￥{{OrderProfitLoss.TotalGeneralAgentCommission }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.teyijifay')}}：</span>￥{{OrderProfitLoss.TotalSpecialCommission }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yijifany')}}：</span>￥{{OrderProfitLoss.TotalOneCommission }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.erjifany')}}：</span>￥{{OrderProfitLoss.TotalOneTwoCommission }}</div>
<div><span class='Subtotal_t'>{{$t('active.cl_qita')}}：</span>￥{{OrderProfitLoss.TotalOneOtherPrice }}</div>
</div>
<div class="ProfitLoss_xbox" style="margin-left:60px">
<div><span class='Subtotal_t'>{{$t('fnc.a_heji')}}：</span>￥{{OrderProfitLoss.TotalALLCommission }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.yifu')}}：</span>￥{{OrderProfitLoss.TotalPaid }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.v101.FinancialModule.weifu')}}：</span>￥{{OrderProfitLoss.TotalNoPaid }}</div>
<div><span class='Subtotal_t'>{{$t('objFill.maoli')}}：</span>￥{{OrderProfitLoss.TotalGrossProfit }}</div>
</div>
</div>
</div>
</div>
</div>
<el-table :data="tableData" v-loading="loading" header-cell-class-name="headClass" style="width: 100%" border>
<el-table-column :label="$t('objFill.v101.FinancialModule.shangpixx')" align="center">
<el-table-column :label="$t('hotel.order_Number')" prop="OrderNo" width="150" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.guge')" width="100" :show-overflow-tooltip='true'>
<template slot-scope="scope">
{{scope.row.GoodsName}}{{scope.row.Specification}}
<!--<p v-for="(item,index) in scope.row.Specification " :key="index">{{item}}</p>-->
</template>
</el-table-column>
<el-table-column :label="$t('fnc.danjia')" prop="Unit_Price" width="70"></el-table-column>
<el-table-column :label="$t('restaurant.res_Number')" prop="Number" width="70"></el-table-column>
<el-table-column :label="$t('hotel.hotel_Supplier')" prop="SupplierName" width="150" :show-overflow-tooltip='true'></el-table-column>
</el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.yinyeshour')" align="center">
<el-table-column :label="$t('objFill.v101.FinancialModule.jiesuank')" prop="Final_Price" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.yunfei')" prop="FreightMoney" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.yishou')" prop="AllPrice" width="70"></el-table-column>
<el-table-column :label="$t('Operation.Op_weiShou')" width="70">
<!--结算款-已收-->
<!--暂时写为0-->
<template slot-scope="scope">
<!--<p>{{scope.row.Final_Price - scope.row.FreightMoney}}</p>-->
<p>0</p>
</template>
</el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.hejishu')" prop="AllPrice" width="70"></el-table-column>
</el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.yinyecb')" align="center">
<el-table-column :label="$t('objFill.v101.FinancialModule.caigoucb')" prop="CostMoney" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.baozftx')" prop="PackingMoney" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.kuaidifei')" prop="CostFreight" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.shanpyftx')" prop="GoodsFreight" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.zonggsfy')" prop="GeneralAgentCommission" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.gonggsmc')" prop="GeneralAgentName" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.fengongsfy')" prop="BranchCommission" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.fengsmc')" prop="BranchName" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.teyijifay')" prop="SpecialCommission" width="70"></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.teyijimc')" prop="SpecialName" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.yijifany')" prop="OneCommission" width="70"></el-table-column>
<el-table-column :label="$t('fnc.yijimingcheng')" prop="OneUserName" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('objFill.v101.FinancialModule.erjifany')" prop="TwoCommission" width="70"></el-table-column>
<el-table-column :label="$t('fnc.erjimingcheng')" prop="TwoUserName" :show-overflow-tooltip='true'></el-table-column>
<el-table-column :label="$t('active.cl_qita')" prop="OtherPrice" width="70"></el-table-column>
<el-table-column :label="$t('fnc.a_heji')" prop="ALLCommission" width="70"></el-table-column>
</el-table-column>
<el-table-column prop="Paid" :label="$t('objFill.v101.FinancialModule.yifu')" width="70"></el-table-column>
<el-table-column prop="NoPaid" :label="$t('fnc.yingfu')" width="70"></el-table-column>
<el-table-column prop="GrossProfit" :label="$t('objFill.maoli')" width="70"></el-table-column>
<el-table-column prop="GrossProfitRate" :label="$t('objFill.maolilv')" width="70"></el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
layout="prev, pager, next" :total="count">
</el-pagination>
</div>
</template>
<script>
export default {
name: "OrderProfitLossList",
data() {
return {
value: '',
msg: {
pageIndex: 1,
pageSize: 10,
SupplierId: 0,
StartDate: '',
EndDate: '',
OrderNo: '', //订单号
GoodsID: 0,
OneUserId: 0,
},
options: [],
tableData: [],
searchList: [],
count: 0,
loading: false,
GoodsIDs: '', //商品id
OneUserId: '', //代理
OrderProfitLoss: {}, //小计
}
},
created() {
this.getDateList()
this.getSupplierList()
this.getTotalOrderProfitLoss()
},
methods: {
getDateList() {
if (this.value != '' && this.value != null) {
this.msg.StartDate = this.value[0];
this.msg.EndDate = this.value[1];
}
this.loading = true;
this.mallapipost("/api/LiveHouse/GetOrderProfitLossList", this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.tableData = res.data.data.pageData;
this.count = res.data.data.count;
} else {
this.Info(res.data.message);
}
})
},
getSupplierList() { //获取供应商接口
this.mallapipost("/api/LiveHouse/GetSupplierAllList", {}, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.options = res.data.data;
}
});
},
getTotalOrderProfitLoss() {
this.mallapipost("/api/LiveHouse/GetTotalOrderProfitLoss", {}, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.OrderProfitLoss = res.data.data;
}
});
},
Export() {
let msg = {
SupplierId: this.msg.SupplierId,
StartDate: this.msg.StartDate,
EndDate: this.msg.EndDate,
}
msg = JSON.parse(JSON.stringify(msg));
this.GetMallLocalFile(
"/api/LiveHouse/GetOrderProfitLossExcel",
msg,
this.$t('objFill.v101.FinancialModule.shunyihs')+".xls"
);
},
remoteMethod(query, cb) {
let results = []
if (query !== '' && query.length >= 2) {
this.mallapipost("/api/LiveHouse/GetGoodsList", {
Name: query
}, res => {
if (res.data.resultCode == 1) {
res.data.data.forEach(x => {
let obj = {
value: x.Name,
Id: x.Id
}
results.push(obj)
});
}
}, err => {});
} else {
this.msg.GoodsID = 0
this.msg.pageIndex = 1
this.getDateList();
}
cb(results);
},
forceUpdate(item) {
if (item) {
this.msg.GoodsID = item.Id;
} else {
this.msg.GoodsID = 0
}
this.msg.pageIndex = 1
this.getDateList();
},
spget() {
if (this.GoodsIDs == '') {
this.msg.GoodsID = 0
this.msg.pageIndex = 1
this.getDateList();
}
},
querySearchAsync(queryString, cb) {
let results = []
if (queryString !== '' && queryString.length >= 1) {
this.mallapipost("/api/LiveHouse/GetDistributorInfoList", {
Name: queryString
}, res => {
if (res.data.resultCode == 1) {
res.data.data.forEach((x) => {
let obj = {
value: x.Name,
UserId: x.UserId,
}
results.push(obj)
})
}
}, err => {});
} else {
this.msg.OneUserId = 0
this.msg.pageIndex = 1
this.getDateList();
}
cb(results);
},
handleSelect(item) {
if (item) {
this.msg.OneUserId = item.UserId;
} else {
this.msg.OneUserId = 0
}
this.msg.pageIndex = 1
this.getDateList();
},
dlget() {
if (this.OneUserId == '') {
this.msg.OneUserId = 0
this.msg.pageIndex = 1
this.getDateList();
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getDateList();
},
change(val) {
if (val == null) {
this.value = '';
this.msg.StartDate = '';
this.msg.EndDate = '';
}
this.msg.pageIndex = 1;
this.getDateList();
},
}
}
</script>
<style>
.OrderProfitLossList .el-card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 18px 20px;
}
.OrderProfitLossList .el-button--small {
padding: 9px 15px;
}
.OrderProfitLossList .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
margin-left: 20px;
}
.OrderProfitLossList .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.OrderProfitLossList .content .searchInput {
line-height: normal;
display: inline-table;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
}
.OrderProfitLossList .content {
background: #fff;
margin-top: 10px;
padding: 15px;
box-sizing: border-box;
}
.OrderProfitLossList .el-icon-date {
line-height: 24px;
}
.OrderProfitLossList .el-range-separator {
line-height: 24px;
}
.OrderProfitLossList .just {
color: rgb(104, 207, 61)
}
.OrderProfitLossList .negative {
color: red
}
.OrderProfitLossList .el-input__icon {
line-height: 24px;
}
.OrderProfitLossList .el-table td,
.el-table th {
padding: 3px 0;
}
.OrderProfitLossList .el-table {
font-size: 13px;
}
.OrderProfitLossList .el-select__tags-text {
display: inline-block;
width: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.OrderProfitLossList .el-select__tags {
max-width: 400px;
}
.OrderProfitLossList .Subtotal {
width: 100%;
margin: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
background: #f2f2f2;
font-size: 12px;
}
.OrderProfitLossList .Subtotal_item {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 50px;
background: #fff;
padding: 20px;
}
.OrderProfitLossList .Subtotal_item .Subtotal_t {
margin: 3px 0;
font-size: 12px;
width: 90px;
display: inline-block;
}
.OrderProfitLossList .ProfitLoss {
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
}
.OrderProfitLossList .ProfitLoss_xbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #fff;
}
</style>