<script setup>
|
import {Search} from "@element-plus/icons-vue"
|
import {defineEmits, onMounted, reactive, ref, watch} from "vue"
|
import {changeFilterEvent} from "@/hook"
|
import request from "@/utils/request"
|
import exportExcel from "@/hook/exportExcel"
|
import {addListener,exportData} from "@/hook/mouseMove"
|
import deepClone from "@/utils/deepClone";
|
import {ElMessage} from "element-plus";
|
import * as XLSX from "xlsx";
|
import {useI18n} from "vue-i18n";
|
import useOrderInfoStore from "@/stores/sd/order/orderInfo";
|
|
const { t } = useI18n()
|
const xGrid = ref()
|
let filterData = ref({})
|
const orderInfo = useOrderInfoStore()
|
const gridOptions = reactive({
|
loading:true,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
id: 'OrderReport',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true,gt:0 },//开启虚拟滚动
|
scrollX:{ enabled: true,gt:5 },//开启虚拟滚动
|
showOverflow:true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},//表头参数
|
menuConfig: {
|
body: {
|
options: [
|
[
|
|
{ code: 'exportExcelChecked', name: t('components.exportSelected'), prefixIcon: 'vxe-icon-download', visible: true }
|
]
|
]
|
}
|
},
|
columns:[
|
|
],//表头按钮
|
toolbarConfig: {
|
buttons: [],
|
slots: {
|
tools: 'toolbar_buttons',
|
buttons:'buttons'
|
},
|
// import: false,
|
// export: true,
|
// print: true,
|
zoom: true,
|
custom: true
|
},
|
data: [
|
],//table body实际数据
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return t('basicData.total')
|
}
|
if (props.childrenData.footList.includes(column.field)) {
|
return sumNum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
|
})
|
const gridEvents = {
|
menuClick ({ menu, row, column }) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (menu.code) {
|
case 'exportExcelChecked': {
|
let result = exportData()
|
if(result){
|
// 将数据转换为 worksheet 对象
|
const worksheet = XLSX.utils.aoa_to_sheet(result);
|
const workbook = XLSX.utils.book_new();
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
XLSX.writeFile(workbook, `${props.childrenData.exportName}.xlsx`);
|
}
|
break
|
}
|
}
|
}
|
}
|
}
|
|
|
const props = defineProps({
|
childrenData:{
|
Object,
|
default: ''
|
}
|
})
|
const basicProp = ref({
|
pageSize : 10000,//页面显示数量
|
pageNum:1,//当前页
|
selectDate:['',''],//查询的日期
|
pageTotal : 0,//总页数
|
dataTotal : 0,//数据总条数
|
})
|
const sumNum = (list, field) => {
|
let count = 0
|
list.forEach(item => {
|
count += Number(item[field])
|
})
|
return count.toFixed(2)
|
}
|
|
//合并显示其他列
|
const handleDynamicColumns = (data,title) => {
|
// 1. 收集所有行的otherColumns字段（去重）
|
const allOtherFields = new Set();
|
data.forEach(row => {
|
if (!row || !row.otherColumns) return;
|
|
let parsedOtherColumns;
|
try {
|
// 核心：将字符串解析为JSON
|
parsedOtherColumns = JSON.parse(row.otherColumns);
|
} catch (e) {
|
console.error('解析otherColumns失败：', e, '原始数据：', row.otherColumns);
|
return;
|
}
|
|
// 2. 从解析后的JSON中收集字段（支持数组或对象格式）
|
if (Array.isArray(parsedOtherColumns)) {
|
// 数组格式：[{ key: 'field1', label: '字段1', value: '值1' }, ...]
|
parsedOtherColumns.forEach(item => {
|
if (item.key) allOtherFields.add(item.key);
|
});
|
} else if (typeof parsedOtherColumns === 'object' && parsedOtherColumns !== null) {
|
// 对象格式：{ field1: { label: '字段1', value: '值1' }, ... }
|
Object.keys(parsedOtherColumns).forEach(key => {
|
allOtherFields.add(key);
|
});
|
}
|
});
|
|
// 2. 生成动态子列（作为processList的children）
|
const otherColumns = Array.from(allOtherFields).map(field => {
|
// 尝试获取字段对应的label（优先取第一个出现的label）
|
let label=field;
|
title.forEach(item=>{
|
if(field==item.column){
|
label=item.alias
|
}
|
})
|
return {
|
title: label,
|
field: `otherColumnsJson.${field}`,
|
width: 120,
|
align: 'center',
|
// 处理字段值显示（兼容数组/对象类型的otherColumns）
|
formatter: ({ row }) => {
|
return row.otherColumnsJson?.[field] || '';
|
|
}
|
};
|
});
|
|
// 3. 定义父级列processList，包含动态子列
|
const processList = {
|
title: t('basicData.otherColumns'),
|
field: 'process',
|
children: otherColumns // 将动态列作为子列
|
};
|
|
// 4. 先移除已存在的process列（避免重复），再添加新列
|
gridOptions.columns = gridOptions.columns.filter(col => col.field !== 'process');
|
gridOptions.columns.push(processList);
|
}
|
|
|
|
|
watch(props, (newVal) => {
|
xGrid.value.loadData(props.childrenData.data)
|
gridOptions.loading = false
|
})
|
onMounted(() => {
|
gridOptions.columns = props.childrenData.columns
|
getReportData()
|
addListener(xGrid.value,gridOptions)
|
})
|
function filterChanged(column){
|
//gridOptions.loading=true
|
//筛选条件发生变化条件发生变化
|
let value = column.datas[0]!=undefined?column.datas[0]:''
|
value = value.trim()
|
//判断是否存在外键
|
if (column.property.indexOf('.')>-1){
|
const columnArr = column.property.split('.')
|
filterData.value[columnArr[0]] = {
|
[columnArr[1]]:value
|
}
|
}else{
|
filterData.value[column.property] = value
|
}
|
|
gridOptions.loading = true
|
getReportData()
|
|
}
|
|
const handlePageChange = ({ currentPage, pageSize }) => {
|
basicProp.value.pageNum = currentPage
|
basicProp.value.pageTotal = pageSize
|
gridOptions.loading = true
|
getReportData()
|
}
|
const dateChanged = () => {
|
gridOptions.loading = true
|
getReportData()
|
}
|
|
const getReportData = () => {
|
if(props.childrenData.model!=null){
|
request.post(`${props.childrenData.url}/${basicProp.value.pageNum}/${basicProp.value.pageSize}/${orderInfo.reportFormDate}/${props.childrenData.model}/${props.childrenData.scope}`,filterData.value).then(res => {
|
if(res.code === '200'){
|
props.childrenData.data = res.data.data
|
basicProp.value.pageTotal = res.data.total.pageTotal
|
basicProp.value.dataTotal = res.data.total.total
|
orderInfo.reportFormDate = res.data.selectDate
|
|
//订单明细报表
|
if (props.childrenData.url === '/order/getOrderReport') {
|
const dataList = res.data.data || [];
|
handleDynamicColumns(dataList,res.data.title)
|
}
|
}
|
})
|
return
|
}
|
request.post(`${props.childrenData.url}/${basicProp.value.pageNum}/${basicProp.value.pageSize}/${orderInfo.reportFormDate}`,filterData.value).then(res => {
|
if(res.code === '200'){
|
props.childrenData.data = res.data.data
|
basicProp.value.pageTotal = res.data.total.pageTotal
|
basicProp.value.dataTotal = res.data.total.total
|
orderInfo.reportFormDate = res.data.selectDate
|
|
|
}
|
})
|
}
|
|
const exportEvent = () => {
|
const $table = xGrid.value
|
if ($table) {
|
$table.exportData({
|
filename: 'order_export',
|
sheetName: 'Sheet1',
|
type: 'xlsx'
|
})
|
}
|
}
|
|
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<div class="head">
|
<el-date-picker
|
v-model="orderInfo.reportFormDate"
|
type="daterange"
|
:start-placeholder="$t('basicData.startDate')"
|
:end-placeholder="$t('basicData.endDate')"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
<el-button
|
@click="dateChanged"
|
id="searchButton"
|
type="primary"
|
style="margin-top: -5px"
|
:icon="Search">{{$t('basicData.search')}}</el-button>
|
</div>
|
<div class="main-table">
|
<vxe-grid
|
@filter-change="filterChanged"
|
height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<!-- 下拉显示所有信息插槽-->
|
<template #content="{ row }">
|
<ul class="expand-wrapper">
|
<li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined && index>9">
|
<span style="font-weight: bold">{{item.title+': '}}</span>
|
<span>{{ row[item.field] }}</span>
|
</li>
|
</ul>
|
</template>
|
<!-- 下拉筛选插槽-->
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="text"
|
v-model="option.data"
|
@keyup.enter.native="$panel.confirmFilter()"
|
@input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #toolbar_buttons>
|
<vxe-button icon="vxe-icon-download" circle
|
style="margin-right: 0.5rem"
|
@click="exportEvent" />
|
|
<vxe-button icon="vxe-icon-cloud-download" style="margin-right: 0.5rem"
|
circle
|
@click="exportExcel(props.childrenData.exportUrl,
|
props.childrenData.exportName,
|
orderInfo.reportFormDate)" />
|
|
</template>
|
<template #buttons>
|
<slot name="buttons"></slot>
|
</template>
|
|
|
<template #pager>
|
<!--使用 pager 插槽-->
|
<!-- 'PrevJump','NextJump', -->
|
<vxe-pager
|
@page-change="handlePageChange"
|
:layouts="[ 'PrevPage', 'Jump','PageCount', 'NextPage', 'Total']"
|
v-model:current-page="basicProp.pageNum"
|
v-model:page-size="basicProp.pageSize"
|
v-model:pager-count="basicProp.pageTotal"
|
:total="basicProp.dataTotal"
|
>
|
</vxe-pager>
|
</template>
|
</vxe-grid>
|
|
</div>
|
</div>
|
</template>
|
|
<style scoped >
|
.main-div {
|
width: 100%;
|
height: 100%;
|
}
|
.el-col{
|
border: #181818 1px solid;
|
}
|
:deep(.el-table .el-input__wrapper) {
|
box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
|
cursor: default;
|
border: none !important;
|
background-color: transparent;
|
}
|
.head{
|
width: 100%;
|
height: 35px;
|
}
|
|
.main-table{
|
width: 100%;
|
height: calc(100% - 35px);
|
}
|
|
.vxe-grid {
|
/* 禁用浏览器默认选中 */
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
:deep(#product .el-dialog__body){
|
height: 90%;
|
width: 100%;
|
}
|
</style>
|
