chenlu
2025-08-11 8bcd0cc77b0c7aa2c00ffd926ee87f1f09a3a3b5
north-glass-erp/northglass-erp/src/components/sd/order/OrderProcess.vue
@@ -1,7 +1,6 @@
<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {changeFilterEvent, filterChanged} from "@/hook"
import footSum from "@/hook/footSum"
import {useI18n} from "vue-i18n"
import request from "@/utils/request"
import {ElMessage} from "element-plus"
@@ -22,7 +21,7 @@
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
  //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
  scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
  filterConfig: {   //筛选配置项
    // remote: true
  },
@@ -36,16 +35,17 @@
  },
  columns:[
  ],
  mergeCells:[],
  toolbarConfig: {
    slots:{
      buttons: "title",
      tools: 'type'
    },
    zoom: true,
    custom: true
    // custom: true
  },
  cellClassName ({ row, column,columnIndex})  {
    if (columnIndex>10 && row.quantity*1 === row.reportWorkQuantity[column.title]*1){
    if (columnIndex>10 && row.thisQuantity*1 === row.reportWorkQuantity[column.title]*1){
        return 'row-green'
    }
    return null
@@ -67,27 +67,29 @@
const list = ref([])
let props = defineProps({
  orderId:null
  orderId:null,
  row: {}
})
const columns = [
  {field: 'order_number',fixed:"left", width: 90,title: t('order.OrderNum'),showOverflow:"ellipsis"},
  {field: 'order_number',fixed:"left", width: 90,title: t('order.OrderNum'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  // {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
  {field: 'product_name', width: 150, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'glass_child',width: 130, title: t('reportingWorks.glassChild') ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'order_type', width: 120,title: t('order.orderType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'process_id',width: 110, title: t('processCard.processId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'technology_number', width: 90,title:  t('processCard.technologyNumber'),showOverflow:"ellipsis"},
  {field: 'child_width', width: 90,title:  t('order.width'),showOverflow:"ellipsis"},
  {field: 'child_height', width: 90,title:  t('order.height'),showOverflow:"ellipsis"},
  {field: 'quantity', width: 90,title: t('order.quantity')},
  {field: 'gross_area', width: 90,title: t('order.area')},
  {field: 'shippedQuantity',width: 120, title: t('delivery.deliveryQuantity')},
  {field: 'inventory',width: 120, title: t('productStock.inventoryQuantity')},
  {field: 'inventoryArea',width: 120, title: t('report.inventoryArea')},
  {field: 'technology_number', width: 90,title:  t('processCard.technologyNumber'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'child_width', width: 90,title:  t('order.width'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'child_height', width: 90,title:  t('order.height'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
  {field: 'quantity',slots: { default: 'show'}, width: 90,title: t('order.quantity')},
  {field: 'glassQuantity', width: 90,title: t('order.glassQuantity')},
  {field: 'grossArea',slots: { default: 'show'}, width: 90,title: t('order.area')},
  {field: 'shippedQuantity',slots: { default: 'show'},width: 120, title: t('delivery.deliveryQuantity')},
  {field: 'inventory',slots: { default: 'show'},width: 120, title: t('productStock.inventoryQuantity')},
  {field: 'inventoryArea',slots: { default: 'show'},width: 120, title: t('report.inventoryArea')},
  {field: 'broken_num',width: 90, title: t('reportingWorks.quantityBroken')},
]
let column = [0,1,3,6,7,8,9]
let column = [0,1,3,8,10,11,12,13]
let orderType = ref(1)
onMounted(()=>{
  getWorkOrder()
@@ -97,17 +99,54 @@
  getWorkOrder()
})
let title = ref([])
const changeProcessType = (type) => {
  switch (orderType.value)  {
    case 1 :{
      xGrid.value.loadData(data.value)
      xGrid.value.setMergeCells(mergeCells.value)
      xGrid.value.updateFooter()
      break
    }
    case 2 :{
      xGrid.value.loadData(data.value)
      xGrid.value.clearMergeCells()
      xGrid.value.clearMergeFooterItems()
      xGrid.value.updateFooter()
      break
    }
    case 3:{
      xGrid.value.clearMergeCells()
      xGrid.value.clearMergeFooterItems()
      xGrid.value.updateFooter()
      const lastProcess = title.value[title.value.length-1].process
      const filter =  data.value.filter(item => {
        const lastFinish = parseInt(item['reportWorkQuantityShow'][lastProcess])
        const allFinish = item.glassQuantity*1
        return allFinish>lastFinish
      })
      // console.log(filter)
      xGrid.value.loadData(filter)
      break
    }
  }
}
let mergeCells = ref()
const data = ref([])
const getWorkOrder = () => {
  gridOptions.loading = true
  request.post(`/report/processCardProgress/${props.orderId}`,column).then(async (res) => {
    if (res.code == 200) {
      gridOptions.columns = JSON.parse(JSON.stringify(columns))
      gridOptions.columns.forEach(item =>{
        item.filterMethod = filterChanged
      })
      list.value = ['quantity','inventory','inventoryArea']
      list.value = ['quantity','inventory','inventoryArea','gross_area','shippedQuantity','glassQuantity']
      title.value = res.data.title
      res.data.title.forEach((item,index) =>{
        list.value.push('reportWorkQuantity.'+item.process)
        let column = {slots: { default: 'quantitySum'},
@@ -119,33 +158,82 @@
      res.data.data.forEach(item => {
        item.reportWorkQuantity=JSON.parse(item.reportWorkQuantity)
        item.reportWorkQuantityCount=JSON.parse(item.reportWorkQuantityCount)
        item.reportWorkQuantityShow=JSON.parse(item.reportWorkQuantityShow)
      })
      //gridOptions.mergeCells= res.data.mergeCells
      orderType.value = 1
      await xGrid.value.loadData(res.data.data)
      await xGrid.value.setMergeCells(res.data.mergeCells)
      mergeCells.value = res.data.mergeCells
      data.value = res.data.data
      gridOptions.loading = false
      xGrid.value.commitProxy('reset_custom')
    } else {
      ElMessage.warning(res.msg)
    }
  })
}
const filterChange = () =>{
  if(orderType.value === 1) {
    if (xGrid.value.isFilter()) {
      xGrid.value.clearMergeCells()
      xGrid.value.clearMergeFooterItems()
    } else {
      xGrid.value.setMergeCells(mergeCells.value)
      xGrid.value.updateFooter()
    }
  }
}
const footSum =(list, field) => {
  let count = 0
  list.forEach(item => {
    if(field.indexOf('.')>-1){
      let  array = field.split('.')
      //判断是否为筛选状态和非订单合并状态
      if(xGrid.value.isFilter() || orderType.value!==1){
        count += Number(item[array[0]+'Show'][array[1]]) || 0
      }else{
        count += Number(item[array[0]][array[1]]) || 0
      }
    }else {
      count += Number(item[field])  || 0
    }
  })
  return count.toFixed(2).replace(/\.?0+$/, '');
}
const quantitySum = ( row,column )=>{
  const reportWorkQuantity = row.reportWorkQuantity[column.title] || ''
  const reportWorkQuantityCount = row.reportWorkQuantityCount[column.title] || ''
  if(reportWorkQuantity===reportWorkQuantityCount){
    return reportWorkQuantity
  const reportWorkQuantityShow = row.reportWorkQuantityShow[column.title] || ''
  if(reportWorkQuantityShow === reportWorkQuantityCount ){
    return reportWorkQuantityShow
  }
  return (reportWorkQuantity
  return (reportWorkQuantityShow
      +'('
      +reportWorkQuantityCount
      +')' )
  //return
}
//切换模式单片显示
const show = (row,column ) =>{
  return row[column.field+'Show']
}
let showTitle = ref(false)
const changeZoom = ()=> {
  showTitle.value = !showTitle.value
}
</script>
<template>
  <div style="width: 100%;height: 100%">
    <vxe-grid
        @filter-change ='filterChange'
        @zoom="changeZoom"
        height="100%"
        size="mini"
        class="mytable-scrollbar"
@@ -168,6 +256,27 @@
        <span>{{ quantitySum(row,column) }} </span>
      </template>
      <template #show="{ row,column }">
        <span>{{ show(row,column) }} </span>
      </template>
      <template #title>
        <span style="font-weight: bold" v-show="showTitle">
          {{ row.orderId }}
          {{ row.project?'--':'' }}
          {{row.project}}
          {{ row.batch?'--':'' }}
          {{row.batch}}
        </span>
      </template>
      <template #type>
        <vxe-select @change="changeProcessType" v-model="orderType" >
          <vxe-option :value="1" :label="t('order.merge')"></vxe-option>
          <vxe-option :value="2" :label="t('order.layer')"></vxe-option>
          <vxe-option :value="3" :label="t('order.notFinish')"></vxe-option>
        </vxe-select>
      </template>
    </vxe-grid>
  </div>
</template>