<script setup>
|
import {defineEmits, onMounted, reactive, ref, watch} from "vue"
|
import {useI18n} from "vue-i18n"
|
import {ElMessage} from "element-plus"
|
import useOrderInfoStore from "@/stores/sd/order/orderInfo"
|
const { t } = useI18n()
|
const xGrid = ref()
|
const orderInfo = useOrderInfoStore()
|
const gridOptions = reactive({
|
loading:false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
showOverflow:true,
|
id:'sizeCheck',
|
toolbarConfig: {
|
buttons: [
|
{'code': 'review', 'name': t('basicData.review'),status: 'primary'},
|
]
|
},
|
|
rowConfig: {isCurrent: true, isHover: true,height: 30,useKey: true},//鼠标移动或选择高亮
|
virtualScroll: true, // 开启虚拟滚动功能
|
scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
|
//scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
|
columnConfig: {
|
useKey: true
|
},
|
editConfig: {
|
trigger: 'dblclick',
|
mode: 'cell',
|
showStatus: true,
|
showIcon:false
|
},
|
mouseConfig:{selected: true},
|
keyboardConfig:{
|
isArrow: true,
|
isDel: true,
|
isTab: true,
|
isEdit: true,
|
isChecked: true,
|
// enterToTab:true,
|
//isEnter: true,
|
},
|
|
customConfig: {
|
storage: true
|
},
|
columns:[
|
{type: 'seq',fixed:"left", title: t('basicData.Number'), width: 80 },
|
{field: 'width', title: t('order.width'),editRender: { name: 'input'}},
|
{field: 'height', title:t('order.height'), editRender: { name: 'input'}},
|
{field: 'quantity', title: t('order.quantity') ,editRender: { name: 'input'}, },
|
],
|
editRules: {
|
width: [
|
{ required: true, message: t('components.inconsistentParameters') }
|
],
|
height: [
|
{ required: true, message:t('components.inconsistentParameters') }
|
],
|
quantity: [
|
{ required: true, message:t('components.inconsistentParameters') }
|
]
|
}
|
})
|
|
const gridEvents = {
|
async toolbarButtonClick({code}) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (code) {
|
case 'review' :{
|
$grid.clearEdit()
|
const $table = xGrid.value.getTableData().fullData
|
const $oldTable = props.OrderDetail
|
$table.forEach((item,index)=>{
|
for(let key in item){
|
if(key!=='id' && key!=='_X_ROW_KEY'){
|
const oldVal = $oldTable.getTableData().fullData[index][key]*1
|
if(item[key]*1!==oldVal){
|
item[key] = null
|
}
|
}
|
}
|
})
|
|
|
|
const errMap = await $grid.validate(true)
|
if (errMap) {
|
ElMessage.error(t('basicData.msg.checkoutLose'))
|
return
|
}
|
//emit('getParent')
|
break
|
}
|
}
|
}
|
}
|
}
|
|
|
const emit = defineEmits(['getParent'])
|
|
let props = defineProps({
|
OrderDetail:null,
|
orderId:null
|
})
|
|
|
onMounted(()=>{
|
const length = props.OrderDetail.getTableData().fullData.length
|
const $grid = xGrid.value
|
if(props.orderId !== orderInfo.orderId || length !== orderInfo.reviewList.length){
|
orderInfo.clearOrderInfo()
|
orderInfo.orderId=props.orderId
|
|
for (let i = 0; i < length; i++) {
|
orderInfo.reviewList.push({})
|
}
|
}
|
|
$grid.reloadData(orderInfo.reviewList)
|
|
})
|
|
const editClosedEvent = ({ row, column,rowIndex,columnIndex}) => {
|
const $table = props.OrderDetail
|
let checkVal = row[column.property]*1
|
const oldVal = $table.getTableData().fullData[rowIndex][column.property]*1
|
if(checkVal!==oldVal){
|
row[column.property]=null
|
}
|
}
|
|
const handleKeyDown = (evnt) =>{
|
const length = xGrid.value.getTableData().fullData.length
|
if(evnt.$event.keyCode === 13 ){
|
const { rowIndex,row,column } = xGrid.value.getSelectedCell() || xGrid.value.getEditRecord()
|
let nextRowIndex = xGrid.value.getRowIndex(row) + 1
|
|
|
switch (column.field){
|
case 'width':
|
xGrid.value.setSelectCell(row, 'height')
|
break;
|
case 'height':
|
xGrid.value.setSelectCell(row, 'quantity')
|
break;
|
case 'quantity':
|
if(nextRowIndex === length){
|
return
|
}
|
const nextRow = xGrid.value.getTableData().fullData[nextRowIndex]
|
xGrid.value.setCurrentRow(nextRow)
|
xGrid.value.scrollToRow(nextRow)
|
xGrid.value.setSelectCell(nextRow, 'width')
|
break;
|
}
|
|
}
|
}
|
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<vxe-grid
|
height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
@edit-closed="editClosedEvent"
|
@keydown="handleKeyDown"
|
>
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
|
</style>
|
