<script setup>
|
import {onMounted, reactive, ref} from "vue";
|
import request from "@/utils/request.js";
|
import userInfo from '@/stores/userInfo'
|
import footSum from "@/hook/footSum";
|
import OrderDetailView from "@/views/order/OrderDetailView.vue";
|
|
const user=userInfo()
|
const value = ref(["",""])
|
const xGrid = ref()
|
const dialogVisible = ref(false)
|
const checkOrderId = ref(null)
|
const gridOptions = reactive({
|
loading:false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {height: 30,isCurrent:true},//鼠标移动或选择高亮
|
id: 'OrderReport',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
showOverflow:true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
columns:[
|
{field: 'orderId',minWidth:120, title: '订单编号'},
|
{field: 'project',minWidth:120, title: '项目名称'},
|
{field: 'quantity',minWidth:120, title: '数量'},
|
{field: 'area',minWidth:120, title: '结算面积'},
|
{field: 'money',minWidth:120, title: '总金额'},
|
{field: 'createTime',minWidth:120, title: '下单日期'},
|
{field: 'deliveryDate',minWidth:120, title: '发货日期'},
|
{field: 'contacts',minWidth:120, title: '联系人 '},
|
{field: 'contactNumber',minWidth:120, title: '联系电话'},
|
{field: 'deliveryAddress',minWidth:120, title: '送货地址'}
|
|
],//表头按钮
|
toolbarConfig: {
|
buttons: [],
|
slots: {
|
buttons: "toolbaruttons"
|
}
|
},
|
data: [
|
],//table body实际数据
|
footerMethod ({ columns, data }) {//页脚函数
|
const list = ['quantity', 'area', 'money']
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计'
|
}
|
if (list.includes(column.field)) {
|
return footSum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
|
})
|
const gridEvents = {
|
cellClick({ row }){
|
dialogVisible.value = true
|
checkOrderId.value = row.orderId
|
}
|
}
|
|
onMounted(()=>{
|
getOrderHistory()
|
})
|
const getOrderHistory = () => {
|
const params = {
|
customerId:user.user.customerId,
|
searchDate:value.value
|
}
|
request.post('/order/getFinishedOrder',params).then(res=>{
|
if (res.code === 200) {
|
xGrid.value.reloadData(res.data.orders)
|
value.value = res.data.searchDate
|
}
|
})
|
}
|
|
const sumNum = (list, field) => {
|
let count = 0
|
list.forEach(item => {
|
count += Number(item[field])
|
})
|
return count.toFixed(2)
|
}
|
</script>
|
|
<template>
|
<div class="page" >
|
|
<vxe-grid
|
@filter-change="filterChanged"
|
height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<template #toolbaruttons>
|
<el-date-picker
|
@change="getOrderHistory"
|
v-model="value"
|
type="daterange"
|
start-placeholder=""
|
end-placeholder=""
|
value-format="YYYY-MM-DD"
|
/>
|
</template>
|
|
</vxe-grid>
|
|
<el-dialog v-model="dialogVisible" fullscreen>
|
<template #header>
|
<el-text size="large" style="font-weight: bolder">详情</el-text>
|
</template>
|
<order-detail-view
|
:orderId = "checkOrderId"/>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.page{
|
width: 100%;
|
height:calc(100vh - 5.5rem);
|
}
|
:deep(.el-dialog__body){
|
height: 90vh;
|
width: 100%;
|
}
|
</style>
|
