<script setup>
|
import {onMounted, reactive, ref, watch} from "vue";
|
import {useI18n} from "vue-i18n"
|
import request from "@/utils/request"
|
import footSum from "@/hook/footSum"
|
import {multiply,multiplyAuto,divideAuto} from '@/utils/decimal'
|
const { t } = useI18n()
|
const xGrid = ref()
|
const gridOptions = reactive({
|
loading:false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
showOverflow:true,
|
showFooter: true,//显示脚
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
virtualScroll: true, // 开启虚拟滚动功能
|
id: 'OrderDetail',
|
scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
|
//scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
|
customConfig: {
|
storage: true
|
},
|
mouseConfig:{selected: true},//鼠标选中
|
keyboardConfig:{
|
isArrow: true
|
},
|
|
columns:[
|
{field: 'orderNumber', title: '自序', width: 80 },
|
{field: 'buildingNumber',width:120, title: '楼层编号'},
|
{field: 'productId',width:140, title: '产品ID'},
|
{field: 'productName',width:300, title: "产品"},
|
{field: 'otherColumns.S01',width:140, title: '编号'},
|
|
{field: 'width',width:120, title: '宽'},
|
{field: 'height',width:140, title: '高'},
|
{field: 'quantity',width:140, title: '数量'},
|
{field: 'processingNote',width:200, title: '加工要求'},
|
{field: 'computeArea',width:180, title: '结算单片面积'},
|
{field: 'computeGrossArea',width:200, title: '结算总面积'},
|
{field: 'price',width:160, title: '单价'},
|
{field: 'grossAmount',width:160, title: '金额'},
|
{field: 'remarks',width:140, title: '备注'},
|
{field: 'shape',width:120,
|
title: '形状',
|
slots: {default:'default_shape' }},
|
{field: 'bendRadius',width:160, title: '弯钢半径'},
|
{field: 'edgingType',width:160, title: '磨边类型'},
|
|
],
|
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计'
|
}
|
const List = ["quantity",'grossArea','area','computeGrossArea','computeArea','perimeter','grossAmount']
|
if (List.includes(column.field)) {
|
return footSum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
})
|
|
let props = defineProps({
|
orderId:null
|
})
|
|
|
onMounted(async ()=>{
|
//await getColumns()
|
await getDetail()
|
})
|
watch(()=>props.orderId,(newValue)=>{
|
getDetail()
|
})
|
|
const getColumns = async () => {
|
await request.post(`/basicOtherMoney/findAllByState`).then(res=>{
|
res.data.forEach(item => {
|
let column = {
|
field: `otherColumns.${item.column}`,
|
width:100,
|
title: item.alias,
|
editRender: {
|
name: 'input',
|
}
|
}
|
//columns.push(column)
|
gridOptions.columns.push(column)
|
|
})
|
})
|
}
|
|
const getDetail = async ()=> {
|
await request.post(`/order/getOrderDetail/${props.orderId}`).then(res=>{
|
console.log(res)
|
xGrid.value.reloadData(res.data)
|
})
|
}
|
|
const handleKeyDown = (evnt) =>{
|
if(evnt.$event.keyCode === 38 ){
|
let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) - 1;
|
if (nextRowIndex < xGrid.value.getTableData().fullData.length && nextRowIndex>=0) {
|
xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]);
|
}
|
|
}
|
if(evnt.$event.keyCode === 40 ){
|
|
let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) + 1;
|
if (nextRowIndex < xGrid.value.getTableData().fullData.length) {
|
xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]);
|
}
|
|
}
|
}
|
|
|
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<vxe-grid
|
height="100%"
|
size="mini"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
@keydown="handleKeyDown"
|
v-on="gridEvents"
|
>
|
|
|
<template #default_shape="{ row }">
|
<span>{{ row.shape==='1'?'普形':row.shape==='2'?'异形':null }}</span>
|
</template>
|
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
.vxe-grid {
|
/* 禁用浏览器默认选中 */
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
transform: translateZ(0);
|
}
|
|
|
</style>
|
