<template>
<div>
<div class="search-box" style="gap: 16px;margin-bottom: 20px">
<div class="search-left">
<el-input
v-model="seacrchVal"
placeholder="请输入商户名称"
@change="onChange"
clearable
/>
<div style="margin:0px 20px">
<el-button @click="searchFor" type="primary">查询</el-button>
</div>
<el-button type="" @click="exportExcel">导出 <i class="el-icon-download el-icon--right" /></el-button>
</div>
<TimeSelect @transTime="onTimeChange" />
</div>
<div class="item-table">
<el-table v-loading="tableLoading" :data="tableData" border>
<el-table-column label="商户" prop="censusNameText" fixed />
<!-- :fixed="index==12? 'right': false" -->
<el-table-column v-for="(item, indexVal) in timeList" :key="indexVal" :label="item" align="center">
<el-table-column label="销售批次">
<template slot-scope="scope">
<span
class="row-item"
:class="{ 'is-morebig': scope.row.childArrayList[indexVal].itemTimeCountVal.orderQuantity > 0 }"
@click="itemClickFun(indexVal, scope.row)"
>
<span>{{ scope.row.childArrayList[indexVal].itemTimeCountVal.orderQuantity }}</span>
</span>
</template>
</el-table-column>
<el-table-column label="进货批次">
<template slot-scope="scope">
<span
class="row-item"
:class="{ 'is-morebig': scope.row.childArrayList[indexVal].itemTimeCountVal.regQuantity > 0 }"
@click="itemClickFun(indexVal, scope.row)"
>
<span>{{ scope.row.childArrayList[indexVal].itemTimeCountVal.regQuantity }}</span>
</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
import statisticsReport from '@/api/report-statistics'
import TimeSelect from '../components/TimeSelect.vue'
import { ChangeTons } from '@/utils/index'
import { createWs, sheet2Blob, saveXlsx } from "./excel"
export default {
components: {
TimeSelect
},
data() {
return {
seacrchVal: '',
timeList: [],
tableData: [],
searchOriginalList: [],
yearVal: dayjs().format('YYYY'),
monthVal: '',
dayVal: '',
originCityName: '',
originProvinceName: '',
KindsVisible: false,
stallAreaId: '',
tableLoading: false,
marketId: '8b188f986f1311eebd9b1c1b0dc7da9c',
selectOptions: [],
enterpriseSelectIds: [],
AllData: [],
excelName: '商户进销统计' + new Date().getTime(),
IncludeUseBusiness: [],
stateType: 'haveSale',
infos: {
orderQuantity: '销售批次',
regQuantity: '进货批次'
},
dateType: '月',
months: {
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
7: '七',
8: '八',
9: '九',
10: '十',
11: '十一',
12: '十二',
13: '合计'
}
}
},
mounted() {
this.loadData()
},
methods: {
fuzzySearch(keyword) {
return this.searchOriginalList.filter((item) => {
const regexp = new RegExp(`${keyword}`, 'i') // i参数表示不区分大小写
return Object.values(item).some((value) => typeof value === 'string' && regexp.test(value))
})
},
searchFor() {
if (this.seacrchVal === '') {
// alert(1)
}
const searchData = this.fuzzySearch(this.seacrchVal)
const rowEnd = {
censusNameText: '合计',
childArrayList: this.getTotalByArray(searchData)
}
this.tableData = searchData.concat(rowEnd)
},
clear() {
this.getCommonGoods()
},
onChange() {
if (this.seacrchVal === '') {
this.clear()
}
},
handleExportData(rawData) {
const exportData = []
rawData.forEach((obj) => {
const newObj = { name: obj.name }
for (const key in obj) {
if (key !== 'name') {
const value = obj[key]
for (const info in this.infos) {
newObj[`${key}_${info}`] = value[`${info}`]
}
}
}
exportData.push(newObj)
})
return exportData
},
handleExportField(exportData) {
if (exportData.length) return Object.keys(exportData[0])
return []
},
handleExportTitle() {
const obj = { name: '商户' }
for (const month in this.months) {
for (const info in this.infos) {
if (info === 'orderQuantity') {
obj[`month_${month}_orderQuantity`] = `${this.months[month]}` + this.dateType
}
}
}
return obj
},
firstLine() {
const obj = {
name: '商户'
}
for (const month in this.months) {
for (const info in this.infos) {
obj[`month_${month}_${info}`] = this.infos[info]
}
}
return obj
},
exportExcel() {
const conditionList = this.tableData[0].childArrayList
let buildObj = {}
if (conditionList.length > 13) {
this.dateType = '日'
for (let i = 0; i < conditionList.length; i++) {
buildObj[i + 1] = this.yearVal + '年' + this.monthVal + '月' + (i + 1)
if (i === conditionList.length - 1) {
buildObj[i + 1] = '合计'
}
}
this.months = buildObj
} else {
this.dateType = '月'
buildObj = {
1: this.yearVal + '年' + '一',
2: this.yearVal + '年' + '二',
3: this.yearVal + '年' + '三',
4: this.yearVal + '年' + '四',
5: this.yearVal + '年' + '五',
6: this.yearVal + '年' + '六',
7: this.yearVal + '年' + '七',
8: this.yearVal + '年' + '八',
9: this.yearVal + '年' + '九',
10: this.yearVal + '年' + '十',
11: this.yearVal + '年' + '十一',
12: this.yearVal + '年' + '十二',
13: this.yearVal + '年' + '合计'
}
this.months = buildObj
}
const newDATA = this.tableData.map((each, index) => {
const buildObj = {}
for (let i = 0; i < each.childArrayList.length; i++) {
buildObj['month_' + '' + (i + 1) ] = {
orderQuantity: each.childArrayList[i].itemTimeCountVal.orderQuantity,
regQuantity: each.childArrayList[i].itemTimeCountVal.regQuantity
}
}
return {
name: each.censusNameText,
...buildObj
}
})
this.changeData(newDATA)
},
changeData(newDATA) {
const that = this
let exportData = this.handleExportData(newDATA)
const exportField = this.handleExportField(exportData)
const exportTitle = this.handleExportTitle()
const exportDataFirstLine = this.firstLine()
exportData = [{ ...exportDataFirstLine }, ...exportData]
const ws = []
ws.push(createWs(exportData, exportField, exportTitle, '商户数据'))
saveXlsx(sheet2Blob(ws), that.excelName + '.xlsx')
},
loadData() {
this.getCommonGoods()
},
onMerchantChange() {
if (this.enterpriseSelectIds.length > 0) {
const newArr = []
this.AllData.map(item => {
if (this.enterpriseSelectIds.some(selectId => selectId === item.enterpriseId)) {
newArr.push(item)
}
})
this.tableData = newArr
} else {
this.tableData = this.AllData
}
},
itemClickFun(index, row) {
// this.$refs.detailDialog.show(
// this.marketId,
// row.enterpriseId,
// this.yearVal,
// this.monthVal,
// index, row
// )
},
onTimeChange(yearVal, monthVal) {
this.yearVal = yearVal
this.monthVal = monthVal
this.stateType = 'haveSale'
this.seacrchVal = ''
this.loadData()
},
// ccccccccc
countEachData(jsonArray) {
var sumOrder = 0
var sumReg = 0
for (var i = 0; i < jsonArray.length; i++) {
var orderNum = jsonArray[i].orderQuantity
var regNum = jsonArray[i].regQuantity
sumOrder += orderNum
sumReg += regNum
}
return {
monthOrDayVal: jsonArray.length,
itemTimeCountVal: {
orderQuantity: sumOrder,
regQuantity: sumReg
}
}
},
// gggggggggggggg
getCommonGoods() {
var that = this
const postpaeams = {
year: this.yearVal,
month: this.monthVal
}
this.tableLoading = true
statisticsReport.purchaSalesCount(postpaeams)
.then(res => {
const resdata = res.data
this.$forceUpdate()
this.timeList = resdata.headers
this.timeList.push('合计')
const provincesFloor = resdata.rows.map((item) => {
const cityFloor = item.values.map((each, index) => {
return {
monthOrDayVal: index,
itemTimeCountVal: {
orderQuantity: each.orderQuantity,
regQuantity: each.regQuantity
}
}
})
var buildNewArray = cityFloor
buildNewArray.push(that.countEachData(item.values))
return {
censusNameText: item.rowKey.name,
childArrayList: buildNewArray
}
})
console.log(provincesFloor)
this.searchOriginalList = provincesFloor
// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
const rowEnd = {
censusNameText: '合计',
childArrayList: this.getTotalByArray(provincesFloor)
}
var buildData = provincesFloor
// buildData.concat(rowEnd)
// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
this.tableData = buildData.concat(rowEnd)
}).finally(() => {
this.tableLoading = false
})
},
getTotalByArray (sourceData) {
const col = sourceData[0].childArrayList.length
const row = sourceData.length
const result = []
for (var i = 0; i < col; i++) {
var temp = []
for (var j = 0; j < row; j++) {
temp.push(sourceData[j].childArrayList[i])
}
// console.log(temp); // 代码块一
const tatalorder = temp.reduce((total, item) => {
return total + item.itemTimeCountVal.orderQuantity
}, 0)
const tatalreg = temp.reduce((total, item) => {
return total + item.itemTimeCountVal.regQuantity
}, 0)
result.push({
monthOrDayVal: i,
itemTimeCountVal: {
orderQuantity: tatalorder,
regQuantity: tatalreg
}
})
}
return result
}
}
}
</script>
<style scoped>
/* @import "../../components/statistics.css"; */
.martop {
margin-top: 50px;
}
.search-box {
display: flex;
justify-content: space-between;
}
.row-item {
cursor: pointer;
}
.is-morebig {
color: #409eff;
}
.search-left {
display: flex;
align-items: center;
}
</style>
网友评论