<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";
|
const xGrid = ref()
|
let filterData = ref({})
|
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 },//开启虚拟滚动
|
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: '导出选中', prefixIcon: 'vxe-icon-download', visible: true }
|
]
|
]
|
}
|
},
|
columns:[
|
|
],//表头按钮
|
toolbarConfig: {
|
buttons: [],
|
slots: {
|
tools: 'toolbar_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 '合计:'
|
}
|
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 : 100,//页面显示数量
|
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)
|
}
|
|
|
|
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 = () => {
|
request.post(`${props.childrenData.url}/${basicProp.value.pageNum}/${basicProp.value.pageSize}/${basicProp.value.selectDate}`,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
|
basicProp.value.selectDate = res.data.selectDate
|
}
|
})
|
}
|
|
|
|
|
</script>
|
|
<template>
|
<div class="main-div">
|
<el-date-picker
|
v-model="basicProp.selectDate"
|
type="daterange"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
<el-button
|
@click="dateChanged"
|
id="searchButton"
|
type="primary"
|
style="margin-top: -5px"
|
:icon="Search">查询</el-button>
|
<div class="order-detail">
|
<vxe-grid
|
@filter-change="filterChanged"
|
height="110%"
|
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="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #toolbar_buttons>
|
<vxe-button style="margin-right: 0.5rem"
|
@click="exportExcel(props.childrenData.exportUrl,
|
props.childrenData.exportName,
|
basicProp.selectDate)">
|
导出</vxe-button>
|
</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;
|
}
|
.order-primary{
|
width: 100%;
|
}
|
.order-detail{
|
width: 100%;
|
height: calc(100% - 30px);
|
|
}
|
|
.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>
|
