廖井涛
2025-11-21 6dd74d6739305ba7ab51c43b83d166bdf9e12c52
north-glass-erp/northglass-erp/src/components/sd/order/OrderSizeCheck.vue
New file
@@ -0,0 +1,186 @@
<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>