<template>
|
<el-card shadow="never" class="aui-card--fill">
|
<div class="mod-app">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form-item>
|
<span>统计日期：</span>
|
<el-date-picker
|
v-model="dataForm.rq"
|
type="date"
|
:clearable="true"
|
value-format="yyyy-MM-dd"
|
placeholder="日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="openForm()">{{ $t('add') }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="exportExcel()">导出</el-button>
|
</el-form-item>
|
<div style="float: right">
|
<el-form-item>
|
<span>月初：</span>
|
<el-date-picker
|
v-model="dataForm.monthStart"
|
type="date"
|
readonly
|
value-format="yyyy-MM-dd">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<span>年初：</span>
|
<el-date-picker
|
v-model="dataForm.yearStart"
|
type="date"
|
readonly
|
value-format="yyyy-MM-dd">
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
</el-form>
|
<el-table
|
ref="table"
|
id="listTable"
|
v-loading="dataListLoading"
|
:data="dataList"
|
border
|
style="width: 100%;"
|
show-summary
|
:summary-method="getSummaries">
|
<el-table-column type="index" header-align="center" align="center" min-width="50" label="序号"></el-table-column>
|
<el-table-column prop="lsh" header-align="center" align="center" label="流水号" min-width="200"></el-table-column>
|
<el-table-column prop="rq" header-align="center" align="center" label="日期" min-width="100"></el-table-column>
|
<el-table-column prop="bcName" header-align="center" align="center" label="班次" min-width="100"></el-table-column>
|
<el-table-column prop="xslxName" header-align="center" align="center" label="销售类型" min-width="100"></el-table-column>
|
<el-table-column prop="xsmzName" header-align="center" align="center" label="产品销售煤种" min-width="150"></el-table-column>
|
<el-table-column header-align="center" align="center" label="内报量(吨)">
|
<el-table-column prop="nbdrl" header-align="center" align="center" label="当日" min-width="150">
|
<template slot-scope="scope">
|
<span style="color: red">{{scope.row.nbdrl}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nbtzl" header-align="center" align="center" label="累计调整量" min-width="150"></el-table-column>
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="外报量(吨)">
|
<el-table-column prop="wbdrl" header-align="center" align="center" label="当日" min-width="150">
|
<template slot-scope="scope">
|
<span style="color: red">{{scope.row.wbdrl}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="wbtzl" header-align="center" align="center" label="累计调整量" min-width="150"></el-table-column>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="bz" header-align="center" align="center" label="备注" min-width="200"></el-table-column>
|
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" min-width="100">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="openForm(scope.row.id)">修改</el-button>
|
<el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-row style="margin-top: 6px">
|
<el-col :span="4">
|
<dict-select-tag v-model="dataForm.xslx" clearable placeholder="销售类型" dictCode="sales-type"/>
|
<el-button @click="exportStatisticsExcel()">导出</el-button>
|
</el-col>
|
<el-col :span="20">
|
<el-pagination
|
:current-page="page"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="limit"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="pageSizeChangeHandle"
|
@current-change="pageCurrentChangeHandle">
|
</el-pagination>
|
</el-col>
|
</el-row>
|
<el-table
|
ref="statisticsTable"
|
id="statisticsTable"
|
v-loading="dataListLoading"
|
:data="statisticsList"
|
show-summary
|
:summary-method="getStatisticsSummaries"
|
default-expand-all
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
<el-table-column type="expand" min-width="50" prop="xslxName" label="" class-name="销售类型">
|
<template slot-scope="props">
|
<el-table
|
id="childTable"
|
class="table-in-table"
|
:data="props.row.children"
|
:show-header="false"
|
show-summary
|
:summary-method="getChildSummaries">
|
<el-table-column min-width="50"></el-table-column>
|
<el-table-column prop="xsmzName" header-align="center" align="center" label="产品销售煤种" min-width="327"></el-table-column>
|
<el-table-column header-align="center" align="center" label="内报量(吨)">
|
<el-table-column prop="nbDaySum" header-align="center" align="center" label="当日" min-width="210">
|
<template slot-scope="scope">
|
<span style="color: red">{{scope.row.nbDaySum}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nbMonthSum" header-align="center" align="center" label="月累计" min-width="210"></el-table-column>
|
<el-table-column prop="nbYearSum" header-align="center" align="center" label="年累计" min-width="210"></el-table-column>
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="外报量(吨)">
|
<el-table-column prop="wbDaySum" header-align="center" align="center" label="当日" min-width="210">
|
<template slot-scope="scope">
|
<span style="color: red">{{scope.row.wbDaySum}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="wbMonthSum" header-align="center" align="center" label="月累计" min-width="210"></el-table-column>
|
<el-table-column prop="wbYearSum" header-align="center" align="center" label="年累计" min-width="209"></el-table-column>
|
</el-table-column>
|
</el-table>
|
</template>
|
</el-table-column>
|
<el-table-column prop="xsmzName" header-align="center" align="center" label="产品销售煤种" min-width="327">
|
<template slot-scope="scope">
|
<span style="color: blue">销售类型：{{scope.row.xslxName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="内报量(吨)">
|
<el-table-column prop="nbDaySum" header-align="center" align="center" label="当日" min-width="210"></el-table-column>
|
<el-table-column prop="nbMonthSum" header-align="center" align="center" label="月累计" min-width="210"></el-table-column>
|
<el-table-column prop="nbYearSum" header-align="center" align="center" label="年累计" min-width="210"></el-table-column>
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="外报量(吨)">
|
<el-table-column prop="wbDaySum" header-align="center" align="center" label="当日" min-width="210"></el-table-column>
|
<el-table-column prop="wbMonthSum" header-align="center" align="center" label="月累计" min-width="210"></el-table-column>
|
<el-table-column prop="wbYearSum" header-align="center" align="center" label="年累计" min-width="210"></el-table-column>
|
</el-table-column>
|
</el-table>
|
<!-- 弹窗, 新增 / 修改 -->
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import mixinViewModule from '@/mixins/view-module'
|
import AddOrUpdate from './list-add-or-update'
|
import DictSelectTag from '@/components/dict/dict-select-tag'
|
import {exportByDom} from "../../../../../utils/exportUtil";
|
export default {
|
mixins: [mixinViewModule],
|
data () {
|
return {
|
mixinViewModuleOptions: {
|
getDataListURL: '/iailab-iems-coal-proddisp/sale/volume/list',
|
getDataListIsPage: true,
|
deleteURL: '/iailab-iems-coal-proddisp/sale/volume',
|
deleteIsBatch: true,
|
},
|
dataForm: {
|
rq: (new Date()).Format('yyyy-MM-dd'),
|
monthStart: '',
|
yearStart: '',
|
xslx: ''
|
},
|
statisticsList: []
|
}
|
},
|
components: {
|
AddOrUpdate,
|
DictSelectTag
|
},
|
created () {
|
if (this.mixinViewModuleOptions.createdIsNeed) {
|
this.query()
|
this.statisticsInit()
|
}
|
},
|
methods: {
|
getDataList: function () {
|
this.page = 1
|
this.query()
|
this.statisticsInit()
|
},
|
statisticsInit () {
|
this.$http.get(
|
'/iailab-iems-coal-proddisp/sale/volume/statistics',
|
{
|
params: {
|
...this.dataForm
|
}
|
}).then(({ data: res }) => {
|
if (res.code !== 0) {
|
return this.$message.error(res.msg)
|
}
|
this.statisticsList = res.list
|
this.dataForm.monthStart = res.monthStart
|
this.dataForm.yearStart = res.yearStart
|
}).catch(() => {})
|
},
|
getSum (param, type) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (type === 'listSum') {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
if (index === 1 || index === 2 || index === 3 || index === 4 || index === 9) {
|
sums[index] = ''
|
return
|
}
|
} else if (type === 'statisticsSum') {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
if (index === 1) {
|
sums[index] = ''
|
return
|
}
|
} else if (type === 'childSum') {
|
if (index === 0) {
|
sums[index] = '小计'
|
return
|
}
|
if (index === 1) {
|
sums[index] = ''
|
return
|
}
|
}
|
let values = []
|
if (type === 'statisticsSum') {
|
// values = this.statisticsList[index].children?.map(item => Number(item[column.property]))
|
let temp = []
|
for (let item of data) {
|
temp = item.children.map(x => Number(x[column.property]))
|
values = values.concat(temp)
|
}
|
} else {
|
values = data.map(item => Number(item[column.property]))
|
}
|
if (!values?.every(value => isNaN(value))) {
|
sums[index] = values?.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!isNaN(value)) {
|
return prev + curr
|
} else {
|
return prev
|
}
|
}, 0)
|
sums[index] = sums[index].toFixed(2);
|
} else {
|
sums[index] = ''
|
}
|
})
|
|
return sums
|
},
|
getSummaries(param) {
|
return this.getSum(param, 'listSum')
|
},
|
getStatisticsSummaries(param) {
|
return this.getSum(param, 'statisticsSum')
|
},
|
getChildSummaries(param) {
|
return this.getSum(param, 'childSum')
|
},
|
exportExcel () {
|
let dom = this.$refs.table
|
exportByDom(dom, undefined, '销售量统计')
|
},
|
exportStatisticsExcel () {
|
let dom = this.$refs.statisticsTable
|
exportByDom(dom, undefined, '销售量合计统计')
|
}
|
},
|
watch: {
|
'dataForm.xslx' :{
|
handler: function () {
|
this.statisticsInit()
|
},
|
immediate: false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
/deep/ .el-table__footer-wrapper tbody td,
|
.el-table__header-wrapper tbody td {
|
background-color: #e3f3ff !important
|
}
|
/deep/ .el-table__footer-wrapper .is-leaf {
|
background-color: #e3f3ff !important
|
}
|
/deep/ .el-table__fixed-footer-wrapper tbody td {
|
border-top: 1px solid #ebeef5;
|
background-color: #e3f3ff;
|
font-weight: bold;
|
color: #f50b0b;
|
text-align: center !important;
|
}
|
/deep/ #listTable .has-gutter tr td .cell {
|
text-align: center;
|
font-weight: bold;
|
color: blue;
|
}
|
/deep/ #statisticsTable .has-gutter tr td .cell {
|
text-align: center;
|
font-weight: bold;
|
color: red;
|
}
|
/deep/ #childTable .has-gutter tr td .cell{
|
text-align: center;
|
font-weight: bold;
|
color: blue;
|
}
|
/deep/ .el-table td div {
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
/*margin-top: -6px;*/
|
}
|
.table-in-table {
|
border-top: 0px;
|
}
|
</style>
|
